최근 면접 공부를 하는 중에 React를 사용하는 이유에 대한 질문을 보게 되었다.뭔가 두리뭉실하게는 알고 있지만, 막상 면접에서 물어보면 제대로 된 대답을 하지 못할거 같았고 스스로도 사람들이 많이 사용해서요, 많은 회사에서 사용해서요라는 답은 하고 싶지 않았다. 기

1. 소개 SSAFY에서 한 마지막 프로젝트로서 부동산 중개 플랫폼을 만든적이 있다. 사용자가 매물을 올릴때 업로드할 사진을 미리볼수 있게 사진 미리보기 기능을 구현하였었는데, 문제는 수정할 때였다. 처음 매물을 작성할때 프론트단에서 FormData 타입으로서 서버에

하반기 공채기간으로 인해 무수한 자소서를 쓴다고 사이드 프로젝트에 집중을 하지 못했었는데 마침 서버쪽에서 상품 목록 api가 구현이 되어서 이 부분을 조금 구현해보았다.Link tag는 오직 하나의 자식만 가질수 있는데 위와 같이 여러개의 자식 태그가 있어서 발생한 에

.env에 URL을 작성한 다음 아래와 같이 설정을 해주었다. timeout은 10초로 맞춰주었다.그 이후에 회원가입 api 호출 함수를 구현하였다. 인증에 관련된 api는 여기서 같이 관리를 할 예정이라 객체 형태로 만들었다. 미리 만들어 놓은 SignUpType을

로그인 페이지는 회원가입 페이지와 사실 큰 차이가 없었다.회원가입때와 마찬가지로 테스트코드를 먼저 작성하였다. 마찬가지로 layout과 interaction으로 나누어서 테스트 코드를 구현하였다. 에러메시지가 잘 뜨는지 그리고 입력을 제대로 했을때는 에러메시지가 안뜨는

같이 프로젝트를 하기로 한 친구와 기획에 대해 이야기를 나누고 개발에 들어가기로 했다. 먼저 인증부분인 회원가입 페이지를 제일 먼저 만들어보았다.지난 프로젝트들 동안 한번도 하지 못한 TDD를 꼭 해보기로 했기에 테스트코드를 먼저 작성하였다. 먼저 layout을 고려한

지난 프로젝트들에 대해 아쉬움이 많이 있기도 했고, 새롭게 공부한 기술스택들을 활용해보고 싶었는데 마침 백엔드를 하는 지인이 사이드 프로젝트 관심없냐고 물어보았다. 프론트엔드를 담당하는 나로서는 좋은 기회였기 때문에 바로 관심이 있다고 대답을 하게 되었고 그렇게 사이드

원티드에서 진행을 하는 프리온보딩 프론트엔드 챌린지 8월 강의를 들으며 배운것과 코드를 구현한것에 관해 정리하고자 합니다.예전부터 계속 미뤄왔던 react-query 공부를 드디어 시작하며, 기존의 todo-app에 적용을 해보았다.먼저 리액트 쿼리를 설치해주었다. 설

원티드에서 진행을 하는 프리온보딩 프론트엔드 챌린지 8월 강의를 들으며 배운것과 코드를 구현한것에 관해 정리하고자 합니다.선언적 프로그래밍. How가 아닌 What에 더 집중하여 코드 작성하기지나친 추상화는 오히려 안좋다. 적절한 추상화가 중요시간 날때 오픈 라이브러리

https://recoiljs.org 의 내용을 타이핑 한것입니다.user 이름을 얻기위한 간단한 동기 atom과 selector 예제만약 user의 이름을 쿼리해야하는데 DB에 저장되어있다면, Promise를 리턴하거나 async 함수를 사용하기만 하면 된다

호환성 및 단순함을 이유로 외부 글로벌 상태 관리 라이브러리 보다는 React 자체에 내장된 상태 관리 기능을 사용하는것이 좋음Context는 단일 값만 저장할수 있고, 여러값들의 집합을 담을수 없다는 한계가 있음.API와 의미 및 동작을 최대한 React답게 유지하기

forEach를 직접 구현한다고 가정해보자.위의 함수를 테스트하기 위해, mock function을 사용 할 수 있다. 모든 mock function 은 .mock property를 가지고 있다..mock property는 mock 함수가 어떻게 호출 되었는지, 어떤

만약 만은 테스트를 위해 반복적으로 할 작업이 있다면, beforeEach 혹은 afterEach 훅을 사용할수 있다.예를들어, 모든 테스트 이전에 호출되어야 하는 initializeCityDatabase() 함수가 있고, 모든 함수가 호출 된 이후에 실행되어야 하는

promise가 rejected 되면 그 테스트는 실패한다.예를 들어, peanut butter라는 문자를 반환하는 fetchData 함수가 있다고 가정해보자.test에서도 async 와 await을 사용 할 수 있다.async를 사용하기 위해서는 test에 넘기는 함

null 여부 확인undefined여부 확인tobeUndefined의 반대true로 취급되는 구문 확인false로 취급되는 구문 확인 보다 큰 숫자인지 확인크거나 같은지 확인작은지 확인작거나 같은지 확인정확한 값 일치 여부 확인정확한 값 일치 여부 확인.소수점을 확인할

폰트 사이즈 줄이기 1. 폰트 사이즈 줄이는 다양한 방법 웹 폰트 포멧 사용 local 폰트 사용 subset 사용 Unicode Range 적용 data-uri로 변환 2. 브라우저별 폰트 포멧 파일 크기 : EOT > TTF/OTF > WOFF > WOFF2

웹 폰트의 문제점 FOUT - 폰트가 적용 되지 않은 text가 먼저 표시되고 웹폰트가 적용이되면 text가 바뀜(IE, Edge) FOIT - 폰트가 적용 되기 전가지 text가 표시 되지 않음(Chrome, Safari) 웹 폰트 최적화방법 1. 폰트 적용 시

이번 프로젝트 주제로 부동산관련 웹서비스를 만들기로 결정을 하면서, 지도 구현이 필요하였고 그 부분을 내가 맡게 되었다. 네이버맵과 카카오맵 중 어떤것으로 할 까 고민하다 조금도 레퍼런스가 많은 카카오맵으로 선택을 하게되었다.먼저 https://apis.map

1. Intersection Observer를 이용한 lazy loading 상황 사이트의 첫 메인화면에 영상이 재생이 되고 아래에는 이미지들이 존재. 이미지가 다운로드 다 된 이후에 영상이 다운로드 시작되므로 영상 재생이 조금 늦어질수 있음 해결 방법 이미지를 빠르

현재 프로젝트를 진행중에 Submit 버튼을 누르니 "An invalid form control with name='' is not focusable." 와 같은 에러가 콘솔창에 떴다. 에러가 뜬 원인은 해당 값이 required 처리가 되어있지만 값이 비어있었고, 그