[vanilla project] NIKE 클론 코딩하기 1일차

1. 마크업 완성 시키기

현재 내가 맡은 부분은 로그인 및 회원 가입이다.

나이키 공식 홈페이지를 보면, 여기는 로그인과 회원가입이 따로 구분을 하지 않았다. 이메일을 입력하면 만약에 없다는 가정하에

 

아래와 같이 약관동의 페이자가 나온다.

그 뒤에

이렇게 입력 폼이 나오면 회원가입이 끝난다. 오랜만에 이러한 프로젝트를 진행하는데, 처음 프로젝트 세팅부터가 오래 걸린 것 같았다. 패키지 설치 및 노션 정리, 컨벤션 회의 등등....

프로젝트 하기 전에는 많은 준비가 필요했다. 근데 당연한 것 같다. 하루 이틀 프로젝트도 아니고 3주짜리에, 이는 파이널을 위한 연습이기에 더욱 확실한 준비가 필요했다. 그래서 우리조의 경우는 빠르게 노션, 패키지를 정리한 후 각자 맡을 기능들을 빠르게 정했다. 

나는 예전에 로그인 회원가입을 해봤었다. 그때는 아무것도 모르는 상황에서 그저 챗지피티를 활용하여 무지성 만들기를 했었다. 그러니 이해도 안되었고, 내 코드가 되는 것이 아니었다. 이러한 경험으로 나는 로그인 회원가입을 제대로 다루고 싶었다. 

또한 시간이 된다면 소셜 로그인도 도전을 해보고 싶었다. 하여튼 이번에는 제대로 이해한 코드를 바탕으로 구현을 하고 싶었다. 

 

일단 첫 시작은 HTML, CSS 작업, 즉 마크업 작업부터 해야 한다. 

내가 맡은 로그인, 회원가입 페이지의 경우는 복잡한 CSS는 없었다. 겉 보기에는 근데 막상 작업을 시작해보니 많이 힘든거 같았다. 

똑같은 구조에 인풋만 변화가 되는 줄 알았는데, 안에 있는 기능도 생각보다 많았고, 반응형 구현도 되어있었다. 일단 어느 페이지부터 구현 해야하는지 고민을 해보았다. 로그인 및 회원가입(전) 그리고 약관 페이지, 그리고 각종 정보를 적을 수 있는 페이지, 그리고 비밀번호를 입력하는 페이지 이렇게 4가지가 있었다. 처음 플로우가 로그인 부터이니, 로그인 부터 구현을 시작했다. 

 

오랜만에 CSS를 시작했더니 많이 잊어버렸다.. 그래서 전 배웠던 코드와 구글링을 통해 구현하기 시작했다. 맨 마지막으로 모르면 그때 챗지피티를 검색했다. 현재 우리 프로젝트는 한 파일안에 각자 맡은 폴더를 만들어 안에서 처리하기로 해서 아래와 같이 폴더구조를 구성했다.

 

그래서 로그인, 회원가입, 비밀번호, 약관 페이지를 각각 나누고, CSS는 이 한 페이지안에 다 넣어두고, 세션별로 나눠놨다. 1일차와 2일차에는 마크업 및 파일구조를 짰으며, CSS를 했다.