STUDY
@GetMapping("/proxy-download")
public ResponseEntity<Resource> proxyDownload() {
String sourceUrl = "https://example.com/file-to-download.bin";
ResponseEntity<byte[]> response = restTemplate.exchange(
sourceUrl,
HttpMethod.GET,
null,
byte[].class
);
byte[] fileBytes = response.getBody();
// 👉 원본 Content-Disposition 헤더에서 파일 이름 추출
String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);
String filename = "default.bin"; // fallback
if (disposition != null && disposition.contains("filename=")) {
// Content-Disposition: attachment; filename="some_file.bin"
filename = disposition.split("filename=")[1].replace("\"", "").trim();
}
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDisposition(
ContentDisposition.attachment().filename(filename).build()
);
return new ResponseEntity<>(new ByteArrayResource(fileBytes), headers, HttpStatus.OK);
}
<a href="/proxy-download" download>Download</a>
**1\. HTML**
------------
### **시맨틱 태그**
- **정의**: 시맨틱 태그는 HTML 요소의 의미를 명확히 나타내는 태그입니다.
- **이유**:
1. 검색 엔진(SEO)이 페이지 구조를 이해하는 데 도움.
2. 접근성을 높여 스크린 리더가 내용을 더 잘 읽을 수 있음.
3. 개발자 간 협업 시 가독성 증가.
- **예시 태그**:
- `<header>`: 페이지나 섹션의 머리말.
- `<footer>`: 페이지나 섹션의 꼬리말.
- `<article>`: 독립적으로 사용 가능한 콘텐츠.
- `<section>`: 논리적으로 그룹화된 콘텐츠.
- **비교**:
```
<!-- 비시맨틱 태그 -->
<div id="header">머리말</div>
<div id="content">본문</div>
<!-- 시맨틱 태그 -->
<header>머리말</header>
<main>본문</main>
```
* * * * *
### **메타 태그**
- **정의**: 문서의 메타데이터를 정의하는 태그.
- **종류**:
1. **문자 인코딩 설정**:
```
<meta charset="UTF-8">
```
- UTF-8은 전 세계 대부분의 언어를 표현 가능.
2. **뷰포트 설정**:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- 반응형 웹 디자인을 위해 사용.
- **`width=device-width`**: 뷰포트를 디바이스의 화면 너비로 설정.
- **`initial-scale=1.0`**: 기본 확대/축소 배율 설정.
* * * * *
### **GET과 POST의 차이**
- **GET**:
- 데이터를 URL에 포함 (`?key=value` 형식).
- **캐싱 가능**.
- URL 길이 제한 있음.
- 데이터 조회 요청에 적합.
- **예제**:
```
<form method="GET" action="/search">
<input type="text" name="query" placeholder="검색">
<button type="submit">검색</button>
</form>
```
- **POST**:
- 데이터를 HTTP 요청의 본문(body)에 포함.
- **보안적**(URL에 노출되지 않음).
- 데이터 생성/업데이트 요청에 적합.
- **예제**:
```
<form method="POST" action="/create">
<input type="text" name="name" placeholder="이름">
<button type="submit">저장</button>
</form>
```
* * * * *
**2\. CSS**
-----------
### **박스 모델(Box Model)**
- **구성 요소**:
1. **content**: 요소의 콘텐츠.
2. **padding**: 콘텐츠와 테두리 사이의 공간.
3. **border**: 테두리.
4. **margin**: 요소와 다른 요소 간의 외부 여백.
- **전체 너비 계산**:
- 기본 설정 (`box-sizing: content-box`):
```
width + (padding * 2) + (border * 2)
```
- **예제**:
```
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
box-sizing: content-box; /* 기본값 */
}
```
총 너비 = `200 + (10 * 2) + (5 * 2) = 230px`.
* * * * *
### **포지셔닝(Position)**
- **종류**:
1. **static**: 기본값, 문서의 흐름을 따름.
2. **relative**: 자신의 원래 위치를 기준으로 이동.
3. **absolute**: 부모 요소의 `relative`를 기준으로 위치 지정.
4. **fixed**: 뷰포트(화면)를 기준으로 고정.
5. **sticky**: 스크롤에 따라 상대/고정 위치를 전환.
- **예제**:
```
.box {
position: absolute;
top: 50px;
left: 100px;
}
```
* * * * *
### **플렉스박스(Flexbox)**
- **주요 속성**:
1. **컨테이너**:
- `display: flex;`: 플렉스 컨테이너로 설정.
- `flex-direction`: 아이템 배치 방향 설정.
- `row`, `column`, `row-reverse`, `column-reverse`.
- `justify-content`: 주축 정렬.
- `flex-start`, `flex-end`, `center`, `space-between`, `space-around`.
2. **아이템**:
- `align-self`: 개별 아이템의 정렬.
- `flex-grow`: 남는 공간을 분배.
- **예제**:
```
.container {
display: flex;
justify-content: space-between;
}
```
* * * * *
**3\. JavaScript**
------------------
### **클로저(Closure)**
- **정의**: 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조.
- **예제**:
```js
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
```
* * * * *
### **호이스팅(Hoisting)**
- **정의**: 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상.
- **예제**:
```
console.log(a); // undefined
var a = 10;
console.log(b); // ReferenceError
let b = 20;
```
* * * * *
### **이벤트 루프**
- **구성 요소**:
1. **Call Stack**: 실행 중인 함수.
2. **Task Queue**: 비동기 작업 대기.
3. **Event Loop**: 스택이 비면 큐에서 작업 실행.
- **예제**:
```
console.log('Start');
setTimeout(() => {
console.log('Timeout');
}, 1000);
console.log('End');
```
출력 순서: `Start -> End -> Timeout`.
* * * * *
**4\. React**
-------------
### **useState**
- **정의**: 상태를 생성하고 관리하는 React Hook.
- **예제**:
```
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
```
* * * * *
### **useEffect**
- **정의**: React 컴포넌트의 부수 효과(Side Effect)를 처리.
- **예제**:
```
useEffect(() => {
console.log('컴포넌트가 마운트됨');
return () => console.log('컴포넌트가 언마운트됨');
}, []);
```
**5\. 네트워크 및 웹 동작 원리**
----------------------
### **1) 브라우저의 작동 원리**
- **사용자가 URL을 입력하면 어떤 일이 벌어지나요?**
1. DNS 조회 → 입력한 URL의 IP 주소를 찾음.
2. 브라우저가 서버에 HTTP 요청을 보냄.
3. 서버가 HTTP 응답을 통해 HTML, CSS, JavaScript를 반환.
4. 브라우저가 HTML 파싱 → DOM 생성.
5. CSS 파싱 → CSSOM 생성.
6. JavaScript 실행 → DOM 조작.
7. 렌더링 → 화면에 표시.
* * * * *
### **2) HTTP와 HTTPS**
- **HTTP**:
- 하이퍼텍스트 전송 프로토콜.
- 데이터를 암호화하지 않고 전송 → 보안에 취약.
- **HTTPS**:
- HTTP + SSL/TLS로 데이터 암호화.
- 중간자 공격, 데이터 변조 방지.
- **질문 예**:
- "HTTP와 HTTPS의 차이점은 무엇인가요?"\
**정답**: HTTPS는 SSL/TLS를 사용해 데이터를 암호화하여 더 안전합니다.
* * * * *
### **3) REST와 RESTful API**
- **REST**:
- Representational State Transfer, HTTP 기반 아키텍처 스타일.
- CRUD 작업을 HTTP 메서드로 처리:
- GET: 데이터 조회.
- POST: 데이터 생성.
- PUT: 데이터 업데이트.
- DELETE: 데이터 삭제.
- **RESTful API**:
- REST 원칙을 준수하는 API.
- 자원을 URL로 표현:
- 예: `/users` (사용자 목록), `/users/1` (ID가 1인 사용자).
* * * * *
### **4) CORS (Cross-Origin Resource Sharing)**
- **정의**:
- 클라이언트와 서버의 출처(origin)가 다를 때 리소스를 공유하기 위한 정책.
- **해결 방법**:
- 서버에서 `Access-Control-Allow-Origin` 헤더 추가:
```
Access-Control-Allow-Origin: *
```
* * * * *
**6\. 웹 성능 최적화**
----------------
### **1) Lazy Loading**
- 필요할 때만 리소스를 로드하는 방식.
- **예**: 이미지 Lazy Loading:
```
<img src="placeholder.jpg" loading="lazy" />
```
* * * * *
### **2) 코드 스플리팅**
- 큰 JavaScript 파일을 작은 파일로 나눠 필요한 순간에만 로드.
- **React에서 코드 스플리팅**:
```js
const LazyComponent = React.lazy(() => import('./Component'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}
```
* * * * *
### **3) 캐싱**
- 클라이언트가 자주 사용하는 리소스를 저장해 성능 향상.
- **HTTP 캐싱**:
- `Cache-Control` 헤더:
```
Cache-Control: max-age=3600
```
* * * * *
**7\. 보안**
----------
### **1) XSS (Cross-Site Scripting)**
- **정의**: 악성 스크립트를 웹 페이지에 삽입해 사용자 정보를 탈취.
- **예방**:
- 사용자 입력을 필터링 및 이스케이프 처리.
- React에서는 기본적으로 XSS 방지:
```
<div>{userInput}</div>
```
* * * * *
### **2) CSRF (Cross-Site Request Forgery)**
- **정의**: 사용자의 인증 정보를 악용해 비정상적인 요청을 보내는 공격.
- **예방**:
- CSRF 토큰 사용.
- Referer 헤더 검사.
* * * * *
**8\. 알고리즘 및 데이터 구조**
---------------------
### **1) 배열**
- **문제 예**: "배열에서 중복을 제거하세요."
- **정답**:
```
const nums = [1, 2, 2, 3];
const unique = [...new Set(nums)];
console.log(unique); // [1, 2, 3]
```
* * * * *
### **2) 문자열**
- **문제 예**: "문자열이 회문인지 확인하세요."
- **정답**:
```
function isPalindrome(str) {
return str === str.split('').reverse().join('');
}
console.log(isPalindrome("racecar")); // true
```
* * * * *
### **3) 정렬**
- **버블 정렬**:
```
function bubbleSort(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
return arr;
}
```
* * * * *
**9\. 프론트엔드 심화**
----------------
### **1) React 상태 관리**
- **Context API**:
- 전역 상태를 관리하는 내장 기능.
- **예제**:
```
const ThemeContext = React.createContext();
function App() {
return (
<ThemeContext.Provider value="dark">
<Child />
</ThemeContext.Provider>
);
}
function Child() {
const theme = React.useContext(ThemeContext);
return <div>{theme}</div>;
}
```
* * * * *
### **2) React 최적화**
- **React.memo**:
- 컴포넌트를 메모이제이션해 불필요한 렌더링 방지.
- **예제**:
```
const MemoizedComponent = React.memo(Component);
```
- **useCallback**:
- 함수를 메모이제이션해 재생성을 방지.
- **예제**:
```
const handleClick = useCallback(() => {
console.log("Clicked");
}, []);
```
* * * * *
### **3) WebAssembly**
- JavaScript 외의 언어(C, C++, Rust 등)로 작성된 코드를 브라우저에서 실행.
- **장점**:
- 성능이 중요할 때 활용.
* * * * *
### **4) SPA vs MPA**
- **SPA (Single Page Application)**:
- 클라이언트 측 라우팅.
- 초기 로딩 속도가 느릴 수 있지만 페이지 전환이 빠름.
- **MPA (Multi Page Application)**:
- 서버 측 라우팅.
- 페이지 전환 시마다 전체 새로고침.
* * * * *
### **5) Virtual DOM**
- **정의**: React가 사용하는 가상 DOM으로, 실제 DOM 조작을 최소화해 성능 향상.
- **작동 방식**:
1. 상태 변경 → Virtual DOM 업데이트.
2. 변경 사항을 비교(diffing).
3. 실제 DOM 업데이트(reconciliation).
* * * * *
### **1\. 웹 성능 최적화**
#### **1) Lazy Loading**
- **정의**: 필요한 시점에 리소스를 불러와 초기 로드 시간을 단축하는 방법.
- **예시**: 이미지에 `loading="lazy"` 속성 사용.
```
<img src="image.jpg" alt="example" loading="lazy">
```
#### **2) 코드 스플리팅 (Code Splitting)**
- **정의**: 애플리케이션의 코드를 분리해 필요한 시점에만 불러오도록 처리.
- **예시 (React)**:
```
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
```
#### **3) 웹팩(Webpack) 최적화**
- 번들 크기 최적화를 위해:
- `tree-shaking`: 사용하지 않는 코드를 제거.
- `splitChunks`: 공통 코드 분리.
* * * * *
### **2\. 웹 보안**
#### **1) XSS (크로스 사이트 스크립팅)**
- **정의**: 공격자가 악성 스크립트를 삽입해 사용자 정보를 탈취.
- **방지 방법**:
- 사용자 입력을 철저히 검증.
- HTML을 렌더링할 때 `innerHTML` 대신 안전한 메서드 사용 (React는 기본적으로 방어).
#### **2) CSRF (크로스 사이트 요청 위조)**
- **정의**: 사용자가 의도치 않은 요청을 하게 만들어 서버를 속이는 공격.
- **방지 방법**:
- CSRF 토큰 사용.
- `SameSite` 속성을 가진 쿠키 활용.
#### **3) HTTPS**
- **정의**: HTTP에 SSL/TLS를 추가해 데이터를 암호화.
- **이점**:
- 데이터 암호화로 중간 공격 방지.
- 신뢰할 수 있는 인증서로 사용자 신뢰도 향상.
* * * * *
### **3\. 브라우저 동작 원리**
#### **1) 브라우저 렌더링 과정**
1. HTML 파싱 → DOM 생성.
2. CSS 파싱 → CSSOM 생성.
3. DOM + CSSOM → 렌더 트리 생성.
4. 렌더 트리를 기반으로 레이아웃 계산.
5. 페인팅(화면에 그리기).
#### **2) Critical Rendering Path 최적화**
- **목적**: 페이지 로드 속도 개선.
- **방법**:
- CSS는 `head`에 배치.
- JS는 `defer` 또는 `async` 속성 사용.
```
<script src="app.js" defer></script>
```
* * * * *
### **4\. 반응형 웹 디자인**
#### **1) Viewport 설정**
- **정의**: 모바일 디바이스에서 화면 크기를 올바르게 처리하도록 설정.
- **예시**:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
#### **2) Grid vs Flexbox**
- **Flexbox**:
- 1차원 레이아웃 (가로 또는 세로).
- 아이템 간의 간격과 정렬에 강점.
- **Grid**:
- 2차원 레이아웃.
- 복잡한 페이지 구조에 적합.
- **예시 (CSS Grid)**:
```
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
```
* * * * *
### **5\. 상태 관리**
#### **1) Context API**
- **정의**: React에서 전역 상태를 관리할 수 있는 기본 도구.
- **예제**:
```
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext();
function App() {
return (
<ThemeContext.Provider value="dark">
<Child />
</ThemeContext.Provider>
);
}
function Child() {
const theme = useContext(ThemeContext);
return <div>현재 테마는 {theme}입니다.</div>;
}
```
#### **2) Redux**
- **정의**: React에서 상태를 관리하기 위한 라이브러리.
- **주요 개념**:
- **Store**: 상태가 저장되는 공간.
- **Action**: 상태 변경 요청.
- **Reducer**: 상태 변경 로직.
- **예제**:
```
const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
}
const store = createStore(reducer);
```
* * * * *
### **6\. 테스트**
#### **1) 단위 테스트**
- **정의**: 개별 모듈을 독립적으로 테스트.
- **예시 (Jest)**:
```
test('add function', () => {
expect(add(1, 2)).toBe(3);
});
```
#### **2) 통합 테스트**
- **정의**: 여러 모듈이 함께 작동하는 것을 테스트.
- **도구**: Cypress, Puppeteer.
* * * * *
### **7\. 기본 알고리즘과 자료구조**
#### **1) 정렬 알고리즘**
- **버블 정렬**:
```
function bubbleSort(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
return arr;
}
```
#### **2) 자료구조**
- **스택(Stack)**:
- **LIFO** (Last In, First Out).
- 사용 예: 브라우저 뒤로 가기.
- **큐(Queue)**:
- **FIFO** (First In, First Out).
- 사용 예: 작업 대기열.
* * * * *
### **8\. 추가적으로 유용한 도구**
#### **1) Lighthouse**
- **정의**: 구글 제공 웹 성능 분석 도구.
- **사용 목적**:
- 웹 성능 최적화.
- 접근성 진단.
#### **2) Postman**
- **정의**: API 테스트 도구.
- **사용 방법**:
- HTTP 요청 테스트.
- 응답 데이터 확인.
댓글
댓글 쓰기