Just Do IT!

Protected Route 란?해당 페이지로 이동하기 전에 조건을 명시해주고, 이 조건을 만족했을 때 해당 페이지로 이동가능하고,조건을 만족 못한다면 특정 페이지로 돌아가게 할 수 있다. react-router-dom을 설치한 후 route를 사용할 때 적용할 수 있다. 이번 프로젝트에서는,로그인 여부에 따라 접근 불가능한 곳이 있기 때문에 Protected Route를 이용해서 해주었다.     react-router-dom 설치npm install react-router-dom 우선은 당연히 react-router-dom을 설치해야 route를 사용할 수 있으니까 설치한다.나는 기존에 이미 route 설정을 해주었기 때문에 생략한다.        ProtectedRouter 설정const Prote..

이번 프로젝트에서는 소셜 로그인이 있기 때문에 쿠키에서 id를 받아와서 로그인 여부를 판단하고 있다.그런데 한 가지 문제점이 생겼다.header에 유저 정보를 가져와야 한다 (유저 프로필)문제집/스터디 페이지에서 유저 정보를 가져와서 생성한 사람과 비교해야 한다. 이런 문제점이 생기는데 콘솔에 찍어보면 쿠키를 통해 가져올 수 있는 정보는 id밖에 없기 때문에백엔드 response, request를 아예 갈아엎어야 하던지 아니면 쿠키에 username을 받아와야 했다.그런데 쿠키에 username을 받아오지 않고 id로만 받아와야만 했기 때문에 (username이 unique key가 아님)그냥 프론트쪽에서 전역적으로 유저 정보를 받아와서 사용할 수 있도록 했다.        useContext?react..

이번에 dodream 프로젝트를 하면서, 검색창이 여러 페이지에 쓰인다는 걸 깨달았다.그래서 이번에는 나름대로 중복되는 코드를 줄이고 조금 더 효율적으로 프로젝트를 하고자component 폴더 안에 UI 폴더를 만들었고, 그 안에 여러 페이지에서 쓰이는 UI component들을 생성했다. 그 중 하나가 검색창 컴포넌트이다. import React from "react";import { FaSearch } from "react-icons/fa";const SearchInput = ({ value, onChange, placeholder, onSearch }) => { const handleKeyDown = (e) => { if (e.key === "Enter") { onSearch(); ..

Vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공번들링 시 Rollup 기반의 다양한 빌드 커맨드 사용 가능높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게 미리 정의된 설정을 제공미리 bundle을 만든다필요한 소스코드만 건드린다. 공식 문서https://ko.vitejs.dev/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.dev      Create-React-App의 단점node_modules 용량이 크다빌드 속도가 느리다.UX나 SEO 측면에서도 좋지 않다.bundling이 느리다Webpack을 사용하는데 이는 라이브러리가 많은 경우 번들링이 오래 걸린다. CRA는 더이상 ..

동기와 하는 프로젝트에서 텍스트 에디터를 쓸 일이 생겼다.아직 UI 구현 단계지만, 텍스트 에디터는 처음 써보는 거라 여러 라이브러리를 두고 고민을 했다.개발 기간을 그렇게 길게 잡지 않아서 라이브러리를 쓰는 게 적합하다고 생각했고,그 중 가장 많이 다운받은 (npm trend 기준) react-quill 라이브러리를 적용했다. react-quill을 선택한 이유는 아래와 같다.깔끔한 UI (custom 가능)사용법이 잘 나와있다 (공식 문서, 여러 블로그 글)이미지 업로드 따로 핸들링 가능 (프로젝트에서 이미지 다중 업로드가 필요하기 때문) 이러한 이유들로 react-draft-wysiwyg와 고민했지만 quill로 결정, 프로젝트에 도입했다.      WYSIWYG란? What You See Is W..

사이드 프로젝트 중, 주소 찾기를 구현해야 해서 찾아보니까 카카오 우편번호 서비스 API가 있었다. https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 위의 사이트로 들어가보면 자세하게 guide가 나와있다.직접 API를 연동하는 대신, react-daum-postcode라는 라이브러리를 이용해서 편하게 구현했다.https://www.npmjs.com/package/react-daum-postcode react-daum-postcodeDaum Postcode s..

사이드 프로젝트에서 tooltip에 대해 알게 되었다.뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다.아무튼 나는 나중으로 미루고(?) 있었는데 메인 페이지 UI 구현하면서 실제로 구현해봤다.물론 다른 프론트엔드 개발자 분이 구현하신 tooltip 파일을 보고 만든 것이다. 그런데 여러 페이지마다 쓰이고 있어서 모든 폴더마다 새로 만들게 아니라 custom hook으로 만들어 쓰는게 더 효율적일 것 같아서 다른 분의 코드를 토대로 구현했다.          tooltip이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다.       useTooltip 코드 tooltip에는 꼭 생각해..

.env 파일이란? 유닉스 및 유닉스 계열 운영 체제용 셸 명령어 환경변수 파일을 외부에 만들어 URL,포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. 환경 변수 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 dotenv 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈 .env 파일 생성하기 최상위 경로(root)에서 파일 생성 환경 변수로 지정할 값 작성 리액트인 경우 REACT_APP_로 시작 NextJS의 경우 NEXT_PUBLIC_으로 시작 .gitignore에 .env 파일 추가 위의 캡처본들 처럼..

Pagination(페이지네이션)이란? 여러개의 컨텐츠를 여러 페이지로 나누고 페이지 번호 버튼, 이전 버튼, 다음 버튼을 눌러서 페이지를 이동하는 기능이다. 이전 버튼 페이지 번호 버튼 다음 버트 총 3가지 버튼을 필수라고 생각하고 기능을 구현했다. 이전 글처럼 반복되는 컴포넌트이기도 하고, 이왕 custom hook을 사용하기로 마음 먹은거, 저번 닐리리 프로젝트에서 구현했던 걸 조금 더 보완해보고자 구글링을 해보고 직접 테스트 해보면서 페이지네이션을 구현해봤다. 결과는 성공. 아직 기능이 구현된 것이 아니라서 더미 데이터로 페이지네이션을 확인했는데, 생각보다 이런 걸 구현할 수록 더욱 뿌듯해지는 것 같다 ㅋㅋㅋㅋ usePagination.js 파일 만들기 import { useState } from..

사이드 프로젝트를 하면서, 본격적으로 custom hook을 써보기로 했다. (나혼자 결정한거임) 아직 UI 구현 단계지만, 이렇게 페이지가 많은 프로젝트를 한 적도 처음이고 플로우 차트를 통해 페이지를 파악하는 것도 처음이다! 그래서 재밌기는 하지만, 시작하기 전에 구조를 생각해야 하는 시간이 좀 길어졌다. 캠프에서는 그냥저냥 구조 그려보고 그대로 기능 구현해봤는데, 사이드 프로젝트는 다르다. 일단 디자이너님이 그려주신 화면을 구현하기 위해서 필요한 단계들을 생각해보고, 피그마를 꼼꼼히 보고 있다. 아무튼! 그래서 반복되는 컴포넌트들은 따로 custom hook을 이용해서 만들어보기로 하고 가장 첫 번째로 모달창을 구현했다. custom hook? https://react.vlpt.us/basic/21..