커피챗 02회차
헬스체크
한 주간 어떻게 보내셨나요? 😃
- 김은수
- 지난 주에 목금 연차 내고 제주도 다녀왔어요 ㅎㅎ
- 자연 + 먹부림 사진
- 김성빈
- 무난무난 라이프. 주말에 쉬어야겠다 해서 쉬어주고!!
- 쉴때는 어떻게 쉬시나요? ⇒ 스트레스가 풀려야지~ 다시 개발 좀 해볼까? 하고 싶은 겜 하고. 생산적이지 않은거 아무거나 ㅋㅋ
- 김재민
- 저번 주 토요일이 카카오 인턴십 보는날이여서 코테 열심히 했다. 일요일에는 휴식.
- 카카오 코테 어떤 문제 나왔어요? ⇒ 그래프 한 문제. 마지막은 dp. 딱 봐도 dp 인건 알겠는데 자료구조 어떤거 쓰지 난감쓰.. 나머지 문제들도 어떻게 효율적으로 짜지? 그래서 구현으로 풀어버림. 테케 조금 틀려도 제출했다~~.
- 주로 어떤거 하면서 쉬시나요? ⇒ 유투브도 보고. 개발자분들도 만나고. 맨날 보는 유투브 채널만 본다. 침착맨(침투부)ㅋㅋㅋ 좋아한다. 개발바닥 볼 줄 알았는데 침착맨..ㅋㅋㅋ
- 백윤서
- 좋아하는 운동하고, 주말에는 라켓볼 대회 + 휴식
- 라켓볼?? ⇒ 좋아하는 운동!!! 센터에서 대회가 열렸다. 스쿼시(a.k.a 테니스) 비슷하다. 수상은 아니고..ㅎ
- 예전 팀원들이랑 스터디하고 있어요. 좀 힘들긴 했는데 주말에 좋아하는 운동 하고 쉬면서 휴식했습니다.
- 스터디 하면서 다툼이 있었나? ⇒ 어렵다고 생각하다 보니 스터디 하면서 이걸 내 머리에 넣고 있는게 맞나란 의문도 들고. 할게 많네..
- 이재준
- 4학년 or 취업한 친구들 만나서 저녁약속
- 토요일 알바+세션+게임, 일요일은 근처 쇼핑몰 아이쇼핑
- 특강듣고. 저녁먹고 밀린 게임(?) 하고. 아이쇼핑도 하고 ㅎ
- 밀린 게임 === 메이플
- 레벨이…? 274??? 만렙 200 아니였나.. 250으로 늘었다가 275로..!? 지금은 300???
- 😭
- 조재훈
- 카카오 코테 준비하셨고. 코테를 봤는데 넘 어려웠다.. 맞왜틀?? 시간을 너무 많이 썼다.. 멘탈이 털렸다ㅜ 생각보다 못 봐서 좀 우울했다.. 가족들과 대방어 먹고 극복ㅎ. 일요일에는 윤서님께서 알려주시는게 있었다?! 노션 API? 집에만 있으니 재미없어서 운동도 했다.
- 블로그 원래는 몽고디비랑 ??에디터(tiny editor?) 써서 하고있었는데. 이미지를 에디터에 업로드하고 S3에 넣고 url만 가져오려고 했음. 근데 잘 안돼서,,(blob으로 변환을 하더라) 노션 API을 봤는데 노션은 원래 S3에 넣고 있더라.
Q&A
- 김성빈
- SPA로 개발하지 않는 게 더 좋은 경우가 언제인지 궁금합니다. (바닐라js/jquery)
- Bundler를 깊이 있게 공부하는 것이 JS, CSS, React를 깊이 공부하는 것만큼 좋을지 궁금합니다. 만약 좋다면 하나를 정해서 Vite를 할지 Webpack을 할지도 궁금합니다.
- 모바일 앱에 들어가는 웹뷰를 개발하는 일과 모바일 웹 100%를 개발할 때 웹 프론트엔트 개발이 많이 달라지는지 궁금합니다.
- 한 번에 작업을 하기엔 오래 걸려서(대략
16ms를 초과하는 정도) 작은 단위로 쪼갤 정도로 무거운 작업을 할 때가 있는지 궁금합니다. - https://github.com/facebook/react/tree/main/packages/scheduler
- https://legacy.reactjs.org/docs/design-principles.html#scheduling
- There is an internal joke in the team that React should have been called “Schedule” because React does not want to be fully “reactive”.****
- F-lab 게시물(https://f-lab.kr/blog/f-lab-release-v230701)을 보니 “요구사항을 구현하는 경험을 해보았다면 그 이후부터는 “더 좋은 퀄리티”로 구현하는 법을 공부하고 적용하셔야 합니다.”라고 하던데 혼자서 하기 좋은 과제나 방법이 있을까요?
- 네트워크를 공부하려고 하는데 어떤 내용을 모르면 결격인지 궁금합니다!
- 백윤서
- 이재준
Vue에 대한 호불호를 현직 개발자 분들도 많이 가지고 계신 것 같습니다.
Vue를 굳이…? 라는 의견도 많이 보는 것 같습니다.
멘토님은 어떤 의견을 가지고 계신지 궁금해 들어보고 싶습니다. (+당근에서 사용하는 프레임워크도 궁금합니다😊)
- 조재훈
- 순서가 잘못됐다. ⇒ 필요 할 때 만들자
Q1. 멘토님은 새로운 기술을 습득하실 때 어떤 방법으로 학습하고 사용하시나요??
Q2. 디자인 시스템을 직접 구축해보는것이 인풋대비 좋은 경험이 될 지 궁금합니다!!
Q3. 아토믹 디자인 패턴에 대해서 멘토님의 생각과 경험이 궁금합니다!!
Q4. 멘토님은 FE개발자가 되신 이유가 무엇인가요???
- 다음 주 오프라인 모임 식당 정하기
답변들
- SPA로 개발하지 않는 게 더 좋은 경우가 언제인지 궁금합니다. (바닐라js/jquery)
- react가 일반화되었지만 react 없이도 개발을 할 수 있는데
- 이메일 템플릿을 만드는 경우 → 바닐라 JS 적절
- 무언가 가벼운 화면을 만드는 경우 → 좀 더 퍼포먼스가 나올 수도 있다.
- 내가 vanilla에 익숙하지 않고 react에는 익숙하면 react가 나을 수 있음.
- small app에 적절하지 않나?
- jquery는 옛날에는 cross browsing 등의 기능으로 갓갓 라이브러리였다.
- Bundler를 깊이 있게 공부하는 것이 JS, CSS, React를 깊이 공부하는 것만큼 좋을지 궁금합니다. 만약 좋다면 하나를 정해서 Vite를 할지 Webpack을 할지도 궁금합니다.
- 번들러의 동작 원리를 이해하는 것은 좋다고 생각
- 어떤 도구의 정확한 역할을 아는 것은 분명 차이가 있다.
- 트러블 슈팅, 어떤 도구 활용 시에 생산성 차이가 남 (시간)
- 언젠가는 공부하면 상당히 많은 도움이 될 것 (webpack, babel)
- 디자인 패턴도 알 수 있다.
- Vite vs Webpack - 둘 다 괜찮다고 생각하지만 Webpack은 국밥 번들러로 이렇게 잘 만들어진 라이브러리가 없어서 Webpack 공부가 괜찮다고 생각. Vite는 계속해서 개발되고 있고 2-3년 뒤에는 내부 동작이 달라질 수 있다.
- 모바일 앱에 들어가는 웹뷰를 개발하는 일과 모바일 웹 100%를 개발할 때 웹 프론트엔트 개발이 많이 달라지는지 궁금합니다.
- 조직 by 조직인데
- 토스는 react native를 엄청 잘 활용하는 걸로 알고 있다.
- 당근은 rn을 안쓰고 전부 웹뷰로 개발
- 웹뷰는 브라우저를 띄우는데 앱에서 모바일에 설치된 브라우저를 띄우고, 앱과 웹이 브릿지로 통신할 수 있음. 네이티브와 정보를 통신.
- 네이티브 개발자와 협업하고, 추가로 고려해야 할 부분이 생김
- e.g.
- 앱인데 줌이 되고, 드래그가 되면 어색함
- 앱의 다크 모드 설정과 동기화
- API 인증도 웹에서 직접 안 하고 앱에서 보관한 토큰을 사용
- 프론트엔드 개발 자체는 크게 달라지지 않는다.
- 한 번에 작업을 하기엔 오래 걸려서(대략
16ms를 초과하는 정도) 작은 단위로 쪼갤 정도로 무거운 작업을 할 때가 있는지 궁금합니다. - 따로 없긴 하다.
- 애니메이션을 그릴 때 requestAnimationFrame, IdleCallback 등을 쓴다.
- React에서 (사실 잘 못 알아들음) 그런 구현이 있음
- F-lab 게시물(https://f-lab.kr/blog/f-lab-release-v230701)을 보니 “요구사항을 구현하는 경험을 해보았다면 그 이후부터는 “더 좋은 퀄리티”로 구현하는 법을 공부하고 적용하셔야 합니다.”라고 하던데 혼자서 하기 좋은 과제나 방법이 있을까요?
- “더 좋은 퀄리티”가 임팩트 측면에서 사용자를 모으고 오픈 소스로 내는 걸로 봐도 좋을 것 같다.
- 네트워크를 공부하려고 하는데 어떤 내용을 모르면 결격인지 궁금합니다!
- 전공자라면 학부 네트워크 정도면 충분하다.
- DHCP, DNS, 구글에 검색하면 일어나는 일
- 프론트엔드 커리어에서 프론트엔드 개발만 해도 얘기할 내용이 많고, CS에 포커스가 가는 경우가 많지는 않다. 요구받는 경우도 적다.
- Vue에 대한 호불호를 현직 개발자 분들도 많이 가지고 계신 것 같습니다. Vue를 굳이…? 라는 의견도 많이 보는 것 같습니다. 멘토님은 어떤 의견을 가지고 계신지 궁금해 들어보고 싶습니다. (+당근에서 사용하는 프레임워크도 궁금합니다😊)
- React만 썼을 때는 Vue를 굳이 써야 하나 생각이 있었다.
- 업무적으로 Vue를 써야 하는 환경에서 Vue를 접하고 나니, 시야가 넓어짐을 느꼈다.
- 새로운 팀에서 Vue를 써서 배우게 되었다.
- 업무를 위해선 어떤 프레임워크를 써도 상관이 없는데, 다른 프레임워크를 배워야 할 필요가 있겠구나를 느끼게 됨.
- “하나를 공부하는 것도 좋지만 다른 것도 공부할 필요가 있다.”와 일맥상통
- 각 도구가 잘 푸는 문제, 추구하는 패러다임(?)이 있다 (잘 못들었어요..!)
- Vue를 공부하는 것은 확실히 도움이 된다.
- 당근은
- React + TS를 기본으로 사용하고 있고, Rescript를 사용하는 팀도 있다.
- Next, SPA, SSR 다양하다.
- Q1. 멘토님은 새로운 기술을 습득하실 때 어떤 방법으로 학습하고 사용하시나요??
- 2가지로 접근
- 내가 궁금해서 알고 싶은 것
- 일단 구글링 해서 관련 기술/라이브러리 → 공식 문서를 봄.
- 잘 이해가 안되면 유튜브, 블로그, 강의 찾아 봄.
- 관심은 없는데 새로 나오고 그래서 알고 싶은 것
- 뉴스 레터로 신규 정보를 눈에 담고
- 이게 뭐야, 하면서 궁금증이 생기면 공부 시작
- Q1-2. 새로운 걸 습득해야 될 때 공식 문서를 다 읽고 구현 vs 구현하면서 문서 보기
- 후자.
- 문서를 처음부터 다 읽기엔 힘들고 그러라고 만든 것도 아니라고 생각
- 튜토리얼은 항상 있더라.
- 기본 컨셉을 이해하고, (개발하다가) 궁금한 게 생기면 문서로 해소하는 방식으로 함.
- 어느 정도 해보고 쌓아야 (잘) 들어옴.
- Q1-3. 새로운 걸 받아들이는지 얼마나 걸리는지
- 완전히 새로운 건 오래 걸리지만, 기존 것에 쌓아 올려진 거면 쉽게 다가옴
- e.g. 알던 내용 70% + 모르던 내용 30% case
- Q2. 디자인 시스템을 직접 구축 해보는 것이 인풋 대비 좋은 경험이 될 지 궁금합니다!!
- 디자인 시스템을 구축하는 것은 분명 유익한 경험
- 멘토님 Q. 인풋 대비의 의도?
- 멘티 A.
- 요즘에 디자인 시스템에 관심이 많이 생기면서 storybook도 접하고 만들어보려고 하는데
- 디자인이 나온 것도 아니고, 토큰은 어떻게 정해야 될지 안 정해져 있는 상태
- 아무 것도 없는 상태에서 구축하려니 실제로 개발하고 작업을 하는 시간보다 고민만 하고 결과물이 나오지 않는 경험을 하게 됨.
- mui와 같이 잘 구축되어 있는 걸 사용하는 것
- atomic design 패턴을 적용해보기 위해 디자인 시스템을 만들려고 했는데, 이걸 해보기 위해 준비하는 과정이 너무 커졌다는 생각이 듬.
- 이걸 혼자서 다 해보는 게 나한테 큰 도움이 될지? 생각이 들었다.
- 요약: 생각보다 품이 많이 들어서 하는 게 맞냐는 생각이 들었다.
- 멘토님 A.
- 맞다. 디자인 시스템이 품이 정말 많이 들어간다. 당근도 1-2년 전까지 디자인 시스템이 없었다. 토큰만 있었다. 버튼 등의 컴포넌트가 없었음. 그걸 하는 게 품이 정말 많이 들어서 의사 결정을 안 하고 있었음. 그 정도로 품이 많이 듬.
- 이걸 하는 게 의미가 있는가? 특정한 상황에서는 의미가 있다고 말하고 싶다.
- 디자인 시스템이 필요가 없는데 만들려 드는 것은 좋은 접근은 아니라고 생각이 든다.
- 서비스를 개발하다가 반복되는 패턴을 디자인 시스템으로 옮기는 게 좋은 패턴이라고 생각.
- 그냥 구현하면, 컴포넌트 구현한 건 알겠는데, 어디에서 썼는데?를 답변할 수 없음.
- Q3. 아토믹 디자인 패턴에 대해서 멘토님의 생각과 경험이 궁금합니다!!
- 본인은 너무 싫다.
- (이론적으로는 오래 전부터 있었지만) 한 2-3년 전에 붐이 있었다. (왜 인지는 모르겠지만)
- 여기 저기서 서비스에 넣으려는 시도가 많았다.
- SPA 프레임워크가 나온 후로 넣으려는 시도가 많았던 듯.
- 지금은 좀 잠맘해짐. 실용적이지 않기 때문에.
- 막상 서비스 개발할 때 녹여보니까 논리적으로 모호한 부분이 생김.
- e.g.
- 서치박스가 있음. 검색 UI가 있고 검색하면 자동완성 UI가 나옴.
- molecule? organism? template?
- 특정 단위 UI에 대해서 소속을 결정할 때, 모르겠는데?가 나옴. 실제로 UI로 표현했을 때 소속이 모호해짐.
- 소속을 결정하는 일이 비 결정적임.
- 그런 것은 사실 쓸데 없는데 결정을 꼭 해야 하므로 퍼포먼스 저하 요인이 됨.
- 좋은데 실용적이진 않구나. 하며 거품이 꺼진 상태.
- 기준을 정하는 게 쓸데 없다고 생각한다.
- atom > molecule 이해하는 것? 쉬움.
- 서비스에 녹이려니 컴포넌트의 소속 구분이 의미 없는데도 불구하고 리소스가 듬.
- 멘토님 Q. 전 멘토님과는 어떤 얘기를 했는가?
- 멘티 A.
- 전 멘토님은 카카오 페이지에서 적용해서 운영을 하는 모습을 보여주심.
- 어떻게 사용하는지 글과 함께 보여주심.
- 반대 의견의 글들도 소개해주심.
- 본인은 이해를 해보고 싶어 일단 구현해보자는 결정을 하게 됨.
- Q4. 멘토님은 FE개발자가 되신 이유가 무엇인가요???
- 병역 이슈 해결을 위해 관심 분야가 아닌 게임 개발에서 웹 개발로 전환, 웹 개발에도 흥미가 있어 계속 해오고 있음.
- 적성에 잘 맞는 것 같음.
- 배포가 빠르다는 면에서 잘 맞는다고 느꼈음.
- Q4-2. 멘티 - 어떤 프론트엔드가 되고 싶다는 게 있나?
- 어떤 개발자가 되어야겠다는 생각은 있다. (잘 못들음)
- 관심 있는 거, 좋아하는 스택, 개발 계속 해오면서 가리지 않고,
- 관심 있는 걸 두루두루 하는 잡부
- 어떤 문제가 들어왔을 때, 풀고 싶다고 생각하는 문제를 내가 가진 무기로 어려움 없이 해결하고 싶다.
- 나중에 조직을 꾸린다면, BE/FE로 나누기보단 Product Engineer, Problem Solver의 역할로 구성할 것 같다.
- 번외 Q1. 잡부로서 프론트엔드 외적인 공부를 하고 계신지
- 1-2년 전에는 AWS, Cloud 쪽에 관심이 되게 많았었음. 자격증도 따고.
- 요즘에는 그렇게까지 많이하지는 못 함.
- 여전히 관심 있고, 관심 있다고 매니저에게도 얘기 중.
- 업무적으로 그런 기회를 만들 수 있게 노력 중.
- 번외 Q2. 어떤 맥락에서 주석을 사용하고, 주석을 어떻게 써야 우려하는 부분을 막을 수 있을지 궁금합니다.
- 우려하는 부분
- 잘 쓰인 코드는 주석이 필요 없다는 말이 흔하다
- 주석은 지우기 어려운 레거시를 만드는 것일 수 있다
- TODO와 같은 주석을 고민해서 쓰는 편인데
- 코드 갱신 시 주석 갱신도 되어야 하는데 그런 경우가 잘 없는 것 같아서
- 주석은 코드를 파악하는데 방해가 되지 않나? 하는 생각을 했었는데
- 다른 분의 의견
- 그 분도 본인도 잘 안 쓰는데 주석이 필요한 경우가 있더라.
- 코드로 표현할 수 없는 때는 주석으로 표현한다라고 했음.
- 멘토님 A.
- 잘 쓰인 코드는 주석이 필요 없어도 잘 읽히는 것은 사실
- 주석은 그럼에도 불구하고 유용하게 쓰일 수 있다고 생각
- 라이브러리 코드 까보면 주석은 정말 흔하다
- 주석은 여전히 의미가 있다는 방증이라고 생각
- case 1. JSDOC로 메타데이터 표현 시
- deprecated임을 알려주는 경우
- 다른 reference를 소개하는 경우
- case 2. 봐도 모르겠는 코드 있음
- bitwise 연산 등
- 주석은 죄가 없다.
- 번외 Q2-2. 라이브러리와 같이 복잡도가 높으면 필요 없다고 공감함.
- 근데 서비스 코드 내의 컴포넌트 같은 곳에서도…?
- 멘토님 A.
- 어떤 컴포넌트?
- 개인적으로 주석을 쓰는 경우가 거의 없긴 했다.
- 코드가 복잡하지 않았기 때문.
- component props를 상세히 설명하는데 JSDOC을 사용하거나, TODO 주석을 쓰는 등에 주석을 활용했음.
- 코드의 동작을 설명하는 주석을 쓰는 경우는 없었다.