본문 바로가기

분류 전체보기

 (118)
SW 사관학교 정글 회고 길다면 길고 짧다면 짧은 과정이 끝났다. 정글을 수료하자마자 쓰고 싶었던 회고지만, 채용 프로세스에 집중하다 보니 수료 후 한 달이 지나 쓰게 되었다. 일단 기분은 후련하다. 원하는 결과가 나오지 않았지만 일단 후련하다. 당연히 쉬울 것이란 생각도 안 했고, 잘 안될 수도 있다는 생각도 했었지만 막상 결과로 받아보니 아쉽긴 했다. 정말 원하는 협력사를 못 간 아쉬움을 뒤로하고, 내 나름대로의 원인을 분석해보고 정리해보려 한다. 1. 코딩 테스트 실력 부족 코딩 테스트를 통과해야 다음 전형을 진행할 수 있지만 코딩 테스트에서 뚝배기가 깨졌다. 이 원인의 답은 간단하다. 그냥 공부하면 된다. 이건 누가 봐도 나의 노력 부족(뇌 부족인 거 같기도..ㅎ)이니 그리고 Front-End로 지원을 해서 그런지 pyt..
JavaScript : Array.(forEach, map, filter, reduce) Array를 처리하는 기능들 1. forEach : Array.forEach((value, index, array) => { 수행 코드 }); - value : 요소 값 - index : index 값 - array : Array 원본 testList = [1, 2, 3, 4, 5]; testList.forEach((num, idx) => { console.log(num, idx); }); // 실행 결과 1 0 2 1 3 2 4 3 5 4 2. map : Array.map((value, index, array) => { 수행 코드 }); - value : 요소 값 - index : index 값 - array : Array 원본 forEach와 다른 점은 map은 새로운 Array를 return tes..
JavaScript : sort() 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 (복사본이 만들어지는 것이 아닌 원 배열에 정렬) Default는 각 문자의 유니 코드 코드포인트 값에 따라 정렬 (그래서 숫자를 정렬하려고 단순히 sort()를 썼다간 원치 않은 결과가 나온다) - 구문 arr.sort([compareFunction]) 매개변수에 정렬 순서를 정의하는 함수를 넣을 수 있고 이 함수를 통해 숫자 오름차순 or 내림차순 정렬을 할 수 있다. compareFunction의 return 값이 음수면 a를 더 낮은 index로 정렬하고, 양수면 b를 a보다 낮은 index로 정렬, 0이면 서로에 대해 변경하지 않는다. 위 코드는 오름차순 정렬을 한 것이고, 짧게 쓰려면 화살표 함수로 numbers.sort((a, b)=> ..
SSR(Server Side Rendering), CSR(Client Side Rendering) - SSR : 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식 - 동작 과정 1) 클라이언트는 초기 화면 로드를 위해 서버에 요청을 보냄 2) 서버는 화면 표시하는데 필요한 데이터를 얻어와 모두 적용하여 렌더링 준비를 마친 HTML과 해당 JS 파일을 전달 - 특징 1) 페이지를 이동할 때마다 위 과정을 거치기 때문에 새로고침되어 화면이 깜빡임 2) 먼저 화면을 보여주고 나서 처리하기 때문에 TTV (Time To View)와 TTI (Time To Interact) 간에 시간 간격이 존재한다. - 장점 1) 검색 엔진 최적화 (SEO) 2) 빠른 초기 로딩 - 단점 : 1) 요청 할 때마다 새로고침을 하면서 깜빡임이 생겨 UX 관점에서 좋지 않음 2) 서버 렌더링에 ..
동시성(Concurrency), 병렬성(Parallelism) - 동시성 : 여러 개의 작업이 있을 때 Context Switching을 통해 여러 작업을 시분할 방식으로 처리하여 동시에 실행되는 것 처럼 보이는 것 (ex. 싱글 코어에서 여러 작업 수행) - 병렬성 : 실제로 동시에 여러 작업이 처리되는 것 (ex. 멀티 코어) 동시성은 여러 일을 한꺼번에 다루는 데 관한 것이다. 병렬성은 여러 일을 한꺼번에 실행하는 데 관한 것이다. - Rod Pike (Google Developer) - 암달의 법칙 (Amdahl's Law) : 코어가 N배 늘어나더라도 성능이 N배로 늘어나지 않음. 그 이유는 프로그램의 모든 부분을 Parallel 하게 짤 수 없기 때문에 이런 현상이 발생
WebSocket - WebSocket : HTML5 표준 기술로, 클라이언트와 서버 사이의 동적인 양방향 연결 채널을 구성하는 통신 프로토콜 - 특징 1. 단방향 통신인 HTTP의 단점을 보완하기 위해 등장 2. WebSocket은 HTTP에 비해 Header 크기가 작기 때문에 오버헤드를 줄일 수 있음 3. Real-Time Web Application 구현에 사용 4. 연결지향 양방향 전이중 통신 - 작동 원리 1. Opening Handshake 웹 소켓 클라이언트에서 Handshake 요청(HTTP Upgrade)을 하고 이에 대한 응답으로 101(Protocol 전환 승인)을 받는다. Header 정보는 아래와 같다. - Upgrade : Protocol 전환을 위해 사용함. WebSocket 요청시 반드시 W..
실행 컨텍스트(Execution Context) - 실행 컨텍스트 (Execution Context) : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다. - 호이스팅 발생 (호이스팅이 궁금하다면 보러 가기) - 외부 환경 정보를 구성 - this 값을 설정 실행 컨텍스트를 Call Stack에 쌓는 경우는 아래와 같다. 1. 전역 코드 : 전역 영역에 존재하는 코드 2. Eval 코드 : eval 함수로 실행되는 코드 (eval은 현재는 안 쓰는 것을 권장하며, 오히려 evil이라는 소리를 들음) 3. 함수 코드 : 함수 내에 존재하는 코드 4. 블록 문 : { } 안에 있는 코드 (ES6 이후) - 실행 컨텍스트 구성 - Variable Environment : 현재 컨..
DNS(Domain Name System) - DNS (Domain Name System) : Host의 Domain Name을 네트워크 주소로 변환하거나, 그 반대의 역학을 수행하는 시스템이다. 인터넷의 DNS는 이름과 숫자 간의 매핑을 관리하는 마치 전화번호부 같은 느낌 - Domain 구조 1) Domain은 전 세계적으로 고유하게 존재함 2) 정해진 규칙, 체계에 따라 만들어지며 임의로 생성, 변경이 불가능 3) 모든 Domain 은 .(Dot) 또는 Root라 불리는 Domain 아래에 계층적 구조로 구성 - DNS 구성 요소 1) Domain Name Space : DNS가 관리하는 아래와 같은 계층적 구조 2) Resolver : 웹 브라우저와 같이 DNS 클라이언트의 요청을 Name Server로 전달하고 Name Server로부터..
반응형

티스토리툴바