728x90

분류 전체보기 285

React - 제어 컴포넌트 vs 비제어 컴포넌트

비제어 컴포넌트는 ref 를통해 form element에 접근한다. 그래서 input value에 접근할때가 최종적인 버튼을 누르는 상황에만 접근한다. 그래서 화면을 재 렌더링 하는 순간이 버튼을 누르는 그 순간이지만, 사용자의 입력의 가장 최신값에는 접근이 힘들다. 반면에 제어 컴포넌트는 사용자의 입력에 따라 state가 동기화 된다. 대표로 onChange()가 있고, input 유효성 검사를 할 때 용이하다. 항상 최신 값을 유지하는 특성에 따라, 현재 input의 value가 유효한지 안한지에 대해 검사를 실시간으로 한다. 그런데, 사용자 입력이 있을 때 마다 재 렌더링이 되어서, 불필요한 재 렌더링이 될 수도 있다.

Web/React 2022.05.31

React Redux - 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?

https://11001.tistory.com/191 요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStor..

Web/React 2022.05.31

하드웨어 09 - 슈퍼컴퓨터와 사물인터넷

https://velog.io/@seonghyeon01/%EC%8A%88%ED%8D%BC%EC%BB%B4%ED%93%A8%ED%84%B0%EC%99%80-%EC%82%AC%EB%AC%BC%EC%9D%B8%ED%84%B0%EB%84%B7 컴퓨터 컴퓨터들은 모두 논리적 구조 , 즉 무엇을 계산할 수 있는지에 대해서는 공통된 핵심 속성을 가진다. 비슷한 아키텍처를 갖추고 있지만, 가격, 소모, 전력, 크기 속도등에서 차이를 보인다. 휴대전화와 태블릿 PC도 일종의 컴퓨터로 , 운영쳬제를 실행하며 풍부한 컴퓨팅 환경을 제공한다. 사물인터넷(IOT) 사물인터넷이란 다른 사물과 데이터를 송수신할 수 있는 센서와 소프트웨어, 기타 기술을 장착하고 서로 연결된 물체와 기기를 말한다. 슈퍼컴퓨터 과학기술 연산을 비롯한 ..

기술면접 준비 2022.05.31

항해 23일차

오늘의 목표 스파르타 과제 - 게시글마다 비밀번호 구현 - 랜덤 화면 컴포넌트화 해서 최하위로 내리기 - 삭제 로직 변경 - 코드, 폴더 정리 및 주석처리 스터디팀 공부 대감 - Map, Set, 반응형웹, Context API 곤감 - 게임만들기, Router 캐감 -Typescript, Middleware 팀작업 1. 해리포터 덕질 사이트 개인공부 - 노마드 타입스크립트 - 벨로퍼트 타입스크립트​ - 기술매니저님 리덕스 코드 공부 전산학공부 10 고수준 언어에서 프로그램 실행까지 알고리즘, 자료구조공부 x 개인작업 스터디끼리 하는 숙제 오늘은 tailwind css를 하다가 설치에서 막히고 typescript를 했다. 그냥 type만 입히는게 목적이라면 생각보다 어렵지 않겠다 라는 생각이 든다. 과제..

Sparta/항해99 2022.05.30

항해 22일차

오늘의 목표 스파르타 x 스터디팀 공부 대감 - Map, Set, 반응형웹, Context API 곤감 - 게임만들기, Router 캐감 -Typescript 팀작업 1. 해리포터 덕질 사이트 개인공부 - 벨로퍼트 리덕스 미들웨어 https://react.vlpt.us/redux-middleware/ - 노마드 타입스크립트 - 벨로퍼트 타입스크립트​ 전산학공부 10 고수준 언어에서 프로그램 실행까지 알고리즘, 자료구조공부 https://programmers.co.kr/learn/courses/30/lessons/81301 개인작업 스터디끼리 하는 숙제 https://kevinkim910408.github.io/React-w4-Assignment/#/ 일단 과제는 끝났다 (기본) 과제에서 요구하는 수정기능..

Sparta/항해99 2022.05.30

항해 21일차

오늘의 목표 스파르타 x 스터디팀 공부 대감 - Map, Set, 반응형웹, Context API 곤감 - 게임만들기, Router 캐감 -Typescript 팀작업 1. 해리포터 덕질 사이트 개인공부 - 벨로퍼트 리덕스 미들웨어 https://react.vlpt.us/redux-middleware/ - 노마드 타입스크립트 - 벨로퍼트 타입스크립트​ 전산학공부 10 고수준 언어에서 프로그램 실행까지 알고리즘, 자료구조공부 https://programmers.co.kr/learn/courses/30/lessons/81301 개인작업 스터디끼리 하는 숙제 오늘은 하루종일 과제하고 리덕스 관련된거 공부만 했다.

Sparta/항해99 2022.05.28

Firebase v9 + React 로 CRUD

Firebase는 platform provided by google. 코드에 주석으로 뭐하는 코드인지 메모를 조금 해뒀다. 사진이 안보이면 클릭하면 커진다. 참고하면 좋은 자료들 1. https://travis.media/how-to-use-firebase-with-react/#20211130-getDoc 2. 파이어베이스 documents 3. https://www.youtube.com/watch?v=9zdvmgGsww0&list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb 1. 리액트 설치 yarn create react-app . 2. Firebase 추가 yarn add firebase 3. 아래로 이동해서 로그인까지한다. https://console.firebase.google..

React/Firebase 2022.05.28

항해 20일차

오늘의 목표 스파르타 x 스터디팀 공부 윤님 - hooks, Map, Set, 반응형웹 백재님 - ES5, useState(), props 준호님 - Redux middleware, firebase 팀작업 1. 해리포터 덕질 사이트 개인공부 - 벨로퍼트 리덕스 미들웨어 https://react.vlpt.us/redux-middleware/ - 벨로퍼트 리덕스 재정리 https://react.vlpt.us/redux/​ 전산학공부 10 고수준 언어에서 프로그램 실행까지 알고리즘, 자료구조공부 https://programmers.co.kr/learn/courses/30/lessons/81301 개인작업 스터디끼리 하는 숙제 오늘도 굉장히 유익한 하루였다. 나의 공부를 할수 있었던 날. 오늘은 Redux를 확..

Sparta/항해99 2022.05.28
728x90