React16 React] 모바일 청첩장 만들기 1 ❓ 발생한 이슈/고민 15년 지기 친구의 결혼을 기념하여 모바일 청첩장을 만들어주려고 한다. 청첩장 사면 그냥 주는 모바일 청첩장을 만들려는 이유는 모바일 청첩장은 단순해 보여도 의외로 여러 가지 기능이 들어간다. (캐러셀, 지도 api, 꽃잎 흩날리는 애니메이션, 캘린더, 디데이 카운트 다운, 계좌번호 복사, 메시지 보내기, 전화 걸기, 방명록 CRUD 등..) 되게 얕봤는데 마냥 간단하지만은 않다는 거~그래서 개인적으로 도전해 볼 만한 콘텐츠라고 판단되었다. 💡 해결과정 먼저 구성을 생각해야 하지 않겠는가. 늘 그랬듯 들어갈 내용과 와이어프레임을 설계해 주었다. 기획에 앞서 여러 가지 모청 샘플을 보고 어떤 내용이 들어가야 하는지, 어떤 식으로 구성되어 있는지 파악했는데 대체로 이런 식이었다. 컨텐츠.. 2024. 1. 16. [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. [WIL 2023.06.25] 내배캠 6주차 📝 Situation(상황): 이번주 목표 Styled Components를 배워보고, 활용할 수 있다. 콜백, promise, async/await 차이를 설명할 수 있다. 이들을 활용해 코드를 구현할 수 있다. 리덕스를 사용한 전역 상태 관리를 자유롭게 활용할 수 있으며 전역 상태의 필요성을 설명할 수 있다. React-router-dom의 핵심 개념과 관련 hooks에 대해 이해할 수 있다. Dynamic route 기법과 useParam hook을 이용하여 동적 라우팅을 구현할 수 있다. 👀 Task(임무): situation 중 문제들 이전에 만들었던 Todo List에 1. 설정했던 state를 develop해서 Redux를 이용한 전역 데이터로 관리해보기 2. React Router Dom을.. 2023. 6. 25. [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. [WIL 2023.06.18] 내배캠 5주차 📝 Situation(상황): 이번주 목표 ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다. 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다. 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다. 리액트 입문강의를 활용해 투두리스트 페이지 만들어보기. 👀 Task(임무): situation 중 문제들 완료 취소 간 상호이동 id 값의 중복 input validation 적용 컴포넌트 분리 🔍 Action(접근방법): 해결시도 todoUpdateClickBtn(item.id)} > 완료 객체의 id값을 가져와서 const todoUpdateClickBtn = (id) =.. 2023. 6. 19. [TIL 2023.06.16] 후발대 과제 / React counter app 만들기 💻오늘 배운 내용 live share를 이용한 코드리뷰 그동안 조원끼리 코드리뷰를 하면 리뷰를 하는 사람이 화면 공유를 하고 나머지 사람들은 화면을 보고있는 상태에서 리뷰 하는 사람은 자신이 쓴 코드의 로직에 대해 쭉~읽어내려가며 설명하는 방식으로 했었다. 그런데 이렇게 하면 코드가 눈에 잘 안 들어오고 이해가 안되는 부분이 있으면 그냥 넘어가게 된다. 오늘 조원 중 한분이 새로운 방법을 알려주셨는데 VScode extension 중 하나인 live share를 이용하는 것 이렇게 하면 공유받은 코드를 같이 보면서 주석을 달거나 질문도 자유롭게 하면서 좀 더 쌍방향의 코드리뷰가 가능하다. 역시 아는만큼 보인다고.. 그동안 나는 너무나 원시인이었던 것. 이렇게 같이 코드를 보면서 서로 리뷰를 하고 부족한 .. 2023. 6. 19. 이전 1 2 다음
