티스토리

갓생살기 프로젝트

검색하기

블로그 홈

갓생살기 프로젝트

soyoondaily.com/m

soyooooon 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[함수형 코딩] 중복 코드를 없애는 방법: 암묵적 인자 드러내기 암묵적 인자란?이전에 '[함수형 코딩] 더 나은 액션 만들기' 글을 통해 암묵적 입출력에 대해 다룬 적이 있다. 이번에는 '암묵적 인자'라는 말이 나왔는데, 어떤 의미일까?const getUserName = (user) => user['name'];const getUserEmail = (user) => user['email'];const getUserAge = (user) => user['age'];위와 같은 함수가 있다고 했을 때, 이 함수들은 서로 함수명과 읽어올 key 다를 뿐, 전체적인 형태가 동일하다. 함수 이름을 보면 key를 결정하는 문자열이 함수명에 포함되어 있다는 것을 확인할 수 있는데, 이런 상황을 보고 함수 이름에 암묵적 인자가 있다고 할 수 있다. 구분하고자 하는 값을 인자로 직접 .. 공감수 0 댓글수 1 2025. 4. 7.
내가 겪은 CSS 스타일링 전략의 변화와 고민들 🤔 프론트엔드 개발을 하면서 다양한 프레임워크와 CSS 전략을 선택하고 경험해 왔다. 각 전략은 프론트엔드 CSS의 트렌드, 그리고 특정 시점의 필요나 프로젝트 상황에 따라 선택되었고, 그 안에서 여러 시행착오와 고민이 있었다. 이 글에서는 CSS 경험 과정을 돌아보고, 현재 관심이 있는 CSS와 앞으로의 방향성을 정리해보고자 한다. CSS-in-JS와의 첫 만남: styled-components처음 React를 사용했을 때는 styled-components를 즐겨 사용했다. 컴포넌트 파일 내에서 함께 선언할 수 있어 구조가 명확했고, 각각의 스타일을 마치 하나의 컴포넌트처럼 다룰 수 있어 직관적이었다. 특히 props를 기반으로 조건부 스타일을 줄 수 있어 유연하게 대응할 수 있었다. 하지만 프로젝트 규모.. 공감수 1 댓글수 9 2025. 4. 6.
[함수형 코딩] 계층형 설계 - 직접 구현 함수형 코딩에서는 4개의 계층형 설계 패턴을 소개한다. 직접 구현, 추상화 벽, 작은 인터페이스, 편리한 계층 중 이번 글에서는 직접 구현에 대해 다루려고 한다.직접 구현 패턴이 뭘까?앞서 간단히 소개한대로, 직접 구현은 계층형 설계 패턴의 한 종류이다. 하지만 챕터8을 읽으며 "왜 직접 구현이라고 했을까?"라는 의문이 계속 들었다. 전체적으로 읽으며 정리해본 결론은 다음과 같다.함수가 수행하는 작업을 코드에서 직접적으로 확인할 수 있다.추상화가 따로 없기 때문에 코드의 의도가 명확하게 보인다.함수 내부에서 모든 로직을 직접 제어하는 것이 가능하다.호출 그래프를 통한 계층 구분호출 그래프를 통해 함수의 계층들을 시각화함으로써, 직접 구현 패턴이 잘 지켜지고 있는지를 점검할 수 있다. 코드를 구성하는 함수.. 공감수 0 댓글수 3 2025. 4. 2.
[함수형 코딩] 데이터 불변성을 위한 카피온라이트, 방어적 복사 불변성을 지켜야 하는 이유?데이터를 가공하는 과정에서 예상치 못한 변화를 막기 위해자바스크립트에서 객체와 배열을 할당하는 변수는 참조값을 가진다. 참조에 의해 복사가 일어나기 때문에 string, number와는 다르게 복사했을 때 독립적이지 않다. 즉, 만약 객체 A를 새로운 변수 B에 할당 했다고 했을 때, A와 B는 동일한 참조를 가지게 되어 B 객체의 value만을 변경했다고 하더라도 A 객체에까지 영향을 미치게 된다. 자바스크립트를 처음 공부했을 때는 이 개념이 많이 헷갈렸어서, 간단한 예제를 준비했다. 아래 예시를 확인하면 좀 더 어떤 말인지 더 와닿을 거라고 생각한다.const soyoon = {name: '소윤', age: '28'}const soyoon2 = {name: '소윤', age.. 공감수 1 댓글수 3 2025. 3. 26.
[시나브로 자바스크립트] History API와 SPA 라우팅 History APIHistory API를 사용하면 브라우저 세션 기록에 접근이 가능하고, 이를 조작할 수 있다.history.back(); // 뒤로가기 버튼이랑 동일하게 동작한다.history.forward(); // 앞으로가기 버튼이랑 동일하게 동작한다.history.go() // 현재 페이지를 새로고침history.go(-1) // 현재 페이지 기준 1페이지 이전history.go(2) // 현재 페이지 기준 2페이지 이후history.pushState(); // 지정된 경로와 데이터를 브라우저 세션 기록 stack에 추가한다.history.replaceState(); // 지정된 경로와 데이터를 브라우저 세션 기록 stack의 가장 최근 항목에 업데이트 한다.history.pushState(st.. 공감수 1 댓글수 3 2025. 3. 21.
[함수형 코딩] 더 나은 액션 만들기 이전 글인 '액션, 계산, 데이터란?'에서, 액션을 잘못 사용했을 경우 전체 코드에 액션이 퍼질 수 있고 테스트가 어려워질 수 있다고 이야기 했었다. 하지만 그렇다고 액션이 나쁘고 불필요한 것은 아니다. 오히려 액션이 있어야 동작하는 웹을 구현할 수 있는만큼 액션은 필요하다. 때문에 우리는 좋은 액션을 만들기 위해 노력해야 한다.비즈니스 요구 사항과 설계를 맞추기예시로 살펴보는 것이 가장 이해가 잘 된다. 아래 예시를 보면 gets_free_shipping이라는 함수가 있다. 이 함수는 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 역할을 한다. 하지만 인자로 장바구니를 넘기는 것이 아닌, 제품의 총합과 가격으로 확인하고 있다. 때문에 이 부분은 요구 사항과 맞추기 위해 장바구니를 인자로 받도.. 공감수 1 댓글수 2 2025. 3. 19.
[시나브로 자바스크립트] Monorepo란? 몇 년 전부터 모노레포에 대한 이야기가 계속 나오고 있고, 채용 공고에서도 지원 자격이나 우대 사항에 모노레포와 관련된 내용이 종종 보이곤 한다. 모노레포가 어떤 것이고 어떤 장점이 있기 때문에 이야기가 나오는 것인지, 한번 정리해보기로 했다. 모노레포란?다수의 프로젝트를 한 개의 레포 안에서 관리하는 개발 전략 모노레포를 구성하기 위해 다음과 같은 방법을 사용할 수 있다.TurboRepoNxLerna모노레포를 통해 해결할 수 있는 점협업 시 유리 : 한 레포에서 관리하기 때문에 여러 사람이 여러 서비스에 보다 간편하게 접근할 수 있다.관리 및 개발 생산성에 유리 : 코드 컨벤션이나 lint 규칙을 통일하여 관리할 수 있기 때문에 관리에 유용하며, 이러한 점 외에도 코드 재사용이 증가하며 개발 생산성 또.. 공감수 3 댓글수 5 2025. 3. 14.
[함수형 코딩] 액션, 계산, 데이터란? 프론트엔드에서 클린 코드를 고민했을 때, 코드 개선에 실질적인 도움이 되었던 부분이 액션 함수와 순수 함수에 대한 개념이었다. 기존에 짠 코드들을 봤을 때, 순수 함수는 거의 존재하지 않았고, 대부분의 함수가 액션 함수였다. 물론 액션 함수가 있어야 웹에서 기능을 구현할 수 있지만, 순수 함수가 거의 없는 프로젝트는 각각의 함수가 여러 기능을 담당하게 되면서 가독성이 떨어졌고 이로 인해 전반적인 흐름을 이해하기도 쉽지 않았다. 이를 깨닫고 순수 함수를 최대한 분리하고 난 후, 이전보다 코드가 많이 개선되었던 기억이 있다. 그래서 함수형 프로그래밍에 대해 조금 더 딥하게 공부해 보고자 '쏙쏙 들어오는 함수형 코딩' 스터디를 시작했다.이어지는 내용은 1~3 챕터까지를 읽으며 핵심이라고 생각한 액션, 계산, .. 공감수 3 댓글수 5 2025. 3. 12.
[시나브로 자바스크립트] Date, Intl.DateTimeFormat으로 날짜 다루기 Date() vs new Date()Date()처럼 함수로 호출할 경우 new Date().toString()과 동일하게 동작하며, 현재 날짜/시간을 나타내는 문자열을 반환한다.Date()는 문자열이기 때문에 Date 객체에서 사용하는 getDate(), getTime() 등의 인스턴스 메서드를 사용할 수 없다. 때문에 아래 첫번째 이미지처럼 Date() 뒤에 메서드를 사용하려고 할 경우 TypeError가 발생한다.new Date()로 호출할 경우에는 새로운 Date 객체를 반환하며 관련된 메서드들을 사용할 수 있다.타임존 설정하기toLocaleString을 사용하면 timezone을 설정할 수 있다. 첫 번째 파라미터에는 언어를 설정하고, 두번째 파라미터 안에 timeZone을 넣으면 시간대를 설정할.. 공감수 3 댓글수 4 2025. 3. 7.
좋은 프론트엔드 폴더 구조란? 🤔 최근 기술 면접을 다니면서 공통적으로 많이 받았던 질문이 "FSD를 사용하셨는데 왜 도입하셨고, 어떤 점이 해결되셨나요? 선택했을 때 어려운 점은 없었나요?"였다. 그리고 사전과제나 라이브 코딩을 진행할 때도 왜 이런 폴더구조를 선택했는지를 물어보는 회사가 많았다. 타이밍 좋게 이번 스터디 주제가 '스스로 생각하는 좋은 폴더 구조란 무엇인지'에 대해 다룰 예정이라, 기회 삼아 정리를 해보기로 했다. 결론부터 말하자면 사실 "좋은 프론트엔드 폴더 구조가 뭐야?"라고 말했을 때 정답도 없고 영원한 것도 없다고 생각한다. 실무에서 A라는 폴더 구조를 그 당시에 적합하다 생각하고 적용을 했음에도, 프로젝트 규모가 변하고 시간이 지나면 기존 폴더 구조의 한계가 느껴지고 이에 맞춰서 또 다른 적절한 폴더 구조를 고.. 공감수 3 댓글수 6 2025. 2. 22.
[시나브로 자바스크립트] 명령형 프로그래밍 vs 선언형 프로그래밍 '시나브로 자바스크립트' 강의 중 쇼핑몰 만들기 섹션을 수강하며 반복적으로 나왔던 내용이 명령형 프로그래밍과 선언형 프로그래밍이었다. 프론트엔드 개발을 하다 보면 "선언형 프로그래밍을 해야 된대"라는 말을 자주 들었는데, 도대체 왜 이런 말이 자주 나오는지를 이해하려면 두 가지의 차이점에 대해 한번 정리할 필요가 있겠다는 생각이 들었다. 흔히 명령형 프로그래밍과 선언형 프로그래밍에 대해 검색을 하고 여러 블로그 글을 찾아보면 아래와 같이 간단하게 정리할 수 있다.명령형 프로그래밍은 '어떻게(How)' 하는지,선언형 프로그래밍은 '무엇을(What)' 하는지에 초점이 맞춰져 있다. 이 말이 잘 와닿지 않을 수 있는데, 실생활에서의 상황을 바탕으로 예를 들자면 아래와 같이 나눌 수 있다.[스타벅스까지 어떻게 .. 공감수 5 댓글수 7 2025. 2. 21.
[시나브로 자바스크립트] 1주차 스터디 정리 시나브로 자바스크립트 스터디를 시작했다. 인프런에 있는 '시나브로 자바스크립트'를 보고 배운 점을 공유하기로 했고, 새롭게 알게 되었거나 추가로 알아본 내용들을 위주로 작성하려고 한다. 스터디 레포 : https://github.com/The-survivor-is-strong/sinabro-js GitHub - The-survivor-is-strong/sinabro-js: 📚 인프런 강의 "시나브로 자바스크립트" 스터디 입니다📚 인프런 강의 "시나브로 자바스크립트" 스터디 입니다. Contribute to The-survivor-is-strong/sinabro-js development by creating an account on GitHub.github.com GitHub CLIGitHub cli.. 공감수 4 댓글수 0 2025. 2. 12.
[HTTP 완벽 가이드] 18장 웹 호스팅 18.1 호스팅 서비스많은 사람이 웹 사이트를 원하지만 냉난방 장치가 있는 서버실을 짓고 도메인 이름을 등록하고 네트워크 대역폭을 구매할 기술과 시간을 가진 사람은 드물기 때문에 이를 전문적으로 관리하는 웹 호스팅 서비스들이 만들어졌다. 물리적 공간 및 냉난방 등의 장비 관리부터 고객이 직접 콘텐츠를 제공할 수 있는 총체적인 웹 호스팅까지 다양한 종류의 서비스들이 있다. 18.2 가상 호스팅많은 웹 호스팅 업자는 컴퓨터 한 대를 여러 고객이 공유하게 해서 저렴한 웹 호스팅 서비스를 제공한다. 이를 공유 호스팅 혹은 가상 호스팅이라 부른다. 호스팅 업자는 서버 팜이라고 부르는 복제 서버 더미를 만들고 서버 팜에 부하를 분산할 수 있다. 가상 호스팅은 비용, 공간, 관리에 이점이 있기 때문에 만약 웹 서버를.. 공감수 0 댓글수 0 2025. 2. 11.
[99클럽] 알고리즘 TIL: 백준 10845번 큐 - JavaScript 문제링크https://www.acmicpc.net/problem/10845풀이방법이전 백준 10828 스택 문제풀이와 동일한 방식으로 진행했다.queue 객체를 만들어 각 메서드를 정의하였고, for loop를 돌며 result를 업데이트 한 후 최종 업데이트 된 result를 출력했다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});const input = [];rl.on("line", (line) => { input.push(line);});const queue = { data: [], push: function (x) { thi.. 공감수 1 댓글수 0 2025. 2. 5.
[99클럽] 알고리즘 TIL: 백준 17608번 막대기 - JavaScript 문제링크https://www.acmicpc.net/problem/17608풀이방법막대기를 처음부터 순차적으로 살펴볼까 고민했지만 보이는 여부를 하나하나 체크하기엔 복잡할 것이라는 생각이 들어서, 바라보는 시각인 마지막부터 실행을 시키면 단순하게 풀 수 있을 것이라는 생각이 들었다.바라보는 관점에서는 무조건 앞 순서보다 길이가 긴 막대기만 보일 것이기 때문에 이를 기준으로 로직을 구현했다.보이는 개수를 count=0으로 할당하고, 현재 낮은 높이를 min=0으로 할당한다.만약 현재 값이 min값보다 같거나 작으면 안 보이기 때문에 continue로 넘어간다.그렇지 않다면 현재 시각에서 보이는 막대기이기 때문에 count++를 해주고, min값을 현재 값 기준으로 업데이트 해준다.반복문 종료 후 count를.. 공감수 1 댓글수 1 2025. 2. 4.
[HTTP 완벽 가이드] 17장 내용 협상과 트랜스코딩 17.1 내용 협상 기법서버에 있는 페이지들 중 어떤 것이 클라이언트에게 맞는지 판단하는 기법클라이언트 주도 협상서버 주도 협상투명 협상 17.2 클라이언트 주도 협상클라이언트가 요청을 보냄 > 서버가 가능한 페이지의 목록을 응답으로 돌려줌 > 클라이언트가 선택하는 방식서버 입장에서 가장 구현하기 쉽지만 각 페이지에 두 번의 요청이 필요해서 대기시간이 늘어나게 된다. 서버가 클라이언트에게 선택지를 주는 방식은 두 가지가 있다.여러 버전에 대한 링크와 각각에 대한 설명이 담긴 HTML 페이지를 돌려주는 방법300 Multiple Choices 응답 코드로 HTTP/1.1 응답을 돌려주는 방법서버 응답을 받은 후에는 링크와 함께 페이지를 보여주거나 사용자가 결정을 할 수 있도록 창을 띄울 수도 있다.클라이언.. 공감수 1 댓글수 1 2025. 2. 4.
[HTTP 완벽 가이드] 16장 국제화 16.4~16.6 16.4 언어 태그와 HTTP언어 태그는 언어에 이름을 붙이기 위한 짧고 표준화된 문자열이다. '한국어'를 표현한다고 할 때도 한국어, Korean, Ko, K 등 사용하는 사람에 따라 표시할 수 있는 방법이 다양하기 때문에 표준화된 이름을 사용한다. 모든 태그는 대소문자가 구분되지 않지만 관용적으로 언어를 나타낼 때는 소문자, 국가를 나타낼 때는 대문자를 사용한다.Content-Language 헤더엔터티가 어떤 언어 사용자를 대상으로 하고 있는지 서술한다.# 프랑스어 사용자를 대상으로 하고 있을 때Content-Language: fr# 마오리 언어와 영어가 모두 사용되는 경우Content-Language: mi, en# 여러 언어를 다루지만 대상자가 영어 사용자인 경우 ex. 영어 사용자들을 위한 라틴.. 공감수 1 댓글수 0 2025. 2. 4.
[99클럽] 알고리즘 TIL: 백준 10828번 스택 - JavaScript 문제링크https://www.acmicpc.net/problem/10828풀이방법처음에는 switch문으로 따로 만들어서 사용할까 했지만, 객체로 만드는 것이 호출할 때도 stack.pop(), stack.pop() 등의 형태로 호출할 수 있어 직관적이라고 생각하여 객체 형식으로 만들었다.처음에는 for문을 돌면서 push인 경우를 제외하고 바로 console.log로 결과값을 출력했는데 시간초과가 발생했다. 이를 해결하기 위해 console.log를 바로 출력하지 않고 string 형태의 result를 업데이트하고 for문이 종료된 후 한 번만 호출하는 방식으로 변경하여 해결했다.const readline = require("readline");const rl = readline.createInterf.. 공감수 1 댓글수 1 2025. 2. 3.
[99클럽] 알고리즘 TIL: 백준 32953번 회상 - JavaScript 문제링크https://www.acmicpc.net/problem/32953풀이방법N, M이 주어지는 0번 인덱스를 제외하고, 짝수 인덱스에 클래스를 듣는 학생들의 학번이 있다.학번을 split을 활용하여 배열로 만들고, 학번을 key로 잡고 학번마다 듣는 클래스 수를 value로 잡는다.key값에 대한 value가 존재하지 않을 경우, value를 1로 세팅하고 value가 존재할 경우 이전 값에서 1을 더해준다.Map을 순회하며 value가 M 이상인 key값의 수를 세어 출력한다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});co.. 공감수 1 댓글수 0 2025. 1. 24.
[99클럽] 알고리즘 TIL: 백준 31562번 전주 듣고 노래 맞히기 - JavaScript 문제링크https://www.acmicpc.net/problem/31562풀이방법첫번째 라인부터 N라인까지 순회하며 song과 notes 배열을 만든다notes 배열에서 앞 3자리만 slice로 꺼내 하나의 문자열로 join 하여 'firstNotes'에 할당한다.firstNotes를 key로 잡고, 만약 for 루프를 돌며 이미 value가 존재하는 경우는 중복으로 판단하여 문제에 제시된 조건에 따라 "?"를 value로 대체하고 value가 없는 경우에는 song을 value로 추가한다.N+1 라인부터 N+M 라인까지는 문제들이 나열되어 있다.문제 라인을 하나의 문자열로 변환하여 firstNotes에 할당한다.noteMapping에 firstNotes와 일치하는 key가 있다면 value를 그대로 출.. 공감수 2 댓글수 1 2025. 1. 24.
[HTTP 완벽 가이드] 16장 국제화 16.1~16.3 16.1 국제적인 콘텐츠를 다루기 위해 필요한 HTTP 지원서버 => 클라이언트 : HTTP Content-Type charset 매개변수와 Content-Language 헤더를 통해 문서의 문자와 언어를 알려준다.클라이언트 => 서버 : Accept-Charset과 Accept-Language 헤더를 보내 어떤 charset 인코딩 알고리즘과 언어들을 이해하고 선호하는지 알려준다.Accept-Language: fr, en;q=0.8Accept-Charset: iso-8859-1, utf-8q=0.8은 품질 인자로, 기본값 프랑스어(fr)보다 영어(en)에 낮은 우선순위를 주었다. (0.0에 가까울수록 낮은 우선순위) 16.2 문자집합과 HTTPHTTP Charset은 엔터티 콘텐츠 비트들을 어떻게 특정.. 공감수 0 댓글수 1 2025. 1. 22.
[HTTP 완벽 가이드] 15장 엔터티와 인코딩 15.4~15.10 15.4 미디어 타입과 차셋(Charset)Content-Type 헤더 필드는 엔터티 본문의 MIME 타입을 기술한다. 텍스트, 이미지, 오디오 등의 주 미디어 타입과 빗금(/), 그리고 미디어 타입을 더 구체적으로 서술하는 부 타입으로 구성된다. 예시로는 text/html, text/plain, image/gif, multipart/byteranges 등이 있다.텍스트 매체를 위한 문자 인코딩 : ex. 엔터티 비트 집합을 텍스트 파일의 글자들로 변환하기 위한 charset 매개변수멀티파트 미디어 타입 : 서로 붙어있는 여러 개의 메시지를 포함하며 하나의 복합 메시지로 보내짐 ex. 폼 제출 시, 문서 일부분을 전달하는 응답을 할 때멀티파트 폼 제출 : 멀티파트 본문은 여러 다른 종류와 길이로 채워진 .. 공감수 2 댓글수 0 2025. 1. 22.
[99클럽] 알고리즘 TIL: 백준 27160번 할리갈리 - JavaScript 문제링크https://www.acmicpc.net/problem/27160 풀이방법입력값에서 fruit과 장수를 분리한다.Map을 사용하여 fruit별로 총 장수를 업데이트 한다.Map을 순회하며 총 count가 5가 나오면 "YES"를 반환하고 순회가 종료되었다면 "NO"를 출력한다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});const input = [];rl.on("line", (line) => { input.push(line);});rl.on("close", () => { const cardsCount = Number(inp.. 공감수 1 댓글수 0 2025. 1. 21.
[99클럽] 알고리즘 TIL: 백준 15829번 Hashing - JavaScript 문제링크https://www.acmicpc.net/problem/15829풀이방법알파벳을 숫자로 치환하기 위해 charCodeAt을 사용하여 아스키 코드 번호로 변환한다.1~26 숫자를 맞추기 위해 96을 뺀다.요구사항에 맞춰 result를 계산하는데, 문제에서 정의한 유한한 범위의 출력을 유지하기 위해 result와 mathPow를 M으로 나누며 값을 업데이트 한다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});const input = [];rl.on("line", (line) => { input.push(line);});rl.on.. 공감수 0 댓글수 0 2025. 1. 21.
[99클럽] 알고리즘 TIL: 백준 10798번 세로읽기 - JavaScript 문제링크https://www.acmicpc.net/problem/10798 풀이방법input으로 들어오는 string들의 길이가 제각각일 수 있기 때문에, 1차로 input의 길이 중 max 값을 구한다.가장 긴 길이에 맞춰서 이중 for문을 돌려 앞에서부터 차례대로 세로 글자들이 쌓이게끔 result를 업데이트한다.최종 업데이트 된 result를 출력한다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});const input = [];rl.on("line", (line) => { input.push(line);});rl.on("clos.. 공감수 1 댓글수 1 2025. 1. 18.
[React] React 19에 추가된 핵심 기능 React 19 버전이 24년 12월 5일에 stable로 올라오면서, 주요 기능들에 대해 공식문서를 기준으로 정리했습니다.Actions이전에는 pending states, errors, optimistic updates, and sequential requests를 수동으로 처리해야 했습니다.다음은 기존에 pending, error를 useState를 활용하여 핸들링하는 예제입니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); con.. 공감수 1 댓글수 13 2025. 1. 16.
[HTTP 완벽 가이드] 15장 엔터티와 인코딩 15.1~15.3 메시지는 컨테이너, 엔터티는 화물HTTP 메시지를 인터넷 운송 시스템의 컨테이너라고 생각한다면, HTTP 엔터티는 메시지의 실질적인 화물이다. HTTP/1.1은 10가지 주요 엔터티 헤더 필드를 정의한다.Content-Type : 엔터티에 의해 전달된 객체의 종류Content-Length : 전달되는 메시지의 길이나 크기Content-Language : 전달되는 객체와 가장 잘 대응되는 자연어Content-Encoding : 객체 데이터에 대해 행해진 변형(압축 등)Content-Location : 요청 시점을 기준으로, 객체의 또 다른 위치Content-Range : 엔터티가 부분 엔터티라면, 이 헤더는 이 엔터티가 전체에서 어느 부분에 해당하는지 정의한다.Content-MD5 : 엔터티 본문의 콘텐츠.. 공감수 0 댓글수 0 2025. 1. 15.
[HTTP 완벽 가이드] 14장 보안 HTTP 14.5~14.9 디지털 서명디지털 서명은 보통 비대칭 공개키에 의해 생성된다. 요약에 사용자의 개인 키를 매개변수로 하는 서명 함수를 적용하여 메시지와 함께 전송한다. 메시지가 위조된 것이 아닌 것을 확인하고자 공개키를 이용한 역함수를 적용한 후 가지고 있는 버전의 요약과의 일치여부를 판단한다.디지털 인증서디지털 인증서는 신뢰할 수 있는 기관으로부터 보증 받은 사용자나 회사에 대한 정보를 담고 있다. 디지털 인증서는 대상의 이름, 유효 기간, 인증서 발급자, 인증서 발급자의 디지털 서명 등의 기본적인 내용들을 담고 있다. 디지털 인증서에 대한 세계적인 단일 표준은 없지만, X.509라는 표준화된 서식에 대부분의 인증서를 저장하고 있다.HTTPS를 통한 웹 트랜잭션을 시작하게 되면 브라우저는 접속한 서버에서 디지털 인증서.. 공감수 0 댓글수 0 2025. 1. 15.
[항해 플러스] 프론트엔드 3기 수료 후기 항해99로 돌아온 이유'항해99'로 돌아왔다는 말에서 알 수 있듯이, 나는 항해99 부트캠프를 통해 프론트엔드 개발자로 첫 발을 디뎠다. 항해99를 통해 수많은 프로젝트를 만들면서 React에 대한 경험을 쌓았고, 당시 1위 프로젝트를 할만큼 나름 만족스러운 결과를 얻으며 수료를 했었다. 이후 '두브레인'에 입사하며 실무 경험을 쌓았지만, 아무래도 프론트엔드는 나 혼자이다보니 프론트엔드 기술에 대해 자유롭게 논의할 수 있는 환경은 아니었다. 이러한 이유로 개인적으로 사람들을 모아 스터디를 오픈했고 항해 플러스 이전까지 2년이 넘는 시간동안 매주 1~2회 모여 모던 자바스크립트, 알고리즘, 테스트 코드, 사이드 프로젝트, Svelte, GraphQL 등을 학습했다.꾸준히 스터디를 운영하면서 실무에 신기술을.. 공감수 5 댓글수 4 2025. 1. 11.
[HTTP 완벽 가이드] 14장 보안 HTTP 14.1~14.4 HTTP를 안전하게 만들기HTTPS는 넷스케이프 커뮤니케이션 주식회사에서 개척했으며 모든 주류 브라우저와 서버에서 지원한다. HTTPS를 사용할 경우, 모든 HTTP 요청과 응답 데이터는 네트워크로 보내지기 전에 암호화된다. SSL과 TLS를 이용하여 구현되며 두 가지는 매우 비슷하기 때문에 양쪽 모두를 포함하는 용어로 SSL을 사용한다.디지털 계산의 도래로 복잡한 인코딩과 디코딩이 가능해졌다. 또한 매우 큰 키를 지원하는 것이 가능해져서 단일 암호 알고리즘으로 키의 값마다 다른 수조 개의 가상 암호 알고리즘을 만들어낼 수 있게 되었다.대칭키 암호법대칭키 암호법에서는 인코딩을 할 때 사용하는 키가 디코딩을 할 때 사용하는 키와 같다. 발송자와 수신자 모두 통신을 위해 비밀 키를 똑같이 공유해야 한다. 대.. 공감수 0 댓글수 0 2025. 1. 10.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.