doeunn.log

▶SOLID 원칙에 기초한 React 코드 작성법 용어만 들어왔던 SOLID 원칙에 대해 자세하게 정리해 보려고 합니다. React 공식문서에 React로 사고하기(https://ko.reactjs.org/docs/thinking-in-react.html)라는 단락이 있습니다. 여기에서는 프로그래밍의 유지보수성과 확장성에 도움이 되는 전략을 소개하고 있는데요. 🔎 SOLID ? SOLID는 단일 책임 원칙(SRP), 개방 폐쇠 원칙(OCP), 리스코프 치환 원칙(LSP), 인터페이스 분리 원칙(ISP), 의존관계 역전 원칙(DIP)의 다섯가지 원칙의 앞글자를 딴 명칭입니다. 공식문서에서 언급한 만큼 다섯가지 원칙에 대해 하나씩 알아보도록 하겠습니다 :) 단일 책임 원칙(Single Responsibili..

▶Outlet으로 레이아웃 구성하기 오늘은 react-router-dom의 Outlet을 이용하여 레이아웃을 구성하는 방법에 대해 알아보려고 합니다 :) 🔎 Outlet ? Outlet은 하위 경로 요소를 렌더링하기 위해 사용하는 기능으로 만약 Header, Main, Footer를 함께 보여주기 위해서는 Outlet을 사용하여 하위 경로도 함께 렌더링이 가능합니다. → Outlet의 역할 자식 요소 중에 있는 엘리먼트 중에서 들어온 url에 맞게 엘리먼트를 보여주고 컴포넌트를 가져옵니다. ❓ 그냥 화면에 띄우면 되는거 아닌가 특정 페이지들끼리만 공통적으로 보여줘야 하는 레이아웃이 있을 때는 그거에 맞게 경로를 설정해줘야 합니다. 이때 Outlet을 사용하면 편하게 레이아웃을 구성할 수 있게 됩니다. 따..

▶자바스크립트 전개연산자(Spread Operator) 오늘은 전개 연산자에 대해 정리해보려고 합니다. 🔎 전개 연산자(Spread Operator) ? 전개 연산자는 배열 또는 객체를 하나하나 넘기는 용도로 사용이 되는데요. 다음 예제 코드를 통해 알아보도록 하겠습니다. const arr = [1, 2, 3]; let test_arr1 = [4, 5, 6]; let test_arr2 = [4, 5, 6]; test_arr1.push(arr); console.log(test_arr1); // [ 4, 5, 6, [ 1, 2, 3 ] ] test_arr2.push(...arr); console.log(test_arr2); // [ 4, 5, 6, 1, 2, 3 ] push를 이용할 때 전개 연산자를 사용하..

▶프로젝트 공용 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자 이번 글에서는 프로젝트에서 공용으로 사용하는 컴포넌트들을 관리하고 사용하는 방법에 대해 알아보도록 하겠습니다. 🔎 언제 활용? 전역으로 사용하는 컴포넌트의 경우 따로 components 폴더에서 관리하는 게 좋습니다. 왜냐하면 전역으로 사용하는 컴포넌트인데 각 파일에서 필요할 때마다 똑같이 써서 사용하는 것은 중복된 코드를 정말 많이 작성하는 것이 되는데요. 주로 버튼이나 input 등이 될텐데요. 🔎 폴더 관리 저 같은 경우에는 src 바로 하위 폴더로 components 폴더를 생성하고 컴포넌트에 맞게 폴더를 생성하고 컴포넌트와 스타일 파일을 함께 관리하고 있습니다. 🔎 활용해보자 이제 전역으로 사용하게 될 버튼 컴포넌트를 작성해..

▶React에서의 전개 연산자 스타일 컴포넌트를 계속 공부하다가 여기에서도 전개 연산자를 활용할 수 있음을 알게 되었는데요. 알고 있으면 정말 간편하고 유용할 거 같다는 생각이 들었던 거 같습니다. 오늘은 변수 앞에 ... 을 입력하여 사용하는 전개 연산자에 대해 차근차근 정리해 보려고 합니다. 🔎 전개 연산자 (...) : 그 외 나머지 매개변수 제일 뒤에 작성하는 변수의 앞에 전개 연산자를 붙이면 그 외 나머지 매개변수의 의미를 갖게 되는데요. 저는 이 나머지 매개변수의 의미를 이용하여 스타일 컴포넌트에게 전달해줄 매개변수에서 필요한 건 지정해서 전달을 해주고 나머지는 이 전개 연산자를 이용하여 지정 없이 싹 모아 전달하려고 합니다. 📌 예시 코드 Home 페이지에서 Button 컴포넌트를 impor..

▶공용 스타일 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자 이번 글에서는 스타일 컴포넌트를 재활용 하는 방법에 대해 알아보겠습니다. 🔎 언제 쓰는데? 만약 Login 컴포넌트와 Signup 컴포넌트를 만든다고 합니다. 그런데 이 안에 들어가는 스타일 컴포넌트가 중복되는 경우가 있을 수 있습니다. 가령 예를 들어 가장 바깥쪽 Form의 형태나 input이 들어가는 박스의 크기 등이 있습니다. 이때 Login 컴포넌트와 Signup 컴포넌트에 똑같은 스타일 컴포넌트를 작성하지 말고 또 다른 js 파일로 스타일 컴포넌트를 모아놓고 import 해서 사용하면 코드를 1/2로 줄일 수 있을 거 같습니다. 🔎 적용해보기 지금 저는 Form이라는 폴더에 Login과 Signup 폴더를 따로 두어 분리를 했..