Jieunny의 블로그

➰ 70일차 페어 활동하고, 나머지 시간에는 투두리스트 만들어보고 있다.. 예전에 만들어 봤는데도 생각보다 어렵고...짜증난다 ㅎㅎㅎㅎ 기능은 다 만들었는데 CSS는 너무 귀찮다.. 내일은 코테 문제도 풀고, 타입스크립트 공부도 해야지

📣 전역 상태 관리 ✔️ 상태 : UI 에 동적으로 표현될 데이터 ➰ 상태를 다룰 때는 Side Effect 를 고려해야 한다! ➰ Side Effect : 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인 - 네트워크 요청 (백엔드 API 요청) ✔️ 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 ➰ 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터는 대부분 로컬 상태이다. ➰ input box, select box 등과 같이 입력값을 받는 경우 ✔️ 전역 상태 : 프로덕트 전체 또는 여러 컴포넌트에서 관리되는 상태 ➰ 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. ➰ 이 출처가 '전역 공간' 이 된다. ➰ 테마 설정, 국제화 설정 등이 전역 ..

➰ 69일차 페어 활동 때 한 코드 리뷰가 엄청 배울게 많았다! 페어 분이 정말 꼼꼼하게 설명해주셔서 보람찬 페어활동이었던 것 같다. 섹션3 데일리코딩 오늘 다 풀고, 프로그래머스 문제 풀고, 타입스크립트 강의도 한 섹션 들었다. 오늘은 스터디가 있는 날 이따 와서 후기 적어야지

📣 강의 내용 정리 𝟭. 내장 제네릭 & 제네릭이란? ✔️ 제네릭 타입 : 타입을 마치 함수의 파라미터처럼 사용하는 것 ➰ 추가적인 타입 정보를 얻는 데 도움이 된다. ➰ 제네릭 타입을 사용하는 경우에는 입력되는 데이터의 타입을 지정해주어야 한다. const names: Array = []; // string[]과 같은 의미 𝟮. 제네릭 함수 생성하기 ✔️ 함수의 매개변수, 반환 타입에도 제네릭을 사용할 수 있다. function merge(objA: object, objB: object) { return Object.assign(objA, objB); } console.log(merge({name: 'Max'}, {age: 30}); // {name: 'Max', age: 30} const merged..

➰ 68일차 몸 컨디션이 너무 안좋아서 페어 활동도 따로 하고.. 페어분께 너무 죄송했다ㅠㅠㅠ 이렇게 안좋을 줄 모르고 어제만 병가냈던 건데..오늘 그냥 병가 내고 푹 쉴걸 그랬다. 이번주 내내 페어활동이라 이렇게 민폐 끼치면 안되는데🥹 오늘 일찍 자고 약 잘 챙겨먹고 얼른 회복해야 한다!! 내일은 스터디도 있는데.. 그래도 오늘 꾸역꾸역 타입스크립트 강의도 듣고 과제도 다 하고, 코테 문제도 풀었다.. 오늘은 진짜 나한테 칭찬해줘야해ㅠㅠ.. 고생했다 나 얼른 회복해서 다시 루틴을 되찾고싶다

📣 자주 사용하는 UI를 Styled Component로 구현해보자 1️⃣ Modal ✔️ 조건 ✓ Modal 창을 띄워 줄 Open Modal 버튼이 있어야 합니다. (24 ms) ✓ 버튼을 클릭하면 Modal 컴포넌트 내부에 Modal배경, Modal창 div 엘리먼트가 렌더링되어야 합니다. (162 ms) ✓ Modal창이 렌더링 된 상태에서 버튼을 다시 클릭하면 Modal배경, Modal창 div 엘리먼트가 사라집니다. (84 ms) ✓ Modal 창 밖을 클릭하면, Modal배경, Modal창 div 엘리먼트가 사라집니다. (46 ms) ✔️ 구현 코드 import { useState, useRef, useEffect } from 'react'; import styled from 'styled-..