분류 전체보기91 SWR 리덕스의 단점 -> 코드가 너무 길어진다. next.js 에서 만든 SWR swr은 전역 스토리지 같은 역할을 한다. import useSWR from 'swr' function Profile () { const { data, error } = useSWR('/api/user/123', fetcher) } * swr의 특징 컴포넌트가 마운트 될 때부터 요청을 보낸다. 자동으로 페이지 로드시 자동갱신이 된다. 즉, 자동으로 계속 서버에게 요청을 보낸다. 서버에게 계속 요청을 보내면 최악. •• 그래서 다양한 options들이 존재한다. https://swr.vercel.app/ko/docs/options API 옵션 – SWR 💡 느린 네트워크(2G, 데이터를 수동으로 서버에 다시 요청(O) 할 수 있는 .. 2022. 2. 9. Type,형변환 any 모든 타입의 값이 할당될 수 있다. unknown any와 마찬가지로 모든 타입의 값이 할당될 수 있다. 하지만 , let var: unknown; let var_2: any = var; 타입이 any 인 경우에만 unknown 타입 할당이 가능 한것. 그외에는 (X) as 형변환 할 수 있는 것. 타입스크립트는 as로 자유롭게 형변환 하는것이 불가능하다. 변수: e.target.value -> 변수의 type이 any나 unknown만 as로 자유롭게 형변환이 가능하다. 다만 기본자료형 string boolean number 등의 타입은 unknown으로 형변환할 수 있다. 현재 변수의 타입은 string 그래서 먼저 unknown 으로 바꾸고 다시 원하는 걸로 바꾼다. 2022. 2. 9. 제네릭 제네릭? 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용 객체 내부에서 사용할 데이터 타입을 외부에서 지정해주는 기법 TS에서의 제네릭의 기본문법 function getId(id: T) : T { return id; } 제네릭을 객체에 사용하게 될 경우 객체는 제네릭의 타입만 사용해야 하고 return 되는 값들도 제네릭의 타입과 일치 하여야 한다. 2022. 2. 9. SPA React -> 단일책임원칙 :하나의 컴포넌트는 하나의 역할만한다. 1.재사용 될만한 것은 컴포넌트로 빼자. 2.하나의 컴포넌트는 하나의 역할만하자. SPA 에서는 URL이라는게 존재하지 않는다. (페이지가 하나이기 때문에 ) 오로지 index.html 만 존재한다. 그렇다면, localhost:3090/login 뒤에 붙은 /login 은 무엇일까? 서버는 localhost:3090/ 만 인식한다. 현재 웹팩 데브서버의 devServer.historyApiFallback 으로 인해, 가짜주소들 즉, /login /signup 같은 없는 주소를 있는 주소 인 것처럼 사용 하게 가능한 것이다. 원래라면, localhost:3090/login localhost:3090/signup 을 붙히는건 아무 의미가 .. 2022. 2. 8. getStaticPaths [동적 라우팅] 페이지 path는 외부 데이터에 달려있다. 다이나믹 라우팅 [id].js 일 경우 사용한다. getStaticProps 사용해주면 반드시 getStaticPaths 있어야 한다. getStaticPaths 를 사용하기 전에 라이브러리 하나만들자. 반드시 [ { params: { } } ] 배열안에 object 인 params key 값을 가져야한다. fallback : true, path: [ {params : { id : '1' }} ] ... 3 현재 4번에 해당하는 글이 없다면, fallback : true 일 경우 서버로 부터 불러온다. 2021. 10. 25. Pre-rendering next.js 는 Pre-rendering 방식이다. pre-rendering 이란 것은 초기에 html을 먼저 보여준다. 그 후 js 를 로드하는 방식이다. CSR 리액트인 경우 초기에 모든 페이지를 로드하기 때문에 흰 화면이 오랜시간 유저에게 보인다. 고로 next.js 를 사용 Pre-rendering 의 장점은? A.검색엔진 최적화. B.초기 내 앱에 JS 없이 작동 pre-rendering method 2개 존재. 1. static generation 빌드타임에 서버에서 호출한다 npm run dev or yarn dev 할 경우 빌드 시작. 2.server-side-rendering html 이 생성된다 각각 요청에의해서. (재사용 X) 가장 중요한 핵심은, 넥스트 js는 각각의 페이지를 pr.. 2021. 10. 23. next.js에서 css사용해보자 next.js 에서 Image 컴포넌트가 따로 있음. Next.js supports CSS Modules using the [name].module.css file naming convention. Metadata 수정하는법 이제 next.js 에서 css 사용하는법 다른 라이브러리도 사용 가능. 반드시 이름.module.css 컨벤션 지켜야한다. 글로벌 css 파일은 항상 pages/_app.js 에서 임포트해야한다. 2021. 10. 22. 이전 1 2 3 4 ··· 13 다음
