React

CSS Module

코드의 가독성과 유지보수를 위해 css 코드를 분리하는 것을 선호하는 편이다. 문제는 리액트 프로젝트에서는 .css 파일을 컴포넌트에서 바로 import했을 경우 css 클래스가 중첩될 수 있다는 것이다. 어떤 컴포넌트에서 import되었더라도 전체 HTML 코드에서는 head태그 안에 style로 저장되기 때문에, 모든 컴포넌트에 적용된다. 따라서 실수로 클래스 이름을 같게 했다면 다른 엘리먼트에 같은 스타일이 적용되고, 코드가 길어질수록 이런 문제는 자주 발생하게 된다. 이를 해결하기 위해 CSS Module을 사용한다. CSS Module을 사용하면 해당 CSS 파일에 선언한 클래스 이름들이 모두 고유해지기 때문에 클래스 중첩을 완벽히 방지할 수 있다. CRA(create-react-app)으로 만..

Postman Mock Server & API

아직 동작하지 않는 API에서 데이터를 받는 테스트를 해야할 때 Postman은 유용한 도구다. 백엔드와 본격적인 연동을 할 수 없는 상황에서 가상의 서버를 만들어 데이터를 받는 것이다. 이 가상의 서버를 Mock Server라고 한다. Mock Server & API 만들기 Postman에서 원하는 워크스페이스에 접속한 후 Collections에서 + 버튼을 눌러 새 Collection을 만든다. Collection을 만든 후에는 Add a request를 클릭해 새 request를 생성해 준다. 그리고 Add example로 Example을 추가해 주면 API 준비가 끝난다. Mock Servers 탭에서 새 Mock Server를 만들어 준다. 생성 페이지에서 Select an existing co..

React Router Dom

리액트에서는 페이지 이동을 할 때 React Router Dom을 사용한다. // React Router Dom 설치 npm install react-router-dom --save // 사용 예시 import React from "react"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; export default function BasicExample() { return ( Home About Dashboard {/* Switch는 더이상 지원 안함 -> Routes 사용 */} ); } // You can think of these components as "pages" in your app. fun..

React 파일 구조 세팅 (+ VSC ES7 React/Redux/GraphQL/React Native snippets)

기본 로그인 기능을 보일러플레이트(Boiler Plate)로 만들기 위해 리액트 앱을 만든 후 파일 구조를 세팅했다. (보일러플레이트: 자주 쓰이는 기능을 재사용할 수 있게 만들어 놓은 후 재사용하는 코드) 처음 create-react-app을 이용해 리액트 앱을 만들면 다음과 같은 파일 구조가 생성된다. 개발은 주로 src 폴더에서 진행된다. public 폴더에 저장된 파일들은 퍼블릭 환경에서만 쓰일 수 있기 때문에 Webpack이 처리할 수 있도록 src에 파일들을 저장해 주어야 한다. 로그인 보일러플레이트 만들기 src 폴더를 다음과 같이 수정한다. 테스트를 위한 App.test.js와 로고 이미지인 logo.svg를 삭제 Redux를 위한 폴더인 _actions와 _reducer 생성 compon..