전체 글

[React] vite 프로젝트 + vercel 배포 후 새로고침 404

에러난 시점의 상황 1) React + Vite 로 프로젝트 생성 2) Vercel 에 프로젝트 배포 3) 배포 후 정상적으로 작동하지만 URL을 직접 입력해서 페이지를 이동하거나 라우터 진입 후 새로고침 시 404에러 해결한 방법 1) package.json과 같은 위치에 vercel.json 생성 후 아래 코드 입력 { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] } 2) 재배포 후 확인

[TS] 타입스크립트 png파일 import Cannot find module

타입스크립트에서 png 같은 로컬 파일 받아올 때 모듈을 찾을 수 없다며 아래와 같은 에러가 뜰경우 Cannot find module '' or its corresponding type declarations. 왜 발생하는가? 타입스크립트에서 기본적으로 import 해올 수 있는 파일은 확장자가 .ts .tsx .d.ts 인 경우이다.( 정적인 에셋 가져오기를 유효한 모듈로 인식하지 않음 ) 따라서 확장자가 .png 혹은 .jpg 같은 파일을 import해오면 찾을 수 없다는 에러가 발생한다. 자세한 내용은 module resolution 해결 방법 1. 프로젝트 폴더 ( ex. src ) 에 types 폴더를 생성해 주고, index.d.ts 파일을 만든다. 생성한 파일에 declare module '..

11월 회고

들어가며 어제오늘 일교차가 15도라고 한다. 하루아침에 겨울을 체감하면서 11월을 마무리하게 됐다. 가을이 길어지는 동안 3월부터 준비해 온 일정에서 이번 부트캠프를 끝으로 휴식기간도 가졌다. 이력서, 프로젝트 리펙토링, 미뤄뒀던 독서 등 해야 할 일을 생각하면 또 마냥 맘 편히 쉬지는 못한 것 같지만 지치지 않을 정도로만 잘 보냈던 것 같다. 마음가짐 주니어 개발자로서의 마인드 셋을 갖추고자 했다. 물론 기본적인 실력을 쌓는 것도 중요했기에 소홀히 할 수는 없었지만 실력이 비슷한 사람들 속에서 좀 더 준비된 개발자이고 싶었다. 이론서보다는 업무능력 향상과 관련된 서적들을 보거나 대기업 입사자의 인터뷰 영상들을 시청했다. 막연히 잘하자는 생각보다 정리된 글과 먼저 경험한 인생 선배들의 이야기가 우선순위와..

[BEAKJOON / node.js] 26069 붙임성 좋은 총총이

https://www.acmicpc.net/problem/26069 // test.txt 12 bnb2011 chansol chansol chogahui05 chogahui05 jthis jthis ChongChong jthis jyheo98 jyheo98 lms0806 lms0806 pichulia pichulia pjshwa pjshwa r4pidstart r4pidstart swoon swoon tony9402 tony9402 bnb2011 Sol 1 const [N, ...input] = require("fs") .readFileSync("test.txt") .toString() .trim() .split("\n"); let arr = input.map((v) => v.split(" ")); le..

[programmers / JavaScript] 연속된 수의 합

https://school.programmers.co.kr/learn/courses/30/lessons/120923 //test const num = 3; const total = 12; sol1 function solution(num, total) { let answer = []; let ceilNum = Math.ceil(total / 2); while (true) { for (let i = num; i > 0; i--) { answer.push(ceilNum - i); } let sum = answer.reduce((acc, cur) => acc + cur, 0); if (sum === total) break; else if (sum < total) ceilNum++; else ceilNum--; ..

[React / TypeScript] Debouncing을 활용한 검색기능 구현

디바운싱 이벤트가 연속적으로 발생할 때 마지막으로 발생한 이벤트를 기준으로 일정 시간 후에 마지막 이벤트만 실행되도록 한다. 유사한 개념으로 쓰로틀링이 있으나 검색 기능에 적용하기에 디바운싱이 더 적합한 거 같아 적용해 보았다. 디바운싱 없이 input 값을 인식하는 경우 단순히 input 태그에 들어오는 값을 받을 경우 사용자가 입력하려는 검색어가 들어올 때 매입력마다 불필요한 리랜더링이 일어난다. const Search = () => { const searchHandler: React.ChangeEventHandler = e => { console.log(e.target.value); }; return ( e.preventDefault()}> ) } 이 경우에 디바운싱을 적용시켜 볼 수 있다. 예컨대..

[React] vite 프로젝트 만들기

노드 패키지 매니저(npm)를 사용한 방법이다. 시작하기 호환성 Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구한다. 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다. //이미 설치되어 있는 Node.js의 버전을 확인하고 싶다면 node -v 프로젝트 생성 1. 기본 명령어 npm create vite@latest 위 명령어로 vite 최신 버전을 설치하면서 프로젝트 이름, 프레임워크, 템플릿을 순서대로 고르면 프로젝트가 생성된다. 2. 옵션 추가 npm create vite@latest project-name -- --template react-ts // npm 7 이상의 버전에서는 꼭 '--'를 붙여줘야한다. // JS를 사용하는 리엑트라면 끝에 react, T..

10월 회고

들어가며 준비만하는 과정은 끝냈고 이제 커리어 시작을 위한 단계에 들어간다. 마지막 프로젝트를 짧게 짧게 해서 그런지 시간은 금방 지나간 듯하다. 2달 전과 비교해보면 기술적인 면에서 고생한 만큼 성장한 것 같아서 뿌듯하기도 하다. 달력 없이는 오늘이 무슨 요일인지 알 수 없을 정도로 반복적이고 고된 일정이었다. 혼자 했다면 멘탈까지 많이 힘들었을 텐데 같이 고생하는 팀원들과 동기들 덕분에 잘 이겨낼 수 있었다. 기업과제 이번 달 가장 재밌었던 경험은 기업과제다. 동기들과 원하는 프로젝트를 진행하는 것과 달리 기업에서 제시해주는 요구사항에 맞는 웹을 제작했다. 기업마다 필요로 하는 기능이나 제시해주는 조건들이 제각각이었는데, figma 같은 디자인 협업 툴을 다뤄보기도 하고 기능만 간략하게 정해져 있어 ..