배포 준비 완료 2차 데모데이를 기준으로 하루스터디의 핵심 기능은 모두 완성되었다. 스터디를 개설하고 참여하고 진행하고 기록을 보는 것까지 모두 가능했다. 하지만 아쉬웠던 점은 배포를 하지 않았기 때문에 2차 데모데이에서 실제로 동작하는 서비스를 보여주지 못했던 것이다. 심지어 클라이언트와 서버의 연동도 확인하지 않아 어떤 에러가 있는지 파악도 못한 상태였다. 때문에 2차 데모데이가 끝난 이후 우선적으로 해야할 일이 바로 배포를 완료하여 실제 사용자들이 하루스터디 서비스를 이용할 수 있게 만드는 것이었다. 스터디 개설, 진행에 대한 추가 작업을 마무리 한 뒤, 클라이언트와 서버를 배포 완료하였고, 실제 배포가 잘 되었는지 확인을 해보았지만 역시나... 예상대로 정상 동작을 하지 않았다. 내가 맡았던 부분..
지금까지 하나의 파일(webpack.config.js)에서 환경(dev, prod)에 대한 웹팩을 설정하였다. 환경에 따른 분리가 필요하면 삼항연사자를 사용한다. 아직은 파일이 크지 않아 삼항연산자도 충분하다. 하지만 앞으로 설정이 많아지고 복잡해지면 삼항연산자로 인한 환경 구분은 상당히 피로감을 줄 수 있다. 때문에 환경에 따라 파일을 분리하는 것이 효율적이다. 웹팩으로 리액트 시작하기 네 번째 파트에서는 환경에 분리하여 웹팩을 설정하는 과정을 다룬다. 다음의 글은 웹팩 공식문서를 참고하여 작성했다. Production | 웹팩 Production | 웹팩 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
웹팩으로 리액트 시작하기의 두 번째 파트에서는 eslint, tsconfig, webpack, 설정을 통해 절대 경로를 적용하는 방법을 다룬다. 1. eslint 설정 eslint 을 아직 설치를 하지 않았으니 이를 먼저 설치한다. 또한 import에 관한 플러그인을 함께 설치한다. yarn add -D eslint eslint-plugin-import 이후 간단한 명령어를 통해 eslint설정 파일을 생성한다. 다음의 명령어를 실행하면 각자가 원하는 eslint을 설정할 수 있다. 해당 과정을 통해 여러 가지의 플러그인이 생성되고 eslint설정 파일이 루트경로에 생성된다. npx eslint --init 이제 생성된 eslint 설정 파일에서 다음과 같은 설정을 추가한다. import 플러그인 추가 ..
리액트를 시작하기 위해 Create-React-App(CRA) 혹은 Vite을 많이 사용한다. 이러한 도구는 webpack설정 없이 편하게 리액트를 시작할 수 있도록 도와준다. 때문에 많은 개발자들이 사용하고 있는 도구이다. 하지만 단점도 분명 존재한다. webpack설정을 추가하거나 수정하는 것이 매우 번거롭다는 것이다. 이러한 단점 때문에 webpack설정을 도와주는 다양한 라이브러리가 등장하였다. craco, react-app-alias, react-app-rewired 등이 그것이다. 충분히 좋은 라이브러리들이지만 처음부터 webpack을 직접 설정을 했다면 번거로운 작업은 하지 않아도 된다. 또한 프론트엔드 개발자로서 webpack은 학습해야 하는 개념이기 때문에 직접 webpack을 설정하여 ..
하루스터디의 새로운 방향 1~2주 차의 하루 스터디는 하루만 진행하는 스터디를 모집하는 플렛폼의 역할을 하는 서비스였다. 하지만 1차 데모데이가 끝난 후, 팀원들과 하루 스터디의 방향, 핵심 가치에 대해 많은 고민을 가졌다. 본질적으로 모집 - 진행 - 관리가 사용자에게 빠르게 핵심가치를 전달해 줄 수 있을까?라는 의문점을 가지게 되었다. 어느 서비스에서나 가능한 기능이기에 하루 스터디만의 뾰족한 무언가가 필요했다. 1차 데모데이 직후 준의 피드백의 바탕으로 3주차 첫 날인 7월 10일에 팀원들끼리 직접 스터디를 진행 보았다. 스터디의 순서는 다음과 같다. 1. 목표 설정 2. 학습 진행 3. 회고 두 번의 싸이클을 돌고 나서 가장 크게 느꼈던 점은 '엄청난 집중력으로 학습 목표를 달성하기 위해 노력했다..
팀 발표 레벨 3, 레벨 4에 진행하게 되는 팀 프로젝트의 팀이 방학 중에 발표되었다. 난 테오의 `플래시몹 스터디`에 뽑히게 되었다. 플래시몹이라는 단어를 생각하면 중학교, 고등학교 때 잠깐 운동장에 모여서 춤을 추었던 기억이 떠오른다. 그래서 그땐 어떤 스터디인지 감이 잡히지 않았지만, 테오의 2분 기획안을 다시 찾아보고 어떤 스터디인지 감을 잡을 수 있었다. 레벨 3, 레벨 4 동안 함께 협업을 진행하게 될 크루들은 총 6명이다.(나 제외) 프론트에선 룩소와 엽토가 같은 팀이다. 레벨 1, 레벨 2에서 함께 술도 많이 마시고 친하게 지냈던 크루들이라 반가운 마음이 컸다. 모두 술을 좋아하기 때문에 서로 잘 억제해 주길 바라며... 백엔드 크루들은 모두 처음 들어보는 닉네임이었다. 테오, 마코, 모디..
🚀 어김없이 찾아온 레벨 인터뷰 벌써 레벨 2를 마무리하는 레벨 인터뷰가 찾아왔다. 이번엔 준조였고 함께하는 크루는 세인, 노아이즈, 에디, 아커, 센트, 솔로스타였다. 레벨 1에서 레벨 인터뷰를 경험했기 때문에 긴장감은 지난번보다 크지 않았다. 하지만 레벨 1에서 받은 피드백을 얼마나 수용을 했는지, 지난번보다 얼마나 성장을 했는지를 스스로 판단을 해야 했기 때문에 이 부분에서는 부담감을 가질 수밖에 없었다. 인터뷰 순서는 조 배정에 나온 순서로 진행되었다. 레벨 1 인터뷰에서는 거의 마지막 순서였기 때문에 이번에는 오전에 깔끔히 인터뷰를 마무리하고 홀가분하게 점심을 먹고 싶었다. 하지만 나의 순서는 4번째로 매우 어정쩡한 순서였다. 다행히 10시에 바로 인터뷰를 시작하고 시간을 딱 맞추어 인터뷰를 진..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-26 - 23-06-05 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 2단계 미션에서는 우테코 3, 4단계에서 마주치게 될 협업의 과정을 미리 체험할 수 있는 경험을 할 수 있었다. 함께 2단계 요구사항에 대한 명세서를 작성하고 재화 관련 서비스를 무엇으로 할지를 정하는 것이 그것이었다. 장바구니 협업 미션의 요구사항은 다음과 같이 크게 2가지이다. 1. 재화 과련 서비스(포인트, 쿠폰, 할인) 2. 주문 목록 1단계 미션이 끝난 다음날인 26일 금요일 나와 도리는 에단, 베베와 함께 이에 대해 이야기를 하고자 잠실 캠퍼스로 향했다. 다른 크루들도 잠실로 많이..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-23 - 23-05-26 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 벌써 레벨 2의 마지막 미션이다. 레벨 2의 마지막 미션은 바로 이전 미션이었던 장바구니 미션의 연장선이다. 지금까지 서버 없이 mock 데이터로 개발을 했다면, 장바구니 협업 미션은 백엔드 크루와 함께 협업을 하면서 서버를 연동을 해야 했다. 바로 이전 미션에서 MSW를 사용하여 실제 API 통신을 하는 것과 같은 환경을 만들어 두면서 개발을 하였다. 때문에 서버만 잘 완성이 된다면 큰 무리 없이 서버를 연동을 할 수 있었다. 로컬에서만 확인하는 것이 요구 사항이었는데, 함께 협업을 하는 ..
