Ella 프론트엔드일지

0. 버그 현황 - 우리는 JWT 토큰을 Context API 로 관리를 하고 있다. 토큰 여부에 따른 페이지 접근 제한을 하고 있다. - 하지만, 토큰 값을 삭제한 후 signin 페이지에 가서 로그인을 하면 todo 페이지로 이동할 때 토큰값이 로컬스토리지에 저장되어 있음에도 불구하고 Notfound 페이지로 이동한다. 🔸splash 페이지로 접근 후 token 이 있으면 signin 페이지로 이동, 없으면 todo 페이지로 이동 function Splash(){ const navigate = useNavigate(); const token = useContext(UserContext); useEffect(() => { setTimeout(() => { if (!token) { navigate("/s..

0. 버그 배경 Todo페이지에서 아침/점심/저녁 버튼을 누르면 각 Category 페이지로 이동되는 로직이다. 왼쪽 그림에서 각 버튼을 누르면 아침(빨간색 포스트잇)/점심(노란색 포스트잇)/저녁(파란색 포스트잇)으로 카테고리별로 나뉘는 로직이다. 그런데, 카테고리 페이지에서 수정 API 를 호출하면 상태가 바로 반영이 되는데, Category 페이지를 새로고침하면 다시 예전 값으로 렌더링되는 문제가 있었다. 즉, 수정된 내용이 Category 페이지에서 새로고침하면 반영이 안되었다. 수정 api 는 잘돼서 수정된 내용이 update 되는데 새로고침하면 수정된 데이터가 PostItem 컴포넌트에 반영이 안되고 있음. 1. 버그 코드 - Todo 페이지에서 todolist state를 useNavigate..

0. 브라우저 렌더링 - 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 그래픽 형태로 표시해주는 작업 - 즉, 브라우저가 서버로부터 HTML,CSS,JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것 - ex) 크롬 브라우저에 접속해 주소창에 www.devepeople.kr 을 입력한다면 브라우저는 데프피플 서버로부터 데브피플 사이트에 대한 정보를 받아 브라우저 화면에 데브피플 홈페이지를 그려주게 됨. 1. 브라우저 렌더링 과정 1) 브라우저는 HTML,CSS,JS,이미지, 폰트 등 리소스를 서버에 요청한다. 화면을 구성할때 HTML,CSS,JS로 이루어지는데 이것들은 서버가 가지고 있다. 그래서 서버에게 달라고 요청을 해야한다. So, 브라우저는..

0. 글을 쓰게 된 계기 - node.js 로 로그인 기능을 구현하면서 왜 res.json() 형태로 데이터를 반환하는지 궁금하게 되어 글을 쓰게 되었다. - 서버 만들기 전 프론트 입장에서는 그냥 fetch 쓸 때 응답받은 json 데이터를 response.json() 으로 해서 객체로 변환시키는데 너무 당연하게 반복적으로 사용했었다. 이유도 모른채!!!! //index.js app.post("/login", (req, res) => { // 1.요청된 이메일을 데이터 베이스에서 있는지 찾는다. User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message:..

0. 배경 설명 - Todo 메인 페이지 컴포넌트에서 아침/점심/저녁 버튼을 누르면 아침(빨간색 포스트잇)/점심(노란색 포스트잇)/저녁(파란색 포스트잇) 으로 시간별로 분류되는 기능을 구현하려고 했다. - 우리는 이번프로젝트에서는 전역상태관리를 쓰지 않기로 해서, Todo 컴포넌트에서 todolist state값을 useNavigate를 이용해서 Category 컴포넌트로 전달을 했다. todolist state의 초기값은 배열이 되고 todolist 의 항목들이 객체형태로 배열에 담긴다. 아래처럼 되어있다. { "id": 1, "todo": "Hello World", "isCompleted": true, "userId": 2 } useNavigate로 todolist 의 상태값을 Category 컴포넌..

0. API(Application Programming Interface) - 서로 다른 프로그램 간에 소통할 수 있게 도와주는 통신 규약 - 웹에서는 클라이언트와 서버간의 통신규약 - 아주 쉽게 말하면, 서버에게 요청해서 데이터 가져오는 방법이 API 임 1. REST API(Representational State Transfer) - API 들을 어떤식으로 만들어야 좋은 API 일까? 에 대한 답이 REST API - REST 는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것. HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CR..