본문 바로가기

분류 전체보기

(131)
부스트캠프 회고 - 5주 그룹프로젝트 3주차 day5 Today I Learned Webpack 최적화를 위한 방법들 code splitting (번들 여러개로, lazy loading) gzip으로 압축하기 react-loader, react-lazy 라이브러리 Node의 전역 Process 객체 브라우저의 window 객체처럼 override 해서 에러를 잡아줄 수 있다. 오늘의 느낀점 하얗게 불태웠다... 이번주 쓸 체력을 이미 다 소진한것같다. 오늘 데모, 피어세션, 마스터클래스를 할 때 보니 다른 조 분들도 비슷한 상태인 것 같다. 주말에 푹~ 회복하고 다음주를 위해서 체력을 보충해야겠다. 다음주는 좀 페이스를 조절해서 컨디션이 일정하게 유지될 수 있도록 노력해야겠다. 이번주는 월요일날 부터 서서히 하락 그래프를 그린 느낌이다. 이번주에 잡아놓은 ..
부스트캠프 회고 - 5주 그룹프로젝트 3주차 day4 Today I Learned ts-jest 따로 트랜스파일링 과정 없이 .ts 파일로 jest를 돌릴 수 있게 해준다. ts-node와 유사한 느낌으로 사용 가능하다. 오늘의 느낀점 멘토님과 면담을 했는데 보여드릴 것이 많지 않아서(특히 프론트에서 합체가 잘 되지 않아서) 아쉬웠다. 조금 의기소침해 있었는데, 멘토님이 랩장님 support로 모두에게 치킨을(!) 쏴주셔서 정말 감동받았다. mongoDB를 쓰는데, 팀원들과 embedded 방식으로 바꿀지 한참을 논의했다. SQL 쓰던 버릇이 남아서 계속 reference key를 넣어놓는 방식으로 구성하고 있었는데, 처음부터 mongoDB를 잘 알았다면 아마 컬렉션 하나로 디자인하지 않았을까? ts-jest로 테스트 환경을 구성하는 데 정말정말정말 까다롭..
부스트캠프 회고 - 5주 그룹프로젝트 3주차 day3 Today I Learned sourceMap 트랜스파일된 파일을 다시 원본 파일로 mapping 시켜주는 라이브러리 실제로 mapping을 위해 구성된 .map 파일을 지칭하기도 한다 .map 파일이 있다면 sourceMap 라이브러리를 cdn, npm으로 받아서 직접 맵핑을 할 수 있다. 빌드된 파일 맨 뒤에 //# sourceMappingURL=main.js.map 주석이 붙어서 브라우저에게 sourceMap을 찾을 수 있는 위치를 알려준다. 상대경로가 아니라 별도의 cdn 등으로 설정해도 작동한다. object storage(S3, NCP) 파일을 브라우저, Postman으로 GET 하는 것은 잘 지원한다. 스크립트 내부에서 GET 요청으로 받아오는 것은 CORS를 허용해주어야 쓸 수 있다. 별도..
부스트캠프 회고 - 5주 그룹프로젝트 3주차 day2 Today I Learned Material-ui Grid Stepper : 진행상황을 단계별로 표시할 때 좋음. Snackbar : 화면 구석에 자그마한 팝업 메시지를 띄울 때 사용. 오늘의 느낀점 제대로 이벤트와 인터랙션이 들어간 페이지를 만드려니, 컴포넌트가 자연스럽게 커지게 되는 것 같다. 컴포넌트가 너무 커지지 않으려면 재사용성을 높이고 컴포넌트를 분리하는 것이 필수적인데, 만만하지가 않다. material-ui의 StepContent 컴포넌트가 선언 시점에 Stepper 안에 있지 않으면 에러를 발생시켜서 Stepper와 분리가 불가능했다. 이것 때문에 어떻게 컴포넌트를 분리할 지 한참 고민했다. 컴포넌트를 분리하면 제어 함수를 props로 전달해줘야해서 번거로움이 생긴다. 재사용성을 늘리면서..
부스트캠프 회고 - 5주 그룹프로젝트 3주차 day1 Today I Learned React 최적화 관련 useMemo : 컴포넌트 내부의 계산 결과값 재활용 useCallback : 컴포넌트 내부 선언된 함수의 재활용 memo : 컴포넌트 자체의 재활용 (props가 변경될 경우만 리렌더링) 오늘의 느낀점 하루종일 팀원 분들과 회의하면서 이번주에 개발할 시나리오 -> Backlog -> Issue를 설정했다. 지난 2주보다는 조금 적응되어서 그런지, 회의 진행도 빨리 되고 체력 소모도 예전보다는 조금 덜한 느낌이다. 2주차의 완성의 뿌듯함도 어느새 사라지고, 3주차 feature를 뽑아보니까 또 갈길이 아주 먼 느낌이다. 이번주에도 다 계획한대로 끝낼 수 있다면 정말 좋을텐데! 오늘의 칭찬 우리 프로젝트의 기능 테스트를 위해서 에러를 만드는 페이지의 개선..
SSH Key & Host Alias 를 사용해서 비밀번호와 IP주소 입력 없이 원격서버 간편하게 접속하기 AWS, nCloud와 같은 원격 클라우드 서버를 사용해서 프로젝트를 배포하게 되면 필연적으로 ssh를 통해 원격 서버에 자주 접속하는 경우가 생긴다. 부스트캠프에서 여러 프로젝트를 배포하면서 원격 서버에 접속할 때 마다 비밀번호와 IP주소를 입력하는 것이 상당히 번거로운 일이라고 느껴졌다. 비밀번호와 IP주소를 잘 외워서 쓴다면 좋겠지만, 서버가 여러개가 되고 정신없이 개발하다 보면 root 비밀번호와 서버 ip주소를 찾아서 다시 클라우드 Console에 접속해야 하거나, 결국 지쳐서 Sticky Notes에 비밀번호와 IP주소를 적어놓는 경우가 생기기도 한다. 이렇게 주먹구구 식으로 서버에 대한 접속을 관리하기 보다는 조금 더 간편하게 접속 설정을 해 두는 것은 어떨까? SSH Key와 Host Al..
부스트캠프 회고 - 5주 그룹프로젝트 2주차 day5 Today I Learned node.js 환경에서 에러코드 주변 읽어오기 에러 스택을 통해서 파일을 read 권한으로 접근해서 읽어온다 에러 발생 위치를 display 가능함 오늘의 느낀점 팀 데모를 하면서 많은 것을 배우고 볼 수 있었다. 우리 팀이 계획한대로 2주차를 끝내서 우리가 제일 잘했다! 라고 생각하고 있었는데 다른 팀들도 데모를 보니 만만치 않았다. 같은 주제를 하는 팀 분들도 다들 나름대로 하나의 포인트씩을 다들 잡아서 해오셨고, 다른 주제 팀들도 벌써 구글 지도 API 연동이 끝난 등 다양한 자극을 받을 수 있었다. 2주만에 딱 생각한 만큼을 끝나서 기분은 좋았지만, 또 다른 조들의 발표를 보니 개발할 기능이 아직 창창한 기분이다. 벌써 3주밖에 남지 않았다는 것이 아쉬우면서 놀랍다. ..
부스트캠프 회고 - 5주 그룹프로젝트 2주차 day4 Today I Learned nginx 정적 파일 호스팅 용으로 사용 처음 파일 경로를 잡아주고 계속 파일을 덮어씌워주면 된다. 특정 경로를 잡아서 포워딩(Reverse-Proxy)를 시켜줄 수도 있다. Material ui Pagination 컴포넌트를 통해 페이지 전환 탭을 간편하게 사용 가능하다. 오늘의 느낀점 이번주에 계획을 세운대로 배포까지 95% 프로젝트를 마무리했다. 내일 npm 배포만 자동화시키면 거의 완성일듯! 이렇게 계획대로 된 것이 처음인데, 팀원들도 다들 기분이 좋은지 오늘 마감시간인 오후 7시를 지나고도 한참을 떠들었다. 팀원분들이 모두 능력과 성실성이 충실해서 가능했던 것 같다. 나는 항상 팀프로젝트에서는 내가 그래도 일을 많이하는 편이었는데, 이번 프로젝트에서는 팀원분들이 워낙..