React 13

스마트폰의 앱 종류는 네이티브 앱, 크로스 플랫폼, 하이브리드 앱 세 종류로 나누어진다. 네이티브 앱 Swift, Kotlin, Java 등으로 OS에 특화된 개발이며 뛰어난 성능, 많은 기능을 사용 가능하다. 다만 필요한 지식이 많아 개발 속도가 느리다는 것이 단점이라고 한다. 크로스 플랫폼 React Native, Flutter 등 하나의 언어로 여러 플랫폼의 개발이 가능하다. 빠른 개발이 가능하지만 네이티브 대비 낮은 성능 및 기능 제한이 있다. 하이브리드 앱 하나의 언어로 여러 플랫폼을 개발하며 장단점은 크로스 플랫폼과 같다. React Native는? android와 iOS 각각 만들기 보다는 JavaScript 하나로 만들어버리자고 나온 것이 React Native이다. Expo는? React..

Redux와 비동기 코드 ※ 리듀서에는 부가기능이 없는 순수 함수만 들어가야 하며 비동기 코드가 들어가서는 안된다!!! 리듀서의 목적은 상태를 편집하는 것인데, 내부에서 http 요청을 보내게 된다면 리덕스의 개념에 완전히 반대되는 일이기 때문. 동기, 비동기는 절대... 안된다... createAsyncThunk() 비동기 작업을 처리하는 action을 만들어 주는 기능으로, redux toolkit에 내장되어있는 함수이다. createAsyncThunk 함수를 만들면 자동적으로 비동기함수이름.pending 비동기함수이름.fulfilled 비동기함수이름.rejected 가 생성되는데, 세가지 상태별로 reducer가 필요하다. 이 세가지 상태들은 비동기적인 작업과 관련된 것으로 reducers와 별개로..

Redux | createStore, subscribe, getState, dispatch React Redux | connect, useSelector, useDispatch Redux toolkit | configureStore, createSlice, createThunk Context 프로젝트가 커지면 커질수록 설정이 복잡해져 관리 또한 복잡해질 가능성이 있다. (Context를 여러 번 중첩해서 사용해야 할 가능성 높아짐) Redux 유동적인 상태 관리 라이브러리로 중앙 저장소 store(딱 하나만 만들 수 있음)를 사용하여 전체 애플리케이션의 모든 상태를 저장한다. (인증 상태, 테마 등등) 관리가 어렵지 않나? -> 직접 관리할 필요가 없다 컴포넌트가 저장소를 구독(subscribe) 하고,..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

새싹 프론트엔드 과정에서 개인 프로젝트로 React를 이용하여 포트폴리오를 만들어 보았습니다. 포트폴리오를 만들며 와이어 프레이밍을 어떻게 하였는지, 컴포넌트를 어떻게 구성했는지에 대한 기록을 남기는 글입니다. 1. 와이어 프레임 와이어 프레임은 기존에 제가 사용하던 그림 툴을 사용하였습니다. 전체적인 구조와 분위기를 잡았고, 내부 요소들의 배치 구성을 대체적으로 잡았습니다. 2. 컴포넌트 구성 Main | 인트로 페이지 Header | 포트폴리오임을 명시하기 위한 일종의 타이틀 Navbar | 구성물이 담긴 Section 내부를 이동하기 위한 바 Section | AboutMe, Skills, Project, Career, Education 컴포넌트를 모은 곳 AboutMe | 이름, 연락처 등 자기소..

React는 Node.js를 기반으로 구동되는 라이브러리(패키지)이다. Node.js의 Webpack, Babel 등의 여러 가지 패키지들을 이용하여 동작하는데, 이러한 기초 설정 작업을 보일러 플레이트 Create React App으로 대체할 수 있다. 보일러 플레이트를 사용하기 위해서는 npx가 필요한데, 보통 Node.js와 함께 설치되지만 설치가 되어있지 않다면 아래 명령어로 설치를 하면 된다. npx --v // 버전코드(3자리 숫자)가 나오면 정상 npm install -g npx // 버전코드가 나오지 않았을 때 이제 npx가 설치되어 있다면 아래 명령어로 React 프로젝트를 생성할 수 있다. npx create-react-app 프로젝트이름 만약 node_modules파일이 없는 리액트 ..

Why React? 왜 React를 사용해야 하는가? React를 사용하는 이유 세 가지를 유데미 한입 크기로 잘라먹는 리액트 강의를 통해 살펴보았다. 01. React는 Component 기반의 UI 라이브러리이기 때문이다. 산탄총 수술(Shotgun Surgery) 중복 코드로 이루어진 사이트 안, 중복 코드들의 변경사항으로 인해서 중복 코드들이 포함되어있는 모든 페이지를 하나하나 수정하는 것 웹 페이지를 만들면서 공통 요소를 안 쓸 수는 없다. 하지만 그렇다고 수정사항이 생길 때마다 산탄총 수술을 할 필요는 없다. React에서는 중복될 거라고 예상되는 header나 nav, footer 등을 컴포넌트로 만들어 필요한 페이지마다 컴포넌트의 이름으로 불러와 사용하게 되는데, 이렇게 재사용되어야 하는 ..

01. Node.js JavaScript's Runtime (자바스크립트 실행환경) 자바스크립트의 코드를 브라우저 없이 컴퓨터에서도 실행할 수 있게 되는 것. 자바스크립트의 실행환경이라고도 할 수 있으며 자바스크립트의 코드를 브라우저 없이 컴퓨터에서도 실행할 수 있게 되는 것. React.js는 Node.js위에서 돌아가는 기술이기 때문에 React.js를 다루기 전에 Node.js는 필수적으로 알아야 한다. cf.) 런타임(실행환경)이란 특정 언어로 만든 프로그램을 실행할 수 있는 기본 환경을 의미한다. 예를 들어 자바스크립트를 실습하고 직접 실행해보기 위해서 브라우저(크롬)를 이용하였는데, 이런 상황에서는 크롬 브라우저가 자바스크립트의 런타임이 되는 것. 자바스크립트 파일은 node.js가 설치되어 ..

Components와 Props 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것. function Btn(props) { return ( {props.text} ); } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 버튼을 생성하는 Btn과 화면에 출력해 주는 App 두 개의 함수를 지정한다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리..

1단계 | 분을 입력하면 시간으로 변환하는 코드 작성 사용자가 입력한 값을 가져와 변환을 해야 하는데, 입력된 값은 event.target의 value 값을 이용한다. 데이터를 업데이트 하는 방법은 setState 함수를 사용한다. ex.) const [minutes, setMinutes] = React.useState(); 에서 minutes의 값을 바꾸고 싶을 때, setMinutes(event.target.value); 만약 minutes input의 onChange 함수를 삭제하면 값이 업데이트되지 않기 때문에 초깃값 0만 출력이 된다. (값을 수정할 수도 없음) onChange는 바닐라JS의 addEventListener와 같은 듯..? cf.) react는 html이 아니기 때문에 클래스나 l..