본문 바로가기

분류 전체보기

 (65)
FlawDetector 회고 프로젝트가 끝나면 작성할 글입니다.
StoryBook이란? UI 컴포넌트를 독립적으로 분리해 개별 관리,테스트를 도와주는 도구다. 장점으론 아래와 같다.1.개별 정돈 편리2.재사용성을 고려한 디자인 & 개발가능3.테스트가 용이 작성하는 게 좀 번거로울 수 있으나 웹디자이너분과 소통하기에 정말 편리할 거 같다.즉, 기획과 업무 진행에서 이점을 가진다.npx storybook@latest init해당 명령어로 설치하면 된다. 만약 chips라는 컴포넌트가 있다고 가정해보자.이런 chips라는 컴포넌트를 이쁘게 띄워주는 "npm run dev" 같은 거다.실행 명령도 비슷하다.npm run storybook해당 명령어로 실행하면 스토리북에 대한 페이지가 열린다.   방법은 내가 만든 컴포넌트를 불러오고 스토리북에서 쓰라는 대로 쓰면 된다.import { Meta,..
캐싱(caching) 캐싱 - 자주 사용되거나 시간이 많이 소요되는 데이터를 임시 저장소에 저장한다.이때 저장 된 데이터를 캐시라고 부른다. 캐싱의 유형은 크게 4가지가 있다. 브라우저 캐싱웹 브라우저가 웹페이지 리소스를 로컬에 저장페이지 로딩 속도를 향상 시키는 방법이다. CDN 캐싱콘텐츠 배포 네트워크(CDN)을 사용하여 전 세계 여러 서버에 데이터를 분산 저장.CDN 제공업체: Cloudflare, Akamai, AWS CloudFront 등.정적 파일(이미지,동영상,css,JS)를 각 지역의 CDN서버에 저장해 로드 시간 단축 서버사이드 캐싱서버에서 자주 사용되거나 시간이 많이 소요되는 데이터를 임시저장, 이후 요청시 빠르게 응답메모리 캐싱: 데이터를 서버의 메모리에 저장하여 빠르게 접근.ex)Redis, Memcac..
병렬 패칭 , Suspense 예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.그냥 그렇다고 하자.이런 경우엔 시간 단축을 할 수 있다.병렬로 데이터를 받는 것이다. Promise.all을 사용하면 된다. Promise.all: 만약 하나라도 거부되면 전체가 거부된다. try , catch문 사용하면 문제 없음.// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수async function fetchParallel() { // 첫 번째 API와 두 번째 API 엔드포인트 const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; ..
404 ,error , loading 각각 페이지 만드는 방법에 대해 알아보겠다. 404설정을 안하면 버셀에서 제공해주는 404페이지를 그대로 따라간다. 만드는 방법은 src/app 하위에 "not-found.tsx"를 만드는 것이다.컴포넌트채로 보여준다고 보면 된다. Error이것 역시 404와 방식은 똑같다.error.tsx 만들면 된다.에러는 'use client' 붙혀줘야 함! Loading로딩도 똑같다. 같은 경로에 Loading.tsx를 만들어주면 된다.로딩 컴포넌트 만드는 거 굉장히 중요하다.이것도 레이아웃.tsx처럼 , 가장 가까운 놈의 경로 공유를 한다.같은 폴더에 있는 놈을 쓰게 된다.
layout.tsx 레이아웃은 시스템 파일이다. 시스템 파일 : 운영 체제 및 시스템 소프트웨어가 제대로 동작하기 위해 필요한 파일이거 경로마다 사용이 가능하다.  기본적으로 root에 있는 레이아웃의 설정을 따라가게 되는데예를 들어 라우터폴더 안에 , layout.tsx를 만들면 , 그 안에 page.tsx는 안쪽 layout.tsx를 따라가게 된다.src/app/blog/layout (blog 폴더 내에 있는 page.tsx는 이 놈을 따라간다.)src/layout.tsx (전체적으론 이놈)  결론 : 레이아웃은 경로마다 생성해서 중첩 할 수 있다.
리액트 서버컴포넌트 , 클라이언트 컴포넌트 넥제 서버컴포넌트 안에서도 변수 사용이 가능하다. RSC (Default)react-server-component데이터 패칭 ! axos나 fetch api를 사용해서 하는 작업을 용도로.server Actions RCC (선택사항)react-Client-component 사용자와 상호작용하기 위한 컴포넌트useState , useEffect등 훅 사용가능.  넥제가 이렇게 두개가 나뉘는 이유는각각의 역할이 다르기 때문이다. 컴포넌트 트리를 구현할 때 신경써야 하는 부분 서버(상단) - 클라이언트(하단) 이렇게는 적용이 괜찮은데 클라(상단) - 서버(하단) 이렇게 트리구조가 되면 ,서버는 client 컴포넌트가 되는 것이다. 클라컴포는 서버컴포넌트에서 실행된다.요약 : 서버컴(상) - 클라(하) => 이..
넥스트 라우팅,라우터,라우트 라우팅사용자가 요청한 URL을 보여주는 행위     //페이지 이동 행동! 라우터라우팅을 하기 위해 관리하고 처리하는 도구ex ) next/router(13) , next/navigation(14) 라우터 라우트특정 컴포넌트 , URL 간의 매핑을 나타낸다.일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는데 사용 된다.react -> router/index.tsxapp router = next14부터 도입된 놈임.acme.com/dashboard/settings전체 : url path/ 대쉬보드안에 내용물 : 세그먼트 (settings , dashboard)페이지생성  넥제 앱라우터 치명적 단점은page.tsx가 남발된다는 것이다.그래서 페이지에 대한 이름을 바꿔놓는 것이다. page.t..

티스토리툴바