Clipper 0기 React 스터디

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다.그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하게 된다

리액트는 mpa가 아닌 템플릿 하나를 이용해 동적으로 화면을 바꾸는 spa를 사용한다.

바탕색을 aliceblue로 바꿔보자. 이는 index.css에 넣는다.컨테이너를 만들어보자. 이는 App.js에 작성한다.컨테이너에 대한 디자인은 App.css에 작성한다. 그리고 이를 App.js에서 import하면 적용시킬 수 있다.할 일 목록을 일일이 하나씩 다

할 일 목록 추가하기 할 일 목록 추가하는 부분을 해보자. 할 일 목록을 입력하는 창과 입력 버튼을 구현할 것이다.

React Hooks란 무엇인가? React Hooks는 class없이 state를 사용할 수 있는 기능이다. > ### React Hooks가 필요한 이유? Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발

리액트 Hooks를 이용해서 To-Do 앱을 함수형 컴포넌트로 바꾸기 클래스 컴포넌트에서 함수 컴포넌트로 바꾸는 순서 컴포넌트 자체를 바꾸기 이 부분을 아래와 같이 바꾸자. 그리고 더이상 Component를 extends하지 않기 때문에 이 부분을 아래와 같이 바

지금까지 하나의 컴포넌트에 모두를 넣었지만, 컴포넌트를 분리한다면 구분하기도 쉽고, 재사용성을 높일 수 있다.component 폴더를 생성하고 안에 List.js 파일을 생성해준다.그리고 함수형 컴포넌트를 작성해준다. (rfc + enter을 하면 바로 함수형 컴포넌트

..

##Drag and Drop 기능 추가하기 Drag and Drop 기능 구현 순서 HTML 드래그 앤 드롭 API를 사용하여 원하는 목록을 드래그 가능하게 만듭니다. (https://developer.mozilla.org/ko/docs/Web/API/HTMLDraga

React.memo 를 이용한 컴포넌트 렌더링 최적화 현재 Todo 앱의 문제점! 현재 Todo 앱에서 App , Lists, List, Form 컴포넌트로 나눠져 있다. 이렇게 나눠준 이유는 재사용성을 위해서이기도 하지만 각 컴포넌트의 렌더링의 최적화를 위해서 이

npx create-react-app <폴더 이름>이라는 명령어로 간단하게 설치할 수 있다.https://www.themoviedb.org/이 과정을 진행하면 API_KEY를 받을 수 있다.Axios는 브라우저, Node.js를 위한 Promise API

<App.js>function App() { return ( );}export default App;import React from 'react'import "./Nav.css"export default function Nav() { return (}.n

영화 나열을 위한 Row 컴포넌트 생성하기 전체 구조 Row 컴포넌트 생성 App에 Row 가져오기 다음과 같이 Row Props를 내려준다. ** 내려준 Props 가져오기 ** 영화 정보 가져오기 ** UI 생성하기 ** ** 그리고 배경을 검

React Router Dom React Router Dom이란? React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리, React Router DOM은 앱 및

debounce를 사용하면 검색 입력에 입력할 때 입력 결과가 나타날 때까지 지연이 생긴다. 이 기능은 debounce(디바운스)라는 function에 의해 제어된다. debounce function은 미리 결정된 시간 동안 사용자가 타이핑을 멈출 때까지 keyup 이

테스트 주도 개발(TDD)란 무엇인가? Test Driven Development란? 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성합니다. 테스트 코드를 작성한 후, 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성한다. TDD를 하면 좋은 점 TDD를

TDD를 이용해서 만들 앱 소개 +, -, 그리고 on/off 버튼이 있다. 거기서 +를 누르면 숫자가 올라가고 -를 누르면 내려간다. 그리고 on/off 버튼(푸른색)을 누르면 +,- 버튼이 작동을 안하고 색깔이 변하는 간단한 앱을 만들어 보자. 그리고 궁극적으로

NextJS Next JS란? React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크이다. (리액트는 라이브러리) React로 개발할 때 SPA(single Page Application)을 이용하며 CSR(C

Typescript 란? TypeScript 가 나오게 된 배경 JavaScript는 원래 클라이언트 측 언어로 도입되었다. 그런데 Node.js의 개발로 인해 JavaScript를 클라이언트 측 뿐만이 아닌 서버 측 기술로도 활용되게 만들었다. 그러나 JavaScr

Next.js 13 버전 Next.js 13 버전을 이용해서 간단한 게시판을 생성하는 앱을 만들어보자. next app 설치 우선 next app 설치를 위한 폴더를 만들자. 그리고 터미널에 설치해주자. 백엔드 서비스를 위한 포켓베이스 이용하기 / 사용법 처음에

1\. Automatic batching 2\. Suspense on the server 3\. New APIs for app and library developers 4\. Transition배칭(batching)은 업데이트 대상이 되는 상태값들을 하나의 그룹으로

리덕스(Redux) Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너이다. 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 그래서 Redux는 State을 관리하는 것 Redux 데이터 Flow(strict unidirectional dat

Redux 미들웨어는 액션을 dispatch하고 reducer에 도달하는 순간 사이에 사전에지정된 작업을 실행할 수 있게 해주는 중간자이다.로깅, 충돌 보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어를 사용한다.리덕스를 이용할 때 나오는 로그를 찍어

Redux Thunk 리덕스 Thunk란? 리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이 redux-thunk이다. 이것도 앞서 만들어본 logger Middleware 처럼 리덕스 미들웨어이며, 리덕스를 개발한 Dan Abramov가 만들었다.

리덕스 툴킷(redux toolkit) Redux 툴킷은 Redux 로직을 작성하기 위한 공식 권장 접근 방식이다. Redux 코어 를 둘러싸고 있으며 Redux 앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있다. Redux 툴킷은 제안된 모범 사례

어떠한 프로그램을 다운 받는 과정을 굉장히 간단하게 만들기 위해서이다.하지만, 프로그램을 설치하는 과정에서 에러가 발생하는 경우가 있다. 갖고 있는 서버, 패키지 버전, 운영체제 등등에 따라 프로그램을 설치하는 과정 중에 많은 에러들이 발생하게 된다. 그것만이 아니라

Docker를 사용할 때의 흐름 감잡기 항상 도커를 사용할 땐 먼저 도커 CLI에 커맨드를 입력한다. 그러면 도커 서버 (도커 Daemon)이 그 커맨드를 받아서 그것에 따라 이미지를 생성하든 컨테이너를 실행하든 모든 작업을 하게 된다. 실제로 커맨드를 입력해보기

리액트를 위한 도커 파일 작성하기 도커로 어플을 실행하기 위해 현재까지는 Dockerfile 한 가지만 만들었지만, 실제로는 Dockerfile을 개발단계를 위한 것과 실제 배포 후를 위한 것을 따로 작성하는 게 좋다. 그러므로 개발단계를 위해서 Dockefile이