[Next] UseSelectedLayoutSegment / UsePathname Hook [Next] UseSelectedLayoutSegment / UsePathname Hook UseSelectedLayoutSegment ?현재 레이아웃 app기준 가장 가까운 폴더들의 segment를 리턴해준다.아래와 같은 모양이라면compose / explore / home / messages / search/ username 으로 라우팅했을 경우 해당 세그먼트 리턴해준다.만약 그아래의 세그먼트들도 원한다면UseSelectedLayoutSegments를 사용하면 된다.['compose', 'tweet] / [userName, status, id] 이런식으로 나오게 된다.📦app ┣ 📂(afterLogin) ┃ ┣ 📂@modal ┃ ┃ ┣ 📂(.)compose ┃ ┃ ┃ ┗ 📂tweet ┃ ┃.. [Next] App Router의 폴더들 [Next] App Router의 폴더들next 강의를 들으면서 배운 app router에 사용되는 폴더들을 정리하려고 합니다.public폴더 : 모두가 접근 가능한 파일 넣는 곳src/app 폴더 : 경로 유/무에 따른 최상층 폴더route group : route에 영향 안주고, 그룹필 할 수있는 폴더paraller route : route에 영향 안주고, 하나의 레이아웃에 두개이상의 페이지를 병렬로 놓을 수 있다.intercept route : 경로를 가로채서 현재폴더의 특정부분에 놓을 수 있다. dynamic route : 동적 url에 관해 데이터 처리 가능하다. private folder : route에 영향 안주고, 공통 컴포넌트 뺄때 유용 public 폴더넥스트 서버에서 누구나 접근할.. [Next] getServerSideProps 와 getStaticProps getServerSideProps 와 getStaticPropsNext.js에서 SSR을 위한 두 가지 주요 함수인 getServerSideProps와 getStaticProps는 서로 다른 사용 사례와 특징을 가지고 있습니다. getServerSideProps서버 사이드 렌더링 (SSR): getServerSideProps는 서버에서만 실행되며, 모든 페이지 요청마다 실행됩니다. 이는 사용자의 요청이 있을 때마다 최신의 데이터를 서버로부터 받아와 페이지를 생성합니다.용도: 동적인 데이터를 다루는 페이지나 사용자의 요청에 따라 달라져야 하는 데이터가 필요한 페이지에 적합합니다. 예를 들어, 사용자의 세션 정보나 검색 쿼리 기반으로 데이터를 불러와야 하는 경우 등입니다.성능: 모든 요청마다 데이터를 가져.. [Next] 로그인 구현 ( passport ) [Next] 로그인 구현 ( passport )지난 블로그의 back단(back 서버) 초기설정과 회원가입을 완료 했다면로그인을 구현해보자 로그인을하면 브라우저, 서버가 같은 정보를 들고 있어야한다. 서버에서 로그인이 되고나서 브라우저도 이 정보를 알고있어야하는데, 통째로 보내주면 비밀번호가 들어있기 때문에 해킹에 취약할 수 있다. 그래서 로그인 정보대신에 암호화 되어있는 임의의 문자열을 브라우저로 보내준다. --> 요게 쿠키 그럼 서버는 보내줬던 쿠키정보를 로그인한 유저 정보(아이디)와 연결 시킨다. --> 쿠키와 서버쪽 세션 이렇게 되면 해커들이 서버에서 브라우저로 보낸 쿠키값을 알게 되도 해킹할 수없기 때문에(유저정보를 알수없다) 안전하다. 이후 브라우저에서 로그인 정보가 필요한 이벤트(게시글 쓰.. [Next] 회원가입 구현 (express, sequelize, mySQL) [Next] 회원가입 구현 (express, sequelize, mySQL)지난번에 express(node.js), sequelize, mysql을 공부한 이후,회원가입 구현하는 것을 배웠다.이어서 블로그에 정리하려고 한다.위 세가지의 개념을 알고 싶다면 아래 링크에서 확인할 수 있다.https://y-chyachya.tistory.com/108 회원가입을 구현하기 위해선 front, back 모두 작업이 필요하다.작업 전에 우선 흐름을 알아보고 구체적으로 코드를 짜보는게 좋을 듯 하다. [브라우저/프론트/백엔드/데이터베이스 관계]포트하나가 하나의 프로그램이라고 생각 (같은 포트는 같은 프로그램이라고 생각) 브라우저(3060(강의)/3000) - 프론트서버(next)(3060(강의)/3000) - 백엔드.. 이전 1 다음
