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

💬 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..

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다. 1. class 구조 class User { constructor(매개변수1, 매개변수2..) { // 함수 역할 // 로직 } 메서드명() { return 로직; } } 2. 컴포넌트 생성(SPA 방식) 1. index.html의 안에 모든 내용이 그려진다. 2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가 3. 공통으로 사용..

✅ 오늘의 작업 내역 1. single, multiple 버전 예제 준비하기(100%) 2. README 작성하기(100%) 🔍 먼저 짚고 넘어가는 오늘의 깨달음 동일한 UI인데 실행되는 로직만 다른 경우, prop 조건에 따라 컴포넌트 하나로 해결이 가능하다는 사실을 잊지 말자. 폼도 그렇고, 오늘 준비한 아코디언도 그렇고.. 컴포넌트를 재사용할 수 있는지 항상 먼저 생각해 보기! (single 버전과 multiple 버전을 각각 만들었다가 이거 정말 비효율적이다! 를 느끼고 난 자의 회고록..) 0. 아코디언 UI를 준비한 이유 요새는 모바일로 웹이나 앱 사용을 많이 하는데, FAQ만 보더라도 아코디언 UI로 이루어져 있는 곳들이 많다. 작은 화면 속에서 빠르게 내용을 확인할 수 있는 게 편리해서 잘..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다. 📚 (사이트) 가이드 투어/온보딩 투어란? 가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다. 오늘 알아볼 기..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 이번 포스팅은 구현 과정보다 준비하면서 알게 된 wheel event에 대해 기록하고자 한다. 리액트에서 FullPage Scroll를 구현하기 위해서는 마우스 휠의 방향을 통해 페이지의 이동 방향을 알아낼 수 있는 wheel event값, 스크롤이 발생하는 DOM 요소의 스크롤 위치를 알아내는 useRef.current값, 뷰포트의 세로길이가 필요하다. 이 값들을 사용하여 위치를 계산한 후 scrollTo API를 활용하여 이동할 위치를 지정해준다. 📑 wheel event란? 사용자가 휠 버튼(일반적..