자바스크립트 this 시뮬레이션
·
웹 프로그래밍/JavaScript | TypeScript
See the Pen this 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen this 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
자바스크립트 실행 컨텍스트 시각화
·
웹 프로그래밍/JavaScript | TypeScript
See the Pen 실행컨텍스트 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen 실행컨텍스트 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
Tanstack Query 동작 원리 시각화 시뮬레이션
·
웹 프로그래밍/React
See the Pen Tanstack Query 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen Tanstack Query 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
리액트 동작 원리 시각화 시뮬레이션
·
웹 프로그래밍/React
See the Pen 리액트 동작원리 시각화 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen 리액트 동작원리 시각화 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
자바스크립트 이벤트루프 시뮬레이션
·
웹 프로그래밍/JavaScript | TypeScript
See the Pen 이벤트루프 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen 이벤트루프 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
자바스크립트 클로저 시각화 시뮬레이션
·
웹 프로그래밍/JavaScript | TypeScript
See the Pen 클로저 시각화 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen. ">See the Pen 클로저 시각화 시뮬레이션 by dev kim (@dev-kim-the-bold) on CodePen.
[CORS] Solved.ac API 연동과 자체 프록시 서버 구축기
·
웹 프로그래밍
프로젝트 CoTe-Coach를 개발하던 중, 분명 간단해 보였던 외부 API 연동에서 계속 에러가 발생했다.CORS의 정의와, 수많은 시행착오 끝에 자체 프록시 서버를 구축해 해결한 과정을 기록해보도록 하겠다. 기획 의도: 외부 API 연동의 필요성CoTe-Coach 프로젝트의 핵심 기능 중 하나는 사용자의 Solved.ac 티어와 추천 문제를 실시간으로 보여주는 것이다.사용자가 자신의 현재 위치를 파악하고 동기부여를 얻을 수 있도록 외부 API(Solved.ac) 연동은 필수적이었다. 이를 위해 Solved.ac API를 활용하기로 했다.초기 구현: corsproxy.io프로젝트 초기, API 연동을 구현할 때 나는 `corsproxy.io`를 사용했다.// Axios 인터셉터로 프록시 URL 적용s..
[GitHub Actions] Vite + React 배포 시 Supabase 환경 변수(Secrets) 인식 오류 해결
·
웹 프로젝트
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..
Workly 기획의도 + 기술스택 선정
·
웹 프로젝트/📕Workly: 교대근무 다이어리
기획의도교대 근무를 하고 계신 어머니께서 매번 달라지는 일정을 기억하기 어려워 일정 관리를 도와줄 어플리케이션이 있으면 좋겠다는 말씀을 하셨다. 만약에 이런 어플이 만들어진다면 주변 근로자 분들께서도 유용하게 사용하실 것 같다는 말도 해주셨다.지금까지는 일일이 달력에 주간 - 주간 - 야간 - 야간 - 휴일 과 같은 식으로 표시를 하고 계신데 이런 수고를 할 필요 없이 근무 시작 일자와 교대 패턴 등의 정보만 입력해 주면 달력에 교대 스케줄을 표시해 주는 어플을 만들어드리고 싶었다. 기술 스택여태까지 나는 웹 기반의 어플리케이션만을 만들어 왔다. 하지만 이번에는 어머니 나이대의 유저를 대상으로 하다보니, 특정 웹 사이트에 매번 방문하는 것보다는 간단하게 휴대폰에 설치해서 어플리케이션을 사용할 수 있도..