프롤로그) 밑바닥부터 시작하는 웹 브라우저
·
정보
읽은 내용을 간략하게 재구성 했습니다. 책과 다르니 책도 꼭 읽어보세요.웹의 본질은 변하지 않았다웹 기술은 수십 년간 빠르게 발전했지만 처음부터 지금까지 핵심은 변하지 않았습니다.하이퍼링크로 연결된 정보 네트워크브라우저를 통한 탐색HTTP로 요청하고 HTML로 구조화URL로 식별되는 문서개방적이고 표준화된 구성요소이 원칙들은 어디서부터 시작된 걸까요? 웹의 역사자세히 다루기 보다는 주요 사건과 아이디어, 발명한 사람들의 목표와 동기를 살펴봅시다. 메멕스(1945): 정보 혁명의 시작웹의 역사는 1945년, 버니바 부시가 제안한 메멕스(Memex)라는 개념에서 시작됩니다.그가 해결하고자 한 문제는 명확했습니다."인간이 효율적으로 배우고 탐색할 수 있는 방법을 제공하자."메멕스의 핵심은 정보 조회와 기록 간..
[우아한 타입 스크립트 with 리액트] 타입 활용하기
·
기술/TypeScript
조건부 타입조건부 타입은 어떤 조건에 따라 타입을 다르게 지정하고 싶을 때 사용자바스크립트의 삼항 연산자와 비슷한 형태extends를 활용한 조건부 타입T extends U ? X : Y//T가 U 타입에 할당 가능하면 X 타입, 아니면 Y 타입 실무 예시 코드로 보자. API 응답 타입 요청한 경로에 따라 정확한 응답 타입을 자동으로 설정하는 코드다.// API 경로를 문자열 유니온으로 정의type Endpoint = "/users" | "/products" | "/orders";// 요청 경로에 따라 응답 타입 자동 선택type ApiResponse = T extends "/users" ? User[] : T extends "/products" ? Product[] : T extends "/o..
링크드 리스트(Linked List) 이해하기
·
개발/알고리즘(코딩테스트)
알고리즘 문제 풀다 만난 링크드 리스트들어보긴 했지.. 근데 이게 뭔데..대충 마인크래프트 카트 마냥 연결된 구조라는거까지 알고 있다.알고리즘 문제 풀이를 위해서라도 개념에 대해 알아보자링크드 리스트(Linked List)링크드 리스트(Linked List)는 데이터를 링크(link)로 이어 붙인 구조다.Node는 뭘까?노드(Node)는 링크드 리스트에서 사용되는 기본 단위. 각 노드는 하나의 데이터 덩어리로 내부에 두 가지 정보를 담고 있다.Head → [data | next] → [data | next] → nulldata: 노드가 가지고 있는 실제 데이터나 값next: 다음 노드를 가리키는 포인터 (링크 역할)노드 하나하나가 "내 값은 이거고, 다음 친구는 저기 있어" 라고 알려주는 셈이다.단방향은..
[우아한 타입 스크립트 with 리액트] 타입 좁히기와 타입 확장
·
기술/TypeScript
4장. 타입 확장하기와 좁히기타입 확장타입 확장은 기존 타입을 기반으로 새로운 타입을 정의하는 방법으로 코드 중복을 줄이고 명확한 타입 구조를 유지할 수 있다.// type 확장type User = { name: string };type Admin = User & { role: string };// interface 확장interface User { name: string;}interface Admin extends User { role: string;}const admin :Admin = { name: "이름", role: "관리자"}장점코드 중복을 줄일 수 있다.기존 타입 정의를 안전하게 확장할 수 있다.변경이 필요한 부분만 추가하거나 수정할 수 있다. 유니온 타입유니온 타입은 두 개 ..
[우아한 타입 스크립트 with 리액트] 고급 타입
·
기술/TypeScript
타입스크립트만의 독자적 타입 시스템타입스크립트는 자바스크립트의 자료형을 기반으로 독자적인 타입 시스템을 구축하고 있다.엄밀히 말하면 타입스크립트의 타입 시스템이 내포하고 있는 개념은 모두 자바스크립트에서 기인한다.단지 자바스크립트로 표현할 수단과 필요성이 없었을 뿐이다.타입스크립트의 계층구조1. any자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있다.타입을 명시하지 않은 것과 동일하며 타입 검사를 완전히 우회한다.let state: any;state = 1; state = "hello"; state = {}; state.foo.bar; // 오류 없음 (런타임 에러 가능성)타입 강제하기{ "compilerOptions": { "noImplicitAny": t..
[항해플러스] 항해 6기에 합류하게 된 이유부터 마무리까지
·
회고
이미 항플 회고를 1~10주차 나름 진지 버전으로 써왔기에 이번 회고는 새로움을 주고자 짤도 가득 담아 MZ하게 써보겠습니다. 엠지력 주의 길면 길고 짧으면 짧은 두달동안 라는 교육과정을 진행했다.직장을 다니면서 교육도 들어야하고 과제도 진행해야 되기에 얼마나 빡셀지 예상이 갔다. 그래서 처음에 3기 쯤에 신청을 했다가"내 연차에 이걸 하는게 맞을까?""혼자 공부를 더 해보고 배워야 잘 흡수하지 않을까?""...주말을 다 비워야 되는데 이미 약속이 있음""항해한테 또 통수 맞는거 아냐?(항해99 경험자)"등등 온갖 핑계로 환불을 했다.약간 완벽콤이 있음이왕 하는거 완벽하게 해내고싶다. 그렇게 여유만만 워라밸 끝장나는 삶을 살고있었다.우리 회사는 야근이 1년에 한번 할까말까 하기 때문지난 2년동안 야근시간..
[우아한 타입 스크립트 with 리액트] 타입
·
기술/TypeScript
1. 타입이란?자바스크립트의 데이터 타입자바스크립트는 다음과 같이 7가지 데이터타입(자료형)을 정의한다.undefinednullBooleanStringSymbolNumeric //(Number와BigInt)Object여러 종류의 데이터를 식별해서 컴파일러에 값의 형태를 알려준다. 메모리에 저장된 값을 데이터 타입으로 설명할 수 있고 모든 데이터를 해석할 때 데이터 타입 체계가 사용된다.집합으로서의 타입프로그래밍에서 타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.function greet(name: string): string { return `Hello, ${name}!`;}greet("World");greet(42); // Error: Argument of type '42' is not as..
LeetCode, 자바스크립트) Rotate image
·
개발/알고리즘(코딩테스트)
문제 Input: matrix = [[1,2,3],[4,5,6],[7,8,9]]Output: [[7,4,1],[8,5,2],[9,6,3]]Input: matrix = [[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,16]]Output: [[15,13,2,5],[14,3,4,1],[12,6,8,9],[16,7,10,11]] You are given an n x n 2D matrix representing an image, rotate the image by 90 degrees (clockwise).접근노가다는 무조건 아닐거 같고, 어떠한 공식이 있을거 같은데... 시도해 보았으나 실패했다.구글링의 도움을 받음 핵심은 90도 시계방향 회전 = 전치(transpose) + 각 행..
LeetCode, 자바스크립트) Valid Sudoku
·
개발/알고리즘(코딩테스트)
문제https://leetcode.com/problems/valid-sudoku/ 9x9 수도쿠 보드가 유효한지 판단하십시오. 채워진 셀만 다음 규칙에 따라 검증하면 됩니다:각 행은 1-9의 숫자를 중복 없이 포함해야 합니다.각 열은 1-9의 숫자를 중복 없이 포함해야 합니다.그리드의 아홉 개의 3x3 하위 상자 각각은 1부터 9까지의 숫자를 중복 없이 포함해야 합니다. 참고:(부분적으로 채워진) 스도쿠 보드가 유효할 수는 있지만 반드시 풀 수 있는 것은 아닙니다.언급된 규칙에 따라 유효성을 검사해야 하는 것은 채워진 셀들뿐입니다.Input: board = [["5","3",".",".","7",".",".",".","."],["6",".",".","1","9","5",".",".","."],[".","..
LeetCode, 자바스크립트) Move Zeroes
·
개발/알고리즘(코딩테스트)
문제https://leetcode.com/problems/move-zeroes/description/ 정수 배열 nums가 주어졌을 때, 0인 모든 요소를 배열의 끝으로 이동시키되, 0이 아닌 요소들의 상대적 순서는 유지해야 합니다.배열의 복사본을 만들지 않고, 원본 배열을 직접 수정하는 방식으로 이 작업을 수행해야 합니다.Input: nums = [0,1,0,3,12]Output: [1,3,12,0,0]접근제자리 > 추가로 배열을 생성할 수는 없음배열을 순회하면서 0을 만나면 뒤로 보낸다.const moveZeroes = function(nums) { let left = 0; // 다음 0이 아닌 요소가 올 위치 for (let right = 0; right