vercel에 배포할 때 나는 오류Local에서 Build, Start, Test, Problems, Push 모두 이상 없는데 vercel에서만 에러가 남 ㅠㅠ오류 메세지 ⬇️tsx 파일을 인식 못하나?다른 파일들은 다 잘 인식함..node_modules 삭제 후 다

한달 전에 적은 글이지만 꼭 기억해두고 싶은 날의 이야기라 기록해두려 한다. 꽤 상세히 적을 예정이라 글이 길 수도 있다. 이번주에는 아주 설레는 일이 있었다.내가 왜 그동안 즐거워하는 일을 하면서도 답답함을 느꼈는지를 단번에 깨닫게 한 그런 일이었다.금요일 저녁,

동기 & 비동기에 대해 공부하다보니 자바스크립트 런타임 환경이 동작하는 원리에 대한 개념이 잘 정리되어 있지 않은 것 같아서 차근 차근 정리해보았다.먼저, JavaScript의 Runtime 환경을 그림으로 간단히 표현하면 아래와 같다.JavaScript Engine소

개발자 인생 첫 면접을 앞두고 있다.너무 막막하고 무섭(?)지만 그래도! 몇 년 후에는 오늘 달달 떨던 내가 귀여워 보이겠지 생각하며 면접 기출 왕 단골 문제인 "프로세스(Process)와 스레드(Thread)" 부터 정리해보자 🥲<span style="back

동적 Routing 관련한 Path Parameter & Query Parameter 의 개념과 차이에 대해 정리하고, URL Parameter 정보를 이용하기 위해 React에서 사용하는 Hook들을 정리해 보았다.url 경로에서 : 다음에 오는 값위의 예시에서는 i

백엔드 API주소는 배포 전까지 매번 주소가 바뀐다테스트 할 때마다 API주소를 쓴 곳을 찾아 바꾸기는 비효율적 → config.js 를 만들어 API 주소를 변수처럼 사용해주자 config.js는 src폴더 안에 만들어야 한다. public 폴더는 접근 불가.exp

useQuery : 데이터를 GET(조회)할 때 사용페이지가 로드될 때, 바로 실행!get 메소드처럼 단순히 조회만 할 때useMutation : 데이터를 create, update, delete (수정)할 때 사용post, patch 메소드처럼 데이터 수정이 있을 때

로그인 구현을 하다보니 Token관리 하는 개념이 너\~~무 헷갈렸다.Access Token은 얼추 알겠는데 Refresh Token은 또 뭐야 🤯조금이나마 이해해보기 위해 쓰는 정리글.실제로 인증에 필요한 Token : Access Token → 중요!하지만 loc

공식문서로 공부하기 카카오 로그인은 어느정도 대충이라도 알고 있는 거였는데도 막상 공식문서만 보고 구현하려니 막막하고… 또 막막했당….. 네이버는 정말 처음 접하는 거니까 진짜 공식문서만 보고 해봐야지! 하고 접근했는데 음…. 모 르 겠 다 ~ ... 이해하기 쉽게

map map... map을 하도 쓰다보니 레이아웃 그릴 때부터 뭔가 비슷한 게 반복된다! 싶으면 map을 돌려버리고 싶은 충동에 사로 잡힘하지만 그러다 map안에 map을 사용하는 사태 발생 🫢코드는 깔끔해 보일 수 있어도 이중 반복문이니까 로딩도 오래 걸리고 효율

이번 프로젝트에서 react-query도 axios도 처음 써보는지라 뭐가 뭔지 모르겠..소셜 로그인 간단할 줄 알았는데..... ㅎ ㅏ........ 일단 지금의 문제가useQuery를 여러번 써야함1이 끝나면 2가 실행되어야 함 (동기적 실행)다른 탭(창)에 갔다오

기록의 중요성을 알고있긴 했지만 1차, 2차 프로젝트를 2주 안에 진행해야 하다보니 그날 그날 공부한 내용 혹은 에러 해결 등에 대해 차분히 정리할 시간이 부족했다. 그러다보니 결국 블로그를 한달 동안 방치하는 사태 발생^^; 어떻게 하면 프로젝트도 하고, 공부도 하고

React에서 font-awesome 사용하기 1. npm 설치하기 2. 필요한 파일에 연결하기 : 첫째줄은 공통, 둘째줄은 원하는 아이콘이름을 import 한다. 3. 원하는 위치에 넣어주기 4. 스타일 적용 : 태그처럼 ClassName 부여하고 적용한

개발 인원 및 기간 개발기간 : 2022/8/1 ~ 2022/8/12 (10일) 개발 인원 : FE 4명, BE 2명 Front-end : 김영수, 박성은, 손민지, 이금관 Back-end : 김동규, 박서윤 프로젝트 소개 식물 판매 및 식물 커뮤니티

React와 만난 지 2주차....!아직도 내가 제대로 공부하고 있는 게 맞는지, 어떤걸 모르는지도 모르겠고 안갯속에 있는 기분이지만그래도 배워서 알고 있는 개념이라도 더 확실히 하고 가자! 하는 마음에 적는 리액트 개념 정리✨Monster Card Component

댓글 기능을 구현하다보면 같은 Element가 반복됩니다. React에서는 이 반복되는 Element를 컴포넌트로 만들어 재사용할 수 있는데요. 바로 이 때, map() 함수가 사용됩니다. 댓글이 새로 달릴 때마다 댓글 컴포넌트를 리턴해주는 코드를 작성했습니다.

JSX - Rendering: Javascript Syntax eXtension 자바스크립트 확장 구문html 마크업 + javascript 로직을 모두 사용할 수 있다DOM + event 를 사용할 때보다 훨씬 간단하다여러개의 태그가 있다면 하나의 부모태그로 묶어줘야

어려운 단어들이 늠나 많이 때려 박아서 어질어질하다.그래도 하나씩 정리해보자.🥲: JS를 읽고 해석할 수 있는 도구, 실행 환경.자바스크립트의 탈웹을 가능하게 함웹(브라우저) 이외의 공간에서도 자바스크립트를 사용할 수 있게 한다.↪️ Node를 알아야하는 이유?Rea

웹이 발전하면서 그에 발 맞추기 위해 Framework가 필요해졌다. ⭐️DOM 조작⭐️이 빈번해지면서 먼저 등장한 것이 jQueryjQuery가 한계를 느껴 등장한 것 → Framework / LibraryAngular / Vue / React: 공통점 - 다른

하이퍼 텍스트= html로 만든 웹 페이지를 주고 받는 규칙→ Client ↔ Server 간의 통신에 필요한 규칙을 정한 것.1요청 1응답이 기본State : 기억력, 메모리HTTP 통신은 각각 독립 → 과거의 통신 결과를 보존하거나 기억하지 않음.Stateful: