alpeca's world alpeca's world

1. JWT(Json Web Token)란?JWT(Json Web Token)은 JSON 기반의 토큰을 사용하여 사용자 인증 및 정보 교환을 수행하는 방식입니다.✅ 쉽게 말해?"서버가 사용자를 인증하면, 토큰을 발급하여 클라이언트가 이후 요청 시 인증할 수 있도록 하는 방식!""세션을 저장하지 않고, 자체적으로 정보를 포함하는 토큰!" 📌 JWT 사용 예제:사용자가 로그인하면 서버가 JWT를 생성하여 클라이언트에게 전달 🎟️클라이언트는 이후 요청마다 JWT를 포함하여 서버에 전송 🚀서버는 JWT의 유효성을 확인하고 요청을 처리 🔒2. JWT의 구조 🏗️JWT는 헤더(Header), 페이로드(Payload), 서명(Signature) 3가지 파트로 구성됩니다.Header.Payload.Signat..

1. TDD란?TDD(Test-Driven Development, 테스트 주도 개발)는 테스트 코드를 먼저 작성하고, 해당 테스트를 통과하는 최소한의 기능을 구현한 후 리팩토링하는 개발 방법론입니다. 일반적인 개발 방식과 달리, 개발보다 테스트를 먼저 작성하는 것이 특징입니다.✅ 쉽게 말해?테스트를 먼저 작성한다!테스트를 통과하는 최소한의 코드만 작성한다!코드 품질을 유지하면서 지속적으로 리팩토링한다!2. TDD의 3단계 (Red-Green-Refactor)TDD는 Red-Green-Refactor라는 3단계를 반복하는 방식으로 진행됩니다.1️⃣ Red(실패): 실패하는 테스트 코드를 먼저 작성한다.2️⃣ Green(성공): 테스트를 통과하는 최소한의 코드를 작성한다.3️⃣ Refactor(리팩토링): ..

핵심 요약append(): 노드 객체와 문자열 모두를 한 번에 여러 개 추가할 수 있으며, 반환값이 없습니다.appendChild(): 노드 객체만 추가할 수 있으며, 한 번에 하나씩 추가해야 하고, 추가된 노드 객체를 반환합니다.이러한 차이점을 이해하고 상황에 맞게 적절한 메서드를 선택하여 사용하시기 바랍니다. JavaScript에서 DOM 조작 시, 부모 노드에 자식 노드를 추가하기 위해 append()와 appendChild() 메서드를 사용합니다.이 두 메서드는 유사한 기능을 하지만, 몇 가지 중요한 차이점이 있습니다.append()append() 메서드는 부모 노드의 마지막 자식으로 노드 객체나 문자열(DOMString)을 추가할 수 있습니다.예시:// 노드 객체 추가const parent = ..

핵심 요약- 설치 및 빌드 속도: Vite는 CRA보다 빠른 설치와 빌드 속도를 제공합니다.- 경량성: Vite는 더 가벼운 번들 크기를 제공하여 성능 향상에 기여합니다.- 유연한 설정: Vite는 설정 파일을 통해 다양한 옵션을 쉽게 조정할 수 있습니다.- 절대 경로 지원: vite.config.js에서 별칭을 설정하여 절대 경로 임포트를 지원할 수 있습니다.Vite는 빠른 개발 환경과 유연한 설정을 원하는 개발자들에게 CRA의 대안으로 고려해볼 만한 도구입니다.   React.js 프로젝트를 시작할 때, 많은 개발자들은 create-react-app(CRA)을 사용하여 기본 템플릿을 생성하고 로컬 개발 서버를 설정합니다.그러나 최근에는 Vite라는 도구가 주목받고 있습니다. Vite는 빠른 설치와 빌..

핵심 요약Context API    - React에 내장된 상태 관리 도구로 추가 설치 불필요.    - Prop Drilling 문제를 해결하는 간단한 방법.    - 자주 변경되지 않는 상태(예: 테마, 언어 설정)에 적합.    - 소규모 애플리케이션 또는 특정 데이터 공유에 적합.Redux    - 중앙 집중식 상태 관리를 위한 강력한 도구.    - 복잡하고 대규모 애플리케이션에서 상태 관리에 적합.    - 강력한 디버깅 툴(DevTools) 제공.    - 별도 설치 및 설정 필요.주요 비교    - Context API는 단순성과 React 기본 내장이라는 장점.    - Redux는 확장성과 예측 가능한 상태 관리에 초점.결론    - Context API는 소규모 프로젝트에서 Prop ..

핵심 요약- then(): 비동기 작업 후 콜백 함수를 실행하며, 함수의 나머지 부분은 계속 실행됩니다.- async/await : 비동기 작업이 완료될 때까지 함수 실행을 일시 중지하여, 동기적인 코드처럼 작성할 수 있습니다.- 가독성과 유지보수를 위해 async/await 사용이 권장되며, 복잡한 프로미스 체이닝은 피하는 것이 좋습니다. JavaScript에서 비동기 요청을 처리할 때, then()과 async/await 두 가지 방법을 사용할 수 있습니다.이 두 방법은 매우 유사하지만, 함수 실행 흐름에서 차이가 있습니다. async 함수 내에서는 JavaScript가 프로미스가 해결될 때까지 함수 실행을 일시 중지합니다.반면, then()을 사용할 경우 함수의 나머지 부분은 계속 실행되지만, 프로..