프론트엔드 개발자 엄성준

빽엔드분들과 협업을 통해서 현재까지 제가 구현을 맡은 파트는 로그인, 회원가입, 비밀번호 찾기(초기화), 비밀번호 수정이었습니다. 먼저 현재까지 진행된 부분까지 파트별로 적어보겠습니다. # 회원 가입 회원 가입을 진행할 때 회원가입 input 데이터를 원래 JSON형태로 변환하지않고 string 통해서 바로 api에 전달했었는데 같이 협업하시는 빽엔드 개발자 분께서 blob형식으로 보내주시면 좋겠다라고 하셔서 변경이 있었습니다. 또한 회원가입 예외처리도 진행하였습니다. # 로그인 로그인은 이전과 동일하나 각각 상황에 맞게 예외처리를 해주었습니다. 또한 로그인을 하게 되면 Redux-Toolkit을 통해서 유저 정보를 전역적으로 이용할 수 있게 해두었고 토큰 값은 React-cookie를 이용해서 관리하기..

local 서버를 돌려야 하기 때문에 빽엔드 분들이 주신 파일을 자체적으로 가동하고 있습니다. 로그인 form에서 UseRef를 통해서 email과 password를 입력받습니다. 입력받은 데이터를 fetchLoginApi 비동기 함수를 통해서 POST를 통해서 이메일과 비밀번호를 서버에 전달합니다. 만약 정상적으로 진행된다면 React-cookie를 통해서 state에 SetCookie를 통해서 토큰 값을 쿠키에 저장합니다. 그 후 useDisptch를 통해서 setUser()를 통해서 action.payload의 담긴 유저의 정보를 구조 분해 할당을 해준 뒤 현재 initialstat에 저장된 값에 업데이트해줍니다. const userDispatch = useDispatch() 위의 부분만 진행 했을..

역시나 걱정했던 CORS오류가 발생했었습니다. 프론트단에서 setProxy.js파일을 생성해서 따로 관리도 해보았지만 해결되지 않아서 빽엔드파일의 controller에 @CrossOrigin 어노테이션을 선언해 주니 모든 문제가 깔끔하게 해결되었습니다. 선택된 Theme을 ThemeSlide에서 onClick event가 발생할 때마다 전달받아서 useEffect hook을 사용해서 postList를 받아왔습니다. 그 후 postList배열을 state로 선언해 두고 PostList Component에 Props로 전달해 주었습니다. 전달받은 Props의 Type은 다음과 같이 받아오는 데이터를 토대로 선언해 주었습니다. 그런데 현재 팀원분들의 의견으로 local로만 진행하면 팀원분들 개인 데스크톱의 환..

오늘 부로 1444px, 960px, 576px 화면의 컴포넌트들이 다 완성되었다. 앞으로 데이터 전송 시 깨지는 부분이나 디자인 적으로 부족한 부분이 있으면 더 좋은 방면으로 수정해야 할 것 같습니다. 또한 성능을 더 최적화하기 위한 컴포넌트 분리도 더 세분화해야 할 것 같습니다.

오늘은 login과 join을 할 때 데이터를 빽엔드로 보내줄 form 데이터를 로그인 버튼이나 회원 가입 버튼을 눌렀을 때 정보가 잘 뜨는지 테스트를 해보고 구축해보았습니다. export default function Login({show, setShowLoginModal}: PaymentModalProps) { const [joinForm, setJoinForm] = useState(false) const [joinWelcomeText, setJoinWelcomeText] = useState('Compass에 오신 것을 환영합니다.') const loginEmailRef = useRef(null) const loginPasswordRef = useRef(null) const joinWelcomeTex..

기존에 배너 디자인을 조정해 주었다. 또한 글을 눌렀을 때 상세페이지로 바로 이동되는 것이 아님 해당 글 의 이미지 5개를 먼저 보여주는 슬라이드를 만들었다. 오늘의 문제점과 해결해야 될 점은 Header.tsx파일에 로고, 검색 바, 프로필 박스가 같이 있다 보니까 한 부분을 누를거나 이용할 때 전체 부분이 렌더링 되는 것을 알 수 있게 되었다 그렇기 때문에 컴포넌트 세분화를 해야 할 것 같다.

오늘부터 내일 까지 1440px 기준으로 component들의 사이즈를 조정하기로 했습니다. 작업을 하다가 아래와 같은 문제가 발생했는데 테마를 선택하는 슬라이드가 비율에 맞지 않는 것 같아서 고쳐야 할 것 같은데 저 부분은 협업하시는 다른 분이 맡은 부분이라 제가 임의로 코드를 조정하면 좋지 않을 것 같아서 같이 협업하는 분에게 말씀을 드려야 할 것 같습니다. 다음으로 마이페이지 부분에서 이상한 부분은 없지만 작성글 / 좋아요 카테고리 부분의 디자인이 굉장히 미흡한 것 같습니다. 비슷한 디자인의 버튼으로 구현을 할지, select box로 구현을 할지 고민 중입니다. 고민 끝에 facebook느낌으로 색상의 반전만 주는 방향으로 정했습니다. 다음으로 회원 정보 수정 하는 페이지를 다시 생각해 보았는데 ..

오늘은 ProfileEditPage 회원 정보 수정 페이지를 퍼블리싱하였습니다. 별 다른 어려운 점은 없었지만 비밀 번호 찾기를 어떻게 구현해야 할까 고민하다가 비민번호 찾기 버튼을 누르면 팝업을 띄우기로 정하였습니다. 비밀번호변경 팝업에서는 비밀번호 찾기 버튼을 누르면 메일로 초기화 된 비밀번호가 전송되는 것으로 해야 할 것 같습니다. 또한 현재까지 데이터가 아닌 예를 들어 이미지면 src에 이미지 주소를 직접 기입하였었지만 퍼블리싱 단계가 마무리되고 이제 정말 api통신을 통해서 데이터를 받아와야 할 준비를 하기 위해 Mock폴더를 만들고 users.ts파일에 user들의 정보를 기입하여 받아오는 형식으로 코드를 작성했습니다. 또한 멘토님이 협업에서 추천해주신 spellChecker를 설치해서 사용해..

import React from 'react' import {Link} from 'react-router-dom' import styled from 'styled-components' interface Notification { setNotification: (value: boolean) => void } export default function Notification({setNotification}: Notification) { return ( setNotification(false)}> # (닉네임)님에게 메세지가 도착했습니다. # 안읽은 메세지가 있습니다. # (닉네임)님이 (게시글 제목)에 좋아요를 누르셨습니다. # (게시글 제목)에 좋아요가 추가되었습니다. ) } const Wrapper = ..

오늘은 MyPage를 퍼블리싱 하였는데 작성 글, 좋아요 부분의 디테일이 부족한 것 같습니다. 어떤 디자인이 좋을 지 고안을 해봐야 할 것 같습니다. 마이페이지의 작업 글 , 좋아요 컴포넌트 위쪽으로 배너부분은 따로 MyPageBanner Component로 분류해서 작업하였습니다.