Ella 프론트엔드일지

0. 이벤트 - 이벤트는 어떤 사건을 의미함 - 즉, 사용자가 '클릭' 했을 때, '스크롤'을 내렸을 때, 무언가 '입력' 했을 때 등으로 상호작용으로 인해 일어나는 사건을 의미한다. - DOM 요소와 관련이 있다. 1. 이벤트 종류 - 이벤트 종류는 아래 블로그를 참고하자 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%F0%9F%92%AF-%EC%B4%9D-%EC%A0%95%EB%A6%AC 🌐 브라우저 이벤트 종류 & 사용법 총정리 브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM ..

0. React-Query 🔸정의 및 특징 - 기존의 client state 를 다루는 라이브러리는 Redux,MobX,Zustand 가 있다. 이러한 라이브러리는 클라이언트 애플리케이션의 상태를 중앙 집중화하고 전역으로 관리한다. 대부분 이런 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아주고 있는 경우가 대부분이다. - 반면, Tanstack Query 는 서버 상태와의 상호작용을 중심으로 하는 상태관리 라이브러리이다. (서버 데이터 상태관리) - react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해진다. - Caching 지원 - 동일한 데이터에 대한 중복 요청을 제거하고 한 번만 요청하도록..

0. setState 함수 - useState 에서 setState 함수는 상태값을 변경하여 컴포넌트를 리렌더링 하도록 요청하는 함수이다. - 이 함수는 새로운 상태값이나 이전 상태값을 받는다. - setState를 호출하면 React는 상태 값을 업데이트하고 관련된 컴포넌트를 다시 렌더링한다. 1. 새로운 상태값 VS 이전 상태값 받기 - setState 함수를 쓸 때 아래와 같은 코드를 많이 봤을 것이다. 무슨 차이가 있을까? const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.ta..

0. 커스텀 훅 - React 에서 기능을 재사용하기 위한 좋은 방법이다. - 커스텀 훅을 만들면 여러 컴포넌트에서 동일한 로직을 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있다. - 커스텀 훅은 'use' 라는 접두사로 시작한다. 🔸Counter 예제 코드 import React, { useState } from 'react'; // 커스텀 훅 const useCounter = (initialCount) => { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ..

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:..