지금부터가 반전

프로젝트에서 이미지 파일을 다뤄야 하는 경우가 많았다. 기본적으로 유저 프로필뿐만 아니라, 포스트나 리뷰 등에서도 사진을 업로드하고 수정하는 기능을 제공하기 때문이다. 백에서 이미지 업로드 용 api 를 따로 제공해주셨다. 이미지 파일을 동반하는 모든 요청은 우선적으로 이미지업로드api로 formData 형식의 이미지 파일을 보내고, 이 응답에 담겨오는 이미지 string 값을 본 요청에 포함하여 보낸다. 너무 큰 용량의 이미지를 그대로 받아들일 경우 서버 비용이 많이 든다... 그래서 초반에는 특정 용량을 초과하는 이미지 파일의 경우 입력을 할 수 없게 막아두었다. 하지만 보통의 유저들은 용량까지 생각하면서 이미지 파일을 관리하고 업로드 하지 않기 때문에... 나도 다른 서비스를 이용하다 이런 경우를 ..

개발 시작 전에 폴더구조에 대한 회의를 진행했어야 했지만, 내가 프로젝트의 중간에 합류하기도 했고, 기존에 계획되어있던 개발 일정이 있었기 때문에 충분한 논의를 거치지 못한 채 개발을 진행하였다. 그래서 폴더트리가 엉망이었고, 이를 리팩토링 하기로 하였다. 📌 전체적인 구조 ./src ├── app ├── assets ├── components ├── features ├── hooks ├── layout ├── pages ├── styles ├── types └── utils 1. app ├── app │ └── api 프로젝트의 기능과 관련된 여러 파일을 배치하는 폴더입니다. api 하위폴더를 두어 api 호출과 관련된 파일을 위치시켰습니다. 2. assets 이미지 파일들이 위치하는 폴더입니다. 이미..

코딩을 하면서 놓치고 갈 수 없는 부분 중 하나가 바로 '재사용성'이다. 재사용성을 높이면 반복되는 코드를 줄일 수 있을 뿐만 아니라 확장성까지 높일 수 있어 추후에 작업을 해나갈 때 매우 편리하다. 이번 프로젝트를 하면서 재사용 가능한 컴포넌트 단위를 만들어서 사용 해보는데, 한 번은 그대로 재사용하였고, 한 번은 컴포넌트를 확장하여 사용하였다. 각각 어떻게 사용했는지 이 글에 적어 놓고자 한다. 여기서는 React, TypeScript, Styled-Components를 사용하였다. ✅ 1. 컴포넌트 재사용하기 위의 네 가지 버튼을 언뜻 보면 배경색이나 내부 컨텐츠가 매우 다르게 생겼다. 배경 색도 제각각이고, 내부 컨텐츠에도 어떤 것은 text만 들어있고, 어떤 것은 text와 image 도 함께 ..

프로젝트에 댓글을 정렬할 때 사용할 토글 버튼이 필요했다. 그래서 디자이너 님께서 주신 디자인을 바탕으로 슬라이드 토글 버튼을 만들어보았다. 여기서는 React, TypeScript, Styled-Components 를 사용했다. 🔥 우선 tsx 코드 부터! const ToggleButton = () => { const [latestSort, setLatestSort] = useState(true); const toggleHandler = () => { setLatestSort((prev) => !prev); }; return ( ); }; - 기본값을 '최신순' 정렬으로 할 것이므로 latestSort 라는 이름으로 state를 만들었다. - toggleHandler 함수는 latesSort의 stat..

좋은 기회로 출판에 도전해볼 수 있는 기회가 생겼다. 제주코딩베이스캠프의 대표님이시자 현재 수강 중인 멋쟁이 사자처럼 프론트엔드 스쿨의 강사님이신 호준님께서, 원한다면 출판의 길도 열려있음을 말씀해 주셨고, 나는 그 기회를 잡기로 했다. 출판에 참여하는 일은 오랫동안 해보고 싶었던 일이기도 하였고, 대단한 각오나 사명감을 가지고 하는 일은 아니지만, 누군가에게 도움이 될 수 있는 일이기도 하기 때문에 가치있다 생각했다. 어떤 주제의 책을 써야할까 고민을 많이 했다. 글로 쓰여진 말은 쉽게 사라지지 않기 때문에 말보다 무거운 법인데, 지금 내가 쓰려는 책은 지식을 전달하는 목적성까지 가지고 있기 때문에, 펜을 잡을 때 더욱 무거운 마음으로 임해야 함을 잘 알기 때문이다. 나조차도 초심자이기 때문에, 깊은 ..