해나아부지 개발일지

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. NextJS App을 개발하고 있다면 next.confing.js 파일에 옵션을 적용해 볼 수 있다. // next.config.js module.exports = { productionBrowserSourceMaps: true, } 출처 소스맵이란? - 웹팩 핸드북 S..

현재 부분적으로 회사의 React App을 NextJs App으로 마이그레이션 중이다. 회사 NextJs App의 React 버전을 16.8.0 -> 17.0.39로 업데이트를 하고 난데없는 에러가 발생하였다. 에러의 발견 [Type Error] 'ReactElement | Component | null' is not a valid JSX element. 빌드 중 아무 문제 없던 아이콘 컴포넌트에서 에러가 발생한 것이다. 해당 컴포넌트는 동적으로 필요할때만 컴포넌트를 import 하여 App의 성능을 높여줄 수 있는 NextJs의 dynamic()을 활용한 Icon 컴포넌트였다. 아무 문제 없이 사용해왔기에 더 당황스러웠다. 문제 해결과정 오류 메세지를 기본으로 구글링에 들어갔다. dynamic()의 r..

What is React? 리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. Framework: App 설계/개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 등이 제공되는 인터페이스 Library: 특정 기능에 대한 API(도구 / 함수)를 모은 집합 라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다. 즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다. 라이브러리는 가져다가 사용하고 프레임워크는 그 안으로 들어가서 사용한다는 느낌으로 접근할 수 있습니다. 라이브러리와 달리 프레임워크는 이미 프로그래밍 규칙이 있어 극히 일부분만 조정을 해주면 목적을 달성할 수 있다. Main Concepts ..

React는 상태와 속성을 이용한 컴포넌트 단위 개발이라면, Redux는 컴포넌트와 상태를 분리하는 것이다. (상태가 컴포넌트에서 제거되면 Class Component를 보다 단순한 Functional Component가 된다) 참고로, Redux에 대한 대표적인 오해 중 하나가, Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리로 오해하는데, Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리이다. 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. ..

React에서 데이터를 다룰 때 props(properties: 속성)를 써야하는지 state(상태)를 써야하는지 구분하는 것은 매우 중요하다. 정적(static) vs 동적(dynamic) React의 근간이 되는 컴포넌트(Component)는 Tree 구조처럼 계층을 갖는다. props는 정적인 데이터이다. 쉽게 말해 상위 컴포넌트(부모 컴포넌트)의 데이터를 전달받아 사용하는 데이터이다. 반면 state는 동적인 데이터이다. 클라이언트에서 유저의 요청 및 이벤트 혹은 비동기처리 등에 의해 실시간으로 변화하는 데이터이다. function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render..

const element = ( Hello, world! ); JSX란? const element = Hello, world!; Html과 JavaScript를 Mix 해놓은 듯한 코드는 Javascript를 확장한 문법이다. JSX라고 하면 특정 언어 같아 보이지만, JavaScript의 모든 기능이 포함되어 있다. 모든 기능이 포함되어 있다는 말은 ES6 문법을 사용할 수 있다는 말과 같다. React에서 JSX사용은 필수가 아니지만 가독성 측면에서 JSX 사용은 효과적이다.. 또한 React에서 에러 및 경고 메시지를 표시하여 도움을 준다. JSX에 표현식(javascript) 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; React..