내일배움캠프/Today I Learned47 [TIL 2023.07.26] 타입스크립트 enum과 object literal의 차이점 / 주요 유틸리티 타입 💻오늘 배운 내용 enum, object literal의 차이점과 언제 사용하면 좋을지 파악할수 있다. 주요 유틸리티 타입 학습 두 번째 TypeScript 프로그램 코드를 이해하고 발전시킬 수 있다. enum과 object literal의 차이점 enum enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } 열거형 데이터 타입. 상수의 그룹화를 할 때 적절하게 쓰인다. 코드의 가독성을 높이고 명확한 상수 값을 정의할 수 있다. 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다. object literal const o.. 2023. 7. 26. [TIL 2023.07.25] 타입스크립트 입문 / 기본 타입 💻오늘 배운 내용 기존 순수 JavaScript로만 개발했을 때의 한계점과 TypeScript의 등장배경에 대해 설명할 수 있다. TypeScript 컴파일러와 tsc의 개념에 대해 이야기 할 수 있다. .d.ts 파일의 역할과 사용 방법에 대해 설명할 수 있다. TypeScript에서 지원하는 기본 타입(boolean, number, string, 배열, 튜플, enum)을 활용하여 코드를 작성할 수 있다. 타입 안정성이 코드 품질에 어떻게 기여할 수 있는지를 설명할 수 있다. any, unknown, union을 이용하여 가변적 데이터 타입을 정의할 수 있다. 가변적 데이터 타입을 남발할 때 생기는 문제에 대해 설명할 수 있다. JavaScript의 약점 ☑️ 실행 시간에 결정되는 변수 타입 ☑️ 약.. 2023. 7. 25. [TIL 2023.07.24] 아웃소싱 프로젝트 마무리 ❓발생한 이슈/고민 일주일 간 열심히 작업한 작업물의 발표날이다. 프로젝트를 정리하며 깃헙 레포에 올릴 리드미와 발표자료를 작성했다. 💡해결과정 리드미의 구성은 이러하다 적다보니 리드미가 좀 길어져서 앵커를 추가했다. 목차를 클릭하면 해당 목록으로 슉 이동 프로젝트 구조를 어떻게 하면 간단하고 알기쉽게 구성할지 고민하다가 사용한 방식. 이렇게 쓰는게 맞는건지는 모르겠으나.... 구조의 흐름(?)을 보여주고싶었다. 발표자료는 피그마로 작성을 했다. 팀원 중 한 분이 만들어 주셨는데 PPT 짬이 어마어마하다. 간단히 프로젝트를 소개-프로젝트 진행하면서 만난 문제와 해결과정-회고 순으로 구성되어 있다. 열심히 만든 우리 페이지. 잘 정리해서 알차게 소개하려다보니 소개/발표 자료에도 정성이 많이 들어간 것 같다.. 2023. 7. 24. [TIL 2023.07.17] 아웃소싱 프로젝트 - 커밋(COME IT) 💻오늘 배운 내용 React] 만능 컴포넌트/재활용성이 높은 컴포넌트를 만드는 방법 mixins 폴더와 utils 폴더 활용하기 ❓발생한 이슈/고민 아웃소싱 프로젝트 기획 -지도 서비스를 지원하는 웹사이트를 만들기- 💡해결과정 프로젝트 Starting Assignments 문서 작성 프로젝트 주제: 커밋 COME IT (community meeting service) "다양한 취미를 함께 즐기며 새로운 친구들과 만날 수 있는 친목 모임, 함께해요!” 와이어프레임 구성 필요한 기능회의 사용하는 기술 Redux Toolkit styled-component firebase 실제로 사용 가능한 서버, auth, storage등 다양한 서비스 제공 react-query caching, infiniteScroll .. 2023. 7. 17. [TIL 2023.07.05] json-server와 HTTP 💻오늘 배운 내용 json-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 Backend(BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(FE) 개발에 임시적으로 사용할 mock data를 생성. FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업할 수 있다. json-server 설치 yarn add json-server json-server 실행하기 (root 경로에 db.json 파일이 자동으로 생성된다.) yarn json-server --watch db.json --port 4000 만들어진 파일에는 기본적인 예시 값들이 생성되어 있다. { "posts": [ { "id": 1, "title": ".. 2023. 7. 5. [TIL 2023.07.04] Redux Toolkit / 옵셔널 체이닝? 💻오늘 배운 내용 Redux Toolkit 리덕스를 개량한 것 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 (a.k.a RTK) 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다 =>Slice 라는 API를 사용 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlic.. 2023. 7. 4. [TIL 2023.07.03] Redux란 무엇인가 💻오늘 배운 내용 Redux란 무엇인가 Redux를 주로 사용하면서 과제나 프로젝트를 진행하고 있는데 아직도 개념이 제대로 잡힌 것 같지 않아서 다시 한번 정리 하는 시간을 가져봤다. 리덕스의 구성요소 Store : 모든 전역 state들을 관리하는 단 하나의 상태 저장소 (→ 단 하나의 객체) store: { todos, auth } store 내부의 리듀서들로부터 각각 최신 상태를 제공받는다. Reducer : state 변경 함수 매개변수로 기존상태와 액션객체를 받음 상태 변경 후 최신 상태를 Store에 제공 (리턴) Action : { type, payload } 형태의 객체 리듀서 함수에게 전달되는 인자 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 요청서) type.. 2023. 7. 3. [TIL 2023.06.23] React Router Dom (hooks, Dynamic route, useParam) 💻오늘 배운 내용 React Router Dom 페이지를 구현할 수 있게 해주는 패키지 (여러 페이지를 가진 웹을 만들 수 있게 된다) 패키지 설치 yarn add react-router-dom react-router-dom 사용순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 // Router.js 파일 예시 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import. import { BrowserRouter, Route, Routes } from "react-router-dom"; // 2. Router 라는 함수를 만들고 아래와 같이 작.. 2023. 6. 23. [TIL 2023.06.22] Redux에 대하여 2 (Action Creator, Payload, useDispatch, Ducks 패턴) 💻오늘 배운 내용 Action Creator 'todos' 라는 모듈이 하나 있다고 치자. 액션객체의 value를 변경할 일이 생긴다면? 만약에 프로젝트 규모가 굉장히 커서 수정할 곳이 100군데라면? // Action value const ADD_TODO = 'todos/ADD_TODO'; // Action Creator export const addTodo = (payload) => { return { type: ADD_TODO, payload, }; }; const initialState = { todos: [], }; const todos = (state = initialState, action) => { switch (action.type) { case ADD_TODO: return { todo.. 2023. 6. 23. [TIL 2023.06.21] Redux에 대하여 1 (개념 및 초기셋팅~Module 만들기 및 스토어에 연결) 💻오늘 배운 내용 1] Redux 전역 상태관리 라이브러리 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지이다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State라고한다. useState로 상태를 관리한 경우, 어떤 State를 컴포넌트 간에 공유하고자 할때 반드시 부모에서 자식으로 한방향 정보전달만 가능했기 때문에 중간에 불필요한 과정이 발생하기도 했다.(props drilling) 따라서 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 이러 불편함을 일부 해소시켜준다. 동작원리 리덕스의 동작원리는 액션, 디스패치, 리듀서로 이루어진다. Action type 필드를 가진 자바스크립트 객체다. 쉽게 생각해서, 어.. 2023. 6. 22. [TIL 2023.06.20] React Hooks useContext / useCallback / useMemo 💻오늘 배운 내용 useContext 전역 데이터를 관리하는 api createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) 1. context 폴더 > FamilyContext.js 생성 import { createContext } from "react"; // 여기서 null은 초기값 export const FamilyContext = createContext(null); 2. props를 가장 처음 전달하던 컴포넌트에서 FamilyContext를 import해주고 자식컴포넌트를 로 감싸준다. 이때 전달할 데이터를 객체 형태로 전달한다. import React from "react"; import Fath.. 2023. 6. 21. [TIL 2023.06.19] React Styled components / useEffect / useRef 💻오늘 배운 내용 Styled components CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 vscode-styled-components extension 설치 설치 후 터미널에서 명령어 실행 yarn add styled-components 컴포넌트에 import 해서 사용한다 import styled from "styled-components"; 사용예시) const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; const App = () => { return 박스; }; export default App; 이 또한 자바스크립트이기 때문에 스타일 코드를 JS코드 작성.. 2023. 6. 20. 이전 1 2 3 4 다음
