본문 바로가기

Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

라우터

(4)
[Next.js] 라우팅 (Routing) (App Router ver.) Next.js App Router 버전에서의 라우팅 방식을 알아보자!     Page Router 버전의 페이지 라우팅 - pages 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.   App Router 버전의 페이지 라우팅 - app 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.- 다만, app router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 된다.  동적 경로를 가지는 페이지를 만들 때는 폴더 아래에 [URL 파라미터] 아래에 page.tsx 이런식으로 만들면 된다.      1. app > 폴더 > page.tsx 파일 예를 들어, app > search 폴더 > page.tsx 파일을 만들면, URL은 http://localhost:3000/se..
[Next.js] 라우팅 (Routing) (Page Router ver.) Next.js에서 Page Router 버전에서의 라우팅 방식을 알아보자!특정 URL을 위한 페이지를 만들 때 파일 및 폴더 구조를 어떻게 설정해야하는지 알아보자.   1. pages > 파일  pages 안에 바로 파일을 만들면, 그 파일이름은 해당경로 이름이 된다.예를 들어, pages > main.tsx 파일을 만들면URL은 http://localhost:3000/main 이 된다.    2. pages > 폴더 > index.tsx 파일  pages 안에 main이라는 폴더를 만들고, 안에 index.tsx 파일을 만들면,이 경우에도 URL은 http://localhost:3000/main 이 된다.main 폴더 안에 있는 index.tsx 파일은 해당 폴더(main)를 기본 라우트로 연결해주기..
[React] Routing (5) 데이터에서 route 설정하기 더미데이터에서 route 설정하는 법을 알아보자! 구현해야할 것 메인페이지에는 먹거리, 볼거리, 놀거리, 카페, 테마카페가 있다. 각각의 항목에 맞는 개별 페이지로 이동하게 해야한다. 예컨대, 먹거리를 누르면 한식, 중식, 일식, 양식, 치킨 , 패스트푸드가 담긴 페이지가 뜨게끔 route를 설정해야한다. 메인페이지 (Main.jsx) 하위 카테고리 페이지 순서 1. App.js에 route를 설정한다. 메인, 먹거리, 볼거리, 놀거리, 카페, 테마카페 총 6개의 route를 설정한다. 2. main.js에다가 더미 데이터를 만들 때, 각각의 항목에 맞는 route를 설정해준다. 2. 메인페이지(Main.jsx)에서 main.js 데이터를 보라색 박스 컴포넌트에다가 map 돌린다. 3. 보라색 박스 컴포..
[React] Routing (2) Router 설치 및 사용방법 완벽 정리 Router를 설치하는 방법과 사용 방법을 알아보자! 이 게시글을 보기 전에 봐야하는 게시글들 1. 개발환경: CRA (개발 환경 설정은 아래의 게시글을 참고해주세요!) https://dev-ini.tistory.com/83 [CRA] CRA(Create React App)로 리액트 프로젝트 만들기 CRA(Create React App)로 리액트 프로젝트를 만들어보자! 1. 프로젝트를 진행 할 파일을 만들고 VSCode에서 연다. 필자는 emotion-diary 라는 폴더를 바탕화면에 만들었다. 2. CRA 실행 명령어를 입력한다. npx c dev-ini.tistory.com 2. Router의 개념 (SPA와 CSR에 대한 설명이 있으니 원활한 이해를 위해서 꼭 보고 오시길 바랍니다!) https:/..