HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🥕
김은수팀
/
2. 커피챗

2. 커피챗

Tags
날짜
Feb 5, 2024 22:00

헬스체크

  • 김은수
    • 회사 만들기 전시 보고 왔어요
      • 기업가 정신? 우리가 흔히 아는 회사들의 초기 모습? 요런것들 소개하는 전시.
    • 주말엔 잠깐 출근해서 월요병을 극복했습니다.
      • 월요병을 출근으로 극복하셨다니…… 👍
  • 김영현
    • 암담한…. 한 주??? 왜죠ㅜㅜ
      • 알고리즘 문제가 안풀린다.. 안풀리면 힘들다ㅜㅜ
        • 어떤 문제였는지(조합 문제?!)
        • school.programmers.co.kr
          https://school.programmers.co.kr/learn/courses/30/lessons/42890
      • 멘토님의 추천 방법
        • 다른 사람들의 코드를 보고 다시 풀어보기
        • leetcode도 추천!
    • 잠을 못 자서 머리가 안 돌아갔다ㅜ
      • 불면증이 심했다. 최근엔 나아짐. 잡생각 때문에. ‘안’ 자는 것이었다.
  • 백준원
    • 저번주에 몸이 안 좋았따ㅜ 금방 나았음!
    • 주말에는 딱히 한 건 없다. 친구들 만나서 술마시고 ㅎㅎ 취업한 대학 동기들이랑!!
      • 날씨가 좋았다!! 굿굿
  • 신종욱
    • 반년만에 중학교 친구들 7명 모였다! 집들이도 하고 술도 먹고 ㅎㅎ(14년 지기..ㄷㄷ)
    • 운동을 다시 시작!! (갓생)
      • 무슨 운동?!
        • 잡다하게 여러가지. 일단 헬스!! 오랜만에 하니 중량이 ,,ㅎㅎ 가볍게!
  • 이예진
    • 평일에는 코어타임, 회의 등등.
    • 주말에 눈썰매!! 어디서 타나요?
      • 한강공원에 눈썰매를??? 뚝섬, 잠원!
        • 간이로~ 설날때까지!!
      • 재밌었겠다…
    • 어른들도 많이 타는지?
      • 뚝섬은 건대 옆에 있어서 20대 많더라~ 잠원에 갔는데 가족단위가 많더라! 교회 어린이반에서 단체로 ㄷ ㄷ 아이들이 많았다~

기획 리뷰

  • 타자 게임으로 선정!
  • 스택 리뷰
    • styled component vs tailwindcss?
      • styled component 쓰려고 하는데, tailwindcss가 들어와있군요.
        • headlessui 를 사용하면서 tailwindcss 를 사용하려고 했다. 아마 headless 컴포넌트를 사용할 것 같은데, radix-ui 와 headlessui 중에 고민이었다.
    • yarn
      • 버전 어떤걸로?(classic vs berry)
        • berry → classic 에서 지원하지 않는 기능들을 누릴 수 있다.
    • fetch API
      • ky
        • https://github.com/sindresorhus/ky
      • axios 도 무난~(번들이 좀 크긴 한데)
  • npm 에서 weekly 업데이트 날짜가 오래된게 있고 최근까지 업데이트 되는게 있는데, 이게 중요한가?
    • 저는 중요하게 생각하는 편입니다.
    • 어떤 맥락?
      • 스택을 정할때 근거를 정해서 얘기해보자. npm 에서 검색하면 나오더라(계속 업데이트 지속되는지 등). 그런것들 때문에 궁금해졌다.
 

F&Q

1. headless UI - 공통 질문

  • radix
    • component가 매우 많음
  • headless ui
    • component가 매우 적음
  • 둘 다 좋다 → 어떤 것을 쓰더라도 괜찮다!

2. 아키텍처 - 영현님 질문

  • 현대 프레임워크(리액트, 뷰 등…)는 mvvm아키텍처.
  • 컴포넌트는 UI와 도메인, 비즈니스 로직을 분리해서 만드는 것이 좋음
Patterns.dev
Learn JavaScript design and performance patterns for building more powerful web applications.
Patterns.dev
https://www.patterns.dev/
Patterns.dev
 
만약 이런 방식으로 레이어를 구성하고…
 
컴포넌트 내부 조차 이렇게 작동한다면…
 
View Model(SomePage)또한 View와 Controller로 분리되었다고 보는게 적절할까요?
 

3. 상태 - 영현님 질문

redux를 사용할때는 server, client상태를 나눠서 관리하지는 않았는데,
최근 react-query를 사용하면서 서버 - 클라이언트 상태를 나눠서 관리하게 되었습니다.(개인적으로!)
그렇다면 서버 에서 받아온 상태는 무조건 react-query로 관리해야 한다고 생각했는데요
  1. 서버 - 클라이언트 상태를 분리하였기에 react-query에 일임한다.
  1. react-query는 캐싱기능이 존재해서 충분히 사용할 수 있다. (리덕스 또한 클라이언트의 메모리를 사용할뿐…)
  1. 서버 상태를 관리하려고 react-query를 도입했지만, 서버 상태를 react-query로 받아온 뒤, 클라이언트 상태관리 라이브러리에 저장해두고 사용한다면, 주객전도 아닐까?
 
위 세가지 이유때문에 사용자 인증 정보( user/auth api 등으로 받아온 일련의 데이터)또한 react-query에서 관리해야한다고 생각했습니다.
적절한 논리대로 생각을 하였는지가 궁금합니다!
 
3→ 굳이?
 
TODO: react-query 로 클라 상태 관리하는 아티클 찾아서 공유(완료)
React Query as a State Manager
Everything you need to know to make React Query your single source of truth state manager for your async state
React Query as a State Manager
https://tkdodo.eu/blog/react-query-as-a-state-manager
React Query as a State Manager
 

4. 멘토님은 어떻게 실력을 쌓으셨는지 궁금합니다! - 종욱

  • 제가 개발 어떻게 공부했냐면
    • 대학교에서 전공 공부로 C/JAVA 배웠구요
    • 웹
      • https://www.codecademy.com/
      • 온라인에서 뚝딱뚝딱 해보면서???
      • 이것저것 만들어봤던 것 같아요.
        • 포트폴리오 사이트를 직접 만든다던가
    • 일을 당장 뛰어들어서 머리를 깨면서 배웠어요
      • 실무에서 바로 프로덕 만들어야 되는데 울며 겨자 먹기로(?) 배웠던 것 같아요
      • Typescript, Redux, Docker, Nginx
멘토님은 언제 가장 실력을 빠르게 많이 쌓으셨는지 궁금합니다!
  • 실무에서 일하면서 머리 깨지면서 배웠던 것 같아요(가장 빠르게 배울 수 있었다)
  • 지식이 연결될때?? 실력이 점프업 하게 됨
    • 선언적 프로그래밍이 뭘까….(모름)
      • 테라폼을 사용하고 나서 선언적이란게 뭔지 알 것 같음(!!!)
        • Declarative란 이런거구~
    • 컴퓨터 아키텍처(x86? arm) 이런거 모름
      • M1칩은 arm이고 인텔 맥북은 x86?
        • 아하 컴퓨터 아키텍처에 따라 실행 바이너리도 다르게 설치해야 되는구나~
        • Docker 이미지도 이런거에 영향을 받는구나~~
  • 깊게 파는 것도 중요하지만 넓게 하면서 연결시키는 것도 중요하다!!!!
 

5. 이력서 - 예진

추천하시는 사이트(템플릿)있으신가요?
이력서 외 포트폴리오의 필요성? 자체 웹사이트 개발?
 
경험,성과를 깔끔하게! 원티드! 프로그래머스도 괜찮
외국계 → 링크드인도 이력서 할수있음.
노션이력서 선호하시지X pdf추출 별로임..
 
프론트로 신입인 상태니까 업무역량 가늠하기 위해 포폴 있으면 좋다. 초반엔! 협업 경험 드러내기 부족할땐 ~
 
블로깅은 좋다! 기억하는거보단 기록! 특히 꾸준하게! → 좋다
나아가서 직접 블로그 개발? 눈여겨볼만함.
내가 만든 블로그가 포폴이 될 수 있다
더 중요한건, 얼마나 잘 성실하게, 내용이 어떤지가 더 중요~
 
블로그 자세하게 못보실거. 그치만 있으면? 눌러는 봄
하날르 쭈욱 읽진 않고, 두세개 읽고 잘썼나보고 나가고 ~ 정도.
적어도 글 많고 퀄리티 좋으면 ? 좋은 인상을 준다! ← 좋은 bias 주는셈~
 
가능하다면 ‘좀 다른’ 거 시도하는거도 ~?
 
소프트 스킬?
  • 사소한 것들에서 오는 것 같다.
    • 도움을 요청하면 기꺼이 도와준다던가
    • 조금 더 배려하는 말투로 한다던가
    • 심리적 안정감을 느낄 수 있는 사람
  • 직설적인 피드백도 사람과의 관계에 따라 다르게 느껴질 수 있다
 
<ErrorBoundary> <Suspense> <SomePage/> </Suspense> </ErrorBoundary>
//Compound Component, Function as Child Component, Custom hook... //굳이 커스텀훅이 아니더라도 위 방법들로 headless-component를 만들었을시 // Domain Model const Post = { _id = '....', createdAt: '', updatedAt: '', author: '', ... } // View Model type Post = { title: string; author: Author; // client schema foo: 'foo', } class Post { constructor() setTitle(title) { this.title = title; return this; } } // View const SomePage = () => { const {value, onChange} = usePost(); return ( <div> <form> <input value={value} onChange={onChange}/> </form> </div> ) }