20240122 TIL 중간 발표 및 기술면접 준비

중간발표 

중간발표 발표자를 팀원들 중에 그나마 여유가 있었기 때문에 내가 하겠다고 했다. 하지만 조금 후회가 된 것이 긴장을 많이 하는 편이라 연습을 많이 해갔음에도 긴장을 해서 양처럼 말하게 되었다. 임사방편으로 청심환이라도 먹을 것을..!

 

우선 중간발표 시연은 혹시모를 오류가 생길까 걱정이 되어서 영상으로 대체했다. 긴장해서 말도 빨라졌고, 더듬고 떨고 난리가 아닐 수 없는 발표였지만 그래도 경험을 해서 다행이라고 생각한다. 

 

중간 발표 피드백

 

내 부분만 보면 로직중에서 로그인된 유저의 프로필을 가져오는 로직이 있는데 다른 데이터를 가져오는 법은 다 리액트 쿼리로 관리를 했는데 유저 프로필은 useEffect를 사용해서 통일성이 떨어진다는 피드백이 있었다. 

 

나도 느끼고 있었던 부분이고 나중에 리팩토링 해야지라고 미루고 있었던부분이라서 이참에 해버려하지 생각했다.  

 

 

 

 

 

1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

DOM은 웹페이지의 구성요소들을 트리구조로 표현한 것이며 가상 돔은 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 가상DOM을 이용하면, 실제 DOM을 조작하는 것보다 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가벼울뿐 만아니라,

 

리액트가 버전업데이트를 하면서 가상DOM에서 batchupdate가 가능해졌는데, 화면에 있는 여러 개의 엘리먼트가 변경되어야 할 때, 실제 DOM을 사용하면 각 변화마다 화면을 새로 고침해야 하지만, 가상 DOM에서는 이 모든 변경을 한 번에 모아서 한 번만 화면을 갱신한다는 점에서 성능이 크게 향상됩니다.

 

피드백

=>html 요소를 객체로 만든 것이 dom이다. 
=> 가상돔이 실제로 어떻게 해서 바뀌는지도 
=> 가상돔이 2개여서 , 두개를 비교해서 변경사항을 적용

2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?

"React를 사용하는 주요 이유는 리액트가 제공하는 구조, 효율성, 그리고 커뮤니티 지원 때문입니다.

 

첫째, React의 컴포넌트 기반 접근 방식은 코드 재사용성을 증가시키고, 대규모 애플리케이션에서도 유지 관리를 용이하게 합니다. 각 컴포넌트는 독립적으로 작동하여 코드의 가독성과 구조를 개선해 효율적인 협업과 쉬운 유지보수를 할 수 있습니다. 

둘째, React는 Virtual DOM을 사용하여 성능을 향상시킵니다. 실제 DOM보다 더 효율적으로 업데이트를 관리함으로써, 사용자 경험을 개선하고 애플리케이션의 전반적인 반응 속도를 증가시킬 수 있습니다. 

셋째, 선언적 UI는 코드의 이해와 디버깅을 단순화합니다. UI를 설계할 때 React는 애플리케이션의 각 상태에 대해 UI가 어떻게 보여야 하는지 정의하게 해주며, 이는 상태 관리와 UI 일관성을 유지하는 데 도움이 됩니다.

또한, React는 강력한 커뮤니티와 생태계를 가지고 있습니다. 다양한 라이브러리와 툴킷이 지원되며, 이는 개발 과정에서 필요한 기능을 쉽게 추가할 수 있도록 해줍니다.

마지막으로, React는 계속해서 발전하고 있으며, 새로운 기능과 최적화 기술을 지속적으로 제공합니다. 이러한 이유로, 저는 React를 선택하곤 합니다.

 

피드백

=> 컴포넌트 기반이 왜 좋은지  / 코드 조각처럼 만들 수 있다. 
=> 자바스크립트는 분리하기가 힘들다 / 
=> 장점으로 꼽은 것의 자세한 이유
=> 리액트에 이런게 있으니까 써봐야지 

3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

리액트의 특징인 단방향 데이터 흐름은 부모와 자식 요소의 데이터 이동이 원활하기 진행되지 않습니다. 리덕스는 store라는 state 중앙관리소를 가지고 관리소를 통해 데이터 이동을 자유롭게 해줍니다. 그로인해 props를 통해 props drilling을 발생하던 것을 방지 알 수 있습니다. 상태관리 라이브러리는 데이터 핸들링을 통해 데이터 흐름이 유동적으로 변하여 , 보다 더 이용자에게 다양한 데이터를 제공해 줄 수 있습니다.  

 

피드백

=> 스토어를 통해서 

4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?

 

동기식 프로그래밍은 작업이 차례대로 완료될 때까지 기다리는 반면, 비동기식 프로그래밍은 특정 작업이 백그라운드에서 실행되는 동안 다른 작업을 계속 진행할 수 있게 해줍니다. 이는 JavaScript의 효율성과 반응성을 크게 향상시키는 핵심 요소입니다.

 

피드백

=> 동기식이 예측이 가능하다. => 코드 파악이 쉬워진다. 
=> 비동기는 오류 파악이 어렵다. 
=> 쓰레드 지나감

5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?

 

Single Page Application (SPA)은 하나의 페이지로 구성되어 사용자 상호작용 시 페이지를 새로 불러오지 않고, 필요한 데이터만 동적으로 갱신합니다. 이는 사용자 경험을 부드럽게 하고 로딩 시간을 줄입니다. (대표적으로 React나 Angular가 있습니다. )

Multi Page Application (MPA)은 사용자가 다른 페이지로 이동할 때마다 새로운 페이지를 서버에서 불러옵니다. 각 페이지는 별도로 로딩되어 SEO에 유리하며, 전통적인 웹사이트에 주로 사용됩니다.

간단히 말해, SPA는 단일 페이지에서 빠른 상호작용을 제공하는 반면, MPA는 페이지별로 분리되어 SEO에 강점을 가지고 있습니다.

 

피드백

 

6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?

웹사이트 주소를 브라우저에 입력했을 때, 브라우저는 먼저 주소의 도메인 이름을 IP 주소로 변환하기 위해 DNS 조회를 합니다. 이 IP 주소를 통해 브라우저는 해당 서버에 연결을 시도합니다. 

서버에 연결되면, 브라우저는 HTTP 요청을 보내고, 서버는 요청된 웹 페이지의 내용을 HTTP 응답으로 보냅니다.일반적으로 HTML 문서를 응답받습니다.

브라우저는 받은 HTML 문서를 파싱하여 DOM을 구성하고, HTML에 명시된 CSS와 JavaScript 파일 등의 추가 리소스를 요청합니다. 이 리소스가 로드되면, 웹 페이지는 사용자에게 시각적으로 렌더링되고, JavaScript가 실행되어 페이지에 동적 기능을 부여합니다.

이 모든 과정은 몇 초 내에 이루어지며, 이를 통해 사용자는 웹 페이지를 볼 수 있게 됩니다.

주소입력 => 주소의 도메인이름을 IP주소로 변환하기 위해 DNS조회 => 조회된 IP주소를 통해 브라우저를 서버에 연결 => 브라우저가 HTTP요청 =. 서버가 웹페이지 내용을 HTTP응답보냄/일반적으로 HTML 문서를 받음 =>  받은 HTML을 파싱해서 DOM을 구성하고, CSS, javascript 등 추가 리소스 요청 => 리소스가 로드되면 시각적으로 렌더링되고 javascript를 통해 동적기능을 부여함.

 

피드백

=> 슬링링 핸들링
=> 완벽하게 설명 안해도됨 흐름 정도만 알아도 된다. 
=> 기술 면접 관련해서 링크도 주신다람
 
1. 프론트엔드 개발자로서 프로젝트를 진행하는데 가장 중요하게 생각하는 부분은 어떤 건가요? 

가장 중요하게 생각하는 부분은 여러가지를 꼽자면 사용자 경험, 성능 최적화, 반응형, 협업을, 한가지를 선택하면 사용자경험을 중요하게 생각합니다.   프론트 엔드 개발의 핵심은 사용자가 사용하는데에 불편함이 없이 효율적으로 사용경험을 제공하는 것이라고 생각합니다. 그렇기 때문에 로딩시간 단축 및 렌더링 최적화등이 필요하고, 어느 브라우저나, 다양한 기기에서 접속을 했을 때 UI가 깨지는 것이 없이 실행되어야합니다, 추가적으로 프로젝트를 진행할 때 팀원들과의 소통이 잘되어야 원활하게 프로젝트가 진행된다 생각합니다.

추가적으로 현재 프로젝트에 어떻게 녹여넣었는지 말하면 좋을 것 같습니다(하지만 아직 녹여내지 않아서,,)

예정으로는 로딩시간 단축을 위해 이미지최적화를 진행하고 css이미지쿼리를 사용해 컨텐츠가 동적으로 조정되도록할 예정입니다. 

 

피드백

=> 약간 차별점이 없다.
=> 큰차별점을 만들긴 어렵지만 왜 중요하다고 느꼈는지, 좀더 세세하게 
=> 경험을 넣어서 말하기 

2. PWA를 적용이 MVP 목표에 있네요. PWA에 대해서 아는데로 말씀해주시겠어요?

PWA는 프로그레시브 웹 앱의 약자로 우리가 웹에서 사용하는 기술과 네이티브 앱의 장점을 결합한 것입니다. 기능으로는 우선 페이지를 앱처럼 저장해서 사용할 수 있고 모바일 앱과 유사한 사용자 경험을 제공합니다. 그로 인해 사용자 경험을 향상시킬 수 있습니다.

 

그리고 서비스 워커스를 사용하려 네크워크 접속이 원활하지 않은 상황에서 앱의 기본기능 사용이 가능하고 푸시 알림 기능을 제공해 중요정보나 업데이트를 실시간으로 알릴 수 있고, SEO에도 유리합니다.

 

// SEO에 유리한 이유

검색엔진이 선호하는 기준이 있기 때문입니다. 

1. 빠른 로딩 속도: PWA는 서비스 워커(Service Workers)를 사용하여 캐싱을 구현합니다. 이는 사용자가 웹사이트에 접근할 때 빠른 로딩 시간을 보장하며, 구글과 같은 검색 엔진은 로딩 속도를 중요한 랭킹 요소로 고려합니다.
2. 반응형 웹 디자인: PWA는 다양한 스크린 사이즈와 디바이스에 맞춰 최적화되어 있습니다. 검색 엔진은 사용자에게 최적의 경험을 제공하는 웹사이트를 선호하며, 이는 모바일 친화성이 높은 PWA에 유리합니다.
3. 오프라인 접근성: PWA는 오프라인 모드에서도 접근 가능합니다. 이는 인터넷 연결이 불안정한 지역의 사용자나 저속 연결 환경에서도 웹사이트의 접근성을 높여줍니다.
4. 앱과 같은 사용자 경험: PWA는 전통적인 웹사이트보다 더 앱과 같은 사용자 경험을 제공합니다. 이는 사용자의 참여도를 높이고, 반복 방문을 유도할 수 있습니다.
5. HTTPS 프로토콜 사용: PWA는 HTTPS를 사용하여 보안을 강화합니다. 검색 엔진은 보안 웹사이트를 더 높게 평가합니다.

피드백

=> 사용자 경험 향상이 어떤면// 
=> 고정된 html 네트워크가 없으면 옛날 데이터만 보여줌 
=> 구체적인 이유
=> 브라우저 호환성이 떨어짐
=> 안전성 신뢰가 떨어짐 

3. styled-component를 사용하셨는데, styled-components의 장단점에 대해서 말씀해주시겠어요?

장점은  조건부 스타일링이 가능하다는 점입니다. props를 통해 조건을 달리해줄 수 있고 if문이나 삼항연산자등의 조건문 사용이 가능합니다.  또 CSS 파일 오픈할 필요없이 JS , ts 파일에서 바로 스타일을 넣을 수 있습니다.

 

단점은 런타임에 생성이되어 프로젝트가 커지면 성능이 느려지는 이슈가 있을 수 있습니다. 

잘 모르겟다!

 

피드백

=> 자바스크립트 자체를 css에 작동 시키니까 css를 하기위해 javascript을 또 분석해야함.

=> 런타임 뭔지? 꼬리에 꼬리 무는 사고 방식

4. cors 에러가 무엇인지 아는데로 설명해주세요.

CORS 에러는 웹 페이지가 다른 웹사이트의 데이터에 접근하려 할 때 생기는 문제입니다. 보통 웹 브라우저는 보안을 위해 한 웹사이트가 다른 사이트의 데이터를 마음대로 가져오는 걸 제한합니다. 예를 들어, A웹사이트에서 B웹사이트의 데이터를 가져오려고 하면, 브라우저는 나쁜 의도를 가진 사람들이 사용자의 정보를 훔치거나 해를 끼치는 걸 방지하기 위해 막습니다.

하지만 때로는 안전한 웹사이트끼리 데이터를 공유해야 할 필요가 있으니 B에서 A가 데이터를 사용할 수 있도록 허락해 라고 설정하면, 그제야 A는 B의 데이터를 가져올 수 있게 됩니다. 이런 설정을 안 했을 경우 데이터를 가져오려 할 때 CORS 에러가 발생하는 겁니다.

 

피드백

=> 서버에서 헤더를 허가해줘야 
=> 다른사람이 만든 서버면 프록시 서버 우회하는 서버 만들어서 서버에서 서버로 보내면 오류가 안남
=> 프론트 엔드에서 서버를 요청할 때나는 오류 
=> 용어 선택을 잘하기 

5. firebase와 supabase를 사용하시면서 두 가지의 차이점에 대해서 말씀해주세요. 각각 어떤 장단점이 있었나요?

개인적으로 수파베이스가 firebase보다 런닝커브가 적다고 생각이 들엇습니다. 코드 예제와 직접 sql을 다룰 수 있어 데이터 조작 및 관리 부분에서 더 큰 유연성을 확보할 수 있다고 느꼈습니다. 만들어둔 테이블에 SQL Definition을 받아와 팀원들에게 공유하며 테이블이 달라서 나는 오류를 제어할 수 있었습니다. 

파이어베이스는 잘 안써서 모르겟는데 어쩌지...

 

피드백

=> 데이터를 안정적으로 관리를 할 수 있다. => 유연성이 떨어진다. 
=> SQL / NoSQL 
파이어베이스,,  noSQL  // 이게 더 자료가 많음 
=> 데이터 막 저장해도 됨 노 에큐엘 => 안정성 떨어짐, 유연성 올라감 

 

 

최종 피드백

1. 왜 개발자가 되고 싶은지 

=> 비전 및 흥미를 정확하게 말하기

2. PWA 왜 사용했는지

=> 좀더 명확하게 정리하고 문서보고 외운 느낌이 들지 않게 경험을 토대로 이야기하기

3. styled components의 장단점

=> 단점을 좀더 알아보고 다른css와 비교하기

4. db선정이유

=> sql과 nosql의 차이를 알아보기

5.프로젝트를 진행하면서 어려웠던 부분

=> 처음에 딱히 없었다. 라고 답했었는데 그 답은 최악임, 어려운 것을 시도하지 않았다라고 생각이 되거나 해결을 하지 못한 것으로 비춤

=> 어려웠던 점을 정리하고 해결방안을 잘 정리하기

6. cors에러 

=> 좀 더 자세하게 알아보고 해결방안까지 정리하기

7. 프론트엔드 개발자로서 중요시하는것

=> 더 더 구체적으로 너무 흔함

8. 모든 질문에 꼬리에 꼬리에 꼬리를 무는 방식으로 사고하기

9. 버츄얼돔과 실제돔의 차이 

=> 전반적으로 괜찮으나 버츄얼돔에 대해 더 알아보기 

10. 리덕스를 사용하는 이유 

=> 결론 부터 말하는 것이 이해를 높일 수 있다. 

11. 동기 비동식 프로그래밍의 차이점

=> 정확한 장단점을 알아보기

12. 추가 학습 할 것 

- 서버 사이드 렌더링, 클라이언트 사이드 렌더링

- 서버사이드 렌더링과 서버 컴포넌트와의 차이점

- 브라우저연결 내부적으로 일어나는 일  

- 자바스크립트 호이스팅