어제보다 더 나은 오늘

TMDB API를 통해 영화 데이터를 받아와 무한 스크롤을 구현해 보았다. 먼저 고전적인 스크롤 이벤트를 사용하는 방식으로 구현해 본 후, Intersection Observer API를 사용하는 방식으로 리팩토링했다. - GitHub 레포: https://github.com/Ah-ae/infinite-scroll - 배포 링크: https://infinite-scroll-practice.vercel.app 구현 화면 영상 1. 스크롤 감지 방식 핵심은 다음과 같다. 1) window.scrollY로 스크롤 위치를 기억한 다음, window.scrollTo() 메소드를 사용해 해당 위치로 보내주기 2) 스크롤이 바닥에 닿았는지를 판별해 바닥에 닿았다면 다음 데이터를 fetch하기 3) scroll 이벤트..

회원가입과 로그인 시, 이메일과 비밀번호 유효성 검사를 한 다음 유효하지 않은 문자열을 입력시 사용자에게 경고 메시지를 주고자 했다. 이메일은 @와 . 기호가 포함되어 있는지 여부를 기준으로 정규표현식을 사용하여 검사하는 함수를 작성했고, 비밀번호는 8~20자 사이의 영문자와 숫자를 최소 1개 이상 포함하는 경우 유효한 비밀번호라는 기준을 세웠다. // It checks for a sequence of characters that starts with one or more non-whitespace characters ([^\s@]+), // followed by an @ symbol, followed by one or more non-whitespace characters for the domain n..

1. (TS 2345) Argument of type '...' is not assignable to parameter of type '...' 문제 상황: 광역시/도를 선택하면 해당 시/도에 대한 시/군/구를 select box에 보여줄 수 있게 하는 코드를 작성하려고 했다. 예를 들어 서울을 선택하면 서울의 코드 11000 중 앞의 두 자리 11을 divisionSelectValue라는 상태에 담고, 해당 상태를 useEffect의 종속성 배열에 넣어서 사용자가 시/도 단위의 지역을 선택해서 상태 변경이 일어날 때마다 districtList에 해당 시/도에 대한 시/군/구 데이터를 담으려는 게 목적이었다. // divisions.ts 파일 예시 export const DIVISIONS_DATA = [..

💡 한 줄 결론: build command 란에 npm run build가 아닌 CI= npm run build을 입력해줘야 한다. (공백 주의) 1. npm run build 만 입력했을 때 deploy log 2. CI=npm run build (= 앞뒤에 공백없음) 입력했을 때 deploy log 이에 대한 netlify docs의 설명 : In some cases, a build may fail due to a warning message that would not cause a build failure when run locally. This is because some libraries and build tools handle warnings differently when they detect..

GitHub access token은 personal information이기 때문에 코드에 토큰이 그대로 포함된 채 commit을 하면 github에서 해당 토큰을 더이상 유효한 토큰으로 취급해주지 않는다. commit하기 전까지 잘 받아오던 데이터를 401 Unauthorized 에러가 뜨면서 더이상 받아올 수 없게 된다. 그리고 몇 분 후에 github에서 친절하게 아래와 같은 메일을 보내준다 😇 그렇다면 이제 할 일은? 새로운 토큰을 재발급 받아서 .env 파일을 생성하고 해당 파일에 새로운 토큰을 잘 적어주자. 그리고 .gitignore에 .env 파일을 추가하자. 상세한 방법은 여기를 참고하면 된다.

📍문제 상황 Login 컴포넌트에서 로그인 버튼을 누르면 GitHub OAuth 인증을 통해 Github resource server에서 사용자 정보를 받아와 Mypage 컴포넌트에서 사용자 정보를 이용해 화면을 그려줘야 했다. 이 과정에서 Mypage 컴포넌트에서 useEffect hook를 이용해 의존성 배열 자리에 빈 배열을 넣어서 Mypage 컴포넌트가 처음 렌더링 될 때 hook의 callback 함수에 axios post 요청을 해서 사용자 정보를 받아오려고 했다. useEffect(async () => { const res = await axios.post("http://localhost:4000/userinfo", { accessToken, }); setGithubUser(res.data...

자바스크립트에서 return 문을 정의하지 않은 함수의 default return 값은 undefined다. 입력값을 받아서 로직을 거쳐 출력값을 반환하는 함수라는 녀석에서 굉장히 기본적인 상식이지만 이 기본을 잊어서 곤혹을 겪는 경우가 종종 있다. 이와 비슷하게 오늘 쇼핑몰 장바구니 기능 구현 과제를 하다가 array.push()의 반환값 때문에 어처구니 없는 에러를 겪었다. 배열의 각종 메소드들은 for loop나 그밖의 다른 방법 등으로 배열을 순회하면서 각종 조건문을 걸어주면 어지간하게 다 구현할 수 있다. 하지만 메소드를 쓰면 그안의 로직은 알 바 아니고 내가 하고 싶은 일에만 집중할 수 있어서 엄청나게 편리하다. 명령형(또는 절차형)이 아닌 선언형 프로그래밍의 이점이라고 할 수 있다. 거기에 ..

📍 목표: 아래 캡처 이미지와 같이 화면의 컴포넌트가 구성되어 있는 상황에서 상단 컴포넌트의 입력값 3개(작성자 이름(author), 제목(title), 본문(bodyText))를 서버에 보낸 후, 하단 컴포넌트의 제일 위쪽에 form에서 보낸 새로운 데이터가 뜨게 하기 create-react-app으로 만든 폴더 구조는 다음과 같다. |--- /fe-sprint-my-agora-states-react-client | |--- /public | |--- /img ## icon 등 assets 이미지 파일이 들어있는 폴더 | |--- index.html | |--- /src | |--- App.js | |--- index.css | |--- index.js | |--- /components | |--- D..

모듈을 내보내고 가져오는 데에는 크게 두 가지 방식이 있다. 1. 유명 내보내기 (named export) : 여러 값을 내보낼 때 유용하다. 가져갈 때는 변수나 함수의 내보낸 이름과 동일한 이름을 사용해야 한다. constructor를 내보내면 메소드까지 다 같이 사용 가능하다. export { func, foo } // func 와 foo (함수 또는 변수) 내보내기 import { func, foo } from "경로" 2. 기본 내보내기 (default export) : 어떤 이름으로도 가져올 수 있다. 아래 예시에서 동일한 변수명 agoraStatesDiscussions이 아닌 다른 변수명을 지정해도 상관없다. 다만 가져오는 파일 안에서 식별자 충돌이 없어야 한다. default 내보내기는 중괄..

지난주 금요일 리액트에 입문하고 리액트를 학습한지 D+6일차가 되었다. 지금까지 React intro / SPA / state & props 총 3개의 과제를 하면서 바닐라 JS를 쓰는 것보다 리액트를 쓸 때의 간편함을 경험할 수 있었다. 마이 아고라 스테이츠 과제를 할 때 삽질했던 기억들이 좋은 반면교사가 되어주었다. 컴포넌트로 설계하면 편했을 것을... 😇 지금까지 배운 React의 핵심은 : 1. 데이터를 가져온 다음, 2. map() 메소드를 돌려서 받은 데이터를 화면에 뿌려준다. 1번 데이터를 받는 과정은 아직 서버와 통신하는 걸 배우지 못해서 더미 데이터로 하고 있다. 새로운 데이터가 생성되었을 때 기존 데이터와 합치는 것이 역시 관건인데 이 부분은 과제하면서 역시나 삽질을 많이 했고, 결론은..