전체 글

해당 글 184건

IDL

2022. 8. 26. 13:52

IDL (interface definition language) ; 인터페이스 정의 언어 IDL은 한 언어로 작성된 프로그램이나 객체가, 알려지지 않은 언어로 작성된 다른 프로그램과 통신을 할 수 있도록 해주는 언어를 지칭하는 일반적인 용어이다. 대표적으로 Google - protocol-buffers, Facebook - Thrift, Apache Avro, 그리고 WSDL가 있다. 굉장히 오래전부터 있던 용어임에도 처음 사용해봤고 RPC도 알게되고 구글의 protocol-buffers(protobuf)를 사용해봤다. Apache Avro: 원격 프로시저 호출(RPC) 및 데이터 직렬화 프레임워크이다. 자료형과 프로토콜 정의를 위해 JSON을 사용하며 콤팩트 바이너리 포맷으로 데이터를 직렬화한다.
software engineering/pm

MSW(Mock Service Worker)

2022. 8. 26. 13:50

원래 목적은 vitest(Jest) 와 같은 unit test에서 필요한 경우에 사용하려 했었다. 지난 인터널 테스트를 진행하면서 경우의 수가 16가지 정도로 복잡했는데 초기에 7일만 작업하고 버릴 코드라고 생각해서 테스트 코드 없이 진행했다가 QA에서 버그도 많이 발견되고 한 경우를 고치면 다른 곳에서 버그가 발생해서 무조건 꼼꼼하게 짜리라 다짐했었다. 하지만 이번 scope에 신규로 공부해야할 내용이 많아 MSW를 vitest에 포함시키지 않고, storybook에 경우 별로 정의하는데 사용했다. 처음엔 vitest에 넣어보려다 어디서부터 어디까지 테스트 코드를 작성할지 정해지지 않은 상태였지만 도입하고 싶었던 이유였던 16가지 경우에 어떤 component가 rendering 됐는지와 그 경우 별..
software engineering/frontend

QA

2022. 8. 26. 13:50

처음으로 QA 프로세스를 가진 회사에 입사했다. 전에는 Waterfall 방식으로 개발해야했고 개발이 완료된 시점에서 RA(Regulation Affair)팀에서 개발서버에 올라간 버전을 확인하고 OK 사인을 줬었는데 Agile 팀에서는 QA팀이 꼭 필요하다고 느껴졌다. 로컬에서 개발해서 dev 환경에 올리고 PO가 확인을 하더라도 영어가 아닌 언어의 경우 그리고 예상하지 못한 시나리오는 언제든지 발생할 수 있었다. 사실 초기에 회사에 합류하게 됐을때 너무 좋았던 점 중 하나는 전 회사와 다르게 unit test를 작성한다는 점이었다. 왜 작성해야 하는지 사실 마음속에 굉장히 당연한 부분을 작성해야 한다고 생각해서 불편할거라 생각했었는데, QA에서 카드가 돌아오기 시작하면서 점차 FE에서는 MSW, S..
software engineering/devops

Chromatic (feat. Storybook)

2022. 8. 26. 11:20

도입의 가장 큰 이유는 PR을 만들때 chromatic workflow를 실행하여 bulid 된 URL을 PO/디자이너분께 선검토 후 UI 리뷰 또한 진행하자는 목적이었다. 3000개의 snapshot을 월 무료로 사용할 수 있어서 우선은 사용해보기로 했고, 결론은 생각보다 빠르게 3000개가 사용됐다. 컴포넌트가 변경 됐지만 스토리북을 변경하지 않은 경우 문제를 미리 방지할 수 있었다. UI 리뷰는 생각보다 활발하게 진행하기 어려웠고 오히려 필요한 경우 build 하고 슬랙에 mention을 통해 요청드리는게 더 효과적. 히스토리가 남는다. new Date(), random 함수의 경우 변경사항으로 발견돼 다시 chromatic snapshot을 생성했다. prototype으로 고정값을 추가해서 해결했..
software engineering/frontend

101

2022. 8. 26. 10:51

처음엔 회사에서 사용하고 있지만 나는 익숙하지 않았던 기술들부터 점차 회사 생활과 문화에 대한 101을 했던 거 같다. 유대관계 형성에도 도움이 됐다. 나와 주로 101을 해주신 시니어분은 한 거의 한 회사에서 경력의 반을 보내실정도로 만족하면서 다니셨고 대기업 3군데 이상을 이직하며 다니신 분은 어떤 생각이신지도 궁금해 101에서 1on1으로 변화된 시간을 보낸 적도 있었다. FE 관련이거나 Cloud Native 관련을 주 경력으로 갖고 계신분들과도 이야기해보고 싶으면 따로 요청드리면 정말 모든 걸 도와주실 마음으로 도와주신 게 참 고마웠다. 1주에 한번으로 시작해 나중엔 1달에 1번으로 변화 됐지만, 적응에 도움을 주신거도 감사하지만 좋은 문화를 알려주신거에 감사한 마음이 든다.
company/culture

Miro

2022. 8. 25. 14:43

원래는 초기 Event Storming 툴로 유명했다는 Miro. Atlassian, Notion, Github Projects만 사용해보다가 Miro를 사용해보니 자율성이 엄청 높다. Brain storming 부터 Sprint 별 이슈 정리, 미팅, 1-1 모든게 미로가 편하다. 단점이라면 기록/공유해야 할 만한 컨텐츠는 Confluence에 옮겨야 신규 팀원이 왔을 때나 누군가 도움 줄 때 좋다고 하는데 우리팀은 이제까지 입사 후 1년간 최근 1명 추가된거 외에는 없을 정도로 적어서 모든 팀원들이 내용을 잘 알고 있다. Miro로도 충분한거 같아서 우리팀은 잘 활용중인거 같다. 아마 Confluence에 적어놔도 outdated label이 붙었을 쯤 누군가 오지 않을까
software engineering/pm

React State Management

2022. 8. 25. 14:42

첫 회사에서 19년도에 처음 React를 사용했었다. 처음 혼자 공부 하면서 찾아 봤을 때 Apollo GraphQL을 사용했어서 Apollo Client를 사용했었고, 16.8에 React Hooks 개념도 처음 나와서 사람들이 굉장히 열광 했었는데 뭔지 잘 모르겠었고 componentDidMount, setState등 귀찮아 보이는거 대신 간단하게 useState와 useEffect를 사용하면 쉽다고해서 바로 공부하고 사용했었다. 당시에도 GraphQL과 Serverless 처음 접하는 기술이 많아서 전역 상태 관리로 유명했던 Redux까지 기술 스택에 포함 시키기엔 러닝커브가 있었고 다음에 하는게 좋겠다 싶었고 마침 많은 유튜버들이 ContextAPI가 Redux를 대체할까? 라는 제목의 유튜브가 ..
software engineering/frontend

Unit Test

2022. 8. 25. 14:42

우리팀에서 하고 있는 유닛 테스트는 FE, BE 둘다 간단히 조건문 직관적으로 어떤 값을 기대하는게 있는데 함수 이름만 갖고는 명확하게 어떤 값이 나올지 모를 때 가 많았던거 같다. 저번에 어떤분이 공유해주신 FE GitHub Repo를 봤는데, 생각보다 테스트코드가 엄청났다. 노출시킬 수 있는 함수를 가성비 있게 짠게 아니라, 모든 시나리오 별로 Component에 기대하는 이벤트와 Render 된 값을 전부 상세히 적었었다. 이렇게 된다면 아무래도 QA에 내보낼 때 부담감이 적을거 같았다. 대신 초기 테스트코드 작성하는 TDD 방식에 익숙치 않은 사람들에게 그리고 작성할 시간을 Time Estimate에 충분히 넣을 수 있다면 말이다. 최근 Jest 대신 Vitest를 사용해봤는데, --watch 기..
software engineering/frontend

Framer with React

2022. 8. 25. 14:42

https://www.youtube.com/watch?v=OWQlHgEo7Hw&t=272s https://www.framer.com/developers/guides/code-components/ Code Components | Framer for Developers Write flexible React Components right in Framer’s built-in code editor. www.framer.com 개발자가 UI를 디자인하지 않고 디자이너가 바로 React 코드까지 만들어줘서 쓰는 모양이다. 우리는 Figma를 쓰는데 Figact를 써봤는데 도저히 재활용 가능한 코드가 나오지 않았고, Figma - Framer plugin이 있길래 추가해서 Framer로 옮겨봤다. 바로 Prototy..
software engineering/frontend