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

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

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

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..

자바스크립트 원시값 메모리에 정해져있음 변수에 다른값 할당하는게 메모리공간의 값을 변경하는 것은아임 다만 변수가 가리키는 메모리공간을 바꿈 그리고 나중에 안쓰는 메모리 공간은 가비지 컬렉터가 없앰 참조형자료같은경우는 메모리공간 자체를 바꿈 그래서 비교할때 내용이 변경되도 메모리 주소자체는 변경되지않아서 변경감지가 안됨 이러한 특징들을 원시형은 immutable 하고 참조형자료는 mutable 하다고 한다. 근데 리액트에서는 이전스테이트와 현재스테이트(setstate) 한 값을 비교해서 다르면 리렌더링을 함 setstate 한다고 무조건 적으로 리렌더링 하지는 않음 이러한 특징들 때문에 리액트에서 참조형자료를 스테이트로 다룰때 immutable 하게 다뤄주는게 좋다 변경사항이 있을때는 자료를 복사해서 그값..

ajax 통신에 대하여 ajax 이전의 통신은 매번 주소를 통해 서버에서 페이지를 받아왔다면 한주소내에서 이제는 특정객체를 통해서 리로드 없이 데이터를 제이슨형식으로 받아옴 그리고 한화면의 데이터 변경사한ㅇ만 적용시키는 식으로 변화시킴 이러한 환경속에서 스마트폰등장으로 spa 의 요구가 높아지고 정보의 일방공유가 아닌 상호 제공으로 다이나믹한 웹들의 등장 그과정속에서 리액트 나옴 버츄얼돔 > 다이나믹한 웹에서 화면변화 잦아짐 화면변화를 하나마다 브라우저 렌더링(리플로우,리페인트) 과정이 일어나게됨 변화를 잡아내는 단위를 묶을수 없을까 고민의 결과 버츄얼 돔이라는 개념을 만들어내고 리렌더링 조건 이전의 변화들을 모아 버츄얼 돔과 비교(diff 알고리즘)해서 변경사항들을 종합해서 변경시키고 그걸 실제돔에 적..