Nomad/twitter_clone

이제 Login을 만들겁니다. 로그인과 계정생성이 필요하기 때문에,routes 밑으로 login.tsx와 create-account.tsx를 생성해줍니다.사진과 같이 코딩해주고, layout에서 랜더링되는건 원치 않기에아랫쪽에 별도로 만들어줍니다. 이후 결과를 확인해보면layout에 묶여있지 않고 /create-account로 접속했을때 해당 tsx 파일이 랜더링 되는것을 확인할 수 있습니다.이제 style components를 사용해서 전역 스타일을 적용해볼겁니다.App.tsx에 GlobalStyles로 전역스타일을 설정해줄겁니다. 백틱을 사용하여 작성합니다.reset으로 css를 초기화 해줍니다.그 후 전체 디자인과 Body 디자인을 정의해줍니다.이후 function에 GlobalStyles를 선언해..

이제 Dependency를 설치할겁니다. vscode 내부 터미널을 열고 아래 Command를 순서대로 입력합니다.npm i react-router-dom@6.14.2npm i styled-resetnpm i styled-components@6.0.7npm i @types/styled-components -D이번 챌랜지는 버전을 위와 같이 사용하니 필히 버전 맞춰서 설치해줍니다.이제 Router를 만들어줍니다.App.tsx에 router를 만들어주고 src 아래 components 폴더를 만들고 layout.tsx를 생성합니다.layout.tsx에는 아래와 같이 코드를 작성합니다.이후 src 밑으로 routes 폴더를 생성하고 폴더안에 home.tsx를 만들어줍니다.home.tsx에는이렇기 기본틀을 만들..

이제 프로젝트를 vscode로 열겠습니다. 그런데 남들이 터미널로 여는것처럼 code 명령어로 열려고 하면 아래와 같이 명령어를 찾을 수 없다고 나올겁니다. 그렇다면 vscode를 열고 (cmd + shift + p)를 눌러줍니다. 그럼 커맨드 명령창이 나옵니다.위와 같이 shell 만 입력해도 PATH에 'code' 명령 설치라고 나옵니다. 설치해주시고, 코드 명령어로 실행하면 vscode가 열리게 됩니다.일단 npm을 설치하기 위해 vscode 내에서 터미널을 열겠습니다.단축키 (control + shift + ~)로 터미널을 열고 npm install 또는 npm i 해주면 됩니다.설치를 완료하고 확인을 해줍니다. npm run dev 해주시고 URL 들어가시면 네, 진행이 잘 된걸 확인할 수 있습..

두 번째 과제, 소셜 로그인 구현일단 환경세팅을 합시다.맥북으로 진행하기에 Homebrew를 설치해줍니다.한국어로 설정하고 바뀐 아래의 명령어를 터미널에 입력합니다.이런식으로 Password를 입력해야 하는데 맥 패스워드 입력하시면 됩니다. 그럼 쭉 설치가 됩니다.엔터 눌러주시면 됩니다.이후 잘 설치가 되었다면이렇게 버전 명령어 입력시 올바르게 나옵니다. 만약 찾을 수 없다고 나오시면,$ brew --versionzsh: command not found: brew# zshrc에 homebrew path 추가$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc# zshrc 반영$ source ~/.zshrc명령어를 통해 path 추가해주시면 됩니다. (참고...

노마드코더에서 진행하는 트위터 클론코딩 챌랜지에 참여했습니다.첫번째 과제는 와이어프레임 제작하기.이전에 했던 프로젝트들은 대부분 피그마로 제작을 했습니다. 그렇기에 이번에도 피그마로 끄적끄적...대충 완성은 시켰는데목표는 모던한 커뮤니티 만들기.이전에 해보지 않았던 다른 기능들을 찾아서 추가해보려고 합니다.완주를 위해서 화이팅!