Portfolio

✨

서로의 성장을 위한 피드백입니다. 보완할 점이 있다면 자세하게 작성해주세요 ~.~

특이사항

피드백

천욱 30분 (11:55)

명재

이벤트 버블링과 캡처링에 대해 설명해주세요. → 버튼 예시를 통해서 설명했는다. 내용이 조금 부족한 생각이 드는데 나도 개념을 까먹어서… 같이 공부하자…
이벤트 위임에 대해서 설명해주세요. → 개념이 조금 아쉽다.. 간단한 리스트 요소로 예시를 들어줬어면 이해하기 쉬웠겠다는 생각이 든다.
Async, Await이 뭔지 그리고 사용 방법을 설명해주세요. → 사용 방법과 개념을 적절하게 잘 설명!!
리액트 라이프사이클에 대해 설명해주세요. → 클래스 컴포넌트에 사용되는 메서드 용어를 전부 알고 있어야 할까?라는 의문이 들긴 했다. 하지만 설명을 원할하게 하기 위해서는 전체적인 흐름을 이해할 수 있게 하는 메서드는 외우고 있는게 좋을듯…
타입스크립트를 사용하는 이유에 대해 설명해주세요. → 타입스크립트의 다양한 장점을 통해 설명하면 좋을듯 (동적 타입 언어에서 → 정적 타입 언어의 특징만 말해서 아숩…)

수화

자기소개 → 학교에서 만드는 거 .. 사례 좋은 듯! 이거 자기소개에 넣으면 좋을 거 같아. 오빠만의 스토리!!

학교 전산팀 부장과 함께 협업 → 실행력 굿굿 → 유지보수 왜 안함?? 후배에게 인수인계했는데, 잘 안한 거 같음..
기억에 남는 기억, 이슈 ? → git, github 처음 사용
페이퍼리 어떻게 하게됐는지? → 전산팀 부장님 등등 같이 사업?

페이퍼리 기술스택 어떤 기준으로 선택?? → 웹/앱에서 웹이여서 리액트 결정
vite 사용 → 개발속도 빨라서 마이그레이션 함 → vite가 왜 빠를까요? → esbuild → vite, esbuild 차이 ?? 까지 공부해야할 듯!
코드라인 50% 감소, 왜 중요 ?? → 가독성, 공통컴포넌트 유지보수 높아가니까
code splitting, lazy 차이 → lazy로 code splitting을 구현한다? 라는 걸 듣고 싶었음. 나도 궁금해서 물어보긴했어 ㅋㅋㅋ

이거 참고해보자

번들러가 뭔지, 왜 사용하는지 → 중요함! 모듈 관련 개념부터 번들러까지 내용 정리가 필요할 듯

우모 프로젝트

TanStack Query의 캐싱 기능으로 API 호출을 최소화 → 캐싱 기능이 뭐임? → staleTime, cacheTime 어떤 기준으로 함? → 따로 지정하진 않음 → 지정안하면, 안될텐데..? → 잘 모르고 썼다는 느낌을 받음.
useInfinityQuery를 사용하여 무한스크롤 구현 → 왜 강조한거야?? 직접 만든 커스텀 훅이 아니라서 더 그런 듯

(빼는 방법도 생각해보자)

http → 정의가 조금 부족하다. 프로토콜이라는 거 말하기. 특징도 말해주면 좋을 듯. stateless 이런 거!! 평문 전송이다 이런 것도. 그래서 https가 나왔으니까.

http, https 차이 → 평문 전송 vs 암호화 전송 이런 거라도 말해주면 좋을 듯.

웹 접근성 → 알고는 있는데 정리가 필요해보임.

면접관 피드백

명재 30분 (12:40)

천욱

모듈이 뭔가요?

모듈시스템 탄생 배경에 대해 잘 알고 있는듯합니다.

번들러 - 같이 공부하자!
Vite가 빠른 정확한 이유가 부족한 것 같아 우리 모두 ㅠㅠ
크로스브라우징
CSR/SSR/SSG, SPA/MPA

CSR, SSR 방식을 채택했다 - good

검색엔진최적화이고, 단순히 검색이 잘 되게 최적화하는 것 아닌가?? - 웹접근성도 같이 말한 것 같은데 상관이 있는건가?
예시를 웹 접근성 관련하지 말고 리액트 관련해서 예시를 들었으면 좋았을듯!

React, Vue 차이점

나도 딱히 생각이 나지 않음..

비동기 동작원리

이벤트 클릭 빼고 설명했으면 더 좋았을거같음.. 괜히 더 길어져서 잘 안들어오는 느낌

this

잘 알고 있구나라고 생각들었어요

Promise.all 동작

개념 잘 알고 있는듯!

CORS

정리!!

시맨틱 마크업

시맨틱이란 “의미론적인”의 뜻을 가지고, 마크업이란 HTML태그로 문서를 작성하는 것을 말합니다. 즉, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다.

block, inline, inline-block

inline-block : block과 inline의 속성을 섞어 놓은 것과 같습니다. block처럼 가로 세로의 크기를 설정할 수 있으면서, 새로운 줄에서 시작하지 않고 다른 요소와 같은 라인에 배치됩니다.

웹 성능 최적화

리플로우, 리페인팅 언급 좋은것같음!
이미지 최적화도 얘기해주면 좋을거같아요!

수화

js 모듈 → 모듈이 나오게 된 배경에 대해서 잘 알고 있는 듯. good 👍

commonJs - 정확하게 작동하지 않는 문제가 있었다? → 어떤 문제? 호환자체가 안된다?? 나는 비동기 지원안해서 비효율적이라고 알고 있었으. 찾아봐야겠다
번들러

번들러가 왜 나오게 됐을까요? → 정리 필요할 듯
번들러 종류와 차이 → webpack, vite 빌드 속도 차이를 느꼈다 → 왜 차이가 발생할까? → 추측보단 정확히 정리하면 좋을 거 같음. 추가로 snowpack, esbuild, vite도 한번 정리해봐

csr, ssr

SSG/ ISG : 정리해!!!! next 썼고, CSR/SSR과 연관되는 개념이니까 알아야한다 생각함

정의를 잘 모르는 거 같음.
신경 쓴 경험 → 없음 → 프로젝트에 Next는 왜 썼나요?

비동기

순서대로 동작하지 않는 게 비동기다?
동작원리

이벤트 핸들러로 예시 → 이벤트 핸들러를 누가 태스크큐에 넣을까요? 브라우저 엔진 ㄴㄴ 난 이벤트루프로 알고 있어 : 흐름 설명이 혼란스러워..ㅋㅋ 모르게 있다는 느낌이 들 거 같음. 내가 원하는 건 web API 에 비동기를 맡기고, 시간 지나면 task queue로 가고, 콜스택 비면 이벤트 루프에 의해 콜스택으로 이동해서 진행된다. 이 흐름을 알고있는지 체크하고 싶었음

이벤트 루프, 태스크 큐

태스크 큐: 우선순위에 따라 나눠진다라는 거 언급하면서 종류를 말하면 좋을 듯.

마이크로 태스크큐에 Mutation Observer 객체도 들어가더라고 ㅋㅋㅋ 혹시나 promise 외에 다른 거 없을까요하면 말하면 될 듯

this

스트릭 모드에서 일반함수는 undefined이라는 거 언급한 거 좋은 듯!!

CORS → 정리 필요할 듯 !!! 모르면 진짜…백엔드랑 팀플 한거 맞음? 이 생각드는 느낌
웹 성능 최적화

dom 건드리는 거 줄이기, html 건드리는 거 줄이기 → reflow, repaint를 위해

display:none 보단 visibility 사용 ?? → 이게 더 문제가 된다는 말도 봤었는데..브라우저에서 크기를 가지고 있어서 ~~ 라는 걸 봤음
cssText

번들 사이즈 줄이기 - 웹팩사용해서 minify
api 요청 수 줄이기

추상적으로 느껴져서 해본 거 맞나? 싶었음

면접관 피드백

수화 45~50분

명재

개발자가 된 계기가 어떻게 되나요? →
오픈소스에 기여한 경험에 대해서 이야기 해주세요 → 신선한 경험인거 같았지만 내가 잘모르는 부분이라서 깊게 물어보지 못함…
자판기 프로젝트에서 근거 있는 셀프 코드 리뷰를 진행했다고 했는데 어떤 근거를 가지고 했나요? → 제 3자 입장에서 코드리뷰를 하려고 노력했다.
객체 지향 프로그래밍을 자판기 프로젝트에 적용한 경험 → 상속과 추상화 개념을 프로젝트에 적용했다.
NextJS를 사용하면서 어려웠던 경험이 있나요? → 초기 학습과 내부적으로 어떻게 동작하는지에 대해서 공부가 좀 어려웠다. 그리고 SSR을 적용하는 방법이 낯설었다.
시맨틱 마크업에 대해 설명해주세요. → 개념이 조금 부족했지만, html 요소를 예시를 들면서 설명하는 부분으로 부족한 개념을 보충했다.
시맨틱하게 작성한 HTML 문서를 작성한 경험이 있나요? → 시맨틱의 중요성을 알게된 후에는 대부분 시맨틱 마크업을 진행했다고 했는데 기억에 남는 경험은 따로 없어서 아쉬웠다. (사소한 경험이라도 “스크린 리더기를 사용해봤다. 또는 alt 속성을 사용했다”라는 간단한 경험을 말해주면 좋았을듯)
동기와 비동기에 대해 설명해주세요 → 깔꼼!
React에 대해 설명해주세요. → 너무 간단하게 설명했다. (만약 간단한 설명이였다면 리액트 공식문서에 나와있는 부분으로 설명해도 좋을듯)
React 특징에 대해서 설명해주세여. → 조금 더 자세하게 설명해도 좋을듯
React Hook에 대해서 설명해주세요. → 컴포넌트 라이프사이클이라고 했는데 명확하게 함수형 컴포넌트라고 지칭하면 좋을듯, React Hook의 특징도 같이 설명하면 좋을듯
꼬리 질문으로 JavaScript에서 class가 익숙하지 않다고 했는데 그렇게 생각한 근거가 어떻게 되나요? → 아쉬웠던 부분으로 class 문법에만 집중해서 답변을 한거 같음.

객체지향처럼 설계 관점으로 말해줘도 좋았겠따

Promise와 Callback를 비교 설명해주세요. → callback의 단점으로 매끄럽게 promise를 같이 설명했다.
Promise에 대해서 전체적으로 설명해주세요. → promise 상태값과 후처리 메서드도 깔끔하게 설명했다.
React에서 Key Props를 사용하는 이유에 대해 설명해주세요. → 성능최적화를 위해 사용하면서 Virtual DOM의 내부동작과 같이 매끄럽게 설명함

천욱

백엔드와 협업하면서 생긴 문제

API 문서 등 커뮤니케이션 문제가 있었다. 문제점이랑 해결과정까지 말해줘서 듣기좋았습니다

객체지향 컨셉 (객체지향 프로그래밍이란)

간단명료하고 좋았음! 프로젝트에서 어떻게 활용했는지 말해주길 바랬는데 명재가 질문해서 괜춘

끼니에서 왜 Next를 사용했나?
CORS에러 해결 과정

백엔드에 옵션 추가, preflight요청으로 해결했다고 근본적인 해결방법을 얘기해준것같음

px, em, rem 차이

저번에는 대답 잘 못했던거같은데 이젠 잘 알고 있는것 같아요!

브라우저 렌더링 과정?

답변 너무 좋았음!
async, defer 차이 - 잘 못들었는데.. 백그라운드에서 스크립트를 다운로드한다까지 언급해주면 좋을듯!

Sass

CSS 라이브러리??
Sass는 컴파일 과정을 통해 CSS파일을 생성해주는 CSS의 확장 언어이자 전처리기입니다. SCSS는 Sass의 구문이고 중괄호를 사용해서 CSS속성을 지정하고, Sass는 들여쓰기 문법으로 CSS속성을 지정합니다.

React란

선언형 프로그래밍인 JS 라이브러리 - 너무 간단했다

let, const, var
호이스팅이란?
Promise, callback
클로저란?

활용 용도까지 설명해줘서 좋았어요, JS는 넘 잘해

Recoil 장단점

React hook과 유사하기때문에 학습비용이 낮다
단점은 - 공식적인 devtool이 없지않나?

면접관 피드백

6/02 모의면접 ⭐ 마지막

특이사항

피드백