페이지를 만들어보자

🔥 구현 할 내용 > 1. 로그인 전체를 감싼 border가 적용된 div 태그 사용. instagram 로고는 'westagram'으로 변경 후 폰트 적용. 적절한 type을 사용한 input 태그 사용, placeholder 속성 사용. button 태그 사용.

nav 태그 사용하여 nav bar 만들기.flex 사용하여 각각의 div 위치 구성.댓글 입력 후 enter 또는 버튼 클릭시 댓글 추가.

코드는 계속 추가와 수정을 거치는 유지보수과정을 거친다. 미래의 나를 위해, 팀원들을 위해 가독성이 좋게 만들고 추후 서비스가 추가 될 상황을 대비해 확장성이 좋게 만들어야 한다.새로운 코드를 만드는 것 보다 코드를 수정할 때가 더 힘든 것같다. 이번 과정에서는 수정을

ID, PW 유효성 검사 (아이디 '@' 포함, 비밀번호 5글자이상 + 입력했을 때만 버튼 누를 수 있게 설정)댓글 좋아요 / 삭제 기능 (모든 댓글에 적용)미디어쿼리를 사용하여 반응형 웹 구현: id와 pw의 유효성을 각각 체크하는 함수를 만들어 button을 활성,

사용자 입력 데이터 저장 기능 구현로그인 버튼 활성화 기능 구현댓글 기능 구현댓글 컴포넌트화, Props로 데이터 전달 구현: id와 pw input에 change 이벤트 발생시 event.target.value를 받아 set함수에 저장, input의 value값으로

상수 데이터란 변하지 않는 정적인 데이터로,페이지를 구성할 때 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 데이터들을 말한다.보통 페이지 상단의 메뉴 드롭다운이나 footer의 내용들은 변하지 않는 정적인 데이터이다. 이 부

1. 메인페이지 a. 구현 목표 데이터 베이스 상의 제품을 가져와(API 통신) 메인 페이지에 구현 메인 상단 및 상품 이미지 캐러셀 구현(프레임 워크 사용 x) 각 아이템 클릭시 상세페이지 이동 & 장바구니 버튼 클릭시 로그인되어있으면 장바구니에 아이템 추가,

하나의 컨테이너에 title의 형태와 배경색이 같은 component인 SelecteForm을 각각 width값과 title에 맞게 props로 정보를 넘겨주어 페이지 구현.INPUT_LIST라는 상수 데이터에 id와 title, type, 함수를 넣어주어 map함수와

지난 프로젝트에서는 Product Manager를 맡았기 때문에 이번 프로젝트에서는 Project Manager를 맡았다.1차의 부족했던 점을 보완하고 내가 성장한 만큼 더 좋은 아웃풋을 내고 싶었기 때문에 준비과정이 조금 길었다.제품을 선정하면서 가장 먼저 팀원들과

위와 같이 뒤로가기 버튼을 클릭했을 때 이전의 검색 결과를 보여주는 것을 정리해보려고 한다.먼저 라우터의 경로는 아래와 같다.SearchHeader에서 검색한 내용은 Videos 컴포넌트에서 useParams()을 통해 query로 받는다.마찬가지로 뒤로가기 버튼을 누

통신해서 가져온 데이터를 chashing해두었다가 사용하기 위해 react-query를 사용했다. 그 중 조금 이해가지 않았던 query key와 query function에 대해 정리해보려고 한다. react-query의 사용 먼저 react-query를 사용하기

서버와의 통신을 하는 동안 우리의 코드는 그동안 너무 많은 데이터를 보여줘왔다.통신해야하는 주소, 주소의 param은 무엇으로 주어야하는지 등등..이것을 조금 더 private하게 요청하는 방법으로 class의 private field를 사용해보았다.fakeYoutub

Firebase는 백엔드 없이 간편하게 앱을 구현할 수 있도록 도와준다. 그 중 authentication(인증), 그 중에서도 구글 로그인에 대해 정리해보려고 한다. 공식 문서를 참고할 때에는 firebase > build > authentication 로 들어가면

사용자가 사진을 직접 업로드하는 것은 생각보다 어려운 일이었다.프로그램을 만들며 어려웠던 부분과 해결방안들을 적어보려고 한다.input이니까 당연히 파일 경로도 e.target.value로 접근하면 될 것이라고 생각했다. 하지만 보안상의 문제로 fake path가 포함

Realtime database를 사용하기 위해서는 앱 등록 및 초기화 과정이 필요하다. firebase console을 통해 앱 등록이 되어있다는 가정하에 진행하려고 한다. 다만 보안 규칙을 물을 때 잠금 모드가 아닌 테스트 모드로 진행할 것! 1. 프로젝트 만들기

Snappi 서비스를 만들면서 이메일 인증이나 비밀번호 찾기와 같은 메일 전송, 더 나아가 문의사항을 받을 수 있는 메일 계정을 만들 필요성을 느껴 우리 도메인을 사용하는 메일 계정을 만들었다.이때 우리 계정으로 gmail 계정으로 메일을 전송했을 때 이미지가 깨지고

Snappi 서비스를 개발하면서 소셜 로그인을 구현하게 되었고 이때 OAuth를 채택하여 소셜 로그인을 구현했다.Google 개발자 페이지에서는 로그인을 하는 과정은 아래와 같이 안내하고 있다.1\. 유저가 소셜 로그인을 하면 2\. 구글 서버에서 인증 코드를 제공.3

로그인을 하면 백에서 accessToken과 refreshToken을 받는다.매 요청마다 accessToken을 통해 인증, 인가를 거치는데 이 때 accessToken이 탈취될 경우를 대비해 accessToken의 기한을 짧게 설정하고 기한이 만료될 경우 refres

프로젝트를 하면서 새로고침 & 창닫기, 뒤로가기, 페이지 이동에 대한 핸들링을 해야했고 작업하면서 학습한 내용에 대해 정리해보려고 한다. 1. 새로고침 & 창닫기 이벤트 새로고침 & 창닫기 이벤트의 경우 "beforeunload" 이벤트를 읽어 event.preven