[GDG X Whatever] 4주차 회고록

안지수·2023년 9월 10일

😀 2023.09.11.

한 일: 위클리와 개인 공부

이론 공부: 도커 협업 방법, cors 에러
코디네이터 프로필 입력받기 (CoInfo 페이지)
백엔드와 사진 전송 협업
도커 접속 해결

목표: 이미지 업로드 완벽히 이해하기: 완료!

❤️ 좋은 것과 나쁜 것이 무엇이 있었나요?

일단, 프로필 사진을 업로드하는 것을 완벽히 익힐 수 있어서 좋았다. 더불어, 백엔드 팀원과 함께 백엔드에 정보를 전송하는 과정을 수행하며, axios 통신 방법, 사진과 함께 다른 정보들을 전송하는 방법을 익힐 수 있었다. 또 다른 팀원을 통해 소소한 꿀팁도 알게 된 것 같다.

Live share: vs code 코드 공유 프로그램
alt+shift+f : 자동 정렬 단축키

❤️ 진행했던 학습/개발 내용은 무엇이었나요?

1. 프로필 사진 입력받아 미리 보여주고, 백엔드에게 전송하기

: 사진을 입력받는 것은 처음 해보는 기능이라, 이것저것 찾아보며 새롭게 기술 블로그를 작성해 놓았다. 그 과정에서 발생하는 문제들도 정리해놓았다. 오류를 꼭 해결하고 말 것이다..!-> 이번주 내로 해결완료~

2. 도커란? 도커 협업 방법

: 아래에 자세히 정리를 해 보았다.
https://velog.io/@asj1966/%EB%8F%84%EC%BB%A4%EB%A1%9C-%EB%B0%B1%EC%97%94%EB%93%9C%EB%9E%91-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0

❤️ 가장 고민을 했던 부분은 무엇이었나요?

코디네이터 정보를 해결하는 과정에서 계속해서 내 컴퓨터에서만 cors 문제가 발생하는 것이다. 또, 도커 환경 접속에서도 내꺼에만 오류가 나는 것이다. 알고보니, 도커는 포트가 겹쳐서였고, 이는 workbench의 포트 사용을 중지시켜주며 해결되었다. cors문제는 일단 이 문제가 뭔지 몰라서, 기술적으로 학습에 들어갔다. cors 문제는 확장프로그램 설치도 해보고, 백엔드 측에서 allow header를 추가해서 다시 실행을 해 보았음에도 아직 해결하지 못한 문제이다. 내일 다시 해볼 예정이다ㅠㅠ

😀 2023.09.13

한 일:

outerProfile에서 뒤로 가기 아이콘 눌렀을 때 이전 페이지로(useNavigate)
페이지 연결시키기
cors 문제 해결
세세한 디자인

❤️ 좋은 것과 나쁜 것이 무엇이 있었나요?

cors 문제를 해결! 진짜 이번주의 가장 큰 수확이다. 정말 오랜 시간을 이 문제를 해결하기 위해 애썼는데, 드디어 해결했다. 그 문제 해결 방식은 위의 사진전송, cors 오류 해결 링크에 자세히 적어두었다.

❤️ 진행했던 학습/개발 내용은 무엇이었나요?

1. 뒤로가기 버튼 클릭 시, user/co 메인페이지로-useNavigate

-> 상단의 뒤로가기 버튼을 클릭했을 때 user나 코디네이터 메인페이지로 돌아가게끔 하고 싶었다.
-> 처음에는 Link를 이용하여 UserMainPage나 OuterMainPage로 이동하게끔 하려고 했으나, 코디네이터냐 유저에 따라 그 이동 링크가 달라져야했다.

-> 위와 같이 import를 해주어야 한다. 과거에는 useHistory였지만, 최신 버전에서는 useNavigate를 써야한다.

-> 그 이미지를 클릭했을 때, onClick 이벤트 핸들러를 통해 handleGoBack함수를 실행하게 하였고, useNavigate 훅을 사용하였다. 그래서 그 함수가 실행되면 -1을 그 매개변수로 전달하여, 이전페이지로 이동하게 하였다. '-1'은 이전 페이지를 의미한다.

2. joinsuccess 페이지에서 유저나 코디네이터냐에 따라 다른 메인페이지로 이동

-> 삼항연산자를 사용하여, 1이면 코디네이터이므로 코디네이터 메인페이지로, 그렇지 않으면 유저 메인페이지로 이동하게끔 하였다. 코디네이터와 유저의 정보는 localStorage를 통해 저장을 하였다.

3. OuterProfile 게시물 리스트

: PostList 컨테이너 내부에서 마우스로 클릭하고 드래그하면, 마우스 커서의 이동에 따라 컨테이너의 스크롤을 동적으로 조절하는 동작을 구현
-> 이 코드는 사용자가 마우스 클릭 및 드래그로 컨테이너를 수평으로 스크롤할 수 있도록 하는 로직 구현

-> 마우스 이벤트 핸들러들을 추가하였다. 그 내용은 아래와 같다.

onMouseDown={handelMouseDownEvent} // 마우스 클릭 이벤트
onMouseLeave={() => setDragging(false)} // 커서가 컨테이너를 벗어났을 때 드래깅 상태 해제
onMouseUp={() => setDragging(false)} // 마우스 버튼 놓을 때 드래깅 상태 해제
onMouseMove={handelMouseMoveEvent} // 마우스 이동 이벤트

dragging변수: 사용자가 드래그 중인지 아닌지 (초기값은 false로 설정되어 드래그가 시작되지 않은 상태)
clickPoint변수: 사용자가 클릭한 마우스의 X 좌표를 저장. 초기값은 0으로 설정
scrollLeft변수: 컨테이너의 초기 스크롤 위치를 저장. 초기값은 0
handelMouseDownEvent 함수: 사용자가 드래그를 시작할 때의 스크롤 위치를 기억한다.
handelMouseMoveEvent 함수: 'const walk = e.pageX - clickPoint;, containerRef.current.scrollLeft = scrollLeft - walk;' 를 통해서 현재위치와 처음마우스 위치를 계산하고, 그것을 기반으로 컨테이너 스크롤 위치를 업데이트한다.

--> 게시물 리스트 스크롤하는 코드가 완벽히 이해되진 않았다. 하지만 대충 마우스 이벤트 핸들러를 통해, 그 ref하고 있는 컨테이너를 클릭하고 드래그 했을 때, 처음 마우스 커서 위치와 이동된 마우스 커서 위치에 기반하여 이동거리를 계산해 컨테이를 재배치하는 원리라고 할 수 있다.

사진을 스크롤하는 작업까진 마쳤다. but,

-> 사진 크기에 따라, 각각 크기가 달랐다. 이 문제를 해결하기 위해 정해진 크기 이내에 꽉차게끔 스타일을 아래와 같이 추가해주었다.

❤️ 가장 고민을 했던 부분은 무엇이었나요?

cors 문제를 해결하기 위해, 백엔드의 allow된 origin과 클라이언트에서 보낸 origin이 일치하는지 확인하였다. 크롬 확장 프로그램도 설치해보고, 백엔드 코드도 다시 살펴보고, 백엔드에서 jar파일을 다시 받아 도커를 다시 세팅해보기도 했다. 프론트의 axios 코드도 다시 살펴 보았다.
며칠 간 이 문제를 해결하는 데 많은 시간을 쏟고, 여러 시도를 해 보았던 것 같다.
이 프로젝트에 번아웃이 오기 전에 해결이 된 것 같아 너무 다행이다!!

😀 2023.09.15 모각작

한 일:

글 작성 페이지
비밀번호 페이지

❤️ 좋은 것과 나쁜 것이 무엇이 있었나요?

좋은 점은 글 작성페이지를 완성하였고, 프론트 개발은 거의 끝났다는 것이다. 하지만, 나쁜 점은..생각보다 시간이 많이 남지 않았다는 것이다. 가장 시간이 오래걸릴 것 같은 결제와 채팅 부분 구현이 아직 되지 않았다. 그 부분을 빠르게 공부해서 빠르게 구현해보아야겠다. 그리고 백엔드와 통신을 해야할 부분들은 빠르게 진행해야겠다.

❤️ 진행했던 학습/개발 내용은 무엇이었나요?

1. styled-component에서 input

input 창 테두리 없애기

-> border none으로 두고, 아래 border만 적용시켰다.
input 창 눌렀을 때, border 색상 바뀌게

-> focus 가상클래스에, outline 속성을 none값으로 지정해준 이후, border에 색상을 지정해주면 된다. 또한, styled-component에서 가상 클래스는 위와 같이 '&:'로 작성을 한다는 것

2. 아이콘 클릭에 따라 비밀번호 보이게, 안보이게

-> 상태로 관리를 해주었다. 따라서 그 아이콘을 눌렀을 때에는 shopw가 true로 변하면서 input type을 text로 지정해주었고, 그에 따른 적절한 아이콘을 띄어주었다.

3. input 아이디 창에 focus 두기

-> useRef 훅을 사용하여 id 입력 부분을 가리키게 하였다. 그리고 useEffect는 비동기를 처리하는 훅이라고 할 수 있다. 두번째 매개변수의 상태값을 추적하며, 그 값이 변하면 그 안의 동작을 수행할 수 있게끔 하는 것이다. 하지만, 현재는 매개변수로 아무것도 존재하지 않기 때문에, 렌더링되면 항상 그 동작이 수행되는 것이다. ref로 지정한 곳에 항상 focus를 두고 있음을 알 수 있다. idRef. current는 idRef ref 객체가 현재 참조하고 있는 DOM 엘리먼트를 가리킨다고 할 수 있다. 즉, 현재 가리키고 있는 곳의 InputInfo 부분을 가리키는 것을 알 수 있다.

4. 닉네임 중복 체크

: 중복되는 닉네임이 아닌 경우에는, 체크 표시 색상이 변경되게끔 코드를 작성하였다. 닉네임 창 이외에 다르 창을 클릭했을 때, 중복을 검사하도록코드를 작성하였다. 중복 검사는 백엔드에서 수행을 하였고, 이를 axios 통신을 통해 api를 받아왔다.

-> nickname이 변경되면, 위 함수가 실행되게끔 하여, 중복을 체크하도록 하였다.
-> 'nicknameRef.current && !nicknameRef.current.contains(target) && checkNickname !== nickname': 입력란이 비어있지 않고, 클릭한 곳이 입력 ref 객체를 포함하지 않고, 마지막으로 검사한 그 닉네임이 같지 않은 경우 중복검사를 수행하도록 한 것이다. 즉, 다른 창을 클릭했을 때, 처음 입력한 닉네임이 바뀌어서 다른 닉네임을 입력한 경우에 중복 검사를 수행하게끔 하였다.
--> 어쨌튼 여기서는, 마우스가 ref가 아닌 다른 곳을 클릭했을 때, 중복 검사를 하도록 코드를 짜준 것이다!! 그것을 '!nicknameRef.current.contains(target)' 이렇게 contains(target)과 같이 표현했다는 것!

-> api 명세에 따라 uri 부분을 작성해 주었다.

-> 컴포넌트는 이벤트 핸들러와 훅을 못 써준다. 따라서, 자식 컴포넌트까지 내려가서, 그 곳에서 ref를 적용시켜주었다.

5. pass 일 때만, 비밀번호 칸 렌더링 되도록

-> 기존 코드이다.

-> pass 상태를 이용하여 조건부 렌더링. pass가 true이면 인증 코드 입력란을 숨기고 비밀번호 입력란을 표시하고, false이면 그 반대로 동작

6. textarea 크기 조정

꿀팁
: 코드 첨부할 때 백틱 옆에 내가 쓰는 언어를 써주면, 컬러풀하게 바뀜!

❤️ 가장 고민을 했던 부분은 무엇이었나요?

: 상태 변화로 관리하여 렌더링 해주는 거 showpw, pass와 같이 상태에 따라 렌더링 해주는 부분을 많이 고민하였고, 그 부분을 눌렀을 때의 동작 실행이라던가, 상태에 따른 렌더링을 어떤 식으로 해줄 지를 익힌 것 같다. 리액트의 핵심이라고 했던 상태 관리 부분을 익힌 것 같아서 좋다!