21. Javascript 의 데이터 타입과 Typescript 데이터 타입에 대해 설명해주세요.
JavaScript는 동적 타입 언어로, 런타임 시 타입이 결정됩니다. 그래서 가끔 오류가 발생 할 수 있습니다. 반면, TypeScript는 정적 타입 언어로, 컴파일 타임에 타입을 검사하여 더 안전한 코드를 작성할 수 있도록 도와줍니다. TypeScript의 타입 시스템은 JavaScript의 데이터 타입을 확장하여 더 많은 기능과 유연성을 제공해줍니다. 또한, 코드가 더 안전해지고 오류를 줄일 수 있습니다.
Javascript 데이터 타입
- 원시 타입 (Primitive Types)
- Number: 숫자를 표현 (예:
42,3.14)- String: 문자열을 표현 (예:
"Hello",'World') - Boolean: 참(true) 또는 거짓(false) 값을 가짐 (예:
true,false) - Undefined: 값이 정의되지 않은 상태 (예:
let a;에서a의 값은undefined) - Null: 의도적으로 비어 있는 값 (예:
let b = null;) - Symbol: 고유하고 변경 불가능한 값 (ES6부터 도입)
- BigInt: 대형 정수를 표현할 수 있는 타입 (예:
1234567890123456789012345678901234567890n)
- 객체 타입 (Object Type)
-
객체는 키-값 쌍으로 구성된 복합 데이터 타입입니다. 배열, 함수, 날짜 객체 등 다양한 형태로 존재할 수 있습니다.
TypeScript 데이터 타입
- 기본 데이터 타입: JavaScript의 원시 타입을 포함합니다.
- number, string, boolean, null, undefined, symbol, bigint (모두 JavaScript와 동일)
- 객체 타입 (Object Type)
- Object: 모든 객체 타입의 기본
- Array: 배열을 정의 (예:
number[],string[]) - Tuple: 고정된 길이와 서로 다른 타입의 배열 (예:
[number, string]) - Enum: 열거형으로, 상수 집합을 정의 (예:
enum Color { Red, Green, Blue }) - Any: 어떤 타입도 허용 (타입 검사를 비활성화)
- Unknown: 어떤 타입이든 가능하지만, 사용하기 전에 타입 검사를 해야 함
- Void: 반환값이 없는 함수에서 사용
- Never: 결코 발생하지 않는 값을 나타내는 타입 (예: 오류를 던지는 함수)
- 사용자 정의 타입
- Interface: 객체의 구조를 정의
- Type Alias: 새로운 타입 이름을 정의 (예:
type Point = { x: number; y: number; })
- String: 문자열을 표현 (예:
- Number: 숫자를 표현 (예:
22. Javascript 의 객체지향에 대해 설명해주세요.
객체지향 프로그래밍(OOP)은 프로그램을 객체라는 단위로 나누어 구성하는 방법이에요. 객체는 데이터(속성)와 그 데이터를 처리하는 방법(함수)을 함께 묶어놓은 것입니다.
객체 지향 프로그래밍은 코드의 중복을 줄이고, 모듈화를 통해 프로젝트의 복잡성을 관리할 수 있기 때문입니다.
23.동기처리와 비동기처리의 차이점에 대해 설명해주세요.
1. 동기 처리
동기 처리는 작업이 순차적으로 진행되는 방식입니다. 하나의 작업이 끝나야 다음 작업이 시작합니다. 이렇게 하면 코드가 쉽게 이해되지만, 시간이 오래 걸리는 작업이 있을 경우 전체 프로그램이 멈추게 될 수도 있습니다.
function task1() {
console.log("작업 1 시작");
for (let i = 0; i < 10000; i++) {} // 시간 소모 작업
console.log("작업 1 끝");
}
function task2() {
console.log("작업 2 시작");
console.log("작업 2 끝");
}
// 동기 방식으로 실행
task1();
task2();
2. 비동기 처리
비동기 처리는 작업이 동시에 진행될 수 있는 방식입니다. 즉, 어떤 작업이 진행되는 동안 다른 작업을 계속할 수 있어요. 이 방식은 특히 네트워크 요청이나 파일 읽기와 같은 시간이 걸리는 작업에 유용합니다.
function task1() {
console.log("작업 1 시작");
for (let i = 0; i < 10000; i++) {} // 시간 소모 작업
console.log("작업 1 끝");
}
function task2() {
console.log("작업 2 시작");
console.log("작업 2 끝");
}
// 동기 방식으로 실행
task1();
task2();
24. 프레임워크와 라이브러리의 차이점에 대해 이야기해주세요.
프레임워크와 라이브러리에 가장 큰 차이점은 제어 흐름에서의 차이입니다.
라이브러리는 특정 기능을 수행하는 코드의 모음입니다. 개발자가 필요한 기능을 호출하여 사용할 수 있습니다. 즉, 개발자가 제어권을 가지고 있으며, 필요한 경우 라이브러리의 기능을 선택적으로 사용할 수 있습니다. → 제어권 : 개발자
프레임워크는 애플리케이션의 구조를 정의하고, 개발자가 특정 규칙에 따라 코드를 작성하도록 강제합니다. 프레임워크는 일반적으로 애플리케이션의 전반적인 흐름을 제어하며, 개발자는 프레임워크에 맞춰 코드를 작성해야 합니다. → 제어권 : 프레임워크 (제어 역전)
25. 무한 스크롤 기능 구현에 대해 설명해주세요.
기본적인 방식
- 기본 구조: 콘텐츠를 보여줄 공간을 만듭니다. 로딩 중이라는 표시도 준비합니다.
- 스크롤 감지: 사용자가 페이지를 스크롤할 때, 페이지의 맨 아래에 도달했는지 확인합니다. 만약 도달했다면, 추가 콘텐츠를 요청합니다.
- 데이터 요청: 서버에 다음 데이터를 요청합니다.
서버는 요청한 데이터(예: 다음 기사 목록)를 JSON 형식으로 반환합니다.- 콘텐츠 추가: 반환된 데이터를 받아서 화면에 추가합니다. 그러면 사용자는 스크롤하면서 계속 새로운 컨텐츠를 볼 수 있습니다.
React,Next.js 방식
- 기본 구조: React 컴포넌트를 만들어 콘텐츠를 표시할 공간을 설정합니다. 로딩 중임을 표시할 상태를 관리합니다.
- 상태 관리 :
useState훅을 사용하여 데이터와 로딩 상태를 관리합니다.|- 스크롤 감지 : 사용자가 페이지를 스크롤할 때 하단에 도달하면 추가 데이터를 요청합니다.
- 서버 측 API 구현 : Next.js의 API 라우트를 사용하여 데이터를 페이지별로 반환합니다.
Next.js에서는/api/content경로에 API를 구현하여 페이지에 따라 데이터를 반환합니다.예를 들어,pages/api/content.js파일을 만들어 다음과 같이 작성할 수 있습니다.
26. 반응형 웹과 사이즈 처리에 대해 설명해주세요.
일단, 반응형 웹 디자인은 미디어 쿼리(화면 크기 해상도에 따라 스타일을 적용하는 기능)를 통해 다양한 화면 크기에 맞춰 스타일을 적용하는 기술입니다.
일반적으로 모바일, 태블릿, 데스크탑으로 나누어 스타일을 정의합니다. 기준 방향은min과max를 사용하여 설정할 수 있습니다.
저는 일반적으로 아래와 같이 설정하고 작업하고 필요에따라 분기점을 추가하는 경우도 있지만 많은 분기점을 만드는것은 브레이크 포인트는 관리하기 어려워 선호하지 않습니다.
모바일 : max 734px 까지
테블릿 : max 1025px 까지
27. 프로젝트에 적용한 스타일 관련 라이브러리가 있다면 알려주세요. 왜 그 라이브러리를 적용/선택했나요?
Styled Components
선택 이유:
1. CSS-in-JS: 스타일을 컴포넌트와 함께 작성할 수 있어, 코드의 가독성과 유지보수성이 향상됩니다.
2. 동적 스타일: props를 통해 동적으로 스타일을 변경할 수 있어, 유연한 UI 구현이 가능합니다.
Tailwind CSS
Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 리액트와 넥스트.js에서도 많이 사용됩니다.
선택 이유:
1. 빠른 프로토타이핑: 유틸리티 클래스를 사용하여 빠르게 스타일을 적용할 수 있어, 개발 속도가 향상됩니다.
2. 커스터마이징: 설정 파일을 통해 쉽게 커스터마이징할 수 있어, 디자인 일관성을 유지할 수 있습니다.
3. 반응형 디자인 지원: 미디어 쿼리와 반응형 디자인을 쉽게 적용할 수 있는 클래스가 제공됩니다.
라이브러리 사용하지 않고 구현하는 방법
리액트와 넥스트.js에서는 CSS 모듈을 사용하여 각 컴포넌트에 고유한 스타일을 적용할 수 있습니다. (컴포넌트와 동일한 이름의
.module.css파일을 생성)
28. 웹 브라우저의 렌더링 과정에 대해 설명해 주세요.
1. 요청 (Request)
사용자가 URL을 입력하거나 링크를 클릭하면 브라우저가 서버에 요청을 보냅니다.
2. 응답 (Response)
서버가 HTML, CSS, JavaScript 파일 등의 응답을 브라우저에 보냅니다.
3. 파싱 (Parsing)
브라우저는 HTML을 DOM(Document Object Model) 트리로 변환합니다.CSS는 CSSOM(CSS Object Model) 트리로 변환됩니다.
4. 렌더 트리 생성 (Render Tree)
DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 실제로 화면에 보여줄 요소들만 포함됩니다.
5. 레이아웃 (Layout)
렌더 트리를 기반으로 각 요소의 크기와 위치를 계산합니다.
6. 페인팅 (Painting)
레이아웃 정보를 바탕으로 화면에 실제 픽셀을 그립니다.
7. 합성 (Composition)
페인팅된 레이어를 결합하여 최종적으로 화면에 표시합니다.
요청 → 응답 → 파싱 → 랜더 트리 생성 → 레이아웃 → 페인팅 → 합성
이 과정은 브라우저가 웹 페이지를 사용자에게 보여주기 위해 수행하는 일련의 단계입니다.
29. 렌더링 효율을 위한 본인만의 노하우나 고민 및 문제 해결을 해본 경험이나 생각을 이야기해주세요.
1. 이미지 최적화
- 이미지는 웹 페이지 로딩 속도에 큰 영향을 미치므로, 다음과 같은 방법으로 최적화를 진행했습니다
1. 포맷 변환: JPEG, PNG 대신 WebP 포맷을 사용하여 파일 크기를 줄였습니다. WebP는 고품질 이미지를 더 작은 용량으로 제공할 수 있습니다.
2. 3. Lazy Loading: 페이지가 로드될 때 화면에 보이지 않는 이미지는 나중에 로드하도록 설정했습니다. 이를 통해 초기 로딩 시간을 단축했습니다.
2. Next.js의 렌더링 방식 활용- Next.js의 기능을 활용하여 렌더링 효율을 높였습니다
- 서버 사이드 렌더링(SSR): 페이지를 서버에서 미리 렌더링하여 사용자에게 빠르게 콘텐츠를 제공했습니다. 이는 SEO에도 유리합니다. → 검색 엔진 크롤러가 페이지의 모든 콘텐츠를 쉽게 인식할 수 있도록 완전한 HTML을 제공하므로 SEO에 유리
- 정적 사이트 생성(SSG): 자주 변경되지 않는 페이지는 빌드 시 정적으로 생성하여 요청 시 빠르게 제공했습니다. 이 방법은 서버 부하를 줄이고 응답 속도를 향상시켰습니다.
- Dynamic Imports: 컴포넌트를 동적으로 임포트하여 초기 로딩 시 필요한 코드만 불러오도록 했습니다. 이를 통해 페이지의 초기 로딩 속도를 개선할 수 있었습니다.
30. CSS / SASS, SCSS 에 대해 설명해주세요.
CSS
- 정의: Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 언어입니다.
- 특징: 선택자, 속성, 값으로 구성되어 있으며, HTML 요소의 배치, 색상, 폰트 등을 조정합니다.
SASS
- 정의: Syntactically Awesome Style Sheets의 약자. CSS의 확장 언어입니다.
- 문법: 들여쓰기를 사용하여 중첩된 구조를 표현합니다. 중괄호와 세미콜론이 필요 없습니다.
SCSS
- 정의: Sassy CSS의 약자. SASS의 문법을 CSS처럼 사용할 수 있게 한 것입니다.
- 문법: CSS와 호환되며, 중괄호와 세미콜론을 사용합니다.
SASS의 장점
- 간결한 문법: 들여쓰기를 통해 코드가 깔끔하고 읽기 쉬움.
- 변수 사용: 스타일 속성을 변수로 저장해 재사용 가능.
- 중첩 구조: 선택자를 중첩하여 논리적인 구조로 작성 가능.
SCSS의 장점
- CSS 호환성: 기존 CSS 코드와 완벽하게 호환됨.
- 명확한 문법: 중괄호와 세미콜론 사용으로 익숙한 스타일.
- 모듈화: 파일을 나누어 관리하며, 코드의 재사용성을 높임.
