회사의 경우 여러 해외 법인이 존재하고 있어, 다국어 지원이 필요하다. 웹페이지의 경우 chrome 등 인터넷 브라우저 내 번역으로도 지원이 가능하지만, 회사에서는 사전적으로 번역하기 보다는, 각 나라에서 이해하기 쉬운 단어로 번역하는 케이스가 필요하게 된다. ​ 이때 사용되는 것이 i18next. i18next란? Javascript로 작성된 국제화 프레임워크로 여러 국가의 언어를 처리할 수 있도록 도와준다. 많이 사용하는 라이브러리로는 react-i18next, next-i18next, next-translation 이렇게 3가지. 각 라이브러리에 장단점과 특성이 존재하므로 알아보고 채택하는 것을 추천한다. ​ 우리의 경우 react-i18next 를 채택하게 되었는데.. 정확히는 채택 당했다. 고로..

현재 프로젝트의 경우 권한 관리를 recoil 로 다루고 있다. ​ Rocoil 이란? 페이스북에서 발표한 React 전역 상태 관리 라이브러리이다. usestate 만을 사용하여 상태 관리를 하게 되면 프로그램이 복잡하게 될 시, props drilling이 일어나게 되는데, Recoil은 이러한 행위를 방지하게 해준다. ​ Recoil의 경우. React 에서 사용하는 라이브러리가 아닌, 외부 라이브러리로 아래의 링크에서 내용을 확인하면 된다. Recoil A state management library for React. recoiljs.org Recoil 라이브러리에 주요한 개념으로는 Atom 과 selector가 있다. ​ Recoil 에서 하나의 전역 상태를 Atom 이라고 하는데, Atom ..

보통 useRef 까지는 흔히들 안다고 생각하는데, 만약 내가 어떤 곳에서 컴포넌트들을 일괄로 정의해두고, 부모 단에서 꺼내어서 사용하는 형태의 로직을 짠다면 어떻게 될까? 이때도 ref를 다루는 case가 존재한다면? ​ 정답은 ForwardRef 이다. 부모에서 자식의 ref 요소들을 다루고 싶을 때 사용하는 문법. ​ 또, 자식단에 있는 function 을 부모에서 사용하고 싶다면? (보통은 부모에서 사용하는 것이 맞지만, 무작정 그렇게 로직을 짜버리면 하위 컴포넌트 들이 많아질수록 최상위, 상위 로직이 비대해짐을 막을 수 없게 된다.) ​ 정답은 useImperativeHandle 이다. 자식의 문법이나 변수를 부모 단에서 사용할 수 있게 해주는 문법. ​ 우선.. forwardRef 부터... ..

컴포넌트의 속성 값을 불러올 수도 있고, value나 style 값 같은 것들을 바꿔줄 수도 있는. DOM을 조작할 수 있게 해주는 ref. 렌더링에 필요하지 않은 값을 참조할 수 있는 ref. 에 대하여 설명하도록 하겠다. ​ ref 는 비교적 간단한 개념이므로 forwardRef 와 useImperativeHandle 를 설명하기 위한 도약 단계처럼 가볍게 짚고 넘어가도록 하겠음. ​ 덧붙히는 말.. 모 부장의 "Ref 는 React 생명주기와 어울리지 않는 문법으로 React 상에서도 지양해야 한다"는 발언에 대하여 설명하도록 하겠다. Ref 를 무분별하게 선언하고, 다른 문법으로 대체가 가능한데도 불구하고 무지성으로 사용하는 것이 문제. (이것은 다른 문법도 동일하다. 각자가 가지는 고유의 특성을..

UseEffect 란. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook임. ​ 기존에는 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었는데. useEffect를 쓰면 함수 컴포넌트에서도 side effect 를 쓸 수 있게 되었다. 라이프사이클 hook(componentDidMount, componentDidUpdate, componentWillUnMount)을 대체할 수 있는 useEffect. 사용 방법 import { useEffect } from 'react'; function useeffecttest() { // 사용법 1. 종속성 매개변수 없음. useEffect(() => { DoSomething(); }); // 사용법 2. 빈 종속성 매개변수 ..

리액트 16.8 버전 이전에서는 함수형 컴포넌트에서 상태 관리를 할 수가 없었음. (컨버팅 하는 사람도 보았다..) 하지만 16.8 버전 부터 Hooks 라는 기능이 도입되며 함수형 컴포넌트에서 상태를 관리할 수 있게 되었다.! ​ ※ Hook : 함수 컴포넌트에서 React state (리액트에서 아주 중요한 개념 중 하나) 와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수. ※ 상태관리(State Management) : 데이터를 관리하는 방법. 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것을 의미. ​ 리액트로 개발을 하다보면 usestate 를 적절한 위치에서 선언하고, 잘 내려주고(상속) 꼬이지 않도록 관리하는 것이 고오급 스킬..

목차 동적인 값을 할당하기 위한 변수, "useState" 초기 렌더링 및 변수 변환에 따른 기능 call을 위한 "useEffect" 컴포넌트의 속성 값을 get/set 할 수 있는 "useRef" useRef + 상속 개념, "ForwardRef()", "useImperativeHandle()" 함수 재사용을 위한 "UseCallback" 쉬운 전역 상태관리를 위한 "Recoil" 커스텀한 다국어 처리를 위한 "i18next" 번외. Axios와 Fetch의 차이 번외. Lazy Import 란?

1. createReactApp 말고 다른 방법으로 하는 방법 예시 코드 하나 작성 --------- 1. History API가 뭔데 - history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 - 뒤로 가기, 앞으로 가기, 페이지 이동 등을 조작할 수 있음 - history 란 세션 기록(페이지 방문 기록)에 대한 접근 방법과 메서드를 제공하는 것 - history.back() : 뒤로가기 - history.forward() : 앞으로 가기 - history.go() : 세션 기록 내 페이지로 이동 // chrome 켜서 확인 시켜주기 2. BrowserRouter 요소의 기능, History API와의 관련성 3. Route 사용법 및 데이터 형식 4. export ..

리액트의 특징 3가지 1. 선언형(Declarative) : 한 페이지를 보여주기 위해 html, css, js로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 const name = 'yoonhyewon' const element = Hello,{name} 2. 컴포넌트 기반 (Component-Based) - 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함 3. 범용성 (Learn Once, Write Anywhere) - js 프로젝트 어디에든 유연하게 적용 가능 - facebook 에서 관리되고 있어 안정적이며, 유명하고, 리액트 네이티브 모바일 개발도 가능함 - 2020년 기준 가장 유명한 프론트엔드 기술 - ..

[], {}, () 대괄호 [] 1. list 나열 혹은 list 인덱스 지정 ex) list[0], list[1] 중괄호 {} 1. dictionary 만들때 {'key':'value'} 2. style tag 지정 시 3. 특정 function에 대해 정의 할 때 function test(){} 형식이 되겠죠.. 4. for / if 등의 문법 상 필요할 때 소괄호 () 1. for나 if 같은 문법에 조건 식 넣을 때 JSON (Javascript Object Notation) 데이터를 저장하거나 전송할 때 많이 사용되는 "경량" Data 교환 형식 쉽게 말해서 javascript에서 객체를 만들 때 사용하는 표현식을 의미 -- 사람 기계 모두 이해하기 쉬우며 용량이 작아서 데이터 전송에 많이 쓰이..

// settimeout : 실행할 함수, 초(밀리세컨 단위) [callback] 콜백함수 : 간단하게 다른 함수에 매개변수로 넘겨준 함수를 의미 매개변수로 넘겨받은 함수는 일단 매개변수 먼저 넘겨받아둔 상태에서 일정 시점(때)가 되면 나중에 호출(call back)한다는 의미 // 콜백함수가 필요한 이유 1. 변수의 유효범위 (scope) 2. 동기/비동기(synchronous/Asynchronous) -> 이런 걸 위해서 함수를 활용하는 하나의 방법론적인 부분 유용한데.. 내가 a~z까지 console 찍는 행위를 제어하고 싶으면 코드가 너무 복잡해진다.. -> Callback Hell -- 작성자 입장에서는 크게 문제가 안될 수도 있으나 이걸 추후에 누군가 유지보수 한다고 생각하면? hell 이다...

'part-2/02_promiseConstructor.js' 파일을 구현하고, 테스트를 통과합니다. callback이라는 매개변수(parameter) 대신, Promise의 resolve, reject 함수를 이용하세요. part-2/03_basicChaining.js은, 앞서 작성한 getDataFromFilePromise를 이용해서 풀어야 합니다. fs 모듈을 직접 사용하는 것이 아닙니다. getDataFromFilePromise를 이용해, 'files/user1.json' 파일과 'files/user2.json' 파일을 불러오고, 두 파일을 합쳐서 최종적으로 두 객체가 담긴 배열을 만드는 것이 목표입니다. 파일 경로를 찾을 때, user1Path 및 user2Path를 이용하세요. then이 어떤 ..