Frontend 개발자 - hyo.loui

🎯목적 : Type Script 타입 총정리 및 복습 String Number Boolean Object Array Tuple Enum Any Void Null Undefined Never 1. String (문자형) JS와 마찬가지로 텍스트 데이터 타입을 string으로 표현한다. 작은따옴표('')나 큰따옴표("")로 문자열 데이터를 감싸는데 사용한다 // string let str: string = "Typescript"; // str = 1; // Error // str = true; // Error // str = undefined; // Error let fullname: string = "ABC"; let age: number = 14; let sentence: string = `my name..

❤️‍🔥TIL : Today I Learned 상태관리 도구 redux를 react에서 쉽게 사용할 수 있도록 돕는 도구(라이브러리) react-redux 다. 컴포넌트 안에 컴포넌트 안에 컴포넌트 안에 컴포넌트가 있을 때 컴포넌트들 간에 데이터를 주고 받을 때 props 로 연결해야 한다. 비유하면, props라는 전선으로 컴포넌트들을 연결한 것이라고 할 수 있다. 컴포넌트들도 블루투스나 와이파이처럼 무선으로 연결할 수 있다면 얼마나 편할까? 이를 위해서는 통신을 중계할 기지국이 필요하다. 리덕스의 스토어를 기지국으로 해서 컴포넌트들을 무선으로 연결할 수 있다면 생산성을 크게 높일 수 있다. Redux 설치, 세팅 react 프로젝트에 사용하는 패키지 npm, yarn 을 이용하여 redux, reac..

❤️‍🔥TIL : Today I Learned 리덕스의 정의 리덕스의 핵심요소 리덕스의 흐름 Redux 란? 프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. 리덕스 핵심 요소 Action: State가 변하는것. “무엇이 일어날지” Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다. Store: action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체. 스토어는 Sta..

❤️‍🔥TIL : Today I Learned 코드 구조 파악하기 이번 react-todo-list 과제를 진행 하면서 참조했던 repository를 활용하여 코드 구조를 파악하면서 다시한번 component, props, state 의 개념에 대해서 설명한다. 참조 - https://github.com/su-no/react-todo-list App.jsx 와 todo.jsx 코드를 보며 설명 하겠다 App.jsx + component 파일의 확장명은 js 로 사용해도 되고 jsx 로 사용해도 된다. 하지만 React에 쓰이는 파일이라는 것을 조금 더 명시적으로 표현하기 위해 jsx 를 많이 사용한다. import { useState } from 'react'; // useState 사용 import {..

❤️‍🔥TIL : Today I Learned 변수 선언과 자료형 변수 ( variable ) 선언 파이썬에서 새 변수를 만들 때는 변수이름 = 값 의 형태로 씁니다. 변수는 '값'을 가리키는 것'! 변수는 '메모리'에 연결되어 있다고 생각하는게 좋습니다! a = 3 # 3을 a에 넣는다. print(a) b = a # a에 들어 있는 값인 3을 b에 넣는다. print(b) a = 5 # a에 5라는 새로운 값을 넣는다. print(a, b) # 5 3 그런데, 여기서 c 의 값은 어떻게 나올까? a = 3 b = a c = b a = 5 b = 4 print(c) 답은 3이다! 왜냐하면 변수를 대입하는 과정은 우리가 자주 하는 '복사' + '붙여넣기' 과정과 비슷하다! 그래서 최종적으로 a = 5 ,..