ougi FE

오늘은 제가 React에서 배열에 map() 함수로 자식을 처리할 때각 요소마다 key 값을 넣어야 하는 것에 대해서 설명드리겠습니다최근에 저는 친구가 개발하는 것을 도와주다 친구가 key 값을 왜 주어야 하는지 질문을 하였는데좋은 답변을 해주지 못한 것 같아서 이렇게 글로 정리하게 되었습니다!❓ 왜 그럴까?" Warning: Each child in a list should have a unique "key" prop "( 경고: 리스트의 각 자식은 고유한 "key" prop을 가져야 합니다. ) React에서 자식 요소에 key 값을 주지 않으면 이러한 오류가 뜨는 것을 볼 수 있습니다왜 키 값이 필요할까요? 공식 문서를 보면 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것에 도움을 ..

저는 Tailwind를 이용해 웹페이지를 구현할 때동적인 스타일링을 구현하기 위해서 종종 삼항 연산자를 사용해왔습니다.하지만 이 방법은 코드가 너무 지저분해진다는 문제가 있었습니다. 오늘은 그 문제를 해결해 줄 수 있는 classnames 라이브러리를 소개해 드리겠습니다.❓ classnames란?classnames 라이브러리는 조건부로 CSS 클래스를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.여러 개의 CSS 클래스를 간편하게 결합하거나 특정 조건에 따라 클래스 이름을 동적으로 추가할 수 있습니다.Tailwind 또는 CSS Modules와 많이 쓰인다고 합니다.장점코드 가독성이 높아집니다.동적 스타일 적용이 쉬워집니다.라이브러리 크기 작아집니다.단점기본적으로 타입이 정해져 있지 않아서..

안녕하세요 오늘은 React-Hook-Form에 대해서 소개해드릴 것인데요 저는 요즘 로그인, 회원가입 페이지를 구현하면서 어떻게하면 효율적으로 form을 관리할 수 있을지 고민이 많았습니다그래서 블로그를 살펴보다가 React-Hook-Form 라이브러리에 대해서 알게 되어 이렇게 글을 적게 되었습니다React-Hook-Form이란?React-Hook-Form 라이브러리는 사용하기 쉬운 유효성 검사 기능을 가지고 있고 확장가능한 form을 제공합니다이 라이브러리를 사용하면 코드가 매우 줄어들고 불필요한 렌더링을 제거해서 성능도 개선이 되는 효과가 있습니다🎯 사용법 저는 기본적으로 React-Hook-Form 사용에 필요한 register함수와 handleSubmit함수를 소개드리고 오류처리, 유효성 검..

저는 요즘 개발을 하면서 팀원과 협업이 굉장히 중요하다고 느끼고 있습니다 그리고 저번 글에서 PR, Fork, Issue 사용법에 대해서 알아봤으니 오늘은 좋은 commit Message 대해서 다뤄보겠습니다⭐ 커밋 메시지 작성하기Feat: "팝업 구현" = 제목date: 2024.10.22 = 날짜 (optional)1. 팝업 아이콘2. 팝업창 = 본문3. 팝업 기능Resolves: #39 = 꼬리말 (해결된 이슈의 이슈코드)Related to: #33, #34 = 꼬리말 (관련된 이슈의 이슈코드)커밋 메시지는 제목, 본문, 꼬리말로 나눌 수 있는데 설명이 부족하지 않다면 제목만을 적어도 됩니다 하지만 어떤 변경사항이 있는지 설명이 필요하다면 본문과 꼬리말을 추가할 수 있습니다🎯 제목제목을..

오늘은 제가 예전부터 남겨보고 싶던 Issue, 예전에 의미를 모르고 사용했던 Fork, 더 잘 쓰고 싶은 PullRequest에 대해서 글을 써보려고 합니다❓ Issue란?먼저 Issue가 무엇인지 설명드리겠습니다 이슈(Issue)란 Github에서 프로젝트를 관리하는 기능 중 하나로, 소프트웨어 개발 및 유지보수를 위한 작업 목록, 버그 추적, 기능 개발, 코드 검토 등을 포함하는 모든 작업 항목을 말합니다 이슈를 생성하여 관리하면, 이슈에 대한 커밋 내역들을 하나의 이슈 페이지에서 관리가 가능합니다 어떤 작업을 해야 하는지누가 해야 하는지얼마나 진행됐는지이런 정보를 이슈에서 묶어서 관리할 수 있습니다또한 Comment를 이용하여 서로 의견을 주고 받을 수 있어 작업을 단위로 구분하여 협업하기 편하도..