프로젝트

mock data로 메신저를 구현하는 토이 프로젝트에서 협업하는 디자이너분이 파일 전송 기능을 구현해주셨다. 시연해보고 싶다면https://react-messenger-19th-beta.vercel.app/chats Telegram유담이와 연우의 텔레그램react-messenger-19th-beta.vercel.app  먼저 왼쪽 사진에 보이는 클립 버튼을 누르면 파일 첨부 창이 뜨고 이미지를 전송하면 위의 사진처럼 전송이 되어야한다.  일단 html의 기본 속성으로 type=file을 주게 되면 이런 못난 창이 뜨게 되는데이걸 감추고, 클립 버튼을 누르면 파일 첨부 창이 뜨게 만들어야한다.  const fileInputRef = useRef(null); const handleFileButtonCli..

어느 순간부터 mac에서는 delete enter windows에서는 delete cr이라는 에러가 계속해서 났다. npm run lint를 하면 아무런 문제가 없다고 뜨고, 사실상 프로젝트를 빌드하는데에는 전혀 문제가 없었다. 하지만, 개발을 할 때 엔터 한 번만 치더라도 계속해서 저 에러가 따라다녔고, 저장을 하면 prettier에 의해 포맷팅이 되면서 enter가 사라지기에 에러도 함께 사라졌지만 엔터를 다시 치면 또 다시 나타났다. 오기가 생겼다.... 윈도우 운영체제에서 "delete cr" 에러가 나는 이유 prettier와 윈도우 운영체제가 줄바꿈을 하는 방식이 다르기 때문에 발생한다. prettier 2.0 이상에서 줄 바꿈 설정 값으로 LF를 사용한다. 하지만, 윈도우는 CRLF 방식을..

CI, CD가 궁금하다면 아래의 영상을 먼저 참고하길 바란다. CI - 지속적인 통합을 의미 이는 메인 레포에 새롭게 추가되는 코드들을 CI Server에서 자동으로 빌드하고 테스트하는 과정을 통해 이뤄진다. vercel로 배포를 한다면, 자동으로 CI/CD가 가능하지만, 매 번 vercel 계정에 접속해서 보는 것보다 github action을 활용하면 프로젝트에 참여하는 팀원들 모두가 손쉽게 볼 수 있다. .github/workflows/ci.yml name: ci on: [push, pull_request] jobs: run-lint: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Set up Node..

npx create-next-app@latest . 뒤에 .을 찍어주면 현재 폴더에 next 프로젝트를 생성할 것이라는 걸 알려주는 표시이다. 그러면 프로젝트 이름을 어떤 걸로 할 거냐는 질문을 받지 않고 현재 폴더에 모든 게 설치된다. base) ➜ next_test git:(main) ✗ npx create-next-app@latest . ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you l..

nvm이란? Node Version Manager로 nodejs의 다양한 버전을 관리하는 프로그램이다. nvm을 쓰는 이유 여러 개의 프로젝트를 하는 경우에 서로 다른 node version을 사용할 필요가 있을 수 있다. 프로젝트 폴더 상단에 .nvmrc 파일을 만들어 노드 버전을 명시해주면 nvm use라는 커맨드를 이용해 손쉽게 해당 node 버전을 이용할 수 있다. 방법은 다음과 같다. 1) 프로젝트의 루트 디렉토리에 .nvmrc 파일을 생성한다. mkdir .nvmrc 2) nvmrc 파일에 해당 프로젝트에서 사용하는 노드 버전을 작성한다. (v는 생략 가능) // .nvmrc v12.16.3 3) 이제 해당 프로젝트를 clone 받은 작업자는 아래 명령어만 입력하면 해당 노드 버전을 사용할 수..

const Button = memo(({ text, onClick }) => { console.log('Button', text, 're-rendering 😜'); const result = useMemo(() => calculateSomething(), []); return ( {`${text} ${result}`} ); }); eslint에서 발생하는 에러로 display-name은 디버깅을 용이하게 하기 위한 속성이다. 이는 memo의 콜백함수로 익명함수를 넘겨줬기 때문에 발생한다. 해결방법 1) 해당 컴포넌트의 displayName 속성에 이름 적어주기 const Button = memo(({ text, onClick }) => { console.log('Button', text, 're-rend..

모달 내부의 닫기 버튼을 클릭하지 않아도 모달이 닫히도록 구현해봤다. 일단 먼저 import { ReactNode, useEffect, useRef, useState, MouseEvent } from "react"; import { createPortal } from "react-dom"; import styles from "./ModalWrapper.module.css"; import useNotScroll from "@/hooks/useNotScroll"; interface ModalWrapperProp { children: ReactNode; size: "lg" | "md" | "sm"; handleModalClose: () => void; } /** size는 모달의 크기만 구분하기 때문에 세부적..

모달이 있고, 케밥 버튼을 누르면 수정하기 삭제하기 옵션이 나온다. 이때 케밥 버튼을 다시 클릭하지 않고, 케밥 버튼 이외의 다른 부분을 눌러도 옵션들이 닫히도록 구현해보았다. import useApi from "@/hooks/useApi"; import EditInputModal from "@/modals/EditInputModal"; import CommentList from "@/modals/components/Comment/CommentList"; import { CardData } from "@/types/api.type"; import { getAccessTokenFromDocument } from "@/utils/getAccessToken"; import Image from "next/ima..