y.developer
[TIL] Day 80 기술 면접 준비 part 03 본문
2024.01.26 금
1. 프론트엔드 개발자로서 프로젝트를 진행하는데 가장 중요하게 생각하는 부분은 어떤 건가요?
- 사용자 경험 (User Experience): 프로젝트의 핵심은 사용자에게 훌륭한 경험을 제공하는 것입니다. 직관적이고 쉽게 사용할 수 있는 인터페이스를 설계하고, 성능을 최적화하여 빠르고 반응성 있는 사용자 경험을 제공해야 합니다.
- 반응형 디자인 (Responsive Design): 다양한 디바이스와 화면 크기에 대응하여 웹 애플리케이션이나 웹사이트가 모바일, 태블릿, 데스크탑 등 다양한 플랫폼에서 잘 작동하도록 해야 합니다.
- 크로스 브라우징 (Cross-Browser Compatibility): 다양한 웹 브라우저에서 일관된 동작을 보장하고, 호환성 문제를 최소화하기 위해 크로스 브라우징 테스트를 실시해야 합니다.
- 코드 품질과 유지보수성: 깔끔하고 읽기 쉬운 코드를 작성하여 프로젝트의 유지보수성을 높이고, 코드 품질에 주의해야 합니다. 재사용 가능한 컴포넌트와 모듈을 설계하여 효율성을 높일 수 있습니다.
- 퍼포먼스 최적화: 빠른 로딩 속도와 최적의 성능을 제공하기 위해 이미지 최적화, 코드 번들링, 캐싱 등 다양한 방법을 활용하여 프로젝트의 퍼포먼스를 최적화해야 합니다.
- 보안 (Security): 사용자 데이터의 보안을 유지하고, 적절한 보안 프로토콜을 준수하여 웹 애플리케이션의 취약성을 최소화해야 합니다.
- 협업과 소통: 효과적인 협업을 위해 다른 개발자, 디자이너, 프로젝트 매니저와 원활한 소통이 필요합니다. 버전 관리 시스템(Git 등)을 활용하여 코드의 이력을 관리하고, 효율적인 협업을 도모해야 합니다.
▶ 튜터님과 기술면접 진행시 답변한 내용 정리
- 프론트엔드의 숙명 → User 입장에서 생각하고 코드를 짜야한다.
- UX 친화적으로 생각하는 자세
- 유저가 편하게 접근을 할 수 있고, 유저가 발생 시킬 수 있는 에러를 예상하고 예방하는 조치들이 필요할 것 같다.
- 협업을 하기 위해서 코드 역할 분리를 하고 확장성 있는 코드를 작성하는 것이 중요하다.
▶ 보완 사항
참고 자료 보기도 하고, 구체적인 본인의 예시를 말해봅시다.
참고 링크: https://blog.toss.im/article/toss-frontend-chapter
2. 브라우저 저장소의 차이점에 대해 설명해주세요. (LocalStorage,SessionStorage,Cookie)
LocalStorage, SessionStorage, 및 Cookie는 모두 클라이언트 측에서 데이터를 저장하는 웹 브라우저 기술이지만 각각의 차이점이 있습니다.
A)
- LocalStorage (로컬 스토리지):
- 특징: 로컬 스토리지는 브라우저에 데이터를 저장하는 데 사용되며, 키-값 쌍으로 데이터를 저장합니다.
- 수명: 로컬 스토리지에 저장된 데이터는 사용자가 명시적으로 지우지 않는 한 영구적으로 남아있습니다.
- 저장 용량: 로컬 스토리지는 일반적으로 5MB의 데이터를 저장할 수 있습니다.
- 사용 사례: 로그인 정보, 사용자 선호 설정 등을 저장하는 데 주로 사용됩니다.
- SessionStorage (세션 스토리지):
- 특징: 세션 스토리지는 로컬 스토리지와 유사하지만, 세션 동안만 유지되는 데이터를 저장합니다.
- 수명: 브라우저 세션이 유지되는 동안에만 데이터가 저장되며, 세션이 종료되면 데이터가 삭제됩니다.
- 저장 용량: 로컬 스토리지와 마찬가지로 일반적으로 5MB의 데이터를 저장할 수 있습니다.
- 사용 사례: 임시적인 데이터, 탭 간 데이터 공유 등에 사용됩니다.
- Cookie (쿠키):
- 특징: 쿠키는 서버에서 클라이언트로 전송되어 클라이언트의 로컬에 저장되는 작은 데이터 조각입니다.
- 수명: 쿠키는 설정된 만료 날짜까지 또는 브라우저를 종료할 때까지 지속됩니다.
- 저장 용량: 쿠키는 대체로 4KB의 작은 데이터만을 저장할 수 있습니다.
- 사용 사례: 사용자의 로그인 상태, 세션 식별, 사용자 추적 등에 사용됩니다.
- 주의: 쿠키는 서버로 전송되기 때문에 불필요한 데이터 전송을 피하려면 작은 양의 데이터만 저장하는 것이 좋습니다. 사용자의 프라이버시를 고려할 때에도 신중하게 사용해야 합니다.
B)
쿠키(Cookie)
- 클라이언트 상태 정보 저장: 쿠키는 클라이언트의 브라우저에 작은 데이터 조각을 저장하여 정보를 유지하거나 추적합니다.
- 자동 전송: 사용자가 요청하지 않아도, 쿠키는 모든 HTTP 요청과 함께 자동으로 서버로 전송됩니다.
세션(Session)
- 서버 측 상태 유지: 세션은 사용자의 상태 정보를 서버 측에서 관리합니다.
- 세션 ID 부여 및 유지: 서버는 클라이언트를 구분하기 위해 세션 ID를 부여하고, 이를 통해 사용자의 인증 상태를 브라우저 종료 시까지 유지합니다.
- 세션 ID의 쿠키 전송: 데이터 자체는 클라이언트에 전송되지 않고, 세션 ID만 쿠키를 통해 클라이언트와 주고받습니다.
웹 스토리지(Web Storage)
- 로컬스토리지(Local Storage)와 세션스토리지(Session Storage): 두 가지 형태가 있으며, 클라이언트 측에서 데이터를 임시 또는 영구적으로 저장하는 데 사용됩니다.
- 데이터 저장 목적: 데이터를 서버에 저장하는 것이 아닌, 클라이언트 측에 저장해야 할 때 사용됩니다. 중요하지 않은 데이터의 경우 서버 저장이 낭비일 수 있습니다.
- 로컬 스토리지는 영구 저장, 세션 스토리지는 임시 저장: 로컬 스토리지는 데이터를 영구적으로 저장하고, 세션 스토리지는 브라우저 세션이 유지되는 동안만 데이터를 저장합니다.
- 자동 전송 없음, JavaScript 제어: 웹 스토리지의 데이터는 서버로 자동으로 전송되지 않으며, JavaScript를 통해 제어됩니다.
해당 내용에 대한 이해는 각 기술의 특징과 사용 목적을 명확히 설명하며, 웹 개발자가 적절한 기술을 선택하는 데 도움이 됩니다. 쿠키, 세션, 웹 스토리지는 사용자의 데이터를 저장하고 관리하는 방식에 따라 다르게 적용되며, 각각의 특성을 이해하는 것은 웹 애플리케이션의 보안과 효율성을 높이는 데 중요합니다.
C)
쿠키의 기원은 초기 웹에서 세션 상태를 유지하기 위한 간단한 메커니즘으로부터 비롯됐습니다. 쿠키의 아이디어는 사용자와 서버 간의 상태를 추적하고 유지하는 데에 있었습니다.
1994년에 Netscape Communications Corporation의 개발자인 루이 몬테레이가 웹 사이트와 사용자 간의 상태 정보를 유지하기 위한 간단한 방법으로 "쿠키"를 도입했습니다. 이는 사용자가 웹 사이트를 방문할 때 서버에서 사용자의 브라우저에 작은 데이터 조각을 저장하고, 이후 요청에서 해당 데이터를 함께 전송하여 상태를 추적하는 메커니즘으로 동작했습니다.
원래는 세션 상태를 유지하는 데에 사용되었지만, 쿠키는 시간이 흐름에 따라 웹 기술과 사용자 경험을 향상시키는 다양한 용도로 사용되어 왔습니다. 현재는 사용자 로그인 정보, 사용자의 선호 설정, 광고 타겟팅 등에 다양하게 활용되고 있습니다.
"Cookie"라는 용어의 어원은 네덜란드어인 "koekie"에서 파생되었습니다. "Koekie"는 작은 빵이나 케이크를 의미하며, 이 단어는 "koek"라는 큰 빵이나 케이크를 나타내는 단어에서 파생되었습니다. 이 용어는 18세기에 영국과 미국에서 도입되었으며, 쿠키는 작은 빵이나 비스킷을 지칭하는데 사용되었습니다. 이어서 "cookie"는 웹 기술에서 사용되는 작은 데이터 조각을 의미하는 용어로 자리 잡았습니다. 이 데이터 조각은 사용자의 브라우저에 저장되어 웹 사이트가 사용자를 식별하고 정보를 기억할 수 있게 해줍니다.
▶ 튜터님과 기술면접 진행시 답변한 내용 정리
- 로컬 스토리지 & 세션 스토리지
- 클라이언트단에서 저장 & 서버의 부하 줄이기
- 로컬 스토리지
- 브라우저에서 영구적으로 저장
- 세션 스토리지
- 브라우저에서 벗어나면 없어짐
- 쿠키
- 작은 양의 데이터를 저장하지만 서버로 전송
- 서버로부터 받아올 때 활용을 할 수 있다.
▶ 보완 사항
참고 링크 : https://medium.com/@lifthus531/웹-쿠키와-스토리지에-대한-깊은-이해-7360521adead