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

💬 패캠 실시간 강의(실무 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..

습관은 환경에서 자라난다. 같은 것을 계속하거나 같은 생각을 하고, 같은 말을 반복하는 것으로부터 습관은 생겨난다. - 나폴레온 힐 성공의 법칙 : 자기암시의 강력한 원리, 습관 -

인생의 바퀴는 항상 돌고 돈다는 걸 기억하자. 자신에 대한 믿음을 지키고 성실하고 정직하게 최선을 다한다면 밤이 지나면 낮이 오듯이 반드시 불행한 시절이 가면 행운이 따르리라는 것을 기억함으로써 불행을 극복할 수 있다. - 나폴레온 힐 성공의 법칙 : 실패에서 배우는 태도 -

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 더 보기 버튼은 기존 페이지에 새로운 페이지를 '추가'하는 방식이다. 실습을 위해 사용한 API는 데이터 요청 시 한 번에 10개씩 반환해 준다. 이때 API에서 page라는 key값을 제공해 주기 때문에 이를 활용하여 더 보기 버튼 기능 구현이 가능하다. 더 보기 버튼 클릭 시 서버에 키워드를 요청하는 통신 로직을 가지고 있는 searchMovies 함수에 동적으로 원하는 page의 value값을 전달해줘야 한다. this.el.addEventListener("click", async () => { // 버튼 클릭시 API 통신하는 store 함수 활용 await searchMovies(mov..

프런트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 ✍️ 이전 포스팅 https://dev-thinking.tistory.com/39 [JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, dev-thinking.tistory.com 1. 자식 컴포넌트 생성 현재 요소 태그로 렌더링 되고 있는 ${fruit.name} 부분을 컴포넌트화 시켜보자. 1-1. FruitItem 컴포넌트 추가 import { Component } from "../core..