SUIN

Callback javascript에서는 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미 callback 단점 - 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상발생 (callback hell ) step1(function (value1) { step2(function (value2) { step3(function (value3) { step4(function (value4) { step5(function (value5) { step6(function (value6) { // Do something with value6 }); }); }); }); })..

동기(Synchronous) 💡 동기는 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다. 비동기(Asynchronous) 💡 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행할 수 있는 방식 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. 동기와 비동기는 상황에 따라 각각 장단점 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있습니다. 비동기 방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도..

HTTP(Hyper Text Transfer Protocol) - 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 - 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약 - 80번 포트 사용 인터넷 초기에 모든 웹사이트에서 기본적으로 사용되었던 프로토콜이기도 하다. HTTPS(Hyper Text Transfer Protocol Secure) - HTTP에 데이터 암호화가 추가된 프로토콜 - HTTP와 다르게 443번 포트를 사용 - 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 암호화를 지원 기존의 http에서는 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않아 보안에 취약했는데 HTTPS 프로토콜은 SSL을 사용하므로써 이러한 보안문제를 해결했다. SSL 서버와 브라우저 사이에..

통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가 필요하므로 MSW를 사용하여 모의 데이터를 만들어보는 공부를 했다. MSW - 데이터 목킹을 하는 라이브러리 - 리액트는 REST API & GraphQL support 한다. - 실제 서버와 동일한 주소여도 서로 올라가지 않고 Interceptor 해서 msw를 통해 데이터 처리가 가능하다 - 브라우저 내에 서비스워커를 띄운후 핸들러에 특정 api 설정을 하게되면 요청에 맞는 데이터를 받을 수 있다 - Browser 응답 요청 -> 서비스 봉사자가 상태 -> res clone -> msw 전송 -> 모킹 ..

리액트에서 가장 중요한 건 상태 관리이다. 나는 아직 많은 프로젝트에 적용하기에는 좋은 사례라던가 레퍼런스들 이 많은 Rudux로만 상태 관리를 했었다. 많은 회사들에서는 Redux, Recoil, Mobx 등 다양한 상태 관리 라이브러리들을 사용한다. 웬만한 프로젝트는 리코일로도 충분히 작업이 가능하다는 이야기와 주변 현직 개발자 분들이 Recoil을 많이 사용하는 것을 듣고 Recoil이 어떻게 상태 관리를 할 수 있나 궁금증으로 시작해서 강의나 공식문서를 많이 찾아봤다. 각 라이브러리마다 장단점이 있으므로 프로젝트의 성향에 따라 적합한 라이브러리를 사용한다. 어떤 걸 사용하든 정답은 없다. redux - Flux 아키텍처 기반 [Redux] 리덕스란? Redux 리덕스는 리액트에서 가장 많이 사용되..

리액트의 조건부 랜더링은 JS의 조건 처리와 동일하게 동작한다. 조건부 랜더링은 엘리먼트를 변수로 만들 수 있다. 1. if //로그인 function LoginButton(props) { return ( Login ); } //로그아웃 function LogoutButton(props) { return ( Logout ); } render() { const isLoggedIn = this.state.isLoggedIn; let button; //조건문 if (isLoggedIn) { button = ; } else { button = ; } return ( {button} ); } 2. && && 뒤의 엘리먼트는 조건이 true일때 출력 false라면 React는 무시하고 건너뛴다. function M..

저번 주에 백신 접종으로 몸살을 심하게 앓고 오늘부터 다시 작업을 시작했다 오늘부터 하나투어 클론코딩을 시작하게 되었는데 항해 때는 3주 안에 모든 구현과 배포를 해야 했었는데 이번에는 코드를 조금씩 이해하며 작성해보려고 한다. 실전 프로젝트때는 react-router v5 버전을 사용하다가 이번엔 업그레이드된 v6를 사용하는데 생각보다 많은 내용이 업데이트된 걸 알 수 있었다. 1. 작아진 번들 사이즈 - 이전 버전 대비 약 70% 정도의 크기가 줄어든 것, 버전만 업데이트 하더라도 번들 크기에 대한 최적화가 가능하다는 이점이 존재 2.switch >> routes (네이밍 변경 ) 3. exact 옵션 삭제 4. componen >> element (네이밍 변경 ) 5. path="/Web/:id" ..

스켈레톤이란 웹페이지에서 로드 시간이 짧아 보이게 하는 몇 가지 방법 중 하나가 스켈레톤이다 데이터가 로드되기 전에 컨텐츠의 자리비움을 표시하여 사용자가 기다리는 시간을 덜 지루하게 하는 ui이다 장점 - 실제 테스트 결과 블랭크 페이지 < 스피너 < 스켈레톤 순서대로 더 빠르다고 느끼게 된다. 단점 - 스켈레톤을 화면마다 표시해야하기때문에 시간이나 비용이 많이 든다. 실생활에서 볼수있는 스켈레톤 예시 스켈레톤 규칙 스켈레톤은 콘텐츠의 로드를 방해하면 안된다! 실제 콘텐츠는 데이터를 가용할 수 있는 시점이 되면 즉시 스켈레톤을 대체해야함 디자인 할 때 애니메이션을 사용하는 것이 좋다 애니메이션은 wave, pulse 중 wave 를 사용하는 것이 로딩 시간을 더 짧게 느끼게끔 한다. 느리고 안정적인 애니..