COCO World

개요 React 라이브러리로 개발된 애플리케이션을 웹페이지에서 처음 로드할때 index.js와 index.html로 인하여 처음 실행된다. 어떻게 진행되는지 간단히 알아보자. src폴더의 index.js 다른 곳에서는 보이지 않지만 웹 페이지가 로드되면 제일 처음 실행되는 파일이다. 작성된 코드가 그대로 실행되는 것이 아니라 코드의 변형된 버전이 실행된다. 프로젝트 설정에서는 스크립트를 통해 코드를 변형 및 최적화하는데 그 작업이 실행되고 있는 것이다. 프로젝트 설정이란? 더보기 예를 들어, import './index.css'; 라는 선언으로 CSS파일을 가져오는 명령어를 실행하였지만 일반적인 자바스크립트 파일에서는 적용되지 않는 명령어임에도 실행되게 해주는 프로젝트 설정이다. 역할 react-dom으..

1. Redux 설치 리액트에서 리덕스를 사용하기 위하여 패키지 설치를 해줘야 한다. // 한번에 설치하기 yarn add redux react-redux // 아래처럼 따로 설치하기 yarn redux yarn react-redux 2. 폴더 구조 생성 [1] src 폴더 안에 redux 폴더를 생성 [2] redux 폴더 안에 config, modules 폴더를 생성 [3] config 폴더 안에 configStore.js 파일을 생성 각각 폴더와 파일의 역할 redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 state 관리소'인 Store를 만드는 설정 코드들이 있는 파일 modules : 우리가 만들..

1. React Hooks 리액트 hook은 React 16.8버전에 새로 추가된 기능으로, 함수형 컴포넌트에서 react state와 생명주기 기능(lifecycle features)을 '연동(hook into)'할 수 있게 해준다. hook은 Class안에서 동작하지 않는데, useState를 예시를 들면 class를 사용하지 않고도 상태를 가질 수 있게 된 것이다. 이전에 리액트가 겪던 문제들을 해결해주며, 클래스형 컴포넌트를 사용하지 않고도 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능해 졌다 리액트는 useState, useEffect 같은 내장 Hook을 몇 가지 제공한다 또한 props, state, context, refs 그리고 lifecycle과 같은 리액트 개념에 좀 더 ..

1. CSS-in-Js : 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 자바스크립트를 이용해 CSS 코드를 만들어내는 것이다. 이전 주차에서는 css파일을 생성 후, 컴포넌트에서 사용할 모든 CSS을 만들어놓은 CSS파일 안에 선언하여 담아놓고, 컴포넌트에서 className 호출을 통해 CSS파일에서 가져다가 CSS코드를 사용하였다. 이번엔 styled-component를 통해 더 간편히 컴포넌트를 꾸밀 수 있는 CSS-in-Js 방식을 사용해보자. 2. styled-components : styled-components는 우리가 리액트에서 CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다. emotion, tailwind..

1. 컴포넌트(Component) 리액트로 만든 앱을 이루는 최소한의 단위이다. 기존의 웹 프레임워크는 MVC방식으로 분리해 관리하여 각 요소의 의존성이 높아 재활용이 어려웠다 반면 컴포넌트는 MVC의 View를 독립적으로 구성하여 재활용이 가능하다 UI를 재사용 가능한 개별 조각으로 나누어, 개별적으로 작성하고, 재사용한다. 2. 컴포넌트 종류 함수형 컴포넌트 클래스형 컴포넌트 - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다

1. export named export라고도 함 import시 -> import export할때 객체 함수 이름 ex) import 선언된 이름 from '파일경로' 2. export default 개발자가 원하는 이름으로 import할 수 있음 ex) import 원하는 이름 from '파일경로' 3. 정리 한 모듈 안에 여러 가지 함수를 선언한 경우, export를, 한 모듈 안에 함수 대상이 하나이면 export default를 사용하자 한 모듈 안에 여러가지 함수를 선언했을 때 export default를 선언할 경우, 협업 시 헷갈릴 수 있다 export 를 사용할 경우 사용한 이름을 그대로 가져오기 때문에 관련정보 파악이 쉽다 export default를 사용할 경우, 협업하는 팀원들끼리 명..

1. 불변성 : 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다. 이를 이해하기 위해선 자바스크립트의 원시형과 참조형에 대해 알아보아야 한다. 원시형 (Boolean, Number, String, null, undefined, Symbol) : 불변성을 유지하는 타입 객체형 (Object) : 변경이 가능한 타입으로 불변성을 갖지 못하는 타입 [1] 원시형 예시 아래의 예시는 메모리 영역을 2개 사용한 것으로, 값이 바뀐 것이 아니라 변수 a는 처음에 할당을 하고나서, 다른 메모리에 재할당을 한 것이다. = 즉, 메모리에 재할당을 하였지 불변성을 유지하는 특징이 있다. let a = '나는 원시형이다'; a = '사실 원시형이 아니야'; [2] 객체형 예시 메모리 영역은 그대로 이지만, 그 메모..

1. SPA와 MPA 렌더링이란? : 웹 애플리케이션 상에서 데이터를 표시하는 행위 🌻 SPA(Single Page Application) SPA는 한 개의 페이지로 구성된 애플케이션으로 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 읽음으로써 사용자와 소통하는 웹 앱이다. 이러한 방식은 연속되는 페이지가 렌더링하면서 주는 불편함을 줄여주기 때문에 사용자 경험의 간섭을 막아주고 더욱 자연스럽게 동작하도록 만들어준다. 🌻 SPA의 특징 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 받아온다 이후 새로운 데이터 요청이 있을 때 필요한 데이터만 전달받아서 페이지를 갱신하기 때문에 반응성이 좋다 때문에 SPA는 CSR(Client Side Rendering)방식으로 렌..