dev28 스타트업 개발팀의 React Next.js 마이그레이션 도전기 나는 술담화라는 스타트업 회사에 다니고 있다. 2021년 초에는 php 기반의 웹 페이지에서 React를 도입했고, 이번 2022년 5월부터 NextJs를 도입했다. React에 NextJs를 Migration 하는 과정은 쉽지 않았다. 기존에 진행하던 회사 매출에 중요한 프로젝트도 동시에 진행해야 했고, 폴더 구조와 라우터가 완전히 바뀌기 때문에 버그가 없도록 유의해야 했다. 소규모 개발 인원으로 어떻게 성공적으로 Migration 했는지 이야기해 보겠다. 일단 먼저 시작하기에 앞서 NextJs가 무엇인지 간략하게 설명하겠다. (이 글은 술담화 프론트엔드팀 개발자 이병수, 정윤기 님과 함께 작성하였습니다.) NextJs란 무엇인가? 전통적인 웹 사이트는 글 위주의 페이지였다. 사진이나 영상은 거의 없었.. 2022. 12. 28. 스타트업 이직을 고민하는 당신에게 (전통주 스타트업 술담화 프론트엔드 개발 2년 근무 후기) 술담화라는 전통주 스타트업 회사에서 프런트엔드 개발자로 일한 지 벌써 1년 9개월이 지났다. 처음 입사해서 어색한 인사를 나눴던 게 엊그제 같은데 벌써 2년이 다되어가다니 세월이 참 빠르다. 술담화로 이직하기 이전에는 프린터 대기업 회사에서 임베디드 개발자로 일했다. 술 회사에서 일해보고 싶어서 술담화로 이직했다. 700명 규모의 회사에서 40명 규모의 회사로 이직했다 보니 다른 점이 많았다. 회사에 이직한 지 2년이 다되어가는 지금 이전 회사 대비 어떤 게 다른지, 나는 어떻게 달라졌는지 정리해보려고 한다. (회사에서 시킨 거 아니고 스스로 쓰는 글입니다! ㅎㅎ) 1. 회사에 출근하는 것이 즐겁다. 일반적인 회사원은 일요일 저녁이 되면 출근할 생각에 괴롭다. 하지만 술담화에 이직한 이후 출근이 즐거워졌.. 2022. 12. 22. 작은 PR 규칙으로 코드 리뷰 효율 높이기 작은 PR 규칙 도입 배경 처음 술담화 개발팀에는 PR(Pull Request)에 대한 규칙이 없었다. 그래서 큰 프로젝트의 경우 하나의 PR로 올리는 경우도 있었다. 이 경우 방대한 코드 개발 양으로 코드 리뷰를 하기가 힘들었다. 코드 리뷰가 어려워지면 코드 퀄리티가 떨어지고, 버그가 발생할 가능성이 높아지는 등 단점이 많다. 이를 해결하기 위해 "작은 PR 규칙" 을 적용해보자는 목소리가 팀 내에 있었고, 실제로 도입해봤더니 많은 장점이 있었다. 작은 PR 규칙을 사용하는 방법 (git flow 기반으로 설명하겠다.) 1. develop에서 feature 브랜치를 만든다. 2. feature 브랜치에서 1번째 브랜치를 만들어 개발 완료 후 feature 브랜치에 첫번째 PR을 날린다. 3. 코드 리뷰.. 2022. 12. 1. 술담화 쇼핑몰 Form 에러 처리 변경하여 결제페이지 체류 시간 감소, 이탈률 감소 시키기 술담화 쇼핑몰(https://sooldamhwa.com/)에서 8월 말 선물하기 기능을 추가하면서 결제 페이지의 대대적인 디자인 변경이 있었다. 결제 페이지 쪽 개발을 하면서 기존 결제 기능에 개선하고 싶은 부분을 발견했다. 술담화에는 장바구니에 상품을 담아서 결제하거나, 제품을 바로 구매하는 경우 결제 페이지로 이동한다. 결제 페이지에서 배송지 확인 및 수정, 주문하는 상품 확인, 결제 방법 선택, 쿠폰 선택, 포인트 입력, 정보제공 동의를 한 뒤에 결제 버튼을 누르면 결제가 진행된다. 기존에는 결제 버튼은 항상 비활성화되어 있고, 결제에 필수인 항목인 결제 방법과 개인정보 제공 동의를 하면 결제 버튼이 활성화되어 결제를 할 수 있는 방식이었다. 이 방식은 유저가 어떤 항목이 필수로 입력해야 하는지 알.. 2022. 10. 10. [코드숨 리액트 강의] 5주차 회고 - 비동기 코드에서 Thunk를 쓰는 이유 드디어 강의의 절반을 넘게 들었다! 8주차까지면 끝인데 벌써 5주차가 끝나다니 시간 참 빠르다. 이번주는 수요일 휴일이 있어서 여유가 있었다. redux와 비동기 fetch를 TDD로 개발하는 것을 배웠다. 지난번 첫 TDD를 개발해서 그런가 이번 과제는 처음 TDD를 접했을 때 보단 수월했다. 과제를 월요일부터 시작해서 제출하면 더 좋을 것 같다. 코드 리뷰를 좀 더 받는게 나에게 큰 도움이 될 것 같다. -> 내일부터 과제 해보자! Fetch 테스트 jest로 테스트하는 것은 런타임 때 테스트하는 것이 아니기 때문에 실제로 fetch 이후 response를 받아서 테스트가 진행되지는 않는다. useSelector.mockImplementation((selector) => selector({ categ.. 2022. 6. 6. "나는 LINE 개발자입니다"를 읽고 집 근처 도서관에 가서 책을 구경하는데 "나는 LINE 개발자입니다"라는 책이 눈에 띄었다. 다른 회사 개발자들의 삶은 어떨까 궁금해서 냉큼 빌려왔다. 라인에서 일하는 개발자들이 어떻게 개발자가 되었는지부터 라인에 입사하게 된 이유, 라인에서는 어떻게 일하는지 등의 이야기들이 있었다. 무엇보다 좋았던 건 나라는 개인과 지금 다니는 회사 모두에게 유익한 내용이라는 점이었다. 개발자 개인에게 좋은 내용을 먼저 소개하고, 회사에 도움이 되는 내용을 그다음에 소개하겠다. 더 많이 성장하고 싶은 주니어 개발자의 공부 팁 1. 개발에 대한 흥미 잃지 않기 개발자로 일하고 계신 분들은 대부분 개발을 좋아하신다. 하지만 좋아하는 정도에서는 차이가 있다고 생각한다. 개발자 분들 중에도 쉬는 시간에도 개발을 하고 새로 출.. 2021. 9. 12. React에서 setInterval 제대로 쓰는 방법 React에서 setInterval을 사용하는 방법은 Vanila Javascript와는 다릅니다. 아래의 예시 코드를 보시죠. import { useState } from "react"; import "./styles.css"; export default function App() { const [number, setNumber] = useState(0); const loop = setInterval(() => { console.log("number", number); setNumber(number + 1); if (number === 10) clearInterval(loop); }, 1000); return number : {number}; } 10초를 센 뒤에 루프가 끝나는 코드로 동작할 것 같지만.. 2021. 7. 29. AI 이미지 캡셔닝 - Image Captioning 이 글은 Washington University in St.Louis의 Jeff Heaton 교수님의 강의를 참고하였습니다. 링크 : https://github.com/jeffheaton/t81_558_deep_learning/blob/master/t81_558_class_10_4_captioning.ipynb 딥러닝 학습을 통해 이미지 캡셔닝(Image Captioning)을 하는 방법에 대해 알아보겠습니다. 목차는 다음과 같습니다. 1. Image Captioning이란? 2. 전체적인 구조 3. Word Embedding(Glove) 4. 실습 예제 1. Image Captioning이란? 이미지를 설명하는 캡션(설명)을 만들어 내는 것을 의미합니다. 즉 이미지를 입력으로 넣으면 문장이 만들어지는 .. 2020. 12. 16. 딥러닝 모델의 Overffiting을 줄이는 방법 이 글은 Washington University in St.Louis의 Jeff Heaton 교수님의 강의를 참고하였습니다. 05_1 reg ridge lasso 05_2 kfold 05_3 keras L1 L2 05_4 dropout 05_5 bootstrap 링크 : https://github.com/jeffheaton/t81_558_deep_learning 목차 Regularization(가중치 규제 : Riedge, Lasso) K-Fold Cross Validation(K-겹 교차 검증) Holdout Dropout Regularization을 활용한 벤치마킹(boosting) Regularization(가중치 규제 : Riedge, Lasso) Overfitting(과적합) 이란? Linear.. 2020. 12. 15. 이전 1 2 3 4 다음
