분류 전체보기

useState(setState)를 사용할때 그런경우가 있다. 바로 엇,,왜 내가 생각한대로 동작이 안되지,,?그 이유는 바로 비동기적으로 동작하기 때문이었다.useState가 비동기적으로 동작하는 이유에 대해서 알아보려고 한다.  원인을 알아보기function App() { const [number, setNumber] = useState(1); const handleAdd = () => { setNumber(number + 1); }; const handleMultiply = () => { setNumber(number * 2); }; const handleMultiplyAddNumber = () => { setNumber(number * 2); setNumber(number + 1);..

최근에 리액트로 포트폴리오를 구축했는데 애니메이션을 빠르고 쉽게 적용하고 싶었다. framer-motion이 내가 찾던 라이브러리 였다. (왜 이제 안걸까;;? ㅎ) https://www.npmjs.com/package/framer-motion framer-motion A simple and powerful JavaScript animation library. Latest version: 11.1.5, last published: 16 hours ago. Start using framer-motion in your project by running `npm i framer-motion`. There are 4191 other projects in the npm registry using framer-mo..

⭐️useTransition 이란⭐️ 상태 변경의 우선순위를 낮춰 다른 렌더링이 더 빠르게 수행되도록 해줄 수 있는 hook 이다. (리액트 18에 생김) 왜?? 이것을 사용해야 할까? 리액트는 기존에 동기적으로 처리 되고 있었다. 즉 하나의 작업에 하나만 처리가 된다는 것인데 리액트가 렌더링이 끝날때까지 순차적으로 계속 지연이 된다는 것이다. useTransition 훅을 통해 동시성을 실현할 수 있다. 동시성을 실현하게 되면 A와 B의 작업을 처리하고 있을시 B를 지연시키고 A를 처리할 수 있다. 코드로 구현해보기 function App() { const data = ['사과','배','오렌지','바나나','딸기','천례향','귤','자몽','수박','키위','아보카도','참외'] const allD..

자바스크립트 공부 초반에 이벤트루프 강의를 듣는데 몬소리인지 알아 듣지 못했다...ㅎㅎ 아 그래,,모 그렇게 돌아가는구나,,이정도만 알고 있다가 다시 개념정리를 위해 공부를 해봤다. 혹시나 나처럼 이벤트루프가 아직까지도 몬소리인지 모르겠다면 어느정도 비동기 실습을 해보고 공부해보길 추천한다. 자바스크립트는 싱글스레드 언어 이다. 싱글스레드란 한 번에 하나의 명령만 실행할 수 있는 스레드다. 한번에 하나의 동작만 처리하고 다른 동작이 완료될때까지 기다려야하는 것. 그.런.데 웹사이트 여기저기 돌아다녀도 자바스크립트가 싱글스레드라고?? 라고 믿기 힘들다 왜냐 한눈에 보기엔 한번에 여러 동작을 하고있으니까. 예를 들어 쇼핑몰 페이지만 들어가봐도 여러 상품의 데이터들을 불러오고 있다. 이것들을 가능하도록 해주게..

😃 이번 프로젝트에서 알림 기능이 있었다. 그래서 찾아보니 SSE로 구현을 해야한다는것. SSE라는걸 알림 구현하면서 첨 알게되서 정리를 해보았다!! 일단 서버와의 실시간 통신을 위해 살펴봐야할 기술 3가지가 있다. 실시간 통신 1. websoket 클라이언트와 서버와의 양방향 통신이 가능. 기존 HTTP 통신과 달리 클라이언트와 서버와의 지속적인 연결을 통해 데이터를 주고 받을 수 있다. ws 프로토콜을 통해 웹소켓 포트에 접속해 있는 모든 클라이언트(subscribe)에게 이벤트 방식으로 응답한다 처음 연결시 한번의 핸드셰이크만 수행하면 되기 때문에 통신 오버헤드가 낮다. 2. polling 클라이언트가 주기적으로 서버에게 request를 날려 응답을 받는 방식. 일정하게 요청을 보내므로 서버에 데이..

✨interceptor✨ 요청이 전송되기전, 응답이 처리되기전 실행되는 함수. 즉 요청을 할때 헤더를 바꾸거나 응답이 처리되기전 무언가 에러처리를 바꾼다거나 데이터를 바꿀 수 있는 미들웨어 역할을 한다. 그래..그래서 요청 전에 뭘 어떻게 한다는건데.. axios.interceptors.request 로 요청 전 처리 axios.interceptors.request.use( (config) => { // 요청전에 토큰을 처리 config.headers.Authorization = `Bearer ${getToken()}`; return config; }, (error) => { // 에러 처리 return Promise.reject(error); } ); 요청이 전송되기 전 config객체를 받아서 hea..

6주간 대장정의 팀프로젝트가 끝났다. 정말 우여곡절이 많은 팀플이었다,,ㅎㅎ^^ 5주차부터 백엔드와 회원쪽 연동을 시작했고 5주차 중반부터 본격적으로 그외 기능들 연동을 시작했다. 데모데이 일주일 남겨두고 시작한것,,^^ 일단 5주차 연동을 시작할때 팀원들에게 프론트가 이정도 일정에 어디어디까지 연동 가능하다. 라고 말을 하고 시작했다. 왜냐하면 연동이 늦어지기도 했고 남은 일정안에 진행이 가능한 계획을 공유하고 시작하는게 좋다고 생각했다. 프론트가 2명이긴 했지만 거의 내가 99%..를 다했기 때문에.. 사실 정말 중간에 포기하고 싶긴했지만..😇 다행히 우리 서비스에서 크게 어려운 기능이 없었고, 백엔드 팀원분 중 한명이 너무 잘 도와주셔서 연동하는데 무리가 없었다. 그리고 msw로 백엔드 API를 목..

CORS란 cross-origin-resource-sharing의 약자. 직역해보면 서로 다른 도메인간의 자원을 공유하는것을 의미한다. 브라우저가 CORS에러를 내뿜는것은 서로 도메인이 다른데? 이거 너네 공유 안됨. 이라고 판단하고 에러를 내뱉는 것이다 브라우저는 보안때문에 도메인/포트번호/프로토콜 하나라도 다를경우 다른 교차 출처(cross-origin)이라고 판단을 하고 cross-origin-HTTP 요청을 제한하는것. 어떻게 브라우저가 에러를 내뱉는 것일까 CORS는 브라우저에서 보안을 이유로 사용자들을 보호하기 위해 만든 정책이다. 이 정책이 없다면 누구나 요청이 가능해지기 때문에 사이트들을 똑같이 만들어 사용자의 로그인을 유도해 정보를 추출해 갈 수 있다. 이로 인해 CORS 정책을 도입했고..