본문 바로가기

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

react router

(3)
[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 (4) 리스트 페이지에서 게시글 클릭 시 상세 페이지 연결하기 (게시판 리스트 조회, useParams, useNavigate, Route, Routes, id 동적 라우팅) 목차 (router 설정까지 이미 다 하신분은 10번 부터 보시면 됩니다) 1. App.jsx, App.css 기본 구성하기 2. src/pages 내에 폴더 구성하기 3. import 하기 4. 4개의 페이지 import 하기 5. import 하기 6. import 하기 7. /list 경로 추가하기 8. 나머지 페이지 경로 추가하기 9. 리스트페이지와 상세페이지 마크업하기 10. App.jsx에서 path 속성 처리하기 11. id 별로 상세페이지 다르게 나오게 하기 12. 리스트페이지에서 리스트박스를 클릭하면 해당 상세페이지로 이동하게 하기 리스트페이지에서 게시글 클릭 시 상세페이지로 연결되는 router를 구현해보자! 구글링을 해봐도 기존의 블로그 주인들 코드들과 합쳐져서 이해할 수 없는 글이 ..
[React] Routing (1) 개념, SPA & CSR Routing에 대해서 알아보자! Routing Router [위키백과] 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 Page Routing 어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정을 일컫는 말 즉, 요청에 명시돼있는 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체 MPA (Multi Page Application) 와 SPA (Single Page Application) home이라는 경로를 가지고 도착한 요청에는 해당 경로에 알맞는 html 파일을 보내주는 식으로 웹서버가 동작하게 되는데, 이렇게 여러개의 페이지를 준..