이번주 스터디 주제인 redux로 todolist 만들기를 진행하면서 투두리스트의 각 아이템을 만드는 컴포넌트인 Todo 컴포넌트와, Todo컴포넌트들의 목록으로 이루어진 Todolist컴포넌트를 만들면서 React.memo로 최적화 하는 코드를 알게 되었다.기존에 알

이번 주차에는 Redux를 모듈화하는 방법에 대해 공부해보았다.Todo나 User 처럼 특정 상태에 따라 분리해서 관리할 수 있다.먼저 이전의 User에 대한 경우는 ContextAPI로 관리하고 있기 때문에 투두리스트에 관한 리듀서를 만들어 보았다.만드는 순서는 다음

author: tave web study - 이정수요 문제를 해결하려고(red, green, blue 박스마다 각각 fire 버튼이 있고, 버튼을 누르면 해당 박스의 색상으로 container의 색상들이 모두 변경된다.이를 위해서는 각각의 container들이 (que

React 날짜 선택 input&calendar 컴포넌트 만들기(1) 에서 이어지는 글 입니다.사용자가 입력한 날짜가 올바른 날짜인지 확인한다.? 올바른 날짜의 조건?1\. 인풋값에 들어올 날짜는 이미 목격한 신고에 대해 접수하기 때문에 오늘 날짜보다 이후의 날짜는 들

이전에 편지를 보관하는 서비스인 서함 프로젝트를 진행하면서 다양한 인풋값들을 다룬적이 있었다. 그 중에는 날짜를 입력받는 필드가 있었는데 웹버젼에서는 모달창을 띄워서 입력받았고, Electron.js를 사용하여 만든 데스크톱 어플리케이션에서는 react-calendar

컴포넌트를 잘만든다 -> 유지보수를 용이하게 한다.컴포넌트를 잘 설계하는 방법<해결하고자 하는 문제>재사용 가능한 컴포넌트 만들기변경에 따른 부수효과를 최소화 하기<목표>관심사가 분리된재사용성이 높고 유지보수하기 용이한 컴포넌트 만들기<컴포넌트의 역할>

onClick 이벤트가 발생한 상황에서 event 객체의 event.target과 event.currentTarget의 차이점을 정리하고자 한다.표준은 targetrhk currentTarget이지만, IE에서는 target은 srcElement로 사용되며 curren

contextAPI + styledComponent를 가지고 재사용이 가능한 아코디언 UI를 만들어보자아코디언 UI란 ?모바일/웹에서 콘텐츠를 접어서 페이지길이를 관리할수 있도록 만든 UI이다. 시각적인 복잡성을 줄이고 사용자가 당면한 작업과 가장 관련이 있는 콘텐츠에

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.useMemo에서 memo는 memoization을 뜻하는데, 해석하면 '메모리에 넣는다'는 의미이다.컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을경우 유용한 기능이다.예를 들어 '로그인정보, 테마, 어플리케이션 환경설정'등이 있다. 많이 사용되는 리덕스, 리액트라우터, styled-components의 라이브러리도 ContextAPI를 기

의미 : 클라이언트가 서버로 요철할 때 보내는 데이터를 의미구조Header http메서드 방식, 클라이언트의 정보, 브라우저의 정보, 접속한 URL등등과 같은 정보 Body 보통 비어있을수 있고, 특정 데이터를 담아서 서버에게 요청을 보낼 수 있다. Http

DDL(Data Definition Languate)CREATE테이블 생성create table student (칼럼명 타입 조건(not null 등),칼럼명 타입 조건(not null 등),칼럼명 타입 조건(not null 등),PRIMARY KEY \~~ );ALT

DB(DataBase)엑셀과 DB의 유사점 행과 열로 이루어진 데이터의 집합체라는 데이터구조의 유사성이 있다. DBMS(DataBase Management System) 응용 프로그램들이 데이터베이스를 공유하며 사용할 수 있는 환경을 제공하는 소프트웨어, DB 구

OS(Operating System, 운영체제)OS의 기능 프로세서, 메모리, 입출력장치, 파일 및 정보등의 자원관리 시스템 자원보호 기능 네트워크 관리 : 네트워크 서비스 성능, 오류분석, 프로비저닝, 품질관리 등등 메인메모리 관리: 메모리 추적, 프로세스에

외부 접속외부접속이란? : 외부IP에서 내부 IP로 접속하는것.포트포워딩이 필요한 이유 :외부에서 한개의 ip를 통해 내부에 있는 여러개의 장치 또는 프로그램과 통신할수 있도록 연결해주는것이 포트포워딩이다.포트포워딩한 IP주소로 다른 네트워크 기기의 외부접속을 가능하게

recoil의 또다른 기능인 selector에 대해 알아보자.recoil은 react의 상태관리 라이브러리고, 컴포넌트간 상태공유를 가능하게 한다. 기존에 만들었던 todolist는 todoState을 통해 현재 만들어진 전체 투두리스트를 저장하고,categorySta

react query는 서버의 값을 클라이언트에 가져오거나(패치), 캐싱, 값 없데이트, 에러핸들링 등의 비동기 과정을 더욱 편하게 하는데 사용된다.데이터를 받아 오는데 필요한 state,fetch와 컴포넌트의 분리api 관련된 코드를 api.ts 파일에 따로 분리re

Recoil을 쓰지 않을 경우 -> 프롭이 필요하지 않는 컴포넌트까지 프롭이 계속 전달됨특히 컴포넌트의 트리가 깊어질수록 이런 프롭드릴링이 복잡해지고 실수를 유발하기 쉽다.Recoil은 하나의 버블에서 value가 필요한 컴포넌트들의 접근을 가능하게 해준다.recoi

관련링크\-> Coin.tsx, Coins.tsx에서 사용됨문서의 가는 다이렉트 링크를 만들어주어서 웹문서의 헤더값을 변경할 때 사용하는 리액트 컴포넌트이다.노마드코더에서 사용한 뿐 아니라 CSS,favicon 등을 넣을 수 있다.관련링크 데이터 시각화 차트를 만들

타입스크립트는 강하게 타입화된 언어이다. 타입스크립트에서는 코드 실행 전 타입에 대한 정의가 존재한다.함수의 인자를 타입화 시키기그리고 더미의 상위컴포넌트에서 더미에게 프롭을 보낸다.그런데 지금 부모컴포넌트인 App에서는 text 프롭만 넘기고 있다. 이처럼프롭에 옵션