React는 SPA(Single Page Application) 구조를 지원합니다. 그런데 일부 웹 애플리케이션은 MPA(Multi-Page Application)구조를 가집니다. 이번 글에서 React Router DOM을 사용하여 SPA구조를 어떻게 구현할지, 그리고 MPA구조와 어떻게 비교할 수 있는지를 다뤄봤습니다.React Router DOMReact Router DOM은 리액트 애플리케이션에서 패이지 간에 네이게이션을 관리하는 라이브러리라고 생각하시면 됩니다. 이를 사용해서 클라이언트(사용자)쪽에서 페이지를 새로 고침하지 않아도 다른 페이지로 전환할 수 있습니다.React Router DOM은 SPA구조에 적합하며 페이지 이동시에도 브라우저가 새로고침되지 않고, 필요한 컴퓨넌트만 렌더링하여 성..

프로그래밍에서 네이밍 컨벤션은 코드의 가독성과 유지보수성을 크게 향상시킵니다.이때 사용할 수 있는 4가지의 네이밍 컨벤션을 설명하겠습니다.1. 카멜 케이스 (Camel Case)첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식입니다.// 변수명let firstName = "Kimjunsu";const maxCount = 100; let isActive = true;// 함수명function getUserData() { ... }function calculateTotal() { ... }// 객체의 프로퍼티const user = { firstName: "Kim", lastName: "Junsu", phoneNumber: "123-456-7890"};낙타의 등 ..

혹시 기술블로그 보다보면 이런식으로 코드표현된거 본적 있지 않으신가요? 본적이 없다고 하더라도- 깃헙에 ReadMe파일을 작성할때 코드를 예쁘게 보여주고 싶은 경우- 기술블로그에 코드를 올리고 싶은데 밋밋해 보일때- 코드리뷰할 때 특정 부분만 캡쳐해서 공유하고 싶을때이럴때 사용하기 좋은 라이브러리가 있는데요,VSCode의 확장프로그램CodeSnap입니다!Crtl + Shift + X 단축키로 확장프로그램 창을 연 후,CodeSnap입력후 찾아서 설치하시면 됩니다.설치 후, 코드캡쳐 방법1. 캡처할 코드를 드래그 합니다.2. 우클릭 후 하단의 CodeSnap을 선택한다.3. (1)번을 눌러 이미지를 저장하거나, (2)번을 우클릭하여 복사할 수 있다.