오늘도 디벨롭✨ 오늘도 디벨롭✨

📊 이번에 새롭게 시작하는 프로젝트에 차트 라이브러리가 필요했다. 차트 라이브러리를 선택하기에 앞서 고려해야 했던 점은 디자인팀 시안을 최대한 반영할 수 있도록 어느 정도 커스텀이 가능해야 했고, nextjs를 고려하여 svg로 제공이 돼야 했다. 팀원들과 여러 차트 라이브러리를 찾아보고, 논의한 끝에 Recharts를 사용하기로 결정했다. 🤔 Recharts란?공식문서 https://recharts.org/en-US 리액트 컴포넌트를 기반으로 데이터를 차트로 시각화해 주는 라이브러리이다. ⚙️ 설치하기npm install recharts 📂 연습하기어떤 식으로 데이터를 전달해서 쓰는지 간단하게 확인하고 싶어서 유튜브 강의인 [ Build Charts in React With Recharts in..

💬 팀 프로젝트 들어가기 전에 Storybook 찍먹 스터디를 진행해 보기로 했는데, 미리 예습을 해두고 가면 좋을 것 같아서 적어보는 기록 첫 번째 🙌 📑 Storybook이란?UI 컴포넌트와 페이지를 독립적으로 구축할 수 있도록 도와주는 개발 도구이다. Storybook을 활용하여 UI에 대한 문서화를 하거나 테스트 혹은 디자인 시스템으로 활용이 가능하다. ⚙️ Storybook 설치하기Storybook은 기존 프로젝트에 설치하거나 새로운 프로젝트를 생성할 때 추가할 수 있다. 1. 리액트 프로젝트를 생성한다.2. 가장 최신 버전의 storybook을 설치한다. npx storybook@latest init위 명령어는 필요한 의존성 패키지 설치 및 기본 스토리북 설정을 자동으로 추가해 준다.설치..

✏️ 프로젝트 초기 설정 할 때마다 Issue랑 PR 템플릿 등록하는 것도 매번 찾아봐야 해서 이것도 포스팅을 해놔야겠다는 생각이 들었다. 등록 방법을 외우는 것이 가장 좋지만 오랜만에 사용하면 또 잊어버리기에.. 이것 또한 미래의 나를 위한 포스팅✨ Issue 템플릿과 PR 템플릿 모두 main 브랜치에 등록해주는 것이 중요! 1. 이슈(Issue) 템플릿1-1. Set up templates1) Issue 템플릿을 지정하고자 하는 레포지토리의 setting 탭으로 들어간다.2) 좌측 사이드바의 General 메뉴의 페이지에서 Features에 있는 Issues 옵션으로 이동 > Set up templates 버튼을 클릭한다.1-2. Custom templateIssue 템플릿 양식은 총 3개가 주어지..

🤔 프로젝트 진행 시 빠지지 않는 Issue/PR의 Labels..! 종류도 많아서 매번 하나씩 등록하는 건 너무 번거롭다는 생각이 들었다. 분명히 편하게 등록할 수 있는 방법이 있을 거라는 생각이 들어 찾아보니 역시나 존재하는구나~.~ 방법을 알아보자!✅ (24.04.30 추가) 윈도우 환경에서도 문제없이 동작하는 것을 확인하였습니다. 1. 결과물 미리보기아래 사진처럼 7개의 라벨을 등록해 보자.  2. Labels 작업하기label 데이터는 json 파일로 관리한다. label.json이라는 파일을 만들어줄 건데, 이때 파일의 위치는 중요하지 않지만 추후 업로드 편의를 위해 desktop 위치에 파일을 저장했다. label을 한 번에 저장하기 위해 작성해줘야 하는 양식은 아래와 같다.json 양식[..

💬 잊지 말자 서버 컴포넌트!!! 많은 경우의 수를 만나봐야 서버와 클라이언트의 구분이 명확해질 것 같다는 생각이 들었다. 📑 Next.js의 컴포넌트 API Next.js의 기본 컴포넌트는 서버 컴포넌트이다. 클라이언트 컴포넌트를 사용하려면 컴포넌트 최상단에 'use client' 선언이 필요하다. 단, 클라이언트 컴포넌트는 '서버 + 클라이언트'의 하이브리드 컴포넌트로 이해해야 한다. 클라이언트 컴포넌트를 사용해야 하는데 'use client' 선언이 없다면 에러가 표시된다. 📑 Next.js의 컴포넌트 구분 서버 컴포넌트 API 특징 : 보안, 캐싱, 성능 SEO 등의 이점 cookies / headers / redirect ... 클라이언트 컴포넌트 API 특징 : 유저와의 상호작용, 브라우저 A..

👀 2주간 Next.js 강의가 진행된다. Next.js를 써본 적이 없어서 배운 부분까지는 어떻게든 프로젝트 때 원활하게 사용하자!(물론 Next를 안쓸 수도 있겠지만)라는 목표를 잡고 수업에 임했다. 오늘은 그 첫 번째로 설치 및 초기 설정에 대해 기록한다. 1. 설치 1-1) 설치 명령어 가장 기본적인 설치 명령어는 프로젝트 이름을 같이 입력해서 열어둔 폴더 안에 새로운 폴더를 생성하여 설치한다. npx create-next-app@latest [프로젝트명] 만약 열어둔 폴더 안에 바로 설치하고 싶다면 . 키워드를 사용하자. npx create-next-app@latest . 1-2) 프로젝트 설정 ✔ Would you like to use TypeScript? … Yes # 타입스크립트 사용 여부..

💬 포토샵에서도 크롬에서도 유용하게 사용하는 Color Picker는 어떻게 구현할 수 있을지 급 궁금해져서 이번 스터디 주제로 결정! 라이브러리를 사용하지 않고 어떻게 하면 Color Picker 기능을 구현할 수 있는지 알아보자. 📑 Color Picker를 구현할 수 있는 방법1) color" /> 스포이드 모드와 직접 팔레트에서 컬러를 선택할 수 있는 기능을 제공한다.기본값은 #000000으로 RGB Hex값을 반환한다.event.target.value로 값을 받아올 수 있다.컬러 선택 후에 esc 혹은 color picker의 외부 영역을 클릭해야 color picker 팝업이 닫힌다.Opera Mini와 IE를 제외한 모든 브라우저에서 사용이 가능하다. 2) Ey..

💬 패캠 실시간 강의(실무 CSS 레이아웃)를 듣고 새롭게 알게 된 내용을 기록합니다.🙌 📑 CSS를 공부할 때는.. 속성들의 기본 값을 알아두는 것이 중요하다. 예로 flex에서 flex-shrink는 1이 기본값이다. 그래서 따로 기본 값을 정해주지 않으면 화면이 줄어들 때 요소도 같이 줄어든다. 이처럼 속성의 기본 값을 알아두면 내 의도와는 다르게 동작하는 CSS에 대해 좀 더 빠르게 파악할 수 있다. 📑 CSS 변수 JavaScript에서 데이터를 변수에 담아 재사용하는 것처럼 css도 속성 값들을 변수에 담아 전역적으로 사용할 수 있다. :root는 html을 의미하는데, 선택자 우선순위에 따라 적용되는 순서가 다르기 때문에 :root를 더 많이 사용하는 것 같다. (가상 클래스 우선순위가 태그..