프로젝트 CoTe-Coach를 개발하던 중, 분명 간단해 보였던 외부 API 연동이 발목을 잡았다.나를 괴롭혔던 CORS의 실체와, 수많은 시행착오 끝에 자체 프록시 서버를 구축해 해결한 과정을 아주 상세하게 기록해본다. (내용이 좀 길지만, 저와 같은 삽질을 하는 분들께 도움이 되길 바라며 하나도 빠짐없이 다 적어봤다!) 기획 의도: 외부 API 연동의 필요성CoTe-Coach 프로젝트의 핵심 기능 중 하나는 사용자의 Solved.ac 티어와 추천 문제를 실시간으로 보여주는 것이다.사용자가 자신의 현재 위치를 파악하고 동기부여를 얻을 수 있도록 외부 API(Solved.ac) 연동은 필수적이었다. 이를 위해 Solved.ac API를 활용하기로 했다.초기 구현: corsproxy.io프로젝트 초기, ..

Vite로 만든 프로젝트를 GitHub Pages에 배포할 때, 분명 GitHub Secrets에 변수를 등록했는데도 환경 변수를 찾을 수 없습니다라는 에러가 떴다...이 문제로 한참 고생하다가, 빌드 시점에 환경 변수를 강제로 주입하는 방법으로 해결했다. 1. GitHub Repository Secrets 등록 Environment secrets가 아니라 Repository secrets에 등록해야 워크플로우에서 바로 인식하기 쉽다.GitHub 저장소 > Settings > Secrets and variables > Actions 이동하단의 Repository secrets 섹션에서 New repository secret 클릭Vite에서 사용하는 이름 그대로 등록 (예: `VITE_SUPABASE_U..

기획의도교대 근무를 하고 계신 어머니께서 매번 달라지는 일정을 기억하기 어려워 일정 관리를 도와줄 어플리케이션이 있으면 좋겠다는 말씀을 하셨다. 만약에 이런 어플이 만들어진다면 주변 근로자 분들께서도 유용하게 사용하실 것 같다는 말도 해주셨다.지금까지는 일일이 달력에 주간 - 주간 - 야간 - 야간 - 휴일 과 같은 식으로 표시를 하고 계신데 이런 수고를 할 필요 없이 근무 시작 일자와 교대 패턴 등의 정보만 입력해 주면 달력에 교대 스케줄을 표시해 주는 어플을 만들어드리고 싶었다. 기술 스택여태까지 나는 웹 기반의 어플리케이션만을 만들어 왔다. 하지만 이번에는 어머니 나이대의 유저를 대상으로 하다보니, 특정 웹 사이트에 매번 방문하는 것보다는 간단하게 휴대폰에 설치해서 어플리케이션을 사용할 수 있도..

SSAFY 1학기 과정에 참여 중이다. 우리 반에서는 기술이 되었든 취미 생활이 되었든 자신이 가지고 있는 지식을 반 동기들에게 나누는 지식 공유 세미나를 진행한다.나의 경우 프론트엔드 개발 지망생이기 때문에, 내가 알고 있는 개발적인 지식을 나누기 위해 css tool 비교를 주제로 삼아 발표를 진행했다.발표한 지 꽤 시간이 지났지만 해당 내용을 추후에 참고할 일이 생기지 않을까 하는 생각이 들어, 발표를 위해 제작했던 PPT와 발표대본을 일부 수정해 블로그에도 기록을 해보기로 했다. 현대 웹 개발에서의 스타일링 도구 안녕하세요. 현대 웹 개발에서의 스타일링 도구를 주제로 발표 시작해보겠습니다. 순서대로CSS 라이브러리의 정의와 필요성CSS 라이브러리의 분류주요 라이브러리 소개와 라이브러리 선..

보호되어 있는 글입니다.

추상화(abstraction) vs 구체화(concretization)1. 추상화(Abstraction)"복잡한 현실 세계에서 핵심적인 속성과 기능만을 뽑아내는 과정" 예시현실 세계에는 '사람'이라는 개념이 있다.사람마다 이름, 나이, 성별, 키, 말하기, 걷기, 먹기 같은 다양한 속성과 동작(기능)을 가지고 있다.이를 프로그래밍 관점에서 하나의 타입(클래스)으로 만들어 볼 수 있다.class Person { String name; int age; void speak() { ... } void walk() { ... }}위의 `Person` 클래스는 "사람이라는 개념을 일반화(=추상화)"한 것이다. 👉 실제 사람이 아닌, 사람의 공통된 특징(속성/기능)만 뽑아 표현한 것! 추상화 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.