사용하기 이전에 여러분이 사용하는 테일윈드의 버전과 변경사항 그리고 docs는 어디를 기준으로 작성되어있는 지 확인하시는 작업이 필요합니다. 제가 사용한 테일윈드 버전은 3 이며, next는 12.2.2 입니다. 예시로 만약 제가 next13을 사용한다면 , app 경로의 파일들을 인식할 수 있게 "./app/**/*.{js,ts,jsx,tsx}"를 추가로 넣어주어야 겠죠. //tailwind.config.js //(코드 중략) content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], 하지만 전 next12버전을 쓰기 때문에 app 관련 경로를 넣어줄 필요가 없..
ES6에서는 클라이언트 사이드 자바스크립트(브라우저)에서도 동작하는 모듈 기능을 추가했습니다. 2019년 11월 기준으로 모던 브라우저 (크롬 61, 파이어폭스 60, 사파리 10.1 엣지 16이상)에서 ES6모듈을 사용할 수 있습니다. ES6 모듈 기능을 사용하지 않으면 분리된 자바스크립트 파일에 독자적인 스코프를 갖지 않고 하나의 전역을 공유하게 된다. 이렇게되면 원치않는 오류나 오버라이딩, 충돌 등이 날 것입니다. ES6 모듈은 파일 자체의 스코프를 제공합니다. 즉, 모듈은 독자적인 모듈 스코프를 가지게 되는 것입니다. ES6 모듈 상세 export import 문은 파일 단위의 영역을 기준으로 Top-level 영역에서만 사용할 수 있습니다. -> 파일 단위 최상단을 말하는 것이 아니라 depth..
😉 2022 11 02 기준, 최근 Next 13버전이 대규모 업데이트를 했습니다. 저는 공식 홈페이지의 튜토리얼을 참고하고 있기 때문에 create-next-app으로 자동 설치됐던 next 13버전을 12버전으로 다운그레이드하여 사용했습니다. yarn 을 통한 패키지 다운그레이드 방법 yarn upgrade 패키지명@버전 yarn upgrade next@12.2.2 // upgrade 대신 add도 된다. Next.js 는 React로 SSR이 가능하게 도와주는 프레임워크입니다. Next에서는 퓨어한 React에 비해 많은 기능을 내부에 포함(폴더기반 라우팅 기능, Express.js 코드 스플리팅, 이미지 최적화 등)하고 있습니다. 세팅하고 시작하는 방법에 대해서는 언급하지 않겠습니다. Next.j..
용어 설명 ▶ 웹 브라우저란 동기적으로 HTML, CSS ,JS 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다. ▶ 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저에 화면에 표시하는 엔진입니다.( 브라우저마다 렌더링 엔진이 다름) ▶ 렌더 트리 - DOM요소를 기반으로 만들어지지만 완전 1:1대응 구조는 아닙니다. DOM 트리가 문서의 구조를 나타낸다면 렌더 트리는 "문서의 시각적 구조"를 나타냅니다. 웹 브라우저 동작원리 설명 사용자가 어떤 사이트에 접속할 때, 브라우저(클라이언트)는 사이트의 주소로 네트워크 요청을 보냅니다. 해당 요청은 DNS(domain name server)서버에 들려 도메인(사람이 이해하기 쉬운 영문 주소)과 매핑되는 IP주소로 HTTP 요청을..
Redux, zustand, Recoil은 클라이언트의 상태를 관리한다면 React Query는 서버의 상태를 관리합니다. 프론트에서 사용하는 데이터는 크게 두 가지로 분류할 수 있는데 정말 프론트에서만 쓰는 view를 위한 데이터가 있고, API에서 가지고 온 데이터(실제로는 서버에 존재하는 데이터) 이렇게 두 가지 상대값이 존재합니다. 리액트 쿼리는 이 두 가지 중 서버의 상태를 관리하기 위한 상태관리 라이브러리 입니다. React-query 는 서버 상태를 관리하기 위한 상태 관리 라이브러리입니다. 우리가 어떤 데이터를 서버에 요청하고 나서부터 요청을 받은 후까지 데이터를 받아오기 전까지 참조 못하게 하는 기능, 게시글 목록 중 한 데이터 수정 api를 호출했다면 게시글 목록 자체를 리패칭하기 등 ..
무한 스크롤(Infinite Scroll)이란? 사용자가 특정 페이지 하단에 도달했을 때, API가 호출되며 컨텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식을 말합니다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션(Pagination)과 달리, 한 페이지에서 스크롤만으로 새로운 컨텐츠를 보여주게 되므로, 많은 양의 콘텐츠를 스크롤하여 볼 수 있는 장점이 있습니다. 무한 스크롤을 구현하려면 가장 간단한 방법으로 스크롤 이벤트를 이용하여 구현할 수 있습니다. 하지만, 스크롤 이벤트를 사용하면 API 호출이 여러 번 갑니다. 이렇게 되면 documentElement.scrollTop과 documentElement.offsetHeight는 리플로우가 발생하기 때문에 개선하지 않으면 성능상 좋..
- Total
- Today
- Yesterday
- D 플래그
- && 셸 명령어
- reactAPI
- ~ ^
- getServerSideProps
- grid flex
- nvm 설치순서
- 형제 요소 선택자
- 타입스크립트 장점
- is()
- 부트캠프항해
- getStaticPaths
- 항해99프론트
- 프리온보딩 프론트엔드 챌린지 3월
- fs모듈 넥스트
- 타입스크립트 DT
- 항해99프론트후기
- 프리렌더링확인법
- 원티드 3월 프론트엔드 챌린지
- Prittier
- aspect-ratio
- 항해99추천비추천
- 틸드와 캐럿
- tilde caret
- 원티드 FE 프리온보딩 챌린지
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- float 레이아웃
- nvm경로 오류
- text input pattern
- 원티드 프리온보딩 FE 챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |