이번 프로젝트에서 파티모집글을 작성할때 mobiscroll을 사용해 날짜와 시간을 설정할수있게 하였는데 그 과정에서 자꾸 시간이 내가 설정한 시간과 다른 문제가 생겼다. 대체 무슨이유인가 구글링해보니 몽고 DB에서는 시간이 UTC로만 저장이 된다고 한다. 공식문서에서도 알아서 바꿔서 쓰라는 내용이 있었다. (https://www.mongodb.com/docs/v3.2/tutorial/model-time-data/) 어차피 한국시간만 쓸거니 하드코딩으로 +9시간을 해줘도 괜찮지만 찾아보니 timezone에 맞게 UTC를 변환해주는 라이브러리가 있다고 한다. 1. 설치 : # yarn add moment-timezone 2. 코드 (도서 : 리액트를 다루는 기술 p472, src/api/posts/posts..

패키지설치 1. 먼저 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지인 @fortawesome/fontawesome-svg-core 설치합니다. yarn add @fortawesome/fontawesome-svg-core 2. 그 다음 Font Awesome 아이콘 대한 패키지를 설치해야 합니다. Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데요. 여기서는 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치하겠습니다. (항상 3개를 다 설치할 필요는 없고 사용하시고 싶은 아이콘이 속한 카테고리만 설치하시면 됩니다.) yarn add @fortawesome/fre..

1. 상태 관리 도구(State Management Tools)란? 상태 관리 도구가 왜 필요할까? 👉 먼저 상태란? React에서 State는 component 안에서 관리되는 것이다. 아래는 Class component 상태 관리 예시이다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; // 여기서 관리 } render() { return ( Hello World! It's {this.state.data.toLocaleTimeString()}. ); } } 👉 Component 간의 정보 공유 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 자식 컴..

1. CRA로 프로젝트 생성하기 리액트 프로젝트 설치하고 싶은곳까지 터미널로 이동 후 입력 ls cd 폴더이름 yarn create react-app 프로젝트 #프로젝트 생성 2. yarn 에서 styled-components 설치하기 yarn add styled-components 3. 리덕스 설치 yarn add redux react-redux 아래와 같은 의미 yarn add redux yarn add react-redux 리덕스 툴킷 설치 yarn add @reduxjs/toolkit 4. 폴더 구조 생성하기 이미지와 같이 폴더 구조를 생성 src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더를 생성 config 폴더 안에 configStore.js파일을..

렌더링이란? 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?? 이것의 해답은 바로 초기 렌더링과 리렌더링에 있다. 초기 렌더링 리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render() 특징 render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되..

SPA (Single Page Application) 이란? SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. 반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. 그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다. 즉, 웹 사이트의 전체 페이지를 하나의 페이지 담아, 서버로부터 새로운 페이지를 불러오지 않고, 화면을 동적으로 표현하는 것을 웹 사이트나 웹 애플리케이션을 SPA 라고 한다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 ..