프론트엔드 개발자 엄성준 블로그

역시나 걱정했던 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 = ..

Vercel을 통해서 배포를 하려는데 계속 아래와 같은 오류가 났었다. 아무리 검색해도 원인이 나오지 않았었는데 아래의 글을 보고 https://www.reddit.com/r/nextjs/comments/uogl73/i_am_using_reacticon_and_my_imports_have_been/ r/nextjs on Reddit: I am using react-icon and my imports have been rendering in the browser, yet I am getting this error on Verc Posted by u/_yvanehtnioj - 16 votes and 8 comments www.reddit.com 오류가 난 부분의 react-icons뒤에 문자들을 소문자로 변..

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

오늘은 PostWrite 글 쓰기 페이지를 완성했습니다. 날짜 선택은 datepicker library를 이용하였습니다. https://www.npmjs.com/package/@types/react-datepicker @types/react-datepicker TypeScript definitions for react-datepicker. Latest version: 4.10.0, last published: a month ago. Start using @types/react-datepicker in your project by running `npm i @types/react-datepicker`. There are 272 other projects in the npm registry using @ty..