[Course / TIL] Wanted Pre Onboarding FE Course 5주차 - 개인 과제 9 제출 / CS 면접 질문
Course
Wanted Pre Onboarding FE Course
Study
CS 지식
일반 개발 지식
객체 지향 프로그래밍에 대해서 설명해주세요.
프로그래밍의 한 방식(패러다임)으로 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.
상속, 은닉, 추상화 등으로 코드 재사용성을 높인다.
추가적인 장점으로 클래스 내부의 멤버 변수나 메서드만 확인하면 되므로 디버깅이 쉽고, 클래스 단위로 모듈화할 수 있어 대형 프로젝트에서 업무 분담하기도 좋다.
단점은 처리속도가 상대적으로 느리고, 객체가 많으면 용량이 커지게 되며 설계 시 시간이 필요하다.
함수형 프로그래밍에 대해서 설명해주세요.
프로그래밍의 한 방식으로 객체 지향과 다르게 인자를 받아 항상 값을 리턴해주어서 원하는 결과를 도출하도록 프로그래밍하는 방식이다.
객체 지향 프로그래밍에서 쓰이는 함수(메서드)는 반환값이 없을 수도 있다.
하지만 함수형 프로그래밍에서는 인자를 받고 특정값을 반환해주는 함수를 이용하여 프로그래밍한다.
각각의 함수는 어떤 결과물을 만드는지는 상관이 없고, 그저 받은 인자로 값을 리턴해주기만 하면 된다. 프로그래머는 그것을 이용해 여러 이점들을 가져갈 수 있다.
장점으로는 프로그래밍의 안정성, 코드 재사용성, 오류 범위가 국소적이고 디버깅이 용이하다는 장점이 있다.
함수형 프로그래밍에서 함수는 순수 함수여야 한다.
git flow에 대해서 간략하게 설명해주세요.
Git을 활용하여 개발할 때 가장 많이 표준처럼 사용되는 방법론이다.
master, develop, feature, release, hotfix 브랜치를 대표적으로 운영하여 사용한다.
master는 실제 제품이 배포되는 브랜치이고, develop 브랜치는 master와 같이 만들어져 개발자가 각각 이 브랜치를 기준으로 브랜치를 생성하고, 기능이 합쳐지는 브랜치이다.
feature는 단위 기능 개발 브랜치이며 개발이 완료되면 dev에 머지하게 된다.
release는 master로 보내기 전 QA를 위한 브랜치이다.
hotfix는 master 브랜치 배포 후 버그 발생 시 긴급 수정하는 브랜치이다.
보통 master와 develop은 필수로 운영하는 편이고, 나머지는 필요에 따라 운영한다.
추가적으로 대규모 작업 시 브랜치를 생성하기 보다 fork와 PR을 이용해서 개발한다.
개발자 각자의 레포지토리에 복사해와서 작업하고 PR을 날리는 방식이다.
컴퓨터 공학 기초, Number System
왜 RAM이 하드디스크보다 비싸다고 생각하나요?
RAM 메모리 주소는 왜 16진법로 표현할까요?
32-bit 운영체제에서 4GB밖에 램을 사용할 수 없는 이유는 무엇인가요?
IEEE 754 Single-precision floating-point format과 IEEE 754 double-precision floating-point format중 무엇이 더 많은 저장용량을 차지하나요?
16진수가 컴퓨터공학에서 자주 사용되는 이유에 대해서 설명해보세요.
컴파일러와 인터프리터의 차이가 무엇인가요?
캐시란 무엇인가요? 캐시의 일반적인 작동원리를 설명해주세요.
웹서비스에서 캐시가 적용되는 예제로는 어떤 것들이 있나요?
비트맵(래스터)과 벡터 이미지의 차이점은 무엇인가요?
가비지 컬렉션은 무엇이며, 가비지 컬렉션 기능을 가진 언어는 무엇인가요?
바이너리 파일과 텍스트 파일의 차이는 무엇인가요?
OS
프로그램(Program)에 대해서 간략하게 설명하세요.
프로세스(Process)에 대해서 간략하게 설명하세요.
스레드(Thread)에 대해서 간략하게 설명하세요.
멀티 스레드와 멀티 프로세스의 차이점에 대해서 간략하게 설명하세요.
Blocking과 Non-Blocking의 차이점은 무엇인가요?
Synchronous execution과 Asynchronous execution의 차이점은 무엇인가요?
nodejs는 싱글쓰레드인가요?
nodejs는 event-driven adchitecture인가요?
문자열
문자열 하나는 몇 바이트인가요?
유니코드는 무엇인가요?
UTF-8과 UTF-16의 차이점은 무엇인가요?
스타일 시트를 불러올 때 charset=utf-8을 지정해주는 이유가 무엇인가요?
태그에서 lang 속성을 지정해주는 이유는 무엇이며, ko-KR로 그 값을 설정해주었을 때의 속성값의 의미는 무엇인가요?
발표
페이히어 과제 발표
간단한 서비스 소개
구현 과제 소개
저는 페이히어 과제를 수행했습니다.
github api를 이용하여 repo와 issue들을 가져와서 나타내는 과제였습니다.
상세 기능
기능을 말씀드리자면,
검색창이 존재하고, 검색창에 repo 명을 입력해서 public repo를 검색하여 그 결과를 리스트로 나타냅니다.
리스트 요소를 로컬스토리지에 등록/저장할 수 있고, 최대 4개까지 저장 가능합니다.
등록된 repo를 삭제하는 기능 또한 있습니다.
등록된 repo를 클릭하면 해당 repo의 issue를 마찬가지로 리스트로 나타내줍니다.
이 때 페이지네이션을 적용해야 합니다.
마지막으로 issue 클릭 시 github url로 이동하도록 합니다.
사용 스택
react : React를 이용하여 개발하였습니다.
javascript
전역 상태 관리 툴: redux toolkit. 비동기 처리 또한 필요하고, 페이지네이션이나 무한스크롤을 적용할 것이었기 때문에 전역에서 처리하여서 컴포넌트에서 받아서 사용하는 것이 좋을 것이라고 구상했고, redux를 사용하되 좀 더 코드를 한 파일에서 볼 수 있는 toolkit을 이용하였습니다.
styled-components: 디자인이 없기 때문에 제가 디자인하여 최대한 컴포넌트를 재활용할 수 있도록 설계했고, 이 스타일이 적용된 컴포넌트를 사용하는 것이 효율적이라고 판단했습니다.
추가적으로 기능 명세 정리는 노션을 이용하였습니다.
배포
netlify 자동 배포
설계 단계
설계 단계에서는 일단 검색창이 있고, 검색 결과를 나타내주는 메인 페이지,
저장되어 있는 레포를 볼 수 있는 레포 보관함 페이지,
이슈를 볼 수 있는 이슈페이지로 총 세개로 나누었습니다.
figma로 다음과 같이 와이어프레임을 완성했습니다.
그리고, 카드에 사용되는 컨테이너 (box-shadow가 포함된)을 공통 스타일로 지정하여 재사용성을 높이도록 해서 컴포넌트들을 만들고, 페이지 안에서 취합하는 방식으로 개발을 진행했습니다.
주제별 발표
무한 스크롤
intersectionObserver api 사용해서 구현했습니다.
렌더링 최적화
input에 값을 입력할 때마다 RepoCard 컴포넌트와 Header 컴포넌트가 렌더링이 일어났다. input에 값을 입력한다고 값이 바뀌거나 렌더링이 일어날 이유는 없으므로 memo를 통해 불필요한 렌더링을 줄이고자 했다.
페이지네이션
6개씩 데이터를 자르고 어떤 페이지를 보여줄 지를 page 인수를 통해 결정하고, return을 해주는 방식이다.
page가 무한히 커질 수는 없으므로 마지막 페이지보다 큰 경우에는 무조건 마지막 요소 전 6개를 보여준다.
반대로 1 이하로 내려가지 못하도록 1로 set하고 가장 첫번째에서 여섯번째 데이터만 보여준다.
페이지 옮기는 것은 다음과 같이 구현할 수 있습니다. movePage reducer를 만들고, 이전이면 현재 page에서 -1을 이후로 가고싶으면 +1, 특정 페이지로 가려면 그 페이지 자체를 넘겨주면 된다.
스켈레톤 UI
RepoCard와 IssueCard는 비동기 data fetching을 통해 디스플레이되는 요소들이기 때문에, loading이 true되는 경우에 Loader를 적용하려고 했다. Spinner는 많이 적용해보았지만 Skeleton UI를 적용해보고 싶었다!
Spinner는 매우 간단하지만, UI적으로 기다리는 느낌이 많이 강하다.
먼저 실제 카드와 동일한 크기와 내부 요소 배치를 하고 이때 내부 요소는 회색 div로 대체합니다.
멈춰만 있는 것보다 로딩 느낌을 주기 위해 흰 띠가 회색 네모 위로 움직이도록 했다.
그래서 가상 요소와 애니메이션을 가지고 있는 css를 공통 설정으로 두고, GrayBox마다 포함시켜 모든 회색 네모에 흰 띠가 움직이도록 했다.
회고 (TIL)
2022.03.25 Daily 회고
✏오늘 한 일
- 개인 과제 제출
- 발표 준비
- 면접 대비
- CS fundamentals
⁉느낀 점
드디어 끝이다!
🎃현재 나의 상태
댓글남기기