삶도 재입학이 되나요? - mysetting

3:26 5/30

velog.io

mobile screenshot relative

3:26

velog.io

mobile screenshot

삶도 재입학이 되나요?
https://velog.io/@dongha1992

글과 코드와 사람에 관해 생각합니다.

저작도구: velog

최종 피드 수집: 2025-12-21 12:16

전체 (149)

2h

네트워크 해킹 - HTTPS 우회

SSL 스트립(SSL Stripping)
앞서 보았던 것처럼 HTTP는 암호화가 없이 평문으로 데이터를 전송한다. 그래서 스니핑이 가능했다. 하지만 HTTPS는 평문을 암호문으로 감싸 전송한다.
즉, 패킷을 캡처해도 바이트는 알

000

20h

네트워크 해킹 - ARP 스푸핑

들어가며
최근에 리액트도 뚫리고, 쿠팡 개인정보도 유출됐다고 하고 보안 관련 이슈가 많다.
해킹/보안 쪽은 아예 모르지만 그래도 개발자인데 어떤 식으로 해킹을 하고 어떻게 막을 수 있는지 기초 정도는 알아야 할 거 같아서 해킹

000

4d

모듈 번들러 만들기 (2)

번들러 기능 확장하기
간단한 스크립트를 번들링할 수 있게 되었다. 하지만 여기서 멈출 수 없다. 이제 보통의 개발에서 쓰이는 HTML 템플릿이나 정적 리소스 더 나아가 개발 서버까지 기능을 추가해보자.
1. Resolver 개선

000

4d

모듈 번들러 만들기 (1)

모듈 번들러란?
쉽게 말해 여러 모듈(파일)들을 하나의(또는 몇 개의) 번들 파일로 묶어주는 도구다
번들러는 모듈의 의존 관계를 분석하여 브라우저가 인식할 수 있는 자바스크립트 코드로 변환한다
예를들어 아래와 같은 js 파일이 있

000

1M

Zod와 Typescript

Zod
요새 유효성 검사 라이브러리로 Zod를 많이 사용하고 있는데, Zod는 클래스를 활용하여 어떻게 복잡한 타입을 잘 숨겼는지 살펴보자
Zod의 타입 추론을 보면 ZodString으로만 나오는 것을 확인할 수 있다. Subcl

000

2M

Type Predicate와 Assertion

Type Predicate
Type Predicate는 함수가 어떤 타입을 반환함으로써 인자를 좁힐 수 있게 되는 타입 문법이다.
조금 말이 헷갈리는데 타입스크립트를 작성하다 보이는
반환 타입을 ~ is string로 작성하는

000

7M

Epic React - React Server Component (5)

Server Actions에 대해
이제 드디어 RSC의 마지막 파트다.
지금까지 우리는 RSC를 통해 서버에서 컴포넌트를 렌더링하는 방식, use Client로 클라이언트 컴포넌트를 참조로 렌더링 하는 방식 그리고 클라이언트 사

009

7M

Epic React - React Server Component (4)

Client Router에 대해
1. Client Router
이제 서버 컴포넌트와 클라이언트 컴포넌트를 모두 사용할 수 있는 그럴듯한 앱이 되었다. 하지만 잊으면 안 된다. 이 앱은 아주 원시적인 앱이라는 것을.
목록에서 아이템

000

7M

Epic React - React Server Component (3)

Client Component 에 대해
사실 지금부터가 진짜다!!
앞선 1, 2편에서의 서버 컴포넌트의 개념은 지난 수년 간 지속적으로 등장했던 것들이다.
하지만, RSC의 클라이언트 컴포넌트는 조금 새로운 개념이다. 단순한

000

7M

Epic React - React Server Component (2)

Server Component 에 대해
1편에서 RSC에 대해 대략적으로 살펴봤다면, 다음으로 Server Component에 대해 알아보자.
1. Async Components
이제, RSC가 서버에서 실행되므로, 각 컴포넌트

001

7M

Epic React - React Server Component

RSC에 대해
1. 그전에 먼저 CSR
React Server Component에 대해 탐구해보기 전에 워밍업으로 CSR를 다시 짚고 넘어가야 한다. 그것도 아주 전통적인 방식의 CSR를 통해 전통 CSR에서 현대 모던 짱짱 CS

006

7M

Epic React - React Server Component (1)

RSC에 대해
1. 그전에 먼저 CSR
React Server Component에 대해 탐구해보기 전에 워밍업으로 CSR를 다시 짚고 넘어가야 한다. 그것도 아주 전통적인 방식의 CSR를 통해 전통 CSR에서 현대 모던 짱짱 CS

007

8M

Total Typescript - generic challenge

제네릭 마지막 문제...
translations라는 데이터가 있다.
이 데이터는 translate 라는 함수를 통해 변환된다. translate는 무엇인가
키 인덱싱으로 translations 의 밸류를 가져오는데, 여기서 봐야

0053

8M

Total Typescript - function overload

1. use-data-hook
useData라는 데이터 페칭 함수가 있다.
getData를 반환하여 페칭한 값을 가져오는데
inititalData를 넘긴 경우는 초기값이 있는데도 inititalData가 옵셔널이기 때문에 nu

001

8M

Total Typescript - advanced generic

1. currying
마지막 인자가 호출되어야 실행되는 커리함수가 있다. 커리함수의 타입은 어떻게 지정해야할까?
지금은 t를 제외한 나머지 인자들은 unknown으로 추론되고 있다. 한번 수정해보자.
generic attached

0051

8M

Epic React - Suspense Image

Suspense Image
이런 경우를 생각해보자.
상단의 버튼으로 배 이름을 클릭할 때마다 새로운 데이터를 가져온다.
Suspese되어 있는 ShipDetails 컴포넌트에서 직접 호출하고
getShip은 캐시의 역할을 하

000

8M

Total Typescript - advanced type transformation

1. string to object
자바스크립트에서 쿼리 스트링을 쿼리 파라미터로 만드는 것처럼 타입스크립트로 string을 obeject로 변환이 가능하다.
몇 시간 도전했지만 실패한 그 문제를 함께 알아보자
문제
흔히 볼 수

001

8M

Total Typescript - key mapping

1. never in key mapping
말그대로 OnlyIdKeys id 관련 키만 추출하는 타입을 작성해본다 가정하자.
이렇게 키를 순회하는 타입의 기본적인 형태로 일단 만든다.
이제 여기서 id와 관련된 키만 추출해야한다.

002

8M

Total Typescript - infer

1. infer basic
infer는 타입스크립트의 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입을 추론할 수 있는 기능을 가진다.
평소에 infer만 보면 쫄았는데, infer가 무엇인지 확실히 알아

001

8M

Epic React - Optimistic UI

1. Optimistic UI
react 19에 useOptimistic 훅이 추가되었다. use도 그렇고 react가 점점 생태계를 넓히려는 것 같다. 아무튼 새로운 기능이 추가되었으니까 무엇인지 살펴보자
예제
아주 귀엽고 간단

001