개발자_승딱 개발자_승딱

클래스형 컴포넌트 보다 함수형 컴포넌트를 사용하게 되는경우 state관리를 위한 this 나 라이프사이클을 제어하기위한 라이프사이클 관련 함수를 포함하지않고 useState 나 useEffect와 같은 훅을 통해서 사용할수 있게한다. 이러한 점은 컴포넌트 코드작성시 코드베이스를 줄여줘 가독성 향상 측면에서 도움이 된다. 나아가서 내장된 훅 외에도 custom hook을 만들수 있고 이는 기능로직의 분리를 통해 기존의 hoc패턴과 같은 코드를 줄여줄수 있고 기능로직 자체의 재사용성이 올라간다. 이러한 점은 | 컴포넌트= 기능 + 화면 | 의 관점에서 바라볼수 있게 되므로 개발자는 컴포넌트에 대한 보다 빠른 이해와 재사용성이 높은 컴포넌트를 구상하기 쉽게 도와준다.

accesstoken 만료이후에 refresh를 통해서 토큰을 연장해줄수 있다. 보통 refresh_token 을 해당용도로 사용하는데 기존 access_token을 통해서 새로운 refresh_expire time 이전이라면 refresh 할수 있도록 구성 할수도 있는거 같다. 기존 코드는 interval timer를 통해서 만료시간이후에 토큰을 갱신시켜주고 있었다 대부분의 케이스에서 문제는 없었지만 interval 타임내의 동작이 유발될 경우 에러가 있었고 그게 아니더라도 백그라운드에서 해당체킹이 실행되고 있었기 때문에 개선이 필요한 부분이였다. axios를 사용해서 데이터를 받아오는 경우 intercepter 개념을 통해서 요청이전에 체크및 헤더삽입과 같은 부분을 처리할수 있었기 때문에 apollo..

seo ? search engine optimization 으로 검색엔진 최적화를 이야기 한다 이는 곧 사이트가 크롤러에 잘인식되도록 웹페이지를 최적화하여 검색엔진에서 높은 순위로 나타낼수 있도록 하기위함이다. 어떤 작업들이 최적화를 하는 방법일까 ? 크롤러는 웹 페이지의 콘텐츠를 분석하고, 링크 구조를 파악하며, 메타 데이터를 수집하여 검색 결과에 반영한다. - robots.txt 파일 설정 크롤러는 웹사이트 방문이후 가장먼저 최상단 디렉토리의 robot.txt파일을 확인한다. robots.txt 파일은 검색 엔진 로봇에게 웹 사이트의 크롤링(인덱싱) 규칙을 알려주는 텍스트 파일이다. User-agent: * Disallow: 위와 같은 파일을 통해 모든 크롤링을 허용해줄수도 있지만 경우에 따라 특정 ..

토이프로젝트로 만들었는데 어떻게 유입을 만들어 낼까 고민하다가 유입이 되도 그걸내가 어떻게 알수가 있지? 라는 생각이 들어서 ga 를 적용 해봤다. 1. google analytics 에서 속성 생성 2. google analytics 데이터 스트림 생성 3. 코드적용 google analytics 에서 속성 생성 계정생성 > 설정 > 속성만들기 순서로 진행하면서 사이트 정보 입력해줍니다. 구글 애널리틱스에서 속성(Attribute)은 웹사이트 또는 앱에서 추적하고자 하는 특정 정보를 나타내는 항목입니다. 속성은 웹사이트나 앱에 대한 특정 데이터 세트를 생성하고 유지 관리하는 데 사용됩니다. 예를 들어, 특정 웹사이트의 속성은 사용자의 방문, 페이지뷰, 구매 등과 같은 데이터를 추적할 수 있습니다. go..

1. nextjs 사용하면 api routes 를 통해서 서버리스 함수와 유사한 방식을 통해 서보와 데이터 통신 처리가 가능하다. 토이프로젝트를 로컬에서만들다가 어느정도가 진행이 된후 vercel을 통해서 배포하고 확인을 한번 해봤다. 근데 api route를 사용할때 서버 에러가 발생했다. netlify 서비스를 사용한적이 있었는데 nextjs serverside 관련 함수는 사용을 할수가 없었던 기억이 있어서 api route 기능도 정적페이지 배포시에는 사용할수 없는건가? 라는 생각이 들었다. 근데 vercel은 nextjs 개발팀 이기도 하고 그런 부분 까지도 일정부분은 무료로 제공해주는 걸로 알고 했던 거였는데... 둘러 보다보니 로그를 확인 할수 있는 탭이 있었고 에러로그를 확인해 보니까 ti..

Error: Invalid src prop (https://a.espncdn.com/i/teamlogos/nba/500/scoreboard/den.png) on `next/image`, hostname "a.espncdn.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 관련 문서 : https://nextjs.org/docs/basic-features/image-optimization#domains https://nextjs.org/docs/api-reference/next/image 방법 : next.con..

이미지나 동영상과 같은 파일을 선택해서 s3버킷에 저장하는 과정을 정리 하는 글이다. 크게 3가지 과정으로 정리를 하려고한다. 1. 파일 핸들링 2. 버킷생성 3. 버킷에 업로드 1.파일 핸들링은 input tag를 통해서 파일을 선택하고 업로드할 파일을 미리볼수 있게하는 과정을 이야기한다. 2.버킷생성은 aws 에서 버킷을 생성하는 과정이다. 3.버킷에 업로드는 선택한 파일을 버킷에 저장하고 저장위치를 보여주는 과정을 이야기 한다. 보통은 저장한 위치를 db에 저장할수있도록 업로드 성공이후에 저장위치를 서버(백엔드)에 보내준다. input tag에서 특정형식의 파일타입만 받는다거나 여러파일을 받는다거나 하는 세부적인 상황, aws에서 버킷을 생성하는 방법, file객체 에 대한 내용은 생략할 예정이고 ..

nextjs 에서 라이브러리를 사용하다보면 ReferenceError: window is not defined 에러가 날때가 있다. 라이브러리에서 window 객체를 사용하지만 nextjs 는 서버사이드에서 초기 정적페이지를 생성해주기 때문에 window 객체가 없기때문에 나오는 에러이다. 내가직접 window 객체를 사용한 코드(web storage, 화면크기?, ...)라면 렌더 이후에 실행되는 코드인 useEffect안에서 window 객체 확인이후에 코드를 작성해주면 되지만 라이브러리를 사용하는경우에는 다른방법 사용해야한다. 이때 dynamic import 를 사용하면 해결이 가능하다. import dynamic from 'next/dynamic' const DynamicHeader = dynam..