프로젝트를 진행하던 중, main 브랜치의 내용을 soha 브랜치로 가져오려고 pull을 하던 중 다음과 같은 에러가 발생했다.
fatal: Not possible to fast-forward, aborting
뜻은 ff-only를 사용 불가능해서 중단됐다.. 뭐 이런 소리 같다.
해결 방법을 엄청 서칭한 결과 rebase를 해서 confilct를 해결하고 브랜치로 다시 push를 하면 된다~~ 라고 해서 열심히 해봤지만..? 안됐다.. 그래서 stack overflow의 다른 해결 방법을 통해 해결했다!
git pull --no-ff 해당 명령어를 입력해주고 다시 add와 commit을 하니 정상적으로 잘 pull 되었다..ㅜ
매번 느끼는거지만 git은 참.. 어렵다.. 알다가도 모르게 만들어.. 열심히.. 공부해야겠다..
참고
해결방법: stack overflow
그림으로 이해하는 merge –no-ff, squash, rebase 그리고 pull request(PR)
내가 styled-reset을 알기 전까지는 cdn 링크나 css 코드로 직접 속성을 초기화했었다. 하지만 이번에 react를 공부하면서 간단하게 할 수 있는 방법이 없을까? 찾던 중에 styled-reset을 알게되었다.
해당 방법을 통해 쓸모없는 코드 길이를 대폭 줄일 수 있었다.
styled-rest
-
설치
npm i styled-reset 명령어를 작성하여 styled-reset을 설치
-
적용
App.js 파일에 다음과 같이 작성하여 사용한다.
import { Reset } from 'styled-reset';
const App = () => (
<React.Fragment>
<Reset />
<div>Hello, Soha!</div>
</React.Fragment>
);
import를 통해 Reset을 불러오고, 작성할 내용들의 상단 (즉, 루트 태그 바로 아래)에 Reset을 불러오면 된다.
styled-reset 공식 링크
react-hook-form 패키지에서 useForm() 훅을 불러와, 컴포넌트 함수 안에서 훅을 호출한다.
해당 결과로 register()과 handleSubmit()를 얻을 수 있다. (즉, 사용할 함수 적으라는 것)
register()로 입력란을 등록, handleSubmit()으로 submit 이벤트를 처리한다.
입력한 내용을 alert로 브라우저에 띄운다. (잘 받았는지 확인하기 위해서)
중복 제출 방지
form에서 이벤트 처리가 종료되기 전에 다시 버튼을 클릭할 경우 양식이 중복 제출되는 문제를 막기 위한 코드이다.
작성한 코드는 처음 제출 버튼을 클릭했을 때, 버튼을 비활성화 시킨다. 이후 이벤트가 종료되면 제출 버튼을 다시 활성화시키는 방식으로 중복 제출을 방지한다.
formState 속성은 양식이 현재 어떤 상태인지를 담는다. formState에 isSubmitting 속성을 읽어서 양식이 제출중인 상태인지 아닌지를 알아낸다.
제출 버튼의 disabled 속성에 isSubmitting 값을 설정하여, 회원가입 버튼의 양식 제출이 끝날때 까지 비활성화시킨다.
유효성 검사
이메일, 비밀번호와 같은 입력란은 필수 입력으로 하고, 이메일과 핸드폰번호는 유효한 형식이 정해져있기 때문에 해당 형식을 맞춰야 제출이 가능하도록 한다.
register()의 두번째 인자로 옵션을 넘겨주면 유효성 검증이 가능하다.
검증 타입은 required, pattern, minLength 등이 있다.
message에는 유효하지 않은 형식일 경우 출력되는 오류 메세지를 담는다.
입력한 값이 유효하지 않을 경우 form이 제출되지 않고, formState 속성의 errors 객체에 오류 내용이 저장된다. 이때, error.phone&&<Warning>~ 코드로 저장된 에러 메세지를 출력하도록 했다.
aria-invalid는 스크린리더 사용자를 위한 것으로 일단은…? 굳이 작성하지 않아도 된다.
MUI
공식문서를 참고하여 TextField와 Button 컴포넌트를 불러와 사용했다.
참고자료
React Hook Form 라이브러리 사용법
종합소감
react-hook-form을 사용하여 form을 만들어 봤다. 이전에는 html로만 작업했다면 이번에는 해당 라이브러리 사용하여 작업했더니 좀 더 상세한 기능을 쉽게 작업할 수 있어서 좋았다.
그리고 MUI를 사용하여 디자인을 작업했는데, 디자인을 어떻게 할 지 크게 신경을 쓰지 않아서 좋았다. 다음번에 프로젝트 할 때에도 유용하게 사용이 가능 할 듯 싶다.
UMC, Web 스터디를 마치며
해당 기록들은 UMC 동아리 활동 중 Web 스터디의 과제이다.
동아리가 신설되고 입부하면서 Web 스터디장을 맡게 되었다. 내가 적극적으로 스터디장을 하고 싶다는 어필을 통해 하게 되었다. 처음에는 원대한 꿈을 가지고.. 파트장을 했으나, 이후에 갈 수록 생각한 것 처럼 못한게 끝이 나니 아쉽게 느껴진다.
스터디를 진행하면서 본격적으로 React를 사용해보았다. 이전에는 강의를 보면서 따라만 했다면, 이번에는 직접 어떻게, 어디에 사용해야 하는지 고민을 하며 공부하고 적용하였다. 정말 쉽지 않았고 때려치고 싶었던 적이 한 두번이 아니지만, 파트장이라는 위치와 앞으로의 프로젝트들을 위해 대충하지 않고 정말 열심히 진행했다.
스터디를 진행하면서 새롭게 알게 된 지식도 있었고, 이름만 알았던 개념들의 상세 내용도 알 수 있었다. 단순히 글을 읽는 것이 아닌 직접 배우고 활용하면서 몸소 깨달을 수 있었다.
또한, 스터디를 통해 다른 사람에게 나의 지식을 공유하고, 질문하고, 같이 문제를 해결해 나가면서 역시 혼자 공부할 때보다 누군가 나의 문제를 듣고 같이 고심해줄 사람이 있다는 것에서 공부에 대한 불안감이 줄어들고 안정감을 얻을 수 있었다. 물론, 모두 해결할 수는 없었지만 같이 할 사람이 있다는 것에서 오는 안정감이 나를 편안하게 해주었다.
매주 과제를 하면서 힘들기도 많이 힘들었고, 짜증도 났지만 지금 그 시간들로 인해 내가 더 성장했다는 것은 부정할 수 없는 사실이다. 그리고 여름방학동안 진행해야 할 프로젝트 2개 모두, 이번 스터디의 과제들을 수행하면서 배운 지식들을 적극 활용하게 될 것이다. 대략 2달동안 매주 과제를 수행하느라 힘들기도 했지만..! 이로 인해 배운점도, 많았기 후회없는 정말 참여하기 잘 했다는 생각이 들었다.
카카오 소셜로그인 구현하기
1. 인가코드 받기 및 플랫폼 추가
kakao develpoers에서 인가 코드를 받을 수 있으며 플랫폼을 추가할 수 있다.
kakao developers 링크
2. Redirect URI 설정
로그인 성공시 Redirect할 URI의 주소를 작성한다.
3. 인가코드 받기
인가코드는 Redirect URI를 통해서 받을 수 있다.
KAKAO_AUTH_URL의 경로로 요청을 보내면, Redirect URI로 이동하면서 인가 코드를 발급 받는다.
이때, client_id, redirect_uri, response_type이 필수로 담겨야 한다.
client_id는 REST API키, redirect_uri에는 2. Redirect URI 설정에서 작성한 URI, reponse_type에는 code 고정 값을 담으면 된다.
Key는 공개되지 않는 것이 보안에 좋으므로 따로 파일을 생성하여 관리한다. 해당 파일은 .gitignore에 작성하여 깃허브에 업로드되지 않도록 한다.
카카오로 시작하기 버튼을 클릭하면 지정한 Redirect URI로 이동하여 인가코드를 얻을 수 있다.
4. Redirect 주소 Router 설정
Redirect URI에 작성했던 successlogin으로 이동할 수 있도록 라우터를 설정해준다. 라우터를 설정하지 않으면 페이지가 존재하지 않아서 이동할 수 없다.
5. 사용자 토큰 받기
버튼을 클릭하면 localhost:3000/successogin?code=-4Wr…로 이동하는데 -4Wr…부분은 카카오에서 제공한 인가코드이다. 해당 인가코드는 매번 변경된다. 따라서 인가코드를 사용하여 토큰을 가져온다.
토큰은 POST 방식으로 카카오에서 얻을 수 있다. 파라미터에 인가 코드가 필요한데, 이 인가 코드를 사용하기 위해서 URL에 담겨있는 뒷부분을 추출한다.
const location = useLocation();
const KAKAO_CODE = location.search.split('=')[1];
fetch 함수를 이용하여 POST 방식으로 요청을 보내 localstorage에 토큰을 저장한다.
토큰을 정상적으로 잘 받아서 로그인이 되었다면 자동으로 Redirect로 설정한 페이지로 이동한다.
로그인에 실패했다면 else 부분의 navigate(’주소’)로 이동한다.
4. 여러 페이지 생성
-
로그인 실패 페이지
-
로그인 성공 페이지
5. 실제 구현된 페이지
로그인 페이지
카카오 소셜 로그인
카카오 소셜 로그인 정보 제공 동의
로그인 성공 페이지
로그인 실패 페이지
트러블 슈팅
localStorage에 토큰 저장 안됨
-
문제
localStorage에 토큰이 저장 안된다…
에러 코드도 따로 발생하지 않아서 어떤게 원인인지는 잘 모르겠다…
ERR_SSL_PROTOCOL_ERROR를 검색했을때, 크롬 문제일 수도 있다고 해서 사파리로 접속했으나 똑같이 에러 발생. 모바일로 접속해도 똑같이 에러 발생..
캐시 삭제 및 강한 새로고침을 해도 똑같이 에러가 발생한다.
KakaoLoginData.js에 담아둔 값들도 정상적으로 넘어온다. 코드도 참고 자료를 바탕으로 작성했으나, 토큰이 localStorage에 저장이 안된다.
-
해결
REDIRECT_URI의 주소를 https로 설정해둬서 안됐다.. localhost라 http로 했어야 했는데..ㅋ
종합소감
카카오에서 REST API KEY 발급받아 카카오 소셜 로그인을 구현해보았다. 이전에, MOA WEBTOON 프로젝트를 진행했을 때, 네이버와 카카오 소셜 로그인을 구현했었다. 하지만, 나는 그저 버튼만 만들었을 뿐 실제로 기능 구현은 백엔드 분이 했었다. 그때 옆에서 보았던 것을 되새기고 참고 자료의 글을 읽고 공부하면서 구현해 보았다.
간단하게 생각했지만.. 전혀 간단하지만은 않았다 ^^.. 물론 다 하고 느낀 것은 내가 능숙해지면 이건 쉽게 할 수 있을 것이다! 라는 건 느껴졌다. 다음 번에는 더욱 빠르게 구현 할 수 있을 것 같다!
참고자료
카카오 소셜로그인 프론트엔드 (리액트) 파트
Kakao Developers
[React] 카카오 소셜 로그인 구현하기
Styled Component 적용하기
마켓컬리 접속 시, 뜨는 팝업창에 스타일드 컴포넌트를 사용했다.
PopupWrapper와 ButtonBox를 생성하여 스타일을 적용해줬고, button 스타일은 새로 생성하는 것이 아니라 태그에 스타일드 컴포넌트를 사용하여 스타일을 적용하였다.
화면에 잘 출력되는 것을 확인할 수 있다!
반응형 웹 구현
미디어 쿼리를 사용하여 화면이 1260px 이하 일 때, 다음과 같이 스타일이 변경되도록 설정하였다.
화면의 비율이 줄어들어도 아이템 잘림이 없이 잘 줄어든 것을 확인할 수 있다.
문제 및 해결
- 중첩 적용 안됨 (미디어쿼리)
- 문제
content-right의 left를 36px로 설정했는데, 화면 사이즈가 1260px이 되었을 때, left 설정했던 것을 없애려고 left: 0;을 하였으나 중첩이 적용되지 않았다.
- 해결
중첩이 안되는 이유는 찾지 못했지만..
해결은
!important를 사용하여 left: 0;이 무조건 적용하도록 했다.
소감
미디어 쿼리는 사용해본 적이 있지만 styled-component는 처음 배우고 사용해 보았다. 처음에는 styled-component를 복잡하게 생각하고 느꼈는데, 새삼 이것처럼 간단하게 배울 수 있는건 없는 것 같다. 시작도 안하고 지레 겁먹는 것은 좀 고쳐야 겠다..!
반응형 웹을 만들기 위해서 미디어쿼리를 사용했는데, 생각해줘야 할 것이 은근 많았다. 그래서 화면의 비율에 따라 잘 줄어드는 것을 보면서 뿌듯했다..!