디테일 페이지 라우팅을 하며 겪은 문제 프로젝트 상세 페이지는 params로 id값을 받고, 그 id값에 따라서 임시 데이터에서 정보를 가져온 뒤, 화면을 렌더링하는 형태이다. 하지만 프로젝트 상세 페이지에서 새로고침을 하면 아래와 같은 문제가 발생한다. 구글링을 통해서 아래와 같은 해결 방법을 발견했다. https://ui.dev/react-router-cannot-get-url-refresh/ 브라우저가 모든 라우팅 로직을 처리하기 위해서 클라이언트 측의 라우팅인 React-Router에만 의존하고 있기 때문에, 새로고침을 했을 때 프로젝트 상세 페이지인 /project/2 이라는 서버의 라우팅이 존재하지 않는다. 그래서 cannot/GET 오류가 나온다. 보통 webpack-dev-server을 사..

라우팅 설정하기 기본 라우팅 과정에서 브라우저 라우터를 처음에 사용했다가… 예전에 본 네비게이션 메뉴 효과가 멋있는 사이트가 있어서 그 사이트를 참고했다. 네비게이션 메뉴를 클릭하면, 해당 섹션으로 스크롤이 이동하는 효과를 주었는데 포트폴리오 사이트에 도입해보고 싶었다. 그래서 방법을 찾기 위해서 사이트를 뒤져 보다가, 네비게이션 메뉴를 클릭할 때마다 url에 해시라우터처럼 #이 붙는 것을 보게 되었다. 그래서 해시라우터로 작업하다가 보니, react router 라이브러리에는 이런 기능이 없어보였고, 직접 구현해야 하나? 하는 생각이 들었다. 그래서 구글링을 해보다가, 라이브러리를 찾았다! 내비게이션 메뉴를 클릭하면 해당 섹션으로 이동되게 하고싶었어요 react-router-hash-link 라이브러리..

React App에서 ESLint 설정하기 원래는 ESLint 설정을 하지 않을 생각이었는데, 린트 설정 없이 npm start를 하면 나오던 오류가 없으니… 조금 허전해서 이왕 할거 린트 설정까지 한번 제대로 해보기로 했다. 린트 설정을 한다면 바로 npm start 를 하더라도 적용은 되지 않고, husky 등을 통해서 따로 설정을 해 줘야 한다. 이번에는 그냥 린트만 적용시켜서, 아래와 같이 따로 린트 스크립트를 만들어서 실행시켜줬다. "lint": "eslint src/**/*.jsx" ESLint 설정에 사용한 패키지 eslint eslint-plugin-react eslint-plugin-react-hooks ESLint 설정 1. eslint를 설치하고, 아래의 스크립트를 터미널에 입력하면 ..

왜 CRA 를 사용하지 않으려고 했나? 최근 이머시브 과정을 수료하고, 본격적으로 취업 준비에 들어가기에 앞서서 개인 포트폴리오 사이트를 다시 만들기로 결정했다. 이전에 진행했던 4주 프로젝트를 진행하며 보일러플레이트 코드를 사용하지 않고 리액트 개발 환경을 셋팅해보고 싶다는 생각이 들었고, 추가적으로 webpack, babel에 대해서 조금 더 깊이 알아보고 싶었다. 그래서 가볍게 만질 수 있으면서, 예전부터 다시 한 번 만들어야겠다고 생각했던 개인 포트폴리오 사이트의 기초 셋팅을 밑바닥부터 구성해보게 되었다. 그래서 결정된 사항 Create React App을 사용하지 않는다. React, SASS에 대응하는 Webpack, Babel 설정을 직접 해 본다. ESLint 설정을 해 본다. 초기 셋팅에..

4주 프로젝트 회고 마지막 프로젝트를 진행했다. 기획부터 배포까지 총 4주간 진행했고, 그 과정에서 배운 것들을 정리해보려고 한다. A Week Trip 내일로 기반의 기차여행 계획 및 커뮤니티 앱 A Week Trip을 구현했다. 원래는 내일로 여행을 배경으로 삼은 앱이었는데, 프로젝트 도중에 내일로가 개편이 되는 바람에… 급하게 기차여행 앱으로 변경했다. A Week Trip의 주요 기능은 아래와 같다. 구글 / 페이스북 소셜로그인 및 로그아웃 추천 기차역 및 추천 코스 조회 기차역 검색 및 즐겨찾기 기차 노선도가 있는 지도 줌인 / 줌아웃 조회 날짜 / 일차별 계획 생성 게시글 생성 / 수정 / 편집 / 삭제 게시글 검색 게시글에 사진 첨부하기 게시글 스크랩 댓글 생성 / 수정 / 편집 / 삭제 내..

2주 프로젝트 회고 이번에 첫번째 프로젝트를 진행하게 되었다. 총 2주간 짧다면 짧은 시간동안 진행했는데, 그 과정에서 느꼈던 것들을 정리해보려고 한다. 색갈피 한국어로 된 컬러팔레트 웹사이트인 색갈피를 구현했다. 보통의 컬러팔레트 웹사이트는 영어로 된 사이트가 많아, 한국어로 된 컬러팔레트 사이트가 있으면 좋겠다는 아이디어로부터 출발했다. 색갈피의 주요 기능은 아래와 같다. 컬러팔레트 조회 컬러팔레트 생성 / 편집 컬러팔레트 삭제 컬러팔레트 공유 : 헥사코드, RGB코드, 이미지 저장, 링크 복사, 컬러코드 자동 복사 유저 회원가입 유저 로그인 / 로그아웃 유저 정보 수정 유저 삭제 맡은 역할 팀은 총 4명이었고, 프론트엔드 2명, 백엔드 2명으로 구성되었다. 나는 그 중에서도 프론트엔드를 맡아 작업했..