◼ FrontEnd/ReactJS

[React] 카카오맵 API를 통해 지도를 화면에 띄우기 (에러 해결법)

멋쟁이 사자처럼에서 진행하는 중앙 해커톤을 준비하면서 카카오맵 API를 통해 지도를 화면에 그리는 기능을 구현하게 되었습니다. 카카오에서 제공한 공식문서가 워낙 깔끔하게 잘 정리되어있어 빠르게 지도를 화면에 구현할 수 있었지만, 도중 몇몇 문제를 마주하여 고민했던 부분 역시 있었는데, 이 포스트에선 이러한 문제를 어떻게 해결했는지를 정리하여 비슷한 어려움을 겪고 있는 다른 개발자 분들에게 도움을 드리고자 합니다. (참고로 저는 Web API를 사용하여 구현했습니다.) 로컬 환경에서 테스트할 수 있도록 사이트 도매인 등록하기 로컬 환경에서 카카오맵 API가 올바르게 동작하는 지 확인하기 위해선 로컬 주소를 사이트 도매인으로 등록해주면 됩니다. 저는 처음에 공식문서에서 '웹 서버를 실행시키라'는 언급이 있어..

[ReactJS] 관심사의 분리와 Custom Hook

관심사의 분리 각각의 관심사에 따라 코드를 분리하는 기법 코드가 하나의 관심사만 신경쓰도록 분리하는 것 관심사의 분리의 특징 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다. 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다. 코드의 기능 테스트 또한 쉬워진다. 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다. 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다. 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다. KISS 원칙 Keep It Simple, Stup..

[ReactJS] Dynamic Routing & Query String

Dynamic Routing (동적 라우팅) 정적 Routing Routing을 설정하는 가장 기본적인 방식은 정적 Routing이다. 정적 라우팅은 Router 컴포넌트에서 미리 프로젝트에 사용할 경로들과 보여줄 컴포넌트들을 모두 정의해두는 방식이다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { return ( ) } export default Router; 하지만 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 Routing 방식만으론 처리하기 힘든 작업이 존재할 수 있다. (Route를 유연하게 정의할 수 없으므로) 동적 라우팅 ..

[ReactJS] Component의 분리와 재사용 (관심사의 분리)

컴포넌트 분리 관심사의 분리 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 말한다. 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인 원칙이다. 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다. 컴포넌트를 분리하는 이유 React에서 컴포넌트는 다양한 역할을 한다. 어떤 컴포넌트는 UI를 표현하고자 하고, 또 어떤 컴포넌트는 동작하는 로직을 담을 수 있다. 위의 두 역할을 모두 담는 컴포넌트 또한 존재하고, 하나도 담지 않는 컴포넌트도 존재할 수 있다. 이처럼 컴포넌트는 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 얼마든지 복잡해질 수 있다. 따라서 '관심사의 분리'..

[ReactJS] 상수 데이터 & Mock Data + fetch 매소드

상수 데이터란? 변하지 않는 데이터 React에서 데이터는 UI이다. 시간이 흐름에 따라 변하는 변수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아와야 한다. 반면 변하지 않는 상수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아올 필요가 없다. 상수 데이터 활용하기 /* App.js */ import React from "react"; const MENU_LIST = [ { id: 1, menuName: "New Repository" }, { id: 2, menuName: "Import Repository" }, { id: 3, menuName: "New Gist" }, { id: 4, menuName: "New Organization" }, { id: 5, menuName: "New ..

[ReactJS] Side Effect와 useEffect

Side Effect란? Side Effect란 부작용이다. 부작용 === 부수효과 부수효과 : 주요한 효과에 따라서 발생하는 부수적인 효과 부작용이란 용어 자체는 부정적인 의미를 내포하지 않는다. 단지 부수적으로 발생하는 효과를 의미하는 단어이다. 프로그래밍에서 Side Effect (부작용) 란? 코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과 특히 프로그램을 구성하는 가장 작은 단위인 함수에서 자주 사용되는 용어 함수의 본질적인 역할 (주된 효과) Input을 받아서 Output을 산출하는 것 Input => Output 함수의 부작용 (Side Effect) Input을 받아서 Output을 산출하는 것 외의 모든 행위 함수에서 함수 외부의 값을 읽어오는 행위 함수에서 함수 외부의 값..

[ReactJS] Hook & State & Props

Hook이란? Hook은 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미한다. 미리 만들어 둔 함수를 가져와서 사용을 해 주는 것이기 때문에 Hook이라는 이름을 사용한다. Hook의 모음을 Hooks라 한다. Hook의 등장 배경 기존엔 클래스 컴포넌트만을 사용하여 컴포넌트를 생성하였는데, 함수 컴포넌트의 장점으로 인해 이를 사용하고자 하는 니즈가 점점 많아지게 되었다. 함수 컴포넌트의 장점 : 선언하기 편리함, 직관적, 메모리 자원을 덜 사용함 이로 인해 클래스 컴포넌트에서만 가능했던 기능을 함수 컴포넌트에서도 사용하고자 Hook이 등장하였다. Hook의 특징 함수 컴포넌트에서만 사용 가능하다. Hook의 이름..

[ReactJS] SPA & Routing

SPA & Routing SPA (Single Page Application) 의 개념 SPA는 페이지가 하나인 웹 어플리케이션을 의미한다. 여기서 페이지란 html 파일을 뜻하기 때문에, SPA는 웹 사이트 전체에 HTML 파일이 하나인 웹 어플리케이션이다. MPA와 달리, SPA는 html이 하나 뿐이므로 여러 페이지(UI)를 하나의 페이지에서 보여주기 위해 Routing 기능이 필요하다. Routing의 개념 SPA에서 경로에 따라 다른 페이지를 브라우저 화면에 보여주는 것을 Routing이라 한다. React 자체에는 Routing 기능이 없기 때문에, React-Router이라는 라이브러리를 설치해 사용해야 한다. React-Router 설치 명령어 : npm install react-route..

[ReactJS] JSX와 컴포넌트 (Component)

JSX JSX는 JavaScript의 문법을 확장한 React만의 문법으로, JavaScript 내에서 HTML 마크업을 사용할 수 있도록 한 것이다. 마크업과 자바스크립트 로직이 서로 연결되어 있다고 판단하여 이를 한 번에 작성할 수 있는 방법을 고민한 결과 생겨난 문법이다. JavaScript 내에서 마크업을 작성할 수 있고, JS 로직도 함께 작성할 수 있다. JavaScript 정식 문법은 아니기 때문에 브라우저에서 이를 해석할 수 없다. 따라서 Babel 변역기로 이를 React.createElement() 함수로 변환하는 과정이 반드시 필요하다. JSX의 특징 JSX는 자바스크립트의 값이다. 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나 함수의 리턴값으로 사용할 수 있다. f..

[ReactJS] React의 특징과 Virtual DOM

React의 대표적인 특징 2가지 선언형 (Declarative Programming) 리엑트는 선언형 프로그래밍 언어이다. 절차적 vs 선언적 절차적(명령형) 프로그래밍 원하는 결과를 만들기 위한 절차(How)에 중점을 두는 프로그래밍 방식 자바스크립트에서 직접 DOM을 조작하는 방식 모든 과정을 일일이 기술해야 하므로 생산성이 저하될 수 있다. 선언적 프로그래밍 원하는 결과가 무엇(What)인지 선언하는 형태로 프로그래밍 하는 방식 자바스크립트에서 DOM 조작은 React에 위임 컴퓨터는 절차적으로 동작하기에 결국 모든 명령을 다 절차적으로 해주어야 하지만, 개발을 하는 개발자는 (최대한 절차적인 부분은 감추가나 위임하고) 선언적인 부분에만 집중하게 하는 방식이 선언적인 프로그래밍 방식이다. 컴포넌트..