티스토리 뷰
오늘 to do
🔥 필수
면접 및 과제
- [x] 3시 30분 전화면접
- [x] 코테 24일까지 ⭐️
- [ ] React Native App ⭐️
[서류 준비] 이력서, 자소서, 포트폴리오
- 노션 이력서, 자소서, 포트폴리오 ⭐️
- [x] 이력서 - 수정 중
- [ ] 자소서
- [ ] 포트폴리오
2월 취업대비반
- 개인
- [x] 이력서 수정
- [x] 지원 인증
- 팀원
- [x] 이력서 페어 리뷰
- [ ] 모의 면접
- 기술 면접, 특강
- [x] 7시 ~ 8시 버디님 기술면접
- [x] 9시 ~ 10시 멘토님 특강
- 데일리 과제 & 포스팅
- [x] 프레임워크와 라이브러리 차이점에 대해 설명해주세요.
- [x] 캐시의 장단점과 어떤 부분에 활용하는지 설명해주세요. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요
- [x] HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요
Daily To Do
- [ ] wanted 이력서 바꿔서 재지원 ⭐️
- [x] [programmers] level1_ 예산→ 1일 1커밋
- [x] 오늘 TIL 쓰기
📌 중요
[서류 준비] 이력서, 자소서, 포트폴리오
- 채용사이트 이력서 등록
- [ ] 로켓펀치
- [ ] 잡플래닛
- [ ] 점핏
[면접 준비] 이력서 기반 예상 질문
- 역량(인성)질문
- [ ] [문제해결능력] 프로젝트를 진행하며 어떤 문제가 있었고 어떻게 해결했는지?
- [ ] [의사소통능력] 디자이너 그리고 팀원과 어떤 갈등이 있었고 어떻게 해결했는지?
- 핵심 기술 질문
- [x] WebRTC p2p 미디어 (카메라, 보이스) 연결 posting 시작
- [x] Web Socket을 이용한 게임 기능 구현 posting 시작
- [x] SockJs, STOMP 를 이용한 실시간 채팅 구현 posting 시작
- [x] Intersection Observer API 를 사용한 무한스크롤 posting 시작
[면접 준비] 공통 질문
- 면접 준비(기술, 인성)
- [ ] 1분 자기소개
- [ ] Mockterview 쉬운 말로 다시 정리
- [ ] 기술면접 필수대비 질문 50 쉬운 말로 다시 정리
- 기술면접 대비 질문 추가
- 리액트란? 리액트 렌더링 과정? 리액트를 왜 써야 하는가? 리액트만의 특징?
- 브라우저 렌더링 부하를 줄이기 위해 본인이 생각하는 알고리즘을 말씀해주세요.
- 지역 전역과 전역은 무엇이 다른가요?
- 이미지 사이즈 최적화를 위해서는 어떤 방법을 사용해야 할까요?
- 웹 페이지에 이미지를 렌더링하기 위한 최적화된 용량은 어느정도?
[Namoldak] 블로그 정리
- 기술적 의사 결정
- 트러블슈팅
- [ ] 실시간 채팅이 쌓이지 않고 교체만 되던 문제
- [ ] 무한스크롤 댓글 조회
- [ ] 닉네임 변경 및 중복 확인
- UT 개선 사항
- 닉네임 변경
추가
- [ ] cs 질문들 깊게 공부
- [ ] 알고리즘 강의
- [ ] 메모장 정리
- [ ] 노션 DB화
- 특강
- [ ] html(태그들의 의미와 사용법), css(flex, grid 이해도 높이기 등) 공부
- [ ] 📒 css 완벽 가이드
- [ ] javascript 모듈, import 어떻게 동작하는지, es5 es6 등 공부
- [ ] 📒 코어 자바스크립트
- [ ] React hook, 최신 패치에 적용된 내용
- [ ] 📒 실전 리액트 프로그래밍
- [ ] typescript 공부하기
- 추천 도서
- 공통
- 알고리즘 문제 해결 전략 세트
- 코딩 인터뷰 완전 분석
- 면접을 위한 CS 전공지식 노트
- 프론트엔드
- 리액트를 다루는 기술
- Do It 모던 자바스크립트 프로그래밍의 정석
- Do It 리액트 모던 웹 개발 with 타입스크립트
오늘 전화 면접에서 제대로 답변하지 못한 질문들
1. SEO 검색 엔진 최적화 관련해서 프론트엔드 엔지니어로서 어떤 것들을 할 수 있는지?
프론트엔드 엔지니어로서 SEO(Search Engine Optimization, 검색 엔진 최적화)와 관련하여 할 수 있는 일은 다음과 같습니다.
ㄱ. 검색 엔진에서의 웹 페이지 크롤링을 용이하게 만들기
검색 엔진은 웹 페이지를 크롤링하고 인덱싱하여 검색 결과에 노출합니다. 이때 웹 페이지의 HTML, CSS, JavaScript 등의 코드가 어떻게 작성되어 있는지에 따라 크롤링이 용이하거나 어려울 수 있습니다. 따라서 프론트엔드 엔지니어는 검색 엔진이 웹 페이지를 수월하게 크롤링할 수 있도록, 적절한 HTML 태그를 사용하거나 웹 페이지 내부의 링크 구조를 최적화하는 등의 작업을 수행할 수 있습니다.
웹 페이지 내부의 링크 구조를 최적화하는 방법은?
1. 내부 링크의 수를 적절히 제어하기
내부 링크의 수가 너무 많으면 검색 엔진이 페이지를 크롤링하는 데 어려움을 겪을 수 있습니다. 따라서 프론트엔드 엔지니어는 내부 링크의 수를 적절히 제어하여 검색 엔진이 페이지를 크롤링하는 데 문제가 없도록 해야 합니다.
2. 내부 링크의 앵커 텍스트를 적절하게 작성하기
앵커 텍스트는 링크를 클릭했을 때 이동하는 페이지의 내용을 요약하는 텍스트입니다. 검색 엔진은 앵커 텍스트를 통해 이동하는 페이지의 내용을 파악하므로, 내부 링크의 앵커 텍스트를 적절하게 작성하는 것이 중요합니다.
3. 내부 링크의 구조를 계층적으로 구성하기
내부 링크의 구조를 계층적으로 구성하면 검색 엔진이 페이지의 내용을 이해하기 쉬워집니다. 따라서 프론트엔드 엔지니어는 내부 링크의 구조를 계층적으로 구성하여 검색 엔진이 페이지의 내용을 파악하는 데 도움을 줄 수 있습니다.
4. 내부 링크의 URL을 간결하게 작성하기
내부 링크의 URL이 간결하면 검색 엔진이 페이지를 크롤링하는 데 용이해집니다. 따라서 프론트엔드 엔지니어는 내부 링크의 URL을 간결하게 작성하여 검색 엔진이 페이지를 크롤링하는 데 어려움을 겪지 않도록 해야 합니다.
5. 내부 링크를 사용하는 위치를 적절하게 선택하기
내부 링크를 적절하게 사용하는 것도 검색 엔진 최적화에 중요한 요소입니다. 프론트엔드 엔지니어는 페이지의 내용과 관련된 다른 페이지로 이동하는 내부 링크를 적절하게 사용하여 검색 엔진이 페이지의 내용을 파악하기 쉽게 해야 합니다.
ㄴ. 페이지 속도 최적화
검색 엔진은 페이지의 로딩 속도가 빠른 웹 페이지를 선호합니다. 이는 사용자 경험과도 직결되는 문제이므로, 프론트엔드 엔지니어는 웹 페이지의 속도를 최적화하기 위한 기술을 이용하여 페이지 로딩 속도를 개선할 수 있습니다.
웹 페이지의 속도를 최적화하기 위한 기술은?
- 이미지 최적화: 웹 페이지에서 이미지는 주요 대역폭 소비자 중 하나입니다. 이미지를 최적화하면 대역폭을 줄이고 페이지 로드 속도를 높일 수 있습니다. 이를 위해 이미지 크기를 줄이고, 이미지 포맷을 적절히 선택하고, 적절한 이미지 압축 기술을 사용할 수 있습니다.
- 캐싱: 웹 페이지의 요소를 캐싱하면 서버 요청 횟수를 줄이고, 브라우저 캐시를 이용하여 로딩 속도를 높일 수 있습니다.
- CDN(Content Delivery Network): CDN은 지리적으로 분산된 서버를 사용하여 사용자가 가장 가까운 서버에서 컨텐츠를 제공하므로 페이지 로드 시간을 줄일 수 있습니다.
- HTML, CSS 및 JavaScript 최적화: 코드 최적화 기술을 사용하여 파일 크기를 줄이고 코드의 실행 시간을 줄일 수 있습니다.
- 렌더링 최적화: 웹 페이지 렌더링 속도를 개선하기 위해 리소스 로딩을 지연시키거나 지연시키는 것이 중요합니다.
- 웹 호스팅: 웹 페이지의 호스팅 서비스를 최적화하면 웹 페이지의 성능을 향상시킬 수 있습니다.
이러한 기술들은 페이지 로딩 속도를 높이고 사용자 경험을 개선하는 데 도움을 줄 수 있습니다.
ㄷ. 검색 엔진에게 중요한 내용 강조
검색 엔진은 웹 페이지 내에서 중요한 정보를 찾아내고 이를 바탕으로 페이지의 검색 순위를 결정합니다. 따라서 프론트엔드 엔지니어는 페이지 내에서 중요한 내용을 강조하는 방법을 알아내어 검색 엔진이 웹 페이지의 중요한 부분을 인식할 수 있도록 해야 합니다.
페이지 내에서 중요한 내용을 강조하는 방법은 다양합니다. 다음은 몇 가지 일반적인 방법입니다:
- 제목과 부제목 사용: 제목과 부제목을 사용하여 페이지의 중요한 내용을 강조할 수 있습니다. 제목과 부제목은 페이지의 구조를 결정하고, 사용자가 필요한 정보를 찾을 때 도움을 줄 수 있습니다.
- 굵은 글씨체 사용: 굵은 글씨체를 사용하여 텍스트를 강조할 수 있습니다. 텍스트를 굵은 글씨체로 강조하면 눈에 띄기 쉽고, 중요한 내용으로 인식됩니다.
- 색상 사용: 색상을 사용하여 중요한 내용을 강조할 수 있습니다. 페이지에서 다른 색상을 사용하여 중요한 내용을 강조하면, 사용자가 눈에 띄기 쉽게 파악할 수 있습니다.
- 리스트 사용: 리스트를 사용하여 페이지 내에서 중요한 내용을 강조할 수 있습니다. 리스트는 사용자가 필요한 정보를 빠르게 파악할 수 있도록 도와주며, 페이지 내에서 중요한 내용을 찾는 데 도움을 줍니다.
- 그래픽 요소 사용: 그래픽 요소를 사용하여 중요한 내용을 강조할 수 있습니다. 이미지, 도표, 그래픽 요소를 사용하면 사용자의 시선을 끌고 중요한 내용을 강조할 수 있습니다.
이러한 방법들은 페이지 내에서 중요한 내용을 강조하고 사용자의 주의를 끌어내는 데 도움을 줄 수 있습니다. 하지만 중요한 내용이 너무 많으면 효과적으로 강조할 수 없으므로, 중요한 내용을 집중해서 강조하는 것이 중요합니다.
ㄹ. 모바일 최적화
현재 대부분의 검색은 모바일 기기에서 이루어지고 있으므로, 프론트엔드 엔지니어는 모바일 최적화를 고려하여 웹 페이지를 구성하는 방법을 학습할 필요가 있습니다.
모바일 최적화 방법은 다음과 같습니다:
- 반응형 웹 디자인: 반응형 웹 디자인을 사용하여 모바일 장치에서 웹 페이지를 최적화할 수 있습니다. 이 기술은 사용자의 디바이스 크기와 해상도에 따라 웹 페이지가 자동으로 조정되도록 합니다.
- 이미지 최적화: 모바일 장치에서 이미지를 최적화하여 페이지 로딩 시간을 줄일 수 있습니다. 모바일 기기에서 이미지 크기를 줄이고, 이미지 포맷을 적절히 선택하고, 적절한 이미지 압축 기술을 사용할 수 있습니다.
- 콘텐츠 최적화: 모바일 장치에서 콘텐츠를 최적화하여 사용자 경험을 개선할 수 있습니다. 모바일 사용자는 화면이 작기 때문에 콘텐츠가 간결하고 명확해야 합니다.
- 터치 제스처 지원: 모바일 장치에서 터치 제스처를 지원하여 사용자 경험을 개선할 수 있습니다. 모바일 페이지에서는 터치 스크롤, 핀치 줌, 스와이프 등의 제스처를 지원해야 합니다.
- 빠른 페이지 로딩: 모바일 사용자는 느린 페이지 로딩 시간에 불만족을 표시하는 경향이 있습니다. 모바일 페이지에서 빠른 페이지 로딩을 위해 CSS 및 JavaScript를 최적화하고, 페이지를 캐싱하고, CDN(Content Delivery Network)을 사용하여 페이지 로딩 시간을 줄일 수 있습니다.
- 사용자 경험을 위한 UI/UX 디자인: 모바일 페이지에서 UI/UX 디자인을 최적화하여 사용자 경험을 개선할 수 있습니다. 모바일 기기에서는 사용자 인터페이스가 직관적이고 쉬워야 하며, 적절한 컬러와 폰트를 사용하여 가독성을 높여야 합니다.
이러한 방법들은 모바일 사용자가 페이지를 더 쉽게 접근하고 사용할 수 있도록 도와주며, 사용자 경험을 개선할 수 있습니다.
이러한 작업들을 통해 프론트엔드 엔지니어는 검색 엔진 최적화를 위한 기술을 습득하고, 웹 페이지의 검색 순위를 높일 수 있습니다.
2. SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이?
SSR(Server Side Rendering)과 CSR(Client Side Rendering)은 웹 애플리케이션에서 페이지를 렌더링하는 두 가지 방법입니다. 이 둘의 차이는 다음과 같습니다.
1. 렌더링 시점
SSR은 서버에서 페이지를 렌더링하고 브라우저에게 완전한 HTML 페이지를 제공합니다. CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하며, 서버는 초기 HTML 및 자바스크립트 파일만 제공합니다.
2. 초기 로딩 시간
SSR은 브라우저가 페이지를 요청할 때 서버에서 완전한 HTML 페이지를 반환하므로 초기 로딩 시간이 짧습니다. CSR은 초기 로딩 시간이 더 길 수 있습니다. 이는 자바스크립트 파일을 다운로드하고 실행해야하기 때문입니다.
3. 검색 엔진 최적화(SEO)
SSR은 검색 엔진 최적화(SEO)에 좋습니다. 검색 엔진 크롤러는 페이지의 완전한 HTML 콘텐츠를 읽을 수 있기 때문입니다. CSR은 초기 HTML에 제한적이기 때문에 검색 엔진 크롤러가 페이지를 인식하기 어렵습니다.
4. 사용자 경험
CSR은 초기 로딩 시간이 길 수 있지만, 브라우저에서 자바스크립트를 사용하여 페이지를 업데이트하므로 사용자 경험이 더 나아질 수 있습니다. SSR은 페이지를 다시 렌더링하는 데 시간이 걸리기 때문에 사용자 경험에 약간 영향을 미칠 수 있습니다.
결론적으로, SSR은 초기 로딩 시간이 빠르고 검색 엔진 최적화에 좋습니다. CSR은 초기 로딩 시간이 느릴 수 있지만, 사용자 경험이 더 좋을 수 있습니다. 이러한 차이를 고려하여 웹 애플리케이션을 개발할 때 SSR 또는 CSR 중 어느 것을 사용할지 결정해야 합니다.
React와 Next.js는 어디에 속할까?
React는 기본적으로 CSR(Client Side Rendering) 방식으로 동작합니다. 즉, 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링합니다. 그러나 React 애플리케이션을 서버 측에서 렌더링하려면 서버 측 렌더링(SSR)을 구현할 수 있습니다.
Next.js는 React 기반의 프레임워크이며, SSR과 CSR 모두를 지원합니다. Next.js에서는 페이지를 서버 측에서 렌더링하거나 클라이언트 측에서 렌더링할 수 있습니다. 기본적으로는 서버 측에서 렌더링을 하지만, 필요에 따라 클라이언트 측 렌더링을 선택할 수도 있습니다. 따라서 Next.js는 SSR과 CSR 모두를 지원하는 유연한 웹 프레임워크입니다.
여기서 'React 애플리케이션을 서버 측에서 렌더링하려면 서버 측 렌더링(SSR)을 구현할 수 있다'는 건 뭘까?
서버 측 렌더링을 구현하려면, React 애플리케이션을 서버에서 렌더링할 수 있는 도구를 사용해야 합니다. 예를 들어, Node.js에서 제공하는 "ReactDOMServer" 라이브러리를 사용하면, React 애플리케이션을 서버 측에서 렌더링할 수 있습니다.
ReactDOMServer란?
ReactDOMServer는 React에서 제공하는 라이브러리 중 하나로, React 애플리케이션을 서버 측에서 렌더링할 수 있도록 도와주는 도구입니다.
일반적으로, React 애플리케이션은 브라우저에서 자바스크립트를 사용하여 클라이언트 측에서 렌더링됩니다. 그러나 서버 측에서 렌더링하려면, React 애플리케이션을 서버에서 렌더링할 수 있는 도구가 필요합니다. 이 때 ReactDOMServer 라이브러리를 사용하면, React 애플리케이션을 서버 측에서 렌더링할 수 있습니다.
ReactDOMServer는 React 애플리케이션을 초기 HTML 콘텐츠로 변환해주는 함수인 "renderToString"과 "renderToStaticMarkup" 함수를 제공합니다. "renderToString" 함수는 React 애플리케이션을 문자열로 변환하며, "renderToStaticMarkup" 함수는 정적인 마크업으로 변환합니다. 이러한 함수를 사용하여 React 애플리케이션을 서버 측에서 렌더링할 수 있습니다.
따라서, ReactDOMServer는 React 애플리케이션을 서버 측에서 렌더링하는 데 필요한 함수를 제공하는 라이브러리입니다.
3. var와 const의 차이?
4. s3를 사용하려다가 ec2를 사용한 이유?
+ React 배포 방법에는 어떤 것들이 있을까?
5. 선호하는 코드리뷰 문화?
2023.02.19 - [😎 취업/면접] - [기술 면접 준비] Mockterview_React_50제_44~50번
'TIL' 카테고리의 다른 글
| [TIL] 230225 최대공약수, 최소공배수, React Native App 만들기 (0) | 2023.02.25 |
|---|---|
| [TIL] 230224 (0) | 2023.02.25 |
| [TIL] 230222 (0) | 2023.02.23 |
| [TIL] 230220, 230221 (0) | 2023.02.21 |
| [WIL] 230219 (0) | 2023.02.19 |