Frontend

자바스크립트의 비동기개념이 완벽하지않다고 생각해서 Axios, Thunk공부를 하기전 비동기공부를 어느정도는 완벽히 하고 넘어가야겠다는 생각에 const [부담감, 우왕자왕스탠스] = useState('일단 아무것도 못함'); 상태가 되었다. 일단 프로젝트가 시작되어서도 공부를 다 못끝낸 상황이 지속되면서 부담감 + 스트레스때문에 올바른 사고판단을 하기가 쉽지가 않았고, 이거 건드렸다가 저거 건드렸다가 결국 번아웃이 와서 시간을 많이 허비했다.. 그러다 일단 비동기개념이 완벽하지 않아도된다는 팀원분들의 조언에 따라 무언가 더 배우려하기보다 기존의 지식을 최대한 활용해보자는 생각에 Axios, Thunk공부로 일단 넘어갔다. 막상 내용을 까보니까 뭐 별거 없었다.. 딱 깊은물인줄 알고 잔뜩 긴장했다가 들어..

json-server란? (1) json-server 정의 및 사용하는 이유 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다. json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있습니다. 이번 챕터에서는 단순히 mock data로 사용하는 것을 넘어, 실제로 배포까지 하여 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용할 것 입니다. (2) j..

시작하기전에 꼭 알아야 하는 키워드 🔥 본격적인 공부에 앞서서 아래 키워드들에 대한 숙지가 반드시 필요합니다. (1) http 프로토콜 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1 (2) 비동기 시리즈(JS) async/await Promise 비동기개념 및 콜백함수 json-server란? (1) json-server 정의 및 사용하는 이유 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다. json-server를 통해서 FE에서는 BE..

What's Redux Toolkit? (1) 리덕스툴킷 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각하시면 됩니다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. (2) 새로운 것인가? 아니다. 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같습니다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었..

Redux toolkit -> 기존의 Redux를 패턴화하여 조금 더 간단히 사용할 수 있도록 해주는 라이브러리이다. json server HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜입니다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되었습니다. 통신 프로토콜을 쉽게 풀어보면 “나는 이렇게 줄 테니 넌 이렇게 받고 난 너가 준거 그렇게 받을께” 정도가 되겠네요 :) 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있으며 따라서 프런트엔드 개발자라면 필수적으로 알아야 하는 지식이 되었습니다. HTTP 프로토콜 특징 ..

What's Payload? (1) 우리가 만들 새로운 기능 우리는 이전 챕터에서 +1 기능과 -1 기능을 만들었습니다. 근데 우리가 만약 1로 정해진 기능을 만드는 것이 아니라 증가 시킬 숫자를 카운터 프로그램을 사용하는 사용자가 직접 정할 수 있게 기능을 만드려면 어떻게 해야 할까요? 다시말해 사용자가 5을 더하고 싶으면 어떤 input에 5를 입력해서 버튼을 누르면 5가 더해지고, 10을 더하고 싶으면 10을 입력하고 버튼을 눌렀을 때 10이 더해지는 프로그램인 것 입니다. (2) Payload란 무엇인가? 우리가 이전까지 만든 기능은 리듀서에게 “더해" 라고만 말을 했습니다. 1이라는 것은 우리가 임의적으로 정해서 리듀서에게 액션 객체를 보냈죠. 하지만 우리는 이제 “N을 더해” 라고 N을 같이 ..

Action creater (1) Why we have to use Action creater? a.만약에 우리가 액션객체의 value를 변경할 일이 생긴다면 어떨까요? PLUS_ONE , MINUS_ONE 이라는 value 대신 이 액션객체가 counter 모듈안에 있다는 것을 강조하기 위해서 counter/PLUS_ONE, counter/MINUS_ONE 이라는 value로 바꾸길 각각 바꾸길 원한다면 아래 코드에서 4군데를 변경해줘야 할 것 입니다. 근데 또 만약에 그게 4군데가 아니라 프로젝트 규모가 굉장히 커서 100군데라면 어떨까요? 곤란하겠죠? 우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 1..

App.js import { useState } from 'react'; import './App.css'; import Header from './components/Header/Header'; import TodoList from './components/TodoList/TodoList'; const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); } export default App; 아래의 두 코드는 같은 코드이다. setFilter(filter)} /> Header.jsx import React from 'react'; expor..