記錄

json-server? json 파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴로, 간단히 말하면 가짜 서버를 구축할 수 있게 해주는 도구이다. 프로젝트를 진행할 때 프론트엔드는 백엔드에서 데이터 가져오거나, 전달한 데이터가 db에 저장되어야만 후속 개발이 진행 가능한데, 백엔드 api가 개발되지 않은 상태라면 이를 확인할 수 없기 때문에 개발 스케줄에 영향을 미치게 된다(반대로 백엔드에서도 프론트가 만들어지지 않으면 개발을 진행할 수 없다). 그래서 api가 만들어지지 않은 상태에서도 스스로 테스트하기 위해 사용하는 것이 json-server이다. json-server 사용 방법 1.json-server 설치 //global로 설치 npm i -g j..

01 SPA (Single Page Application) 공식문서 : https://ko.reactjs.org/docs/glossary.html SPA(Single Page Application)는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS, CSS 등을 모두 로드(=처음에 모든 리소스를 한 번에 다운로드한다)하는 애플리케이션으로, 서버로부터 새로운 페이지를 불러오지 않아 페이지가 다시 로드되지 않는다. 페이지 간 이동 시(=URL 변경) 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신해 전체적인 트래픽이 감소할 수 있고, 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있는 장점이 있다. 위와 같은 장점이 있으나, 그에 따른 구조적 단점 또한 존재한다. 첫..

01 Inline style html 태그 안에 직접 입력하는 방법으로, style={ } 형식으로 입력한다. 안에는 json 형식으로 { 속성명: '속성값' } 으로 입력한다. 일반적인 css 문자열을 작성할 때 사용하는 케밥 케이스(kebab case)가 아닌 camelCase를 사용하는데, JSX에서는 인라인 스타일을 자바스크립트 객체로 받아들이기 때문이다. //html, kebab case 텍스트 //jsx, camelCase 텍스트 다음과 같이 Javascript 객체를 이용해 작성할 수도 있다. const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')' } function HelloWorldComponent(){ retur..

공식 문서 : https://ko.reactjs.org/docs/lists-and-keys.html * 공식문서 내용을 참고로 작성한 글이기 때문에 위의 공식 링크를 읽는 걸 추천합니다. List List 는 목록이라는 뜻으로, 프로그래밍에서는 같은 아이템을 순서대로 모은 것이 리스트에 해당한다. 이를 위해 사용하는 자료구조는 배열(Array)이다. 배열은 자바스크립트의 변수나 객체들을 하나의 변수로 묶어놓은 것이다. List를 이용해 여러 개의 컴포넌트 렌더링하기 서버에서 내려주는 데이터만큼 렌더링할 수 있도록, 반복해야 하는 개수만큼 return하지 않고 Javascript의 map() 을 이용해 여러 개의 컴포넌트를 렌더링할 수 있다. //map 사용 X export default function ..

00 Lifecycle 생명주기 Life cycle 관련 공식문서: https://ko.reactjs.org/docs/state-and-lifecycle.html 생명주기는 컴포넌트가 브라우저 상에 나타나고(componentDidMount), 업데이트되고(componentDidUpdate), 사라지게 될 때(componentWillUnmount) 호출되는 메소드들이다. 클래스형 컴포넌트에서만 사용 가능하다. 아래는 생명주기를 설명한 다이어그램이다. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 01 Life cycle의 3단계 마운트 Mount 마운팅 Mounting이란 DOM에 요소를 붙이는 것, 즉 DOM이 처음으로 렌더링될 떄를 말한..

React 공식문서: https://ko.reactjs.org/docs/state-and-lifecycle.html https://ko.reactjs.org/docs/faq-state.html State state는 영어로 상태를 의미하는 단어로, 리액트에서는 React component의 상태, 더 정확히는 component의 변경 가능한 데이터를 의미한다. props와 마찬가지로 App component 렌더링에 영향을 주는 JavaScript 객체로, 개발자가 직접 정의해서 사용한다. 불변성 immutable state는 불변성(immutable), 변하지 않는 성질을 가지고 있다. 이는 프로그래밍에서는 메모리 영역의 값을 직접적으로 변경하지 않는다는 것을 의미한다. 불변성을 지키지 않고 메모리 영..

* React 공식 문서 : https://ko.reactjs.org/docs/components-and-props.html 00 Components 컴포넌트(Component)는 리액트를 구성하는 가장 작은 단위로, 이 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 작은 컴포넌트들이 모여서 하나의 컴포넌트 구성하고, 이 컴포넌트들이 모여 하나의 페이지 구성하는 구조로, 코드 유지 보수 시 필요한 컴포넌트만 확인하면 되기 때문에 개발시간 및 유지 보수 비용이 감소한다. 컴포넌트는 데이터(props, 속성)를 입력받아 View(state)상태에 따라 DOM node를 출력한다. 컴포넌트의 이름은 반드시 대문자로 시작해야 하며, 'props' 라..

00 리액트의 탄생 이유? JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 DOM의 변경이 필요하다. 브라우저의 DOM Selector API를 사용해 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 하는데, 이를 위해서 DOM 노드를 직접 조작해야 한다. 이런 동작이 크게 발생하지 않는 웹사이트라면 상관 없겠지만, 현대의 웹페이지처럼 다양한 동작이 발생하는 경우에는 코드의 유지보수 및 관리가 어려워진다. 이를 해결하기 위해 프레임워크를 활용해 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해 업데이트 작업을 간소화하는 방식을 사용했다. 리액트의 경우 위와 다르게 데이터가 바뀔 때 DOM을 어떻게 업데이트 할 지 고민하는 것이 아니라 ..