일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Cypress
- recoil
- 투포인터
- tailwind
- RTK Query
- webpack
- 호이스팅
- useAppDispatch
- 태그된 유니온
- app router
- autosize
- SSR
- 이분 검색
- 리터럴 타입
- 무한 스크롤
- React
- async/await
- Jest
- dfs
- CORS
- 반공변성
- map
- Promise
- 인터섹션
- 타입 좁히기
- 결정 알고리즘
- 공변성
- CI/CD
- ESlint
- TS
- Today
- Total
목록분류 전체보기 (506)
짧은코딩
App Router app 폴더 하위에 모든 파일 추가 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능 layout.tsx 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨 pages router의 _app.js를 대체한다. page.tsx 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지 Server Component 무엇이 서버 컴포넌트인가? 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것 특징 리렌더링이 되지 않는다. 서버 리소스에 접근 가능하다(서버 시스템, db) js 번들에 포함되지 않는다.(제로 번들 사이즈) 자동 코드 스플릿팅 → lazy로 명시할 필요 x 유저 인터랙티비티(useState, useEffect 등) ..
JWT 관리 방식 이 프로젝트에서는 권한 문제가 많기 때문에 JWT 관리를 어떻게 할지 더 고민했다. https://hshine1226.medium.com/localstorage-vs-cookies-jwt-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EB%AA%A8%EB%93%A0%EA%B2%83-4fb7fb41327c LocalStorage vs. Cookies: JWT 토큰을 안전하게 저장하기 위해 알아야할 모든것 안녕하세요 백엔드 개발자 최준혁입니다. hshine..
Jest를 사용하지 않기로 한 이유 처음 프로젝트를 세팅할 땐 Jest, Cypress 모두 설정을 했다. https://jestjs.io/docs/getting-started#using-vite Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 하지만 위 사진에서도 나오듯이 Jest는 Vite를 완벽하게 지원하지는 않는다. 그렇기에 Jest로 테스트 코드를 짠 부분이 좀 있지만 과감하게 다 날리기로 했다. Vite는 Vitest라는 것이 있지만, 자료가 부족하다고 들었다. 그렇기에 Cypress로만 테스트 코드를 진행하기로 했다. UpLog 프로젝트에는 Cypress로 테스트 코드를 작성하고, WAYC 프..
https://shortcoding.tistory.com/535 MSW1 사용 중 Warning: captured a request without a matching request handler MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨 shortcoding.tistory.com WAYC 프로젝트에서도 같은 경고를 만난적이 있다. 하지만 WAYC는 MSW 버전 1이고, UpLog에서는 MSW 버전 2를 사용했다. 해결 방법이 달라서 기록으로 남긴다. 해결 방법은 생각보다 쉽지만 까먹지 않기 위해 남긴다..! MSW2에서 해결 방법(아님) 해결법은 정말 간단한..
클로저 클로저란? 함수와 외부 변수와의 관계 클로저란 내부 함수가 외부로 반환된 이후에도 life-cycle 이 유지되는 것 클로저 안에 정의된 함수는 만들어진 환경을 기억 클로저가 어려운 이유 스코프, 비동기, var 등이 모두 섞여있다. 클로저가 문제가 아니라, 클로저를 사용해서 해결하는 문제가 대부분이다. 주로 for문(반복문)과 비동기를 함께 사용하면 종종 발생 예시 var을 한 경우 function a() { for (var i = 0; i { console.log(i); }, i * 1000); // 0, 1000, 2000, 3000, 4000 } } a(); -결과 -..
await을 남용한 것과 최적화한 예시 // setTimeout을 Promise로 만드는 법 function delayP(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms); }); } async function a() { await delayP(3000); await delayP(6000); await delayP(9000); } // 토탈 18초 async function b() { const p1 = delayP(3000); // 3초 const p2 = delayP(6000); //6초 await Promise.allSettled([p1,p2]); // 6초 await delayP(9000); // 9초 } //토탈 15..
then, catch 반복하기 === try, catch 분리하기 Promise - catch는 앞부분을 다 책임진다! const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); resolve(a); }, 0); } // 여기까지 동기 ); console.log("딴짓"); p.then((result) => { console.log("result", result); }) .then(() => { //여기서 에러나면 }) .then(() => {}) .then(() => {}) .catch(() => { // 나머지 then 다 건너 뛰고 여기로 이동 })..
Promise 코드 let a = 2; const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); resolve(a); }, 0); } // 여기까지 동기 ); console.log("딴짓"); p.then((result) => { console.log("result", result); }); 출력 결과 코드 분석 -step1 let a = 2; const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); ..
비동기 비동기는 동시에 돌아가는 것이 아니다! 순서의 문제이다. 동기 코드 동기 코드는 "위 -> 아래", "왼쪽 -> 오른쪽"으로 실행 따라서 예측이 쉽다 비동기 코드 보이는 코드대로 실행되지 않음 다만 정해진 순서는 있다 한 번 비동기는 영원한 비동기 async/await, promise 등을 써도 동기로 만들 수 없다. 비동기를 동기로 바꾸려는 노력을 하지 말자 비동기 코드 분석 setTimeout(() => { console.log("a"); }, 0); setTimeout(() => { console.log("b"); }, 1000); setTimeout(() => { console.log("c"); }, 2000); (아래 글은 정확한 JS 스펙은 아니지만 99% 맞다, 스펙을 다 공부하려면 ..
Promise 프로미스는 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 => 나중에 사용 가능 const condition = true; const promise = new Promise(()=> { // 이 if 문은 동기로 실행 if (condition){ resolve('성공'); } else { reject('실패'); } }); promise .then((message) => { console.log(message); }) .catch((error) => { console.error(error); }); new Promise() 안의 if 문은 동기로 실행 성공하든 실패하든 값을 promise에서 값을 가지고 있음 then, catch에서 값을 원할 때 꺼낼 수 있다. callback과..