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: 교대근무 다이어리
기획의도교대 근무를 하고 계신 어머니께서 매번 달라지는 일정을 기억하기 어려워 일정 관리를 도와줄 어플리케이션이 있으면 좋겠다는 말씀을 하셨다. 만약에 이런 어플이 만들어진다면 주변 근로자 분들께서도 유용하게 사용하실 것 같다는 말도 해주셨다.지금까지는 일일이 달력에 주간 - 주간 - 야간 - 야간 - 휴일 과 같은 식으로 표시를 하고 계신데 이런 수고를 할 필요 없이 근무 시작 일자와 교대 패턴 등의 정보만 입력해 주면 달력에 교대 스케줄을 표시해 주는 어플을 만들어드리고 싶었다. 기술 스택여태까지 나는 웹 기반의 어플리케이션만을 만들어 왔다. 하지만 이번에는 어머니 나이대의 유저를 대상으로 하다보니, 특정 웹 사이트에 매번 방문하는 것보다는 간단하게 휴대폰에 설치해서 어플리케이션을 사용할 수 있도..
지식 공유 세미나: 현대 웹 개발에서의 스타일링 도구 (CSS Tool)
·
Developer/SSAFY
SSAFY 1학기 과정에 참여 중이다. 우리 반에서는 기술이 되었든 취미 생활이 되었든 자신이 가지고 있는 지식을 반 동기들에게 나누는 지식 공유 세미나를 진행한다.나의 경우 프론트엔드 개발 지망생이기 때문에, 내가 알고 있는 개발적인 지식을 나누기 위해 css tool 비교를 주제로 삼아 발표를 진행했다.발표한 지 꽤 시간이 지났지만 해당 내용을 추후에 참고할 일이 생기지 않을까 하는 생각이 들어, 발표를 위해 제작했던 PPT와 발표대본을 일부 수정해 블로그에도 기록을 해보기로 했다. 현대 웹 개발에서의 스타일링 도구 안녕하세요. 현대 웹 개발에서의 스타일링 도구를 주제로 발표 시작해보겠습니다. 순서대로CSS 라이브러리의 정의와 필요성CSS 라이브러리의 분류주요 라이브러리 소개와 라이브러리 선..
자바 입출력, 배열 입력받기 연습
·
Computer Science/알고리즘
보호되어 있는 글입니다.