💻 들어가며 원티드 프리온보딩이 끝나고 이력서를 넣으면서 이전에 만들었던 프로젝트나 개인적으로 할 프로젝트를 담을 포트폴리오가 필요하다고 생각해서 만들기로 했습니다. 아무래도 노션이나 ppt같은 프로그램으로 작성하는 것보다는 직접 만들어보는게 흥미도 가고 애정을 가지고 더 열심히 만들 수 있을 것 같아 직접 만들기로 했습니다. 오늘은 포스팅 내용은 포트폴리오의 레이아웃을 tailwind로 어떻게 구현했는지에 대해 작성해 봤습니다. ⚒️ 기능 구현 1. 페이지 레이아웃 📌 핵심 코드 const Nav = () => { return ( FE 개발자 신상오 Home Project Contact ); }; Tailblock 사이트를 참고해서 기본적인 뼈대를 잡은 다음에 각 요소의 위치와 색상 같은 디테일한 요소..

💻 들어가며 과제 전형을 진행하면서 제작했던 회원가입과 로그인 페이지입니다. tailwind css와 react-hook-form 를 사용해서 제작했습니다. 레이아웃이 어떤식으로 잡혀있는지를 위주로 포스팅한 글이고 이후에 react-hook-form을 어떻게 사용했나 다룰 예정입니다 😀 ⚒️ 기능 구현 회원가입 페이지 로그인 페이지 📌 핵심 코드 로그인 {errors && (errors.email || errors.password) && ( 잘못된 로그인 정보입니다. )} 아이디가 없으신가요? 회원가입 flex, justify-content : 가운데 맞춤 h-screen : 꽉 찬 화면으로 구현 m(margin), p(padding) : 간격조절 회원가입도 로그인 페이지와 비슷한 구성으로 작성되어 생략..

⚒️ 구현 기능 커뮤니티 생성 기능 이름, 제목, 설명 input 값을 서버에 post 요청 해당 커뮤니티 생성되도록 기능 구현 기능을 설명하는데 크게 state, submit 함수, 레이아웃 정도 state const [name, setName] = useState(''); const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [errors, setErrors] = useState({}); - input name, title, description state - error 에러마다 서버에서 다른 값이 넘어와서 any로 타입 지정했음 Submit 함수 const handleSubmit..

💻 들어가며 취업준비를 하면서 cs 공부에 집중을 하고 있었는데 이론적인 부분만 파는 것 보다는 역시 실제로 프로젝트를 해보면서 만나는 에러나 학습 내용을 글로 작성해보는 것이 재미도 있고 효율적이라 생각이 듦 그래서 예전에 만들어 놨던 로그인, 회원가입 기능을 리팩토링하고 커뮤니티 생성, 게시판 등 여러 기능을 덧붙이는 방향으로 다시 토이 프로젝트를 재개하기로 했다. ❌ 에러 이전에 동작하는 것을 확인했는데 post 요청이 가는 url에서 오류가 났다. 아마 next.js에서 api 요청을 할 때 react에서 프록시 처럼 클라이언트와 서버간 통신시 중간 처리를 해주는 기능이 있었는데 그 부분에서 난 것으로 판단되어 해결하기 위해 찾아보았다. ⚠️ 에러 원인 ? 환경변수 axios.defaults.ba..

💻 들어가며 프리온보딩 과제를 복습하면서 style-components와 react-router-dom으로 레이아웃을 그리면서 발생한 문제를 해결한 포스팅입니다. ❌ 에러 const SidebarContainer = styled.div` width: 300px; height: 100vh; background-color: #657c65; `; 위 코드처럼 별도로 margin 이나 padding 없어도 자동으로 여백이 생김 ⚠️ 에러 원인 ? The default box sizing is content-box, which means padding and borders are added to the overall box. 출처 : Learn CSS! (https://web.dev/learn/css/box-mo..

❌ 에러 발생 분명히 aws 태그가 들어간 게시글이 있음에도 불구하고 aws이 있는 게시글을 보려고 클릭해도 정상 작동하지 않는 것을 확인했다. 기존에 만났던 에러들은 콘솔창에서 error를 보여줬기 때문에 그 부분만 찾으면 구글링하거나 코드를 수정하면 되는데 이런 경우에는 찾기가 힘든 것 같다고 느꼈다. ⚠️ 에러 원인 기존에는 파일마다 고정 데이터들을 선언 할당해서 사용했었는데 재사용성이 높은 데이터를 한 곳으로 분리해서 사용하려고 리팩터링한 부분에서 aws의 철자가 틀린 듯 했다. 데이터를 콘솔찍어보면서 확인해보니 백에서 넘어오는 techStackName과 프론트에서 고정 데이터로 가지고 있는 값이 달라서 발생한 문제였다. ✅ 에러 해결 Aws 를 AWS로 바꿈으로써 간단하게 해결할 수 있었다. 처..

들어가며 메인 프로젝트를 배포하고 부트캠프를 수료하자마자 원티드 프리온보딩 프로그램에 참여하게 되면서 이제야 프로젝트 회고를 작성하게 되었다. 한 달 동안 기업과제를 하면서 다른 사람 코드도 많이보고 기능 구현도 여러 가지 해보다 보니 실력이 늘기는 늘었는지 예전에 짰던 코드들에서 부족한 부분이 많이 보였던 것 같다. 회고를 작성하면서 리팩터링은 어떻게 하면 좋을지 정리해보고자 한다. 프로젝트 소개 프로젝트 작업기간 2022.09 ~ 2022.10 (30일) 스터디와 프로젝트의 팀원을 구하기가 어렵다는 기존의 문제점을 극복하고자 쉽고 빠르게 게시글을 작성하여 팀원을 구할 수 있도록 구현했습니다. 기존의 스터디, 프로젝트 모집글들은 어떤 기술 스택을 이용하는지, 어떤 분야의 팀원을 모집하는지 모호했습니다...

과제 깃허브 레포지토리 GitHub - so0112/wanted-pre-onboarding-frontend: 투두리스트 투두리스트. Contribute to so0112/wanted-pre-onboarding-frontend development by creating an account on GitHub. github.com 사전과제 배포사이트(현재 api 배포 중단으로 작동 x) Todo so-todo.vercel.app 과제를 진행하며 전체적으로 느낀점 기간내에 빠르게 동작하는 TODO LIST를 만드려다보니 디렉토리 및 파일구조, 리다이렉션 로직, 중복된 코드패턴이 꽤 많이 들어갔다. 다른 팀원분들께 피드백을 받아보니 그런 부분이 더욱 두드러졌다. 안티패턴으로 작성된 코드 -> 피드백 받았던 내용순..