Share
Sign In

면접질문

프런트 엔드 지식과 컴퓨터 과학 지식을 최대한 동원해서, 사용자가 네이버 홈페이지에 접속하고, 네이버 로고를 클릭했을 때 웹페이지에서 일어나는 일을 설명해라.
DNS, TLD
통신
번들 파일 다운로드
자바스크립트 해석기
html 파서, css 파서 →돔 →렌더 →그리기 →표시 (렌더링)
사용자 인터페이스 틀 표시
백엔드 통신
브라우저 리렌더링
react
⭐️ React VDOM의 작동 과정
1.
HelloMessage 에서 'Hello foo' 를 return하여 렌더링 중
2.
state의 name이 'bar'로 변경
3.
state값이 변경되었기 때문에 render 함수를 재호출
4.
HelloMessage에서 'Hello bar'를 return
5.
Virtual DOM에서 변경된 내용(name)을 감지, 해당 <div>안의 내용을 DOM에서 수정
6.
브라우저에서 변경 값을 감지하고 새로운 화면 렌더링
팀 프로젝트에서 자신의 역할과 어려웠던점.
프로젝트 내에서 사용자 피드백에 의해 기획과 개발이 변경되었을 때 대처?
기획자와 디자이너와의 소통
주로 사용했던 프론트엔드 라이브러리?
선영님
영유아들의 식습관 형성에 도움을 주는 서비스, 월간 리포트, 일간 리포트
잇다
리액트가 아닌 넥스트 사용한 이유?
앱개발이 아닌 웹앱으로 개발한 이유?
레시피
방법
재료
이름
유저 경험을 좋기 위해 했던 노력?
웹앱에서 상태 저장? : reduct persist(로컬스토리지)
로그인 토큰?
소셜 로그인
next-auth
세션 : 세션 스토리지
소셜 id : 리덕스 관리.
동기
개발자로써 유저 사용 웹개발
가치 있고 의미있는 개발을 해보고 싶다.
TCP vs UDP
컴퓨터 과학지식은 굿
회사 업무 바뀌게 된 계기
프→ 백 인턴 내용
사수나 같이 개발할 사람?
어떤 프로젝트 인지?
기능을 파고들 때? → 기술 관련 내용 정리 : 몰입되는것 같음
노션 문서화 작업을 좋아함.
셋업 과정을 좋아함
프로젝트 세팅 등등 컨벤션 규칙 정해가는 것을 좋아함.
가져가고 싶은 경험?
프론트엔트 개발자로 써의 흔적
기여했던 부분
은형님
모바일 웹페이지 제작(헬스케어 리포트)
운영 웹페이지
TypeSript, React, Next,
github, jira, notion, slack
온사이즈
역할과 어떤 개발을 하셨는지?
어떤 프로젝트 였는지 소개
고민점. 어려웠던 점
크롬 익스텐션
사이즈 추천 서비스
사이즈 수동 입력
로그인 기능 사이즈입력
next auth jwt
로컬스토리지 토큰 보관
1시간, 2주
다른사람과 같이 성장
공모전을 나가기 위해 제안
자기소개
지원 동기
팀과 유대해서 협업
AI와 챌린징
프로젝트의 목적 상기
앱 vs 웹
프로젝트 오너쉽
마케팅 지식
사용자 관점
혼자 vs 팀
팀과 같이
프런트 엔드 지식과 컴퓨터 과학 지식을 최대한 동원해서, 사용자가 네이버 홈페이지에 접속하고, 네이버 로고를 클릭했을 때 웹페이지에서 일어나는 일을 설명해라.
DNS, TLD
통신
번들 파일 다운로드
자바스크립트 해석기
html 파서, css 파서 →돔 →렌더 →그리기 →표시 (렌더링)
사용자 인터페이스 틀 표시
백엔드 통신
브라우저 리렌더링
react
⭐️ React VDOM의 작동 과정
1.
HelloMessage 에서 'Hello foo' 를 return하여 렌더링 중
2.
state의 name이 'bar'로 변경
3.
state값이 변경되었기 때문에 render 함수를 재호출
4.
HelloMessage에서 'Hello bar'를 return
5.
Virtual DOM에서 변경된 내용(name)을 감지, 해당 <div>안의 내용을 DOM에서 수정
6.
브라우저에서 변경 값을 감지하고 새로운 화면 렌더링
팀 프로젝트에서 자신의 역할과 어려웠던점.
프로젝트 내에서 사용자 피드백에 의해 기획과 개발이 변경되었을 때 대처?
기획자와 디자이너와의 소통
주로 사용했던 프론트엔드 라이브러리?
선영님
영유아들의 식습관 형성에 도움을 주는 서비스, 월간 리포트, 일간 리포트
잇다
리액트가 아닌 넥스트 사용한 이유?
앱개발이 아닌 웹앱으로 개발한 이유?
레시피
방법
재료
이름
유저 경험을 좋기 위해 했던 노력?
웹앱에서 상태 저장? : reduct persist(로컬스토리지)
로그인 토큰?
소셜 로그인
next-auth
세션 : 세션 스토리지
소셜 id : 리덕스 관리.
동기
개발자로써 유저 사용 웹개발
가치 있고 의미있는 개발을 해보고 싶다.
TCP vs UDP
컴퓨터 과학지식은 굿
회사 업무 바뀌게 된 계기
프→ 백 인턴 내용
사수나 같이 개발할 사람?
어떤 프로젝트 인지?
기능을 파고들 때? → 기술 관련 내용 정리 : 몰입되는것 같음
노션 문서화 작업을 좋아함.
셋업 과정을 좋아함
프로젝트 세팅 등등 컨벤션 규칙 정해가는 것을 좋아함.
가져가고 싶은 경험?
프론트엔트 개발자로 써의 흔적
기여했던 부분
은형님
모바일 웹페이지 제작(헬스케어 리포트)
운영 웹페이지
TypeSript, React, Next,
github, jira, notion, slack
온사이즈
역할과 어떤 개발을 하셨는지?
어떤 프로젝트 였는지 소개
고민점. 어려웠던 점
크롬 익스텐션
사이즈 추천 서비스
사이즈 수동 입력
로그인 기능 사이즈입력
next auth jwt
로컬스토리지 토큰 보관
1시간, 2주
다른사람과 같이 성장
공모전을 나가기 위해 제안
자기소개
지원 동기
팀과 유대해서 협업
AI와 챌린징
프로젝트의 목적 상기
앱 vs 웹
프로젝트 오너쉽
마케팅 지식
사용자 관점
혼자 vs 팀
팀과 같이
프런트 엔드 지식과 컴퓨터 과학 지식을 최대한 동원해서, 사용자가 네이버 홈페이지에 접속하고, 네이버 로고를 클릭했을 때 웹페이지에서 일어나는 일을 설명해라.
DNS, TLD
통신
번들 파일 다운로드
자바스크립트 해석기
html 파서, css 파서 →돔 →렌더 →그리기 →표시 (렌더링)
사용자 인터페이스 틀 표시
백엔드 통신
브라우저 리렌더링
react
⭐️ React VDOM의 작동 과정
1.
HelloMessage 에서 'Hello foo' 를 return하여 렌더링 중
2.
state의 name이 'bar'로 변경
3.
state값이 변경되었기 때문에 render 함수를 재호출
4.
HelloMessage에서 'Hello bar'를 return
5.
Virtual DOM에서 변경된 내용(name)을 감지, 해당 <div>안의 내용을 DOM에서 수정
6.
브라우저에서 변경 값을 감지하고 새로운 화면 렌더링
팀 프로젝트에서 자신의 역할과 어려웠던점.
프로젝트 내에서 사용자 피드백에 의해 기획과 개발이 변경되었을 때 대처?
기획자와 디자이너와의 소통
주로 사용했던 프론트엔드 라이브러리?
선영님
영유아들의 식습관 형성에 도움을 주는 서비스, 월간 리포트, 일간 리포트
잇다
리액트가 아닌 넥스트 사용한 이유?
앱개발이 아닌 웹앱으로 개발한 이유?
레시피
방법
재료
이름
유저 경험을 좋기 위해 했던 노력?
웹앱에서 상태 저장? : reduct persist(로컬스토리지)
로그인 토큰?
소셜 로그인
next-auth
세션 : 세션 스토리지
소셜 id : 리덕스 관리.
동기
개발자로써 유저 사용 웹개발
가치 있고 의미있는 개발을 해보고 싶다.
TCP vs UDP
컴퓨터 과학지식은 굿
회사 업무 바뀌게 된 계기
프→ 백 인턴 내용
사수나 같이 개발할 사람?
어떤 프로젝트 인지?
기능을 파고들 때? → 기술 관련 내용 정리 : 몰입되는것 같음
노션 문서화 작업을 좋아함.
셋업 과정을 좋아함
프로젝트 세팅 등등 컨벤션 규칙 정해가는 것을 좋아함.
가져가고 싶은 경험?
프론트엔트 개발자로 써의 흔적
기여했던 부분
은형님
모바일 웹페이지 제작(헬스케어 리포트)
운영 웹페이지
TypeSript, React, Next,
github, jira, notion, slack
온사이즈
역할과 어떤 개발을 하셨는지?
어떤 프로젝트 였는지 소개
고민점. 어려웠던 점
크롬 익스텐션
사이즈 추천 서비스
사이즈 수동 입력
로그인 기능 사이즈입력
next auth jwt
로컬스토리지 토큰 보관
1시간, 2주
다른사람과 같이 성장
공모전을 나가기 위해 제안
자기소개
지원 동기
팀과 유대해서 협업
AI와 챌린징
프로젝트의 목적 상기
앱 vs 웹
프로젝트 오너쉽
마케팅 지식
사용자 관점
혼자 vs 팀
팀과 같이
프런트 엔드 지식과 컴퓨터 과학 지식을 최대한 동원해서, 사용자가 네이버 홈페이지에 접속하고, 네이버 로고를 클릭했을 때 웹페이지에서 일어나는 일을 설명해라.
DNS, TLD
통신
번들 파일 다운로드
자바스크립트 해석기
html 파서, css 파서 →돔 →렌더 →그리기 →표시 (렌더링)
사용자 인터페이스 틀 표시
백엔드 통신
브라우저 리렌더링
react
⭐️ React VDOM의 작동 과정
1.
HelloMessage 에서 'Hello foo' 를 return하여 렌더링 중
2.
state의 name이 'bar'로 변경
3.
state값이 변경되었기 때문에 render 함수를 재호출
4.
HelloMessage에서 'Hello bar'를 return
5.
Virtual DOM에서 변경된 내용(name)을 감지, 해당 <div>안의 내용을 DOM에서 수정
6.
브라우저에서 변경 값을 감지하고 새로운 화면 렌더링