eatthefrog

라우팅 시스템은 웹사이트에서 URL 경로에 따라 다른 페이지를 보여주는 시스템이다.즉, 웹 사이트의 네비게이션을 관리하는 핵심 시스템으로, 사용자가 어떤 URL에 접속하든지, 그에 맞는 적절한 페이지를 보여주고, 브라우저의 기본 기능들(뒤로가기, 북마크, URL 공유)를 활용할 수 있게 해준다. 예를 들면www.example.com/ → 홈페이지www.example.com/about → 회사소개 페이지www.example.com/contact → 연락처 페이지 라우팅 시스템을 사용하는 이유1. 사용자 경험 (UX) 향상 : 각 페이지가 독립적으로 관리된다.- 페이지 새로고침 없이 부드러운 전환- URL을 통한 직접 접근 가능- 브라우저 히스토리 활용// ❌ 라우팅 없이 (모든 페이지가 하나의 긴 페이지)..

필수개념 복습

학습 내용:useEffect의 의존성 배열이 어떻게 작동하는지클린업 함수의 중요성과 사용법useEffect 중첩을 피하는 방법// ❌ 잘못된 예시 (현재 코드)useEffect(() => { const loadData = async () => { const data = await fetchData(); setData(data); }; loadData();}, [fetchData]); // fetchData가 매번 새로 생성됨// ✅ 올바른 예시useEffect(() => { let isMounted = true; const loadData = async () => { const data = await fetchData(); if (isMounted) { setDat..

속성선택상황이유/용도예시접근 방법특징필수성vlaue사용자 입력 데이터 활용실제 데이터 포함_V" style="height: 160px;">value💾 실제 데이터- 사용자가 입력한 현재 값- 폼 제출 시 서버로 전송되는 데이터- 실시간 상태 관리value="안녕하세요"value="123"value="korea"event.target.valueinput.valueselect.value• 항상 문자열로 반환• 사용자 입력에 따라 실시간 변환• 읽기/쓰기 가능폼 요소에서 핵심type입력 방식 제어브라우저 동작 결정_V" style="height: 157px;">⚙️ 요소 세부 타입- 입력 요소의 구체적 형태- 브라우저 동작 제어- 유효성 검사type="email"type="password"type="subm..

자바스크립트에서 동작하는 연산자는 크게 산술 연산자, 비교 연산자, 논리 연산자, 할당 연산자, 증감 연산자, 비트 연산자, 문자열 연산자, 조건(삼항) 연산자 등으로 나눌 수 있다. 1. 산술 연산자: 덧셈(+), 뺄셈(-), 곱셈(), 나눗셈(/), 나머지(%), 거듭제곱(*) 등의 연산을 수행합니다. 예시: let sum = 10 + 5. 2. 비교 연산자: 두 피연산자를 비교하여 참(true) 또는 거짓(false)을 반환합니다. 동등 연산자(==, ===), 부등 연산자(!=, !==), 크기 비교 연산자(>, =, 예시: if (a > b) { ... }3. 논리 연산자: 논리곱(&&), 논리합(||), 부정(!) 연산을 수행합니다. 예시: if (x > 0 && y 4. 할당 연산자: 변수에..

제네릭의 핵심은 "호출 시점에 타입이 결정되면 그 타입으로 고정"된다는 점이다.제네릭의 타입 안정성 작동 방식:function insertAtBeginning(array: T[], value: T): T[] { return [value, ...array];}// 각 호출마다 T가 구체적인 타입으로 결정됨const numbers = insertAtBeginning([1, 2, 3], 0); // T = number로 고정const strings = insertAtBeginning(['b', 'c'], 'a'); // T = string으로 고정안정성이 지켜지는 이유:호출 시점에 타입 체크가 엄격함:// ❌ 에러 발생 - 배열은 number[]인데 value는 stringconst result ..

자바스크립트와 타입 스크립트 (TS((JS))타입스크립트를 자바스크립파일로 변환하는 컴파일러가 필요하다. BenefitsStatic typing(Type Checking)Staticaly-typed: C++, C#, Javadynamically-typed: JS, 파이썬, 루비Code completionRefactorinShorthand notations 자바스크립트의 동적 타이핑 문제로 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수있는건 const로 해결할 수 있는 문제다. 근데 왜 굳이 TypeScript를 사용할까? const의 한계와 TypeScrit의 이점1. 객체와 배열의 내부 변경// ☑️ constconst user = { name: "김철수", age: 25 };user.a..

목차1. 동기 프로그래밍 VS 비동기 프로그래밍 2. 비공기 콜백3. Promise 완벽 정리4. Promise.all + allSettled + any + race5. Aync & Await 1. 동기 프로그래밍 VS 비동기 프로그래밍동기 VS 비동기동기적 수행 : 순서대로 한번에 하나씩 (with 자바스크립트 싱글 스레드)비동기적 수행: 동시에 실행 (with Web APIs Blocking동기 프로그래밍에서 오래 걸리는 작업이 수행될때 뒤에 작업들이 밀리는 것 비동기 프로그래밍(non-blocking)동기 프로그래밍에서 발생하는 Blocking 문제를 해결할 수 있는 대안이다. 현재 실행 중인 테스크가 완료되지 않더라도, 다음 작업을 바로 실행할 수 있어 블로킹이 발생하지 않는(non-bl..

Continuous Integration : 지속적인 통합1. 코드 변경사항을 주기적으로 빈번하게 머지해야한다. (confilt 방지)2. 통합을 위한 단계 (빌드, 테스트, 머지)의 자동화 with CI Server CI 장점1. 머지 충돌 피할 수 있어서 개발 생산성 향상2. 머지되는 모든 코드들이 자동으로 빌드/테스트 되기 때문에 문제점을 빠르게 발견할 수 있다. (버그 수정에도 용이)3. 최종적으로 코드의 퀄리티를 향상 시킬 수 있다. Continuous Delivery 지속적인 제공 : 배포 자동화 ❌ (수동적인 배포)Continuous Deplyment 지속적인 배포 : 배포 자동화 🅾️ CI/CD 툴: JenJKins, GithubActions 출처: https:..

목차GraphQL의 정의 및 역할GraphQL API 구조 (스키마 및 리졸버)스키마의 구성 요소 (쿼리, 뮤테이션, 서브스크린, 타입)리졸버와 리졸버 체이닝프런트엔드와 백엔드 간의 GraphQL 통신 방식 1. GraphQL 정의GraphQL은 기술 라이브러리나 데이터베이스가 아닌 API를 요청하는 쿼리 언어다. 이는 프런트엔드와 백엔드 사이에 존재하는 계층으로서 서버에서 클라이언트로 보내는 데이터를 정의된 형식으로 노출하는 역할을 한다.2. GraphQL API의 구성 요소GraphQL API는 크게 스키마(Schema)와 리졸버(Resolvers)로 나뉜다. BASICS- SCHEMA : API 작동 방식 / 타입: QUERY, MUTATION, Subscription- QUERY : FETC..