개발새발 로그

📖들어가며...아코디언 기능을 만들어보고나서 이제는 TabMenu 기능을 만들어보려고 한다.사실 TabMenu기능은 아코디언 기능과 매우 유사하다.열고 닫을 때 처리를 해야하고, 현재 보여줘야할 요소를 상태로 관리하면 된다. 그럼 저번 아코디언 기능을 만들 때와 같이 다양한 방식으로 TabMenu를 구현해보자.  🤔TabMenu를 만든다고 한다면..처음에 TabMenu 기능을 만든다고 한다면 아래와 같이 만들 수 있다.const TabMenu1 = () => { //현재 선택한 탭 요소 const [currentId, setCurrentId] = useState(data[0].id) //탭 요소 클릭 이벤트 const toggleItem = (id: string) => () => { se..

📖들어가며..React 프로젝트를 시작할 때 개발 환경을 구축하는데 보통 eslint나 prettier 설정은 인터넷에 검색해서 복붙을 하는 경향이 있었다.빨리 개발환경을 세팅하고 프로젝트를 진행하기 위해서였다. 이번에 프로젝트 개발 환경을 구축하면서 eslint와 prettier을 설치하고 세팅하면서"이게 무슨 역할을 하는 걸까?", "최소한 필요한 세팅은 어떻게 될까?" 를 생각하게됐고,이를 정리하고자 포스팅하게 되었다. ✨Vite로 React 설치하기나는 보통 vite를 사용한다.  Vite가 Webpack보다 빠르다..뭐다.. 하지만(현재 webpack은 또 발전해서 많이 빨라졌다고 한다.)개인적으로는 정말 편하다.간단한 프로젝트를 하기에 적합한 것 같다.npm create vite@latest..

📖들어가며..오랜만에 다시 리액트 패턴을 알아보려고 한다.여태 이것저것 하는게 너무 많아버려서..저번에는 HOC, 고차 컴포넌트에 대해서 알아보았다.고차컴포넌트에  여러 컴포넌트가 동일한 데이터나 동일한 로직을 포함해야 할 때 컴포넌트의 로직을 재사용할 수 있게 되면 편해질 수 있다는 것을 알았다. 컴포넌트를 재사용할 수 있는 다른 방법으로 Render Props Pattern이 있다고 한다.해당 패턴을 예시를 보면서 사용해보고 경험해보려고 한다.  👨‍💻 Render Props Pattern 아래 코드를 보자현재  InputText 컴포넌트에서 text상태를 관리하고 있다.input이 InputText 컴포넌트에 있기 때문에 보통 코드를 빠르게 작성하려고 한다면 이렇게 작성한다.  하지만 만약 V..

📖들어가며...저번 포스팅에서 GNB를 만들 때 아코디언을 활용해서 만들었었다.그 때는 아코디언이 열림과 닫힘 상태를 현재 경로를 활용하고,닫혀있을 때는 css에서 height값을 0으로 주고, 열렸을 때 height값의 변경으로 열리면서 transiton 효고를 넣었다.(height로 transition을 주는 것이 아쉽긴 했다.) 근데 아코디언으로 만들면서 "리액트로 아코디언을 만들 때 많은 경우의 수가 있는 것 같은데" 라고 생각이 들었다.그래서 이번에 리액트 UI 모음을 만들면서 이와 같은 상황들을 공부하고, 직접 만들어보려고 한다. 만드는 과정은 간단하게 정리만하고, 코드는 자세하게 올리지 않으려고 한다.강의 영상이나 검색 자료를 보면서 나의 주관적인 생각을 정리하면서 포스팅하려한다!  🤔아..

📘들어가며..지난 번의 Container and Presentational Components Pattern에 이어서 Higher-Order Component Pattern에 대해서 알아보자. HOC는 들어본 사람도 있겠지만 우리 말로 고차컴포넌트라고 한다.고차(Higher-Order)라는 단어는 고차함수를 공부하면서 많이 들어봤을 것이다. 그럼 고차 함수는 무엇인가?고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 다시 말해, 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다. 그럼 이제 HOC에 대해서 어떻게 ..

📖들어가며..아코디언 UI 컴포넌트를 개발하면서 처음 알게된 사실이 하나 있었다.Emotion의 styled-component를 사용하면서 생긴 문제가 있었는데 관련 해결 방법을 검색으로 찾아보려고 했지만 잘 찾아지지 않았고, 디테일한 문제라서 키워드로 검색하기가 까다로웠다. 해결법을 겨우 찾으면서 이 문제에 대해서 처음 알게 되었다.간단하게 해결할 수 있는 문제였으며 어떤 분들은 모를 수도 있겠다고 생각이 들었다. 이를 포스팅하면서 기록하고, 공유해보려 한다!  🚨문제 상황나는 아래와 같이 가상 요소 선택자 ::before을 이용해서 + 또는 - 를 모든 요소에 출력해주려고 한다.그러면 Emotion의 styled-component를 사용한다고 했을 때 어떻게 코드를 짤까?보통은 아래와 같이 작성할..

📖들어가며..제목 그대로 만약에 리액트에서 바닐라 자바스크립트 코드를 작성하고 실행하려면 어떻게 해야할까?간단하게 생각하는 분들도 있을 것이고,나처럼 "음... 어떻게 해야하지..?"라고 생각하는 분들도 있을 것이다. 저번 포스팅에서 리액트로 UI 컴포넌트를 만드는데 바닐라 자바스크립트를 만드는 방법에 대한 강의 자료도 있어서이를 학습하다가 리액트에서 바로 바닐라 자바스크립트 코드를 작성하고 실행시키는 것이 신기해서이번 포스팅을 기록하게 되었다. 만일 누가 나한테 "리액트에서 바닐라 자바스크립트만 사용해서 실행하는 법 알아?" 했을 때나는 제대로 대답하지 못했을 것이다..ㅠ 아주 간단하고 쉬운 방법이지만 나처럼 모르는 사람들을 위해 기록하고 공유하고자 한다! ✨완성본먼저 완성부터 보자!완성본을 먼저 보..

📖들어가며.. 리액트에서 빈번하게 만드는 UI 컴포넌트들을 만들어서 컴포넌트 모음집을 만들어보려고 한다.참고 자료를 보면서 공부하고 있는데이때 UI 컴포넌트들을 하나씩 볼 수 있도록 GNB를 만드는 과정이 있었다. 이 GNB도 나중에 활용하기 좋을 것 같아 react-router-dom을 이용해서 만들어 보려고 한다.보통 네비게이션을 만들 때와 비슷하지만 좀 더 선언적이고, 아코디언 기능 까지 넣었다.이때 상태는 관리하지 않았다. 그럼 먼저 완성본을 보면서 이해해보도록 하자.메인페이지에는 나중에 마크다운 라이브러리를 이용해서 README와 똑같이 넣어보려고 한다. 현재 gif를 보면 메뉴가 하위요소를 포함하는 메뉴와 하위요소가 없는 메뉴가 있다.또한 하위 메뉴에서 또 하위메뉴가 있을 가능성이 있다.또 ..