[Error] vercel 배포 시 Invalid API key 에러 발생
로컬에서 정상적으로 작동하는 서비스가 vercel 배포시 invelid api key 에러가 발생했다.API KEY를 .env 파일에서 보관하고 gitignore 에 추가했다. 이같은 이유는 보완상의 이유로 github에 공유되는 것을 막기 위해서였다.그렇다면...
[TIL] React Router Dom 이해
기존 라우팅 아키텍처는 라우팅이 실행 중인 앱 외부의 구성에서 처리되었다.그러나, React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. 쉽게 말해, 웹 앱에서 동적 라우팅을 구현 할 수 있게 해주는 라이브러리 이다.리
[개인프로젝트] 상세 영화 정보 모달 만들기(1)
영화 상세 정보 모달 생성 Row 컴포넌트 내에서 영화를 클릭하면 해당 영화의 상세정보 페이지를 모달로 노출시키고자 한다. 이를 위해, 첫번째로 Row 컴포넌트에서 해야할 작업과 두번째, Row 컴포넌트에서 props로 전달 받은 영화 정보를 토대로 모달 컴포넌트에서
[개인프로젝트] (에러핸들링) Row Component useEffect 경고( React Hook useEffect has a missing dependency eslintreact-hooks/exhaustive-deps)
태마 별로 영화를 나열 하기 위한 Row Component를 설계한다. 1) trending Now 2) Top Rated 3) Action Movies 4) Comedy Movies 모든 Row Component 의 UI는 같으므로, 재사용
[개인프로젝트] Category Component
배너 컴포넌트와 margin-top: 30pxgrid로 배치하여, 5개의 컨텐츠가 25px 간격으로 동일한 비율로 공간을 차지하게 한다.768px 이하로 크기가 줄어들 경우, 1개의 컨텐츠만 공간을 차지하게 한다.Wrap Styled Component에 스타일링을 해서
[개인프로젝트] 비디오 배너 생성(Iframe 컴포넌트)
목표 the movie DB API로 받아온 영화 데이터 중 비디오 데이터를 배너 컴포넌트에서 재생하려고 한다. 비디오 데이터가 있을 경우, 배너에 Play 버튼이 활성화 된다. 해당 버튼을 클릭하여, 비디오를 재생한다. 방법 Play 버튼을 클릭하면, 기존의 배너
[개인프로젝트] styled-component 외부 url : new URL vs props
배너 이미지 사용하기 배너 포지션 사이즈 문제 발생 styled-component 에서 background-image 에 외부 url을 전달 할 때 다음과 같은 에러가 발생했다. > TypeError: Failed to construct 'URL': Please u
[개인프로젝트] API 호출(1)
Banner 컴포넌트에서 배경 이미지를 사용하려고 한다.사용될 이미지 소스는 The Movie DB API 에서 받은 데이터를 사용할 것이다.API 요청을 위한 Axios 인스턴스를 생성하여 재사용성을 높이려 한다. Banner 컴포넌트가 랜더링 될 때, Axios 인
[에러핸들링] styled component 전역 스타일링(Global Style)
App Component에 전역 스타일링을 다음 과 같이 하려고 한다.Styled Component 에서 전역 스타일링을 하기 위한 방법으로 새로운 Styled Component A를 만들어 최 상위 컴포넌트로 만들면 되지 않을까 예상했지만, 권장사항이 아니었다.컴포넌
[TIL] CSS wrapper 추가 학습
\[CSS] 레이아웃 Wrapper 만들기wrapper를 구현할 때 가장 먼저 결정할 것은 너비이다. 보통 1000px - 1300px 사이 값이 일반적이다.화면 크기가 1170px 미만일 경우 가로 스크롤이 발생하므로, max-width로 최대 너비만 사용할 수도 있
[개인프로젝트] styled Component(css 다지기 1.)
NavWrapper : Nav 컴포넌트의 최상위 styled componentsemantic tag : navposition : fiexd 를 작용하여, Nav가 고정되도록 설정z-index : 3 / 네비게이션 컴포넌트가 최상단으로 고정되도록 설정display: fl
[개인프로젝트] 2. Axios 인스턴스 생성 및 요청 보내기
Axios : 브라우저, node.js를 위한 Promise API를 활용한 HTTP 비동기 통신 라이브러리쉽게, BE-FE 간 통신을 위한 라이브러리 이다.fetch의 단점은 응답 데이터를 json으로 변경한 뒤 작업을 해야한다. axios는 응답 데이터를 바로 j
[개인 프로젝트] 1. the moviedb API 생성하기
API key를 기반으로 the movie DB API 에 통신을 시도한다. 1\. https://www.themoviedb.org 로 이동2\. 로그인 후 API_KEY 발급프로필과 설정 -> 설정 -> APIAPI 요청 예 를 참고하여 서버 요청을 보내면
[React] setState(비동기-batch update) vs prevState(Queue)
setState를 사용하여, number state에 1~3를 이어서 더하는 동작을 구현했다.그러나, 최종 number stat는 6이 아닌, 3이 적용되었다.setState는 비동기적 처리과정을 따르기 때문이다.상태 업데이트는 비동기식일 수 있습니다. React는 s
TIL.[Ts] TS 상속(1) 클래스 상속
이전 피드에서 News라는 인터페이스를 기반으로 NewsFeed를 만들고, NewsDetail를 만들고, NewsComment를 만들었습니다.이런 식으로 공통 요소를 만들고, 공통 요소를 확잘 할 수 있는 개별 요소를 만드는 것이 상속의 개념입니다.코드를 작성할 때,
Erro & TIL. [TS] 함수 리턴 값이 2가지 이상 일때, Generics 으로 타입 지정하기
유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다. 함수 getData는 상황에 따라, 타입 앨리어스로 지정한 NewsFeed\[] 타입 혹은 NeswDetail 타입을 반환값으로 갖습니다.이를 표현하
[Erro] TS. String.resplace() 매개변수 타입 에러
해당 메서드는 정규식과 문자열 간의 일치 항목을 찾고 일치하는 하위 문자열을 새 하위 만자열로 바꾸는 메서드이다.string.replace(regexp/substr, newSubStr/function, flags);regexp - RegExp 객체. 일치는 매개변수 s
TIL. [TS] null 타입 지정 시 문제 해결.-타입 가드
어떤 유형의 값이 2가지가 들어 올 때, 그 중 1가지가 null인 즉, 데이터가 없는 케이스에서 무작정 데이터가 당연히 있다고 생각하고 속성을 접근했을 경우, 잊지 않고 null을 체크하라! 변수 container에 두개의 타입(HTMLElement | null)을
개발 일지 중복확인 axios.get?
회원가입 페이지를 구현하던 와중에 문든 의문이 들었습니다.입력한 아이디에 대한 중복확인을 할때, post가 보내야할지, get으로 보내야할 지 의문이 들더군요.저는 당연하게 회원가입에 입력된 아이디 정보를 axios.post로 요청을 보낸 뒤, 서버가 post요청으로
개발 일지 5.13 axios.defaults.withCredentials
지난 3개월간 처음 마주한 스택들을 습득하고 나름 열심히 공부했다고 생각했습니다. 하지만, 첫번째 프로젝트를 시작한지 5일차를 지나며 이것 하나를 분명하게 알게되었죠.헛 공부했구나!지난 3개월간 빈칸에 필요한 코드를 작성하며 흐름을 파악하기 바빴으나,프로젝트는 아무것도