남남이루의 고군분투 🌳

Next.js 폴더 트리 == url path 그간의 React 프레임워크를 사용한 개발에서는 별도의 라우팅 처리를 하게 되면 폴더 구조와 url path에 차이가 나기 마련이었다. ex. URL : xx.com/board/detail/1 실제 폴더 구조 : board ㄴ [id].jsx 그러나 Next는 폴더 구조를 그대로 가져가서 라우팅을 해줄 수 있다. 위 예시의 폴더 구조라면 {baseUrl}/board/1 이런식으로 주소에 접근하면 board의 하위 페이지를 불러오게 되는 것이다. 이 주소는 애플리케이션 내부에서 href의 값에 쓰일 때도, router에 들어가는 url 주소값에서도 동일하게 사용된다. 파일 위치가 "app/page.tsx" 라고 할 때, app폴더의 가장 상단인 page.tsx..

타입스크립트의 기본 타입 Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 변수에 타입 지정 const name:string = 'Nami'; 변수명 바로 옆에 콜른으로 타입명을 작성함으로써 해당 변수의 타입을 지정할 수 있다 함수에 타입 지정 const Add(a:number, b:number): number { return a+b; } 함수명 바로 옆 괄호 내부에는 파라미터의 타입을 지정하고, 괄호가 끝난 다음에는 return값의 타입을 지정할 수 있다. 타입은 이렇게 바로 옆에 하나씩 지정하거나, 타입이나 인터페이스로 선언하고 해당 타입이나 인터페이스의 변수를 작성해줄 수 있다. interfac..

Day1 2023-07-10 기본 타입 외우기 - boolean, number, string, array, tuple, enum, any, void, null playground에서 실습하기let color: string = "blue"; let age: number = 12; let list: number[] = [1,2,3]; let list: Array = [1,2,3];let 변수명 : 타입 = 값; let 변수명 : 타입[] = [값]; 아니면 let 변수명 : 객체명 = [값]; self check 튜플로 선언하기 튜플은 언제 쓰는지 배열을 선언하기, 2가지 방법 집합에 사용하는 자료형 enum 선언하기 void의 사용 number로 선언된 변수에 null이 할당될 수 있다. (O/X) num..

문제 canvas-confetti 패키지 사용하고 싶었다! 폭죽 효과 타입 추론이 안 되는 패키지의 함수는 바로 사용할 수 없음, 추론할 수 없다는 에러 발생 해결 yarn이나 npm 에 @types/{패키지나 라이브러리명} 추가해주기 yarn add -D @types/canvas-confetti yarn add --dev @types/canvas-confetti npm install -D @types/{패키지명} npm install --save-dev @types/{패키지명} (-D 옵션은 개발 빌드할 때만 쓰는 패키지를 설치할 때 쓴다,,~ 옵션 위치도 맨 뒤거나 명령어 다음이거나 상관없는듯, 맨 뒤에 써야겠다 다음엔) 또는 root 디렉토리 (App.js, App.tsx 가 위치한..)에 {패키지..

테스트 도구 사용 동기 혈당당 Frontend 개발을 맡으며, ESlint를 사용해도, API요청이 컨텍스트에 있을 경우, 실제 배포 후에야 확인하게 되는 오류가 많았다. 또한, 한 개의 컴포넌트를 페이지 단위로 작성해버리니 모듈화도 잘 안 되고, 오류 파악도 어려웠다. 이것은 클린코드에서 지향하는 코드와 거리가 멀다고 생각했다! 따라서 단위 테스트에 대해 더 공부해볼 필요를 느꼈다. 자료는 Udemy의 React 완벽 가이드를 참고했다. 테스트 도구의 종류 Jest : 브라우저 (특히 렌더링)를 시뮬레이션 하는 도구, 흔하게 사용함, CRA에 이미 설치 되어 있음 React Testing Library : CRA에 이미 설치 되어 있음 기타 라이브러리 Jest 사용해보기 세팅하기 CRA는 별도의 세팅이..

키워드 리액트란? MVC에서 View (유저에게 보여주는 화면)에 최적화된 라이브러리 템플릿과 컴포넌트 템플릿 : HTML태그 형식을 문자열로 반환 (재사용이 어렵) 컴포넌트 : 재사용이 가능한 API, 수많은 기능을 내장 (재사용 용이, React의 방식) 렌더링 : 사용자 화면에 뷰를 띄우는 것 리액트는 동적으로 화면을 구성하기에 최적화 되어 있음 Virtual DOM, 변경되는 부분을 기존 돔과 비교해서 차이만 반영해서 렌더링 되도록 함 리액트 적용하기 CDN 삽입 (리액트, 리액트돔, 바벨) 하위에 script 태그생성, 해당 태그에 타입 지정 "type"="text/babel" 삽입할 위치를 querySelector로 할당한 돔 객체로 생성 삽입할 내용 생성 : 변수명 = (JSXHTML문법 작..