FE27 [FE] 400번대 클라이언트 에러 종류 및 해결법 정리 12.15.2023 0. Background 클라이언트 에러가 너무 많이 나서 정리하고 두고두고 꺼내보려 기록 1. 400 Bad Request Error 400 bad request의 의미를 한 줄로 정리하자면 요청의 syntax가 잘못되었다 라는 뜻이다. 서버가 요청을 처리하기 전에 발생하며, 다른 클라이언트 에러코드에 모두 부합하지 않을 때 400에러가 발생한다. The request could not be understood by the server due to malformed syntax. This err occurs when the type of error does not fall into any of the other status codes. In another word, this err .. 2023. 12. 15. [Web] Lazy Loading이란 08.08.2023 1. Lay Loading의 탄생배경 2011년-2019년 사이 웹의 사이즈가 커지면서 필요한 assets(특히 이미지들)이 많아졌습니다. mdn web docs에 따르면 데스크탑의 경우 페이지의 평균 리소스 사이즈는 100KB~450KB에 위치하며, 그 중 이미지의 사이즈는 250KB~900KB에 해당하게 되었습니다. 이것을 해결하기위해 Lazy Loading이 등장하게 되었습니다. 2. Lazy Loading이란 Lazy Loading은 쉽게 말하면 화면에 보여지는 부분에 필요한 리소스들의 로딩을 하지 않고, 사용자가 현재 보는 부분에서 피룡한 리소스들만 로드하는 기술입니다. 더 자세히 말하자면, Critical Rerendering Path의 길이를 줄이는 것입니다. Critic.. 2023. 8. 8. [React] SEO 문제의 배경과 극복하는 방법 08.05.2023 0. Background 이 글은 한 유튜브 동영상에서 영감을 받아 작성된 글입니다. 프론트엔드 개발자 지망 학생으로서 좋은 인사이트를 얻을 수 있는 동영상인데 조금 길어서 나누어 읽거나 다른 것을 하면서 편안하게 듣는 것을 추천드립니다. https://youtu.be/w6TiQJ9SlY4 1. SEO에 대한 개요 1-1. SEO 이전의 웹개발 역사 모두 아시다시피 웹개발의 초창기에는 프론트고 백엔드고 구분없이 웹개발을 했었습니다. 그 당시에는 웹이 그렇게 복잡하지 않았으니까요. 그러나 웹과 인터넷이 진화하면서 점점 사람들이 기대하는 기능과 기술들이 많아지고, 코드량도 계속 쌓이게 됩니다. 자세하게 말하자면 확장성, 자원최적화 등등이 있겠지만, 결국 한마디로 웹서비스 규모가 커진 것이.. 2023. 8. 5. [React] React Router - Link 동적 패스 지정 07.23.2023 1. 기본 Link 사용법 App.tsx에 먼저 패스 등록을 해줘야 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from 'pages/Main'; function App(): JSX.Element { return ( ); } export default App; 이 다음 해당 컴포넌트에서 이와 같은 코드를 써주면 된다. import { Link } from 'react-router-dom'; function Example(): JSX.Element { return ( Main ); } export default Example; 2. 컴포넌트에 Link 적용하기 Link는 a태그로 렌더링된.. 2023. 7. 23. React와 TypeScript 초기세팅 07.19.2023 0. Background React.js를 쓸 때 TypeScript가 이제는 거의 디폴트가 되었다. 그래서 두 개를 같이 쓸 때 필요한 초기세팅 프로세스를 간단하게 적어보았다. 1. create-react-app을 사용한다면 (If using create-react-app) 간단하게 create-react-app 명령어로 시작할 수 있다. $npx create-react-app "your target directory" -template typescript 2. react-react-app을 사용하지 않는다면 (If not using create-react-app) $npm i -g typescript 이 명령어의 경우, 로컬에서 다른프로젝트를 이용하여 이미 글로벌로 타입스크립트를 .. 2023. 7. 19. React 이미지 경로 img src에 추가 21.03.05 1. 하나는 상위폴더(src) 아래 images폴더에 있는 아이콘을 import. imconSources들이 있는 imgList.js import 2. imgLIst안의 iconSources배열 내용 3. console로 imgA와 kakaotalk을 인자로 받은 src를 출력해보았다 값이 다른걸 확인할수 있다. why? 4. 해결 : public밑으로 images폴더를 옮겼다 잘됨 5. futher information about src in img tag 이미지를 불러오는 경우는 3가지가 있다. 이미지 태그에 src속성으로 바로 설정 맨 상단에서 이미지 자체 import css 파일에서 backgound-imgae로 사용 2번과 3번의 경우 불러올 이미지가 src폴더 아래에 꼭 있어야.. 2021. 3. 5. 이전 1 2 3 4 5 다음
