💡 무엇을 만들었나요?
VanillaJS로 아래 기능을 포함한 유저 앱을 만들었다.
앱 링크
깃헙 링크
- AWS S3 혹은 Firebase 이용 (스토리지, DB)
- 스크롤 가능한 프로필 페이지 (반응형)
- 유저 등록, 수정, 삭제
- 유저 검색
- 무한 스크롤
💡 무엇에 중점을 두고 개발했나요?
- 꼼꼼한 초기 세팅
- webpack 설정
- sass 변수
- 반응형 breakpoint
- firebase 설정
- 라이브러리 사용을 최대한 지양
- 반복되는 코드 최소화
- 깔끔하고 효율적인 UI / UX
- 최대한 빠른 시간 안에 필수 기능 구현 후 추가 작업
📌 어려웠던 점은 무엇인가요?
webpack 설정
- webpack은 자바스크립트 파일 번들러로 다른 파일(css, html 등)은 따로 플러그인을 설치 해줘야 한다. 이 부분에서 어떤 플러그인을 설치할지, 모듈은 어떻게 세팅할지 큰 어려움이 있었다.
// webpack.config.js module: { rules: [ // 이미지 로더 { test: /\.(png|jpe?g|gif|webp|svg)$/i, type: "asset/resource", }, // SASS 로더 { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, ], }, - MiniCssExtractPlugin.loader는 style-loader를 대신한다.
- HtmlWebpackPlugin은 html 파일을 번들링 한다.
plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }), new MiniCssExtractPlugin({ filename: "[name].[contenthash].css", chunkFilename: "[id].[contenthash].css", }), new NodePolyfillPlugin(), // 이건 왜 설치했더라..? new Dotenv(), // 환경 변수 파일 번들링 ],
Firebase 설정
공식 문서가 은근 불친절하고 가독성도 좋지 않아서 많이 헤맸다. 다른 팀원들도 이 부분이 가장 힘들었다고 한다.
SASS 반응형 함수
- breakpoint에 따라 바뀌는 respond-to 함수를 만들어서 재사용했다. @mixin, @include 등 처음 사용해보는 것들이 많아서 헤맸다.
@mixin respond-to($breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}반복 최소화
이 부분은 최대한 고려했지만 여전히 만족스럽지 못하다. 멘토님께서 주신 의견을 반영하여 차근차근 고쳐볼 계획이다.
🗝️ 어떻게 해결했나요?
- 구글링과 공식 문서를 활용했다. 그 중에서도 webpack과 firebase는 최대한 공식 문서를 통해 문제를 해결하려고 노력했다. 그 과정에서 문서를 보는 힘이 생기고 한 단계 더 나아갈 수 있었다고 생각한다.
💡 고쳐야 할 점은 무엇인가요?
- 필수 기능을 구현할 때 폼 유효성 검사, 에러 바운더리를 만들지 않았다. 결국 추후에 더 힘들게 기능을 구현하게 되었다. 앞으로 이 두 가지는 항상 같이 구현하도록 하자.
- 하나를 수정하면 연달아 나오는 오류가 나를 힘들게 했다. 이 과정에서 지치지 않고 하나하나 해결해 나가는 힘을 기르자.
- 처음부터 완벽한 것은 없다. 고쳐도 고쳐도 결국 완벽한 코드를 짜기는 힘들 것이다. 이 사실을 인정하고 어느 정도 구현했다면 너무 깐깐하게 내 코드를 검열하지 말자.
- 디자인은 중요하면서도 중요하지 않다. 너무 많은 시간을 디자인에 할애하느라 다른 기능을 놓치지 말자.
always be fresh