[src/ 폴더구조]app/: 어플케이션을 구성하는 컴포넌트들 보관assets/: 이미지 등 어플리케이션 제작에 필요한 부수기재 저장 창고favicon.ico: 파비콘 이미지index.html: 메인 htmlmain.ts: 작성된 html 파일을 변환하는 entry point.style.css: 공통 스타일package.json: 의존 모듈 관리를 위한 패키지 매니저가 참조하는 파일node_modules: package.json에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 저장소 [app/ 폴더구조]app.component.ts: 로직 담당app.component.html: html 템플릿app.component.css: 스타일app.module.ts: 컴포넌트, 서비스 등을 사용하기 위해 등록하..
1. 정의Vercel에서 개발한 React Framework, SSR, CSR, API 라우팅 등의 다양한 최적화 기능 제공.React의 기본 기능을 확장해 보다 빠르고 안정적으로 웹 애플리케이션을 개발. 2. 설치npx create-next-app@latest [프로젝트 이름]- 타입스크립트 사용 여부- ESLint 사용 여부- Tailwind CSS 사용 여부- src/ 디렉토리 사용 여부- App Router 사용 여부 => 13 이상부터 사용할 수 있게 된 방식으로 추천!- 별칭 사용 여부 3. 컴포넌트Server와 Client를 구분해서 사용서버 컴포넌트는 보안/캐싱/성능/SEO 등의 이점클라이언트 컴포넌트에서는 click/load/이벤트/브라우저 api 활용 등의 이점 4. 라우팅파일 규칙la..
3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (10~12)
Tip 10. 객체를 이용해 정적인 키-값을 탐색하라 * 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용하다. * 자주 갱신되거나 실행되기 전에는 알 수 없는 동적인 정보를 다루기에는 객체가 적합하지 않다. ex) 색상 컬렉션을 공유하는 경우 객체를 선택한다. 데이터가 변경될 가능성이 없기 때문이다. const colors = { red: '#d10202', green: '#19d836', blue: '#0e33d8' } => colors.red로 직접 참조하여 사용 가능하고 정적인 정보에 적합하고 반복/갱신/대체/정렬되는 정보는 맵이 적절하다. export const config = { endpoint: 'http://pragprog.com', key: 'secretkey', }; //..
2장 배열로 데이터 컬렉션을 관리하라 (Tip7-9)
Tip 7. 펼침 연산자로 배열을 본떠라 * 배열은 수많은 메서드가 있으므로 혼란스럽거나 조작과 부수 효과로 인한 문제가 생길 수 있다. const cart = ['abc', 'cdf']; const copyCart = [...cart]; //['abc', 'cdf'] => 새로운 배열을 선언하고 펼침 연산자로 배열의 전체 요소를 가져올 수 있다. function removeItem(items, removable) { const updated = []; for (let i = 0; i items 배열의 길이만큼 반복한다. i..
2장 배열로 데이터 컬렉션을 관리하라
Tip 5. 배열로 유연한 컬렉션을 생성하라 const team = [ 'Joe', 'Dyan', 'Bea', 'Theo', ]; function alphabetizeTeam(team) { return [...team].sort(); // ['Bea', 'Dyan', 'Joe', 'Theo'] } => 알파벳 순(오름차순)으로 정렬한 배열 const staff = [ { name: 'Wesley', position: 'musician', }, { name: 'Davis', position: 'engineer', }, ]; function getMusicians(staff) { return staff.filter(member => member.position === 'musician'); // [{name..
1장 변수 할당으로 의도를 표현하라
Tip3. 블록 유효 범위 변수로 정보를 격리하라 - 유효 범위를 따르는 변수를 선언한 경우 함수 내부 어디서든 접근 가능 - 호이스팅: 코드가 시작되기 전에 [변수, 함수 선언이 해당 스코프의 최상단]으로 끌어 올려지는 것을 말한다. helloWorld(); // Hello World! function helloWorld(){ console.log('Hello World!'); } => 함수 선언부는 컴파일 단계에서 메모리에 추가된다. 덕분에, 실제 함수 선언을 만나기 전에 함수에 접근할 수 있다. var a; console.log(a); // undefined var a = 3; => JS는 선언을 hoist하는 것이지 초기화를 hoist하지는 않는다. => 변수가 선언되기 전 변수를 사용하더라도 에..
1장 변수 할당으로 의도를 표현하라
TIP 1. const로 변하지 않는 값을 표현하라 * const는 코드를 읽기 쉽게 만드는 제약사항을 가진다. - 블록의 문맥 내에서 재할당할 수 없는 변수 선언 - 의미: 값을 할당하고 변경하지 않겠다. 예시1) const taxRate = 0.1; const total = 100 + (100 * taxRate); return `구매 금액은 ${total}입니다.`; => 구매 금액으로 반환되는 값을 정확히 알 수 있다. total은 상수이며 재할당 할 수 없다는 것을 알 수 있기 때문이다. 예시2) const discountable = []; for (let i=0; i 변수를 재할당 할 수는 없지만 값은 바꿀 수 있다. const로 배열을 선언하였지만 여전히 배열 항목을 추가할 수 있다. 질문점)..
JS - splice()
* splice(): 배열에서 중간에 있는 요소를 제거하기 위해서는 splice 기능을 사용하면 된다. 배열에서 원하는 요소를 제거 // 1) 인덱스 1개만 삭제 const array = ['a', 'b', 'c', 'd'] array.splice(1, 1) //인덱스 1인 요소를 포함해 (순서대로) 1개 삭제한다. 1개만 삭제하므로 인덱스 1만 삭제. console.log(array) //['a', 'c', 'd'] // 2) 인덱스 2개 이상 삭제 const array = ['a', 'b', 'c', 'd'] array.splice(0, 1) //인덱스 0인 요소를 포함해 순서대로 3개 삭제한다. 3개 삭제이므로 인덱스 0~2 삭제. console.log(array) //['d'] // 3) 숫자값이..