useEffect

📌 axios 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리다. ➡️ 특징 > • 브라우저를 위해 XMLHttpRequests 생성 • node.js를 위해 http 요청 생성 • Promise API를 지원 • 요

📌 자바스크립트는 비동기 처리가 기본이기 때문에 이러한 비동기 함수를 동기 함수로 처리할 수 있게 해주는 async & await에 대해 알아봅시다! ✏️ async 함수 async는* 함수 앞*에 위치합니다. 이 함수는 해당 프라미스를 반환합니다. ✏️ a

보통 react를 작업할때 create-react-app를 사용해 작업했는데, 이를 사용하면 번들러로Webpack를 사용하게 되는데 코드의 양이 늘어날수록 속도가 상당히 느리다는 걸 알았습니다. 이를 해결하기 위해 Vite를 사용하기로 했습니다. esbuild를 번

🗣️ 상태관리 라이브러리인 Recoil를 알아보고 사용해봅시다!프로젝트로 이커머스 사이트를 만드는 중에 문제가 발생했다. 상품을 장바구니에 담기 버튼을 누르면 장바구니에 담아지도록 구현했다!장바구니 페이지에 들어가는 건 물론이고, 아래 사진과 같이 페이지 헤더에 있는

매번 헷갈리는 ellipsis... 이번에 적어놓기 😵‍💫\-webkit-line-clamp: 1; -> 이건 한 줄 넘어가면 안녕... 이렇게 보여진다!으로 원하는 줄 수를 적어주면 된다! 잊어버리지 말자!!!

🫡 요즘 API 사용하는 걸 연습하는 중인데 정리해보면 좋을 거 같아서 작성해봅니다! 📌 axios부터 설치해주자! >

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been block

😢 반갑지 않은 손님.. 오류가 또 찾아왔습니다 FirebaseError: Firebase: Error (auth/invalid-api-key). 📌 문제 상황 react에서 firebase을 사용해 로그인 회원가입까지 끝내고 깃허브에 푸시해줬고 배포해놨던 ve

🗣️ react-create-app으로 firebase 연동을 하는 법을 알아보겠습니다!이걸 가지고 연결하겠습니당보통 .env 파일을 사용할땐 npm install dotenv으로 설치해주지만 react-create-app으로 하는 중이라면 이미 깔려있기 때문에 설

😵‍💫 라우터를 사용하기 위해 Link 태그를 사용하였는데 밑줄이 생긴다...style={{ textDecoration: "none"}}를 추가해주면 됩니다!만약 보라색으로 글씨가 남아있다면 Title에 color로 원하는 색을 설정해주면 됩니당

🗣️ 오늘은 구글폰트가 아닌 react-create-app로 만든 리액트 프로젝트에 네이버 글꼴을 적용하는 법을 알아보겠습니다!⛓️ 네이버 나눔 글꼴저는 이번에 새로나온 나눔스퀘어 네오를 써보겠습니당react에서 글꼴을 쓰려면 ttf파일이 있어야 하기 때문에 압축파일

🗣️ 프론트엔드를 학습 중이시라면 내가 만든 웹 페이지를 배포하고 싶으실텐데요!오늘은 vercel를 이용해 배포하는 간단한 방법을 알아보겠습니다!!!!vercel위 사이트에 접속하여 회원가입을 먼저 진행해줍니다전 이미 가입을 해서 바로 대시보드로 넘어가네요!참고바랍니

😢 The requested URL returned error: 403 오류 해결하기 먼저! 오류가 뜬 상황은 이러하다.. 깃허브에 새로운 repository를 만들어주고 프로젝트를 연결하려고 터미널을 켰다. _git init를 시켜주고 git add도 했고 gi

🗣️ react 프로젝트를 실행하는 법에 알아보겠습니다!node.js자신의 운영체제에 맞는 것으로 다운 받습니다14.0.0 버전 이상 🆗Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요합니다npx create-react-app my-a

처음 1주차 후기를 적었을때보다 확실히 아는 것도 많아지고 스스로 무언갈 만들어낼 수 있다는 점을 실감할 수 있어서 좋습니다. 언어마다 한달 공부하고 한달 안에 과제를 완성해서 제출하는 것이 큰 도움이 되었습니다. 코딩테스트도 매주 꾸준히 하고 있고, 문제가 저번보다

🗣️ ES6에서 새롭게 지원하는 모듈 형태를 사용하기 위해 export, import를 사용해보는 법을 알아봅시다!모듈이란 재사용할 수 있는 단위로 나눈 코드들의 묶음이라고 할 수 있습니다. 이렇게 나누는 것을 모듈화라고 합니다.💡 제일 먼저 모듈을 사용하기 위해

🗣️ 자바스크립트에선 new Date()를 사용하면 현재 시간을 알 수 있고, 시간을 조절할 수 도 있다. 이것에 대해 알아보자!

가장 먼저 말하고 싶은 점은 html/css과는 차원이 다르다는 것이다. 물론 처음보는 언어는 아니지만, 정식으로 배워본 것은 처음이기에 이미 알고 있던 다른 언어들과 헷갈리기도 하고, 자바스크립트만의 메소드같은 것도 바로바로 생각해내기가 어려웠다. 하지만, 이번 과

🗣️ addeventlistener를 사용해 다양한 마우스 이벤트를 줄 수 있는데 이벤트 종류에 대해 알아봅시다! 📌 mouseover, mouseout, mouseenter, mouseleave !codepen[subinnx/embed/XWxXvPe?def