본문 바로가기

분류 전체보기

 (170)
[next.js] Image 3가지를 비교해보려고 한다. 기존 img태그, next13 의 Image이다. 1.img태그 //평상 시 img의 경우 _ lazyLoading이라는 속성을 따로 줘야한다. 간단하게 외부경로로 이미지를 평상시 처럼 불러올 수 있다. 그러나 밑에 경고(?)처럼 next/Image를 사용하라는 문구가 뜬다. width와 height를 지정해주지 않으면 기존의 이미지 크기대로 불러와진다. next/image의 장점을 밑에서 얘기할꺼지만 img에서 lazyLoading을 하고 싶으면 따로 지정해야한다. ** lazyLoading은 불필요한 호출을 줄인다.img태그의 경우 무조건 해당 페이지에 들어오게 되면 이미지를 호출한다. 이때 loading="lazy";를 해주면 해당 이미지가 보일때만 네트워크탭에서 보면 ..
[Next.js] link next는 SSG + CSR을 결합한 방식을 사용한다. 처음 렌더링 일땐 SSG를 사용하고 링크를 통해 다른 페이지로 넘어가면 CSR을 사용한다. => 네트워크 창에 보면 확인이 가능하다. /getStaticProps Links라는 파일안에 getStaticProps페이지로 갈 수 있는 링크를 만들어놨다. 처음 Link페이지가 렌더링 되면 SSG방식으로 서버로 부터 HTML을 받아온다. (맨위에 links라는 목록_prefetching이 되고있다.미리 HTML화면을 받아 볼 수 있다는 점) 그리고 링크를 누르면, getStaticProps페이지의 경우 HTML을 받아오지 않고 js파일이 생성되는 것을 네트워크 탭에서 확인이 가능하다. 이말인 즉슨 CSR형식으로 js파일과 JSON데이터를 가지고 렌더링을 ..
cookie MaxAge, Expire 옵션 cookie란? : cookie는 HTTP프로토콜의 비상태성을 보완하기 위해서 나온 수단으로, 브라우저에 데이터를 저장할때 사용한다. 브라우저를 종료하게 되면 삭제되는 임시쿠키를 sessionCookie라고 하고, 설정한 옵션만큼 지속되는 쿠키를 persistent Cookie라고 한다. 쿠키의 옵션 1.max-age : 쿠키를 얼마나 유지할 것인지 //Max-Age `Permanent=cookies; Max-Age=${60*60*24*30}` //60초 60분 24시간 30일 이렇게 설정해주면 개발자도구의 application의 Cookies에 들어가면 옵션을 넣어준 쿠키(persistentCookie)는 기간 값이 들어가 있지만 설정하지 않은 쿠키(sessionCookie)는 기간이 없다. 2.exp..
useRef는 어디에 쓰이나 1. 특정 DOM에 접근 특정한 DOM에 접근하기 위해서 사용을 한다. javascript로는 querySelector 같은 느낌이다. 내가 사용했던 예시로 들자면, 탑버튼을 만들때 사용했다. 어느 위치에는 탑 버튼을 누르면 항상 지정해놓은 위치로 갈 수 있도록 만들때 항상 지정해놓은 위치를 useRef로 지정해놓았었다. const topLocation = useRef(null); const onTop = () => { topLocation.current.scrollIntoView({ behavior: "smooth", block: "nearest", }); }; 중간 부분은 다 빼먹고 사용했던 부분만 발췌하면 이런식으로 쓸 수 있다. 2. 불필요한 리렌더링을 막기 위해서 사용 input의 onChang..
Next.js <getStaticProps> getStaticProps는 빌드 시에만 실행이 된다. yarn build => yarn start 순서로 진행 **production으로 실행해야한다. dev로 하면 getStaticProps가 매번 실행되서 정적생성효과를 볼 수 없다. SSG는 요청마다 이미 만들어진 HTML을 사용한다 (네트워크페이지에서 미리 렌더링 된 페이지를 확인 할 수 있다.) export default function Home(props) { ... } export async function getStaticProps() { // Get external data from the file system, API, DB, etc. const data = ... // The value of the `props` key will be..
Next.js 미니프로젝트, 초기설정 next.js의 개념들만 알고 적용을 해보지 못해서 혼자라도 작은 프로젝트를 진행 해봐야겠다라는 생각이 들었다. todolist는 식상하고 새로운게 뭐가 있을까고민하다가 목표를 잡았다. next.js로 지도위치서비스를 만들어보려고한다. 만들기 전 next.js의 장점이 뭐일까에 대해서 궁금했는데 차차 알아가보려고 한다.🌝 시작 하기 전 next.js의 기본 세팅을 했다.(어려웠다...공식문서도 보는 버릇해야지..) 나중에 헷갈려 할 나를 위해 정리ㅎ ESLint npx create-next-app@latest --typescript 1. 난 typescript와 next를 같이 사용할꺼니까 미리 세팅을 해준다.(물론 yarn을 사용해도 된다.) 저렇게 터미널에 치면 프로젝트 이름을 설정하라고 나온다 원하..
HTTP -> Ajax -> Websocket websocket에서 알아보다가 과정별로 알려주는 블로그를 읽고 깨달았던 점이 많아서 다시 정리하려고 한다. 1.HTTP(hyper text transfer protocol) 문서를 주고 받을 수 있는 약속이다. 단, 사용자가 URL을 요청할때만! 서버에서 해당 페이지를 준다는 식이다. 즉, 사용자는 서버로부터 새로운 정보를 받기 위해서는 반드시 URL을 요청해야한다는 소리다. => 예전에는 브라우저가 웹 서버에 어떤 요청을 하게 되면 새로운 페이지가 나타났다. (팝업창 같은) ex) 비밀번호 확인 버튼을 누르면 팝업창이 떠서 확인이 가능하다던가 그런식 이렇게 되면 사용자 경험이 떨어지고 그래서 나오게 된것이 Ajax다. 2.Ajax HTTP를 효과적으로 이용하는 기술, 효과적으로 서버와 소통하기 위한 ..
position은 어떻게 사용할까 position은 HTML요소를 원하는 위치에 배치하기 위해서 사용하는 CSS속성이다. 정확한 배치를 위해서 top,left,right,bottom속성과 함께 사용된다. 1.position:static 별도로 속성을 지정하지 않았을 시 디폴트로 적용되는 속성 HTML요소가 원래 있어야 할 곳에 위치함 right,left등 위치 속성이 무시된다. 2.position: relative position속성을 relative로 설정 시 원래 위치에서 벗어나게 배치가 가능하다. 원래 위치를 기준으로 상대적 배치이다.( 즉 벗어나는 위치의 기준이 원래위치이다.) top,left등과 같은 위치 속성이 사용가능하다. **relative는 위치가 변경되었지만 다른 요소들과 상호작용을 하며 빈공간이라고 인식하지 않는다. ..

티스토리툴바