개발새발 로그

📖들어가며...저번 포스팅에서 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를 보면 메뉴가 하위요소를 포함하는 메뉴와 하위요소가 없는 메뉴가 있다.또한 하위 메뉴에서 또 하위메뉴가 있을 가능성이 있다.또 ..

요새는 리액트만 공부해서 그런지 이런 고민이 생겼다. "자바스크립트로 이런 기능 한번 만들어보세요!" 했을 때 어떻게 할 것인가?기능을 구현할 수야 있겠지만 과연 그 기능을 남들이 봤을 때 "옳은 방식"으로 만들까? 다시한번 자바스크립트를 공부하려고 마음을 먹었고, 내가 과거에 배웠던 자바스크립트를 다시 꺼내왔다.이번에 두 번째로 보는 것인데 다시 복습하면서 중요한 점들을 상기시키려고 한다.  📖명령형 프로그래밍 방식과 선언형 프로그래밍 방식명령형 프로그래빙 방식이란?프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. 자연 언어에서의 명령법이 어떤 동작을 할 것인지를 명령으로 표현하듯이, 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이..

개발하면서 웹소켓을 사용할 일이 없다보니 이 기능이 어떻게 구현되는지 모르고 있었다.이번 기회에 웹소켓 로직을 보통 어떻게 작성하고 기본적인 실시간 채팅기능을 어떻게 만드는지 알아보려고 한다. 먼저 웹소켓과 우리가 쓸 Socket.io에 대해서 궁금한 점을 작성해봤다.📖http와 웹소켓의 차이웹소켓(WebSocket)은 클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신이 가능하도록 하는 첨단 통신 프로토콜이다. 웹소켓은 하나의 TCP 접속에 전이중(duplex) 통신 채널을 제공한다. 쉽게 말해, 웹소켓은 Socket Connection을 유지한 채로 실시간으로 양방향 통신 혹은 데이터 전송이 가능한 프로토콜이다. 기존 HTTP는 단방향 통신이였다. 클라이언트에서 서버로 Request를 보..

어떤 코드를 짜면서 패턴이 있다면 그 패턴을 무조건 누군가가 개발한 패턴이라고 한다.그렇다면 해당 패턴을 모르고 사용하는 것은 앞뒤가 맞지 않는다고 생각됐다.그래서 리액트에서 사용되는 디자인 패턴 중 하나인 Container and Presentational Components Pattern을 알아보려고 한다. 현재 구글 검색을 하면 손쉽게 해당 패턴에 대해 알 수 있다.그래서 나는 해당 패턴에 대해 이해하고, 알아가는 과정을 포스팅하려한다. 📖Container and Presentational Components Pattern이란?간단하게 말해 비즈니스 로직으로 부터 뷰를 분리하여 관심사의 분리(SoC)를 강제하는 것이다. 먼저 아래 코드를 보자해당 코드는 TanstackQuery를 사용하면서 나도 ..