☁️개발환경☁️● Next.js 13 (page router) 강의를 보는데 dynamic을 이용해 import를 하면서 " 코드를 분리하면된다. " 라고 말을 하셨다. 도대체 그게 무슨말이지? dynamic은 뭔데? 라는 생각이 들었다. 그래서 길지 짧을지 모르는 til을 작성하게 되었다. ❓ next/dynamic공식문서에서 dynamic을 검색하니 `react.lazy` 이라고 title에 작성되어있다.그럼 먼저 Lazy Loading이 뭔지 간단하게 살펴보자.next.js에서 lazy loading은 경로 렌더링에 필요한 javaScript의 양을 줄여서 앱의 초기 로딩 성능을 개선하는데 도움이 된다.클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시키고 클라이언트 측에서 실행되도록 번들 ..
☁️환경 ☁️Next.jsTypeScriptEslint(prettier)yarn berry(pnp)emotion ❓ yarn berryyarn 패키지 매니저의 새로운 버전으로 이전버전과는 구조적으로 변화와 새로운 기능을 도입. TypeScript로 작성되어 타입 체크가 되어있다.Table 구조로 되어있을 뿐 아니라 json 데이터 타입을 사용하기 때문에 메모리 내의 연산이 이러어저 좋은 성능을 보여준다.Plug n Play : 기존의 로컬 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, .pnp.cjs파일에 의존성을 찾을 수 있는 정보가 기록된다. 1. 설치하기설치 명령어yarn set version berry 2. .yarnrc.yml 설정하기아래 코드 추가하기nodeLinker:..
환경next.jstypeScriptyarn❓ESLint: 자바스크립트 코드 문법 오류 및 코드 스타일 가이드를 제공하기 위한 정적 코드 분석 틀이다. 자바스크립트와 JSX코드를 위한 오픈소스 린팅 유틸리티로,프로그램을 작성할 때 발생할 수 있는 오류, 버그, 스타일 오류 그리고 일관성 없는 코드 패턴을 식별해준다.코드를 분석해 잠지적인 문제를 지적해 주기 때문에 효율적이고 일관성있는 깨끗한 코드를 작성할 수 있도록 도와준다. 커스텀도 가능하다. 팀단위로 프로젝트를 진행하래 코딩 규약에 맞춰 검사 규칙을 조정할 수 있다. 예를 들면 특정 코딩 스타일을 강제하거나, 사용하지 않는 변수, 미사용 표현식 등을 경고하도록 설정할 수 있다.플러그 인을 통해 기능을 확장할 수도 있기 때문에 React 같은 기술스택에..
필요한 파일 vite.config.ts tsconfig.json vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@", replacement: "/src" }, { find: "@page", replacement: "/src/page" }, ], }, }); { find: "@", replacement: "/src" }, 생성되는 파일은 src 아래에 존재할 것 이므로 "@" 는 " /src " 로 지정 { find: "@page", replace..
너무 간단해서 텍스트 쓸게 없지만.. import없이 환경변수 방법으로 가져와서 사용하면 된다!! 공식문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev
YouTube API https://developers.google.com/youtube/v3/getting-started?hl=ko 1. Api key 생성하기 노란색으로 표시해둔 Google 계정 글씨의 링크를 타고 들어가서 구글 계정 로그인 해주기! 1-1 셋업해주기 (나는 이미 만들었던 기록이 있음으로.. 이미지 생략) 셋업 해주고 이용약관 확인 후 agree and continue 1-2 프로젝트 생성하기 1-3 프로젝트를 생성하고 나면 Api key를 받을 수 있다. 만약 확인하지 못하고 창을 닫았다면 사용자 인증 정보에서 API key를 받을 수 있다!
Git Commit 메시지 작성 기본 원칙 명확하고 간결하게 commit 메시지는 간결하면서도 변경 사항을 명확하게 설명해야 한다. 제목과 본문 분리 일반적으로 메시지는 제목과 본문 두 부분으로 나뉘고 제목과 본문은 빈 줄로 구분한다. 제목 형식 유지 제목은 대문자로 시작하며, 50자 이내로 제한하고, 끝에 마침표를 붙이지 않아야 한다. 명령어 : git commit -m "제목" 본문 작성 본문에서는 변경 사항에 대한 상세한 설명, 변경의 이유, 추가적인 정보를 제공한다. 본문은 한 줄에 72자 이내로 제한하는 것이 좋다. 명령어: git commit 엔터 이후 본문 작성 명령조 사용 제목은 명령조로 작성하는게 좋다. ex) "Fix bug" 또는 "Add feature" Git Commit 메시지 작..
- Total
- Today
- Yesterday
- axios instance 작성하기
- Warning: A component is changing an uncontrolled input to be controlled.
- readme 이미지 추가 방법
- 유효성검사
- styled component 조건부 사용방법
- 별점 색채우기
- axios 설치하기
- simple Icon 사용방법
- Fetch와 Axios 의 장단점
- 영화별점만들기
- styled component 사용방법
- axios 사용하기
- nextjs 토큰 만료처리하기
- readme 역할
- 에러모음집
- styled component GlobalStyle 사용방법
- Warning: Each child in a list should have a unique "key" prop.
- 유효성검사 css
- readme작성해보기
- styled component 설치방법
- readme 작성 방법
- git cache
- axios CRUD
- Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>
- readme 작성해야 하는 이유
- 영화 별점
- axiosinstance 사용 시 토큰 사용 법
- 별점만들기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |