토스 서술형 문제
<토스 서술형>
1번
프론트엔드 개발을 하다 보면 비동기 프로그래밍에 대해 만나게 됩니다.
(1) JavaScript에서 "비동기 프로그래밍"이 무엇인지 설명해주세요.
(2) 대표적으로 어떤 문제를 비동기로 해결해야 하나요? 왜 그런 문제들은 비동기로 해결해야 하나요?
(3) 본인에게 가장 고민이 되었던 비동기 문제에 대해 소개해주세요. 그 문제를 어떻게 해결하셨나요?
2번
웹 서비스 개발을 할 때 컴포넌트는 필수적인 개념이 되었습니다.
(1) 프론트엔드 웹 개발에서 컴포넌트라고 하는 개념에 대해 소개해주세요. 웹 서비스를 개발할 때 컴포넌트를 이용하면 어떤 장점이 있나요?
(2) 본인이 좋은 컴포넌트를 설계하기 위해 따르는 원칙이 있다면 소개해주세요.
(3) 지금까지 개발했던 컴포넌트 중에서 가장 고민되었던 컴포넌트가 있다면 소개해주세요. 어떤 부분이 가장 고민이 되셨나요? 그 부분을 어떻게 다루셨나요?
3번
프론트엔드 웹 서비스를 개발하다 보면 UI의 상태를 반드시 관리해야 합니다.
(1) 본인이 개발했던 웹 서비스들에서 상태를 어떻게 관리하셨었는지 소개해주세요.
(2) 왜 그렇게 UI 상태를 관리하는 것이 좋다고 생각하셨나요?
(3) 상태를 더 잘 관리할 수 있는 방법이 있을까요? 본인이 따르는 상태 관리의 원칙이 있다면 소개해주세요.
- 컴포넌트 개선(확장성)
- - atom부터 시작(개선할 컴포넌트 정하고, 부족했던 부분 추가로 필요한 부분을 정리 → 담당자를 정해서 개발 → 사용하던 부분에서 새로운 컴포넌트로 이관 작업)
컴포넌트 리팩토링 규칙
네이밍 규칙
components/refactor/atoms/button
- 기존 컴포넌트와 별개 파일로 만들기 → 기존 기능에 영향을 주지 않기 위함 → 제작 후 한 부분에서만 새로운 컴포넌트로 바꿔서 테스트하기 → 완료되면 다른 페이지들은 담당자들이 컴포넌트 확인해서 바꾸기
- 스토리북 만들기(사용방법 문서화) https://storybook-design-system.netlify.app/?path=/docs/button--basic
- 많이 사용되는 컴포넌트부터 리팩토링 시작하기
- 인라인 스타일의 사용을 지양 → style 파일을 분리해서 사용할 것
컴포넌트 리팩토링 체크리스트
한 컴포넌트에 코드량이 많지 않은가?
잘 읽히는가? (다른 사람들이 사용하기에 무리가 없는가?)
쓸데없는, 불필요한 로직이 있는가?
js 내장 함수로 대체할 수 있는 로직이 있는가?
중복코드를 줄일 수 있는 방법이 있는가?
리팩토링 필요 컴포넌트
Avatar(image컴포넌트에 의존) - 동진
- 아바타 그룹의 최대 갯수 제한하기(갯수 자유, 선택속성)
- 최대 갯수가 되면 마지막은 +, ... 등으로 표현될 수 있으면 좋겠다(...사용, 선택속성)
- hover시 나타낼 정보 보여주기..?
- 클릭 이벤트 있어야 하나? → 아바타 그룹 전체 클릭 이벤트 하나만 → 아바타 그룹으로 사용시에는 아바타 개별 이벤트 지양
Image
- round image를 할 수 있으면 좋겠다
Button - 소정
- 크기를 설정할 수 있으면 좋겠다(small, medium, large, 특정 값 까지 아우를 수 있으면 좋을 듯)
- 색상을 설정할 수 있으면 좋겠다(primary, secondary, 특정 값)
- 버튼 비활성화, 활성화를 선택할 수 있으면 좋겠다 → 비활에 따른 css 속성도 필요
- switch문 없애기
- border-radius주기
- secondaryBtn, defualtbtn이라는 변수가 잘 안들어옵니다
- 여러개의 버튼을 함께 사용하는 buttonGroup 컴포넌트가 추가되면 좋겠다
- hover시 pointer가 되도록 수정(PC 고려)
- icon과 함께 쓰이는 버튼도 있으면 좋겠다(제작자 선택^^)
Input - 정호
→ 새로 추가되면 좋겠다. 많이 사용되기 때문에
- 활성, 비활성화
- 조건에 따른 색상 변화 ( 포커스, 검증실패 등)
- 크기, border-radius, placeholder, focus,
layout(소정)
→ 레이아웃을 잡기 위한 컴포넌트
Icon(소정)
→ icon을 사용하는 곳이 많아서, 새로 추가되면 좋겠다
→ 버튼에 icon 사용하는 속성 추가하기
Toast(동진)
→ 이건 atom으로 옮기면 어떤지?
- 두줄로 나눠서 문장을 쓸 수 있으면 좋겠다..ㅎㅎ (한줄에 최대 길이 고려 필요(개발자가 알아서 줄여서 써야함), min 320px toast 글자크기 14px, 한줄에 최대 들어갈 수 있는 글자수 15자 이런식의 제한) → 아니면 message를 리액트노드로 받기
- 축하합니다! ㅇㅇㅇㅇㅇ님의 ㅇㅇㅇㅇ에서 확인하시면 됩니다.
- 축하합니다! ㅇㅇㅇㅇㅇ님의 ㅇㅇㅇㅇ에서 확인하시면 됩니다.
Text(정호)
switch문을 없애면 좋을것 같다
Upload(정호)
- children 부분 Upload 95줄
- 이미지 파일, accept image/*로 하면 이미지 아니어도 들어오는 거 수정
- 업로드 가능한 파일이 아니라면 경고창 뜨도록
Modal(소정)
- 모달이 꺼지고나서 뒤에가 클릭되는 문제가 있네요...
- 모달 배경을 클릭 했을 때 닫히게 할지 말지를 선택할 수 있으면 좋겠다
기본 모달을 활용한 모달?(ex_confirmModal)
- 주로 사용되는 형태를 organism에 넣어두면 좋겠다
Navigation/GlobalNavigation(하단탭)(동진)
→ 사용하고 있나요? 안쓰네요...ㅠㅠ
→ 범용성있는 네비게이션으로 만들기(현재 GNB는 전혀 확장성이 없다)
- 둘을 합치면 어떨지
Loader(정호)
→ react-lottie에 deprecated 속성 있음
→ react-lottie 라이브러리를 쓰는게 맞는가?
→ lottie-web 을 쓰면 달라지는지는 잘 모르겠음
Header
context에서 관리하는것도 괜찮을듯..?
→ context로 한다면, 다음 주차로 넘겨서 해도 괜찮을듯?
Badge
- em가능하게 하기?(알람, 노티 목적) → 어떻게..? 제작자 자유ㅎㅎ