記錄

React-query? - 기존의 Redux, Recoil 등의 전역 상태관리 라이브러리를 사용하여 비동기 데이터를 처리하는 방식은 client state를 처리하는 데는 효과적이나 server state를 처리하는데는 효과적이지 못함 - 프로젝트 크기가 커질수록 api 호출 후 전역 상태를 업데이트해줘야 하는 상황마다 작성해야 하는 코드가 많아지고, 비동기 데이터 처리 로직으로 인해 store가 과도하게 비대해지는 문제점이 있음 1.api 호출 후 응답 데이터 > server state 2.ui 개발 위한 데이터(theme 등) > client state => 전역상태관리 라이브러리가 본연의 역할인 전역으로 관리해야 할 데이터(Global State)를 관리하는 데 집중할 수 있도록 Server 데이터..

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 변경) 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신해 전체적인 트래픽이 감소할 수 있고, 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있는 장점이 있다. 위와 같은 장점이 있으나, 그에 따른 구조적 단점 또한 존재한다. 첫..

과제 진행 전에 연습용으로 JS로 기능 구현해본 것을 정리해보았다. .dark 클래스가 body에 추가되면 body에 다크 모드로 지정한 css가 적용되도록 했고, 클릭 시 버튼 아이콘이 회전하도록 했다. localStorage를 이용해 새로고침을 해도 이전에 설정한 상태가 유지되도록 했다. HTML JS Shop 패션 액세서리 디지털 0 JS const DarkModeToggle=()=>{ const body=document.body const mode=document.querySelector('.mode') const icon=mode.querySelector('i') //dark/light mode localStorage if (localStorage.getItem('darkMode')===null..

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 ..

* Type Annotation 대상의 타입을 명시적으로 알려주는 것으로, 변수나 함수, 객체 속성명 뒤에 :type을 써서 데이터 타입을 지정할 수 있다. 이 Type annotation을 사용하여 type 검사를 수행한다. 필수사항은 아니라 타입을 직접 지정하지 않으면 타입스크립트가 타입을 추론해준다. const val: number = 123 //변수 val의 type을 number로 지정해줌 원시 타입:: String, Number, Boolean string(문자열) - JS에서 나타나는 문자열과 거의 동일하게 활용 가능(백틱을 이용한 표현식 등) number(숫자) boolean(true, false) const str: string = 'STRING' //문자열 const num: numbe..

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이 처음으로 렌더링될 떄를 말한..