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

👀 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를 더 많이 사용하는 것 같다. (가상 클래스 우선순위가 태그..

뿌리를 바꾸어야 열매가 바뀌는 법이다. 근본을 변화시키지 않고서는 결과를 바꿀 수 없다. 우리가 태도나 행동만 바꾸려고 한다면 이는 마치 나뭇잎만 잘라내는 것과 같다. - 성공하는 사람들의 7가지 습관 : 습관4. 승-승을 생각하라 -

💬 git stash에 대해 알고는 있었는데, 작업하고 있던 브랜치 내의 모든 파일을 보관해야 한다는 사실은 처음 알게 되어 잊어버리기 전에 기록으로 남겨본다. 🤔 git stash는 언제 쓰는데요?열심히 test1 브랜치에서 작업을 하고 있었는데 급하게 test0 브랜치 작업 내역에 대한 수정 요청이 들어왔다. 브랜치를 이동하여 해당 요청을 처리하기 전에 작업하고 있던 내역을 올려야 하는데, 아직 커밋으로 만들기에는 애매한 상황이다. 이때 사용할 수 있는 방법이 stash이다. 📑 사용법⚠️ 주의할 점stash는 프로젝트 단위로 관리되기 때문에 모든 브랜치에서 통합적으로 사용이 가능하다. stash 내역이 많아지면 구분이 어렵기 때문에 파일 보관 시 메시지에 작업 내역을 자세히 적어주는 게 좋..

💬 오늘은 언젠가 한 번쯤은 사용할 차트 라이브러리에 대해 실습했다. 사용법만 제대로 익혀두면 사용하기 좋은 라이브러리라는 생각이 들었다. 실습하면서 차트의 항목 이름을 보여주고 싶어 삽질을 좀 했는데, 이 과정에 대한 기록을 남겨본다. 📑 Chart.js 라이브러리란?데이터를 시각화할 때 차트를 사용할 일이 많은데, 차트 라이브러리를 사용하여 이를 쉽게 구현할 수 있다. 오늘 우리는 많은 차트 라이브러리 중에서도 유명한 Chart.js의 리액트 버전인 react-chartjs-2 라이브러리를 사용해보고자 하였다. https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2React components for Chart.j..