(유)낭만개발자

본문 바로가기

살짝 구운 김 유나

최신 글

[Lv.2] 석유 시추 - JavaScript 문제 https://school.programmers.co.kr/learn/courses/30/lessons/250136 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 각 영역에 대해 너비 우선 탐색을 하며 석유가 있는 영역에 oilId를 부여한다. oilId를 key로, 영역의 크기를 value로 하는 자료를 저장한다. 이차원 배열에 oilId를 값으로 갖는 석유 지도(?)를 만든다. 세로로 한 줄씩 순회하며 마주치는 석유 영역의 크기를 합산한다. 단, 이전에 합산했던 석유 영역은 건너뛰어야 한다. 코드 function solution(land) .. 2024.01.04
[React] i18n으로 다국어 지원하기 (i18next, react-i18next) 프로젝트에서 다국어 지원 기능을 적용하게 되었다. 나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다. 처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,, 그래서 제공될 다국어도 json으로 직접 작성해야 한다! 프로젝트에서는 라이브러리 i18n 을 사용했다. Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설.. 2023.10.22
React를 위한 상태관리 라이브러리 - Recoil https://recoiljs.org/ko/docs/introduction/installation 설치 | Recoil NPM recoiljs.org Recoil? 2020년에 Facebook에서 발표한, React 전용 상태관리 라이브러리이다. Recoil을 통한 상태관리는 아주 간결하다는 장점이 있다. Redux의 경우 Flux 패턴을 사용하여 안정적으로 상태관리가 가능하지만, React 전용 라이브러리가 아니다. 초기 세팅이 요구된다. 비동기 데이터를 사용하려면 추가적인 라이브러리 설치가 필요하다. 많은 양의 **보일러플레이트 코드를 작성해야 한다. 는 단점을 가지고 있기도 하다. Recoil은 이러한 단점을 보완한다. ** Boilerplate Code : 변화 없이 여러 군데에서 반복되는 코드 .. 2023.09.12
[모던 자바스크립트] 38장 브라우저의 렌더링 과정 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링(출력)하는지 살펴보자. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 .. 2023.08.06
[모던 자바스크립트] 26장 ES6 함수의 추가 기능 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. ES6 이전의 함수는 다음과 같이 활용될 수 있었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메.. 2023.07.25
[모던 자바스크립트] 16장 프로퍼티 어트리뷰트 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 16.1 내부 슬롯과 내부 메서드 앞으로 프로퍼티 어트리뷰트를 이해하기 위해서는 내부 슬롯과 내부 메서드의 개념에 대해 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호( [[…]] )로 감싼 이름들이 내부 슬롯과 내부 메서드다. 조금 쉽게 이해해보자면 ECMAScript 문서에서 자바스크립트 내부의 동작을 설명하기 위한 가상 메서드이다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 .. 2023.07.24
[모던 자바스크립트] 15장 let, const 키워드와 블록 레벨 스코프 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1 var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화 문이 있는 변수 선언은 var 키워드가 없는 것 처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시한다. var y; consol.. 2023.07.24
[Network] HTTP 버전 별 차이점 (0.9 / 1.0 / 1.1 / 2.0) HTTP? WWW 상에서 정보를 주고 받을 수 있는 프로토콜이다. 클라이언트가 HTTP를 통해 서버로 정보를 요청한다. 서버는 요청에 필요한 정보를 클라이언트에 전달한다. HTTP 1.1이 모든것의 기반이 된다. HTTP 0.9 원라인 프로토콜이다. 요청 메서드가 GET만 존재하기 때문이다. HTML 파일 유형만 전송할 수 있다. /* 요청 */ GET /page.html /* 응답 */ A very simple HTML page HTTP 1.0 확장성 있게 진화되었다. 헤더 개념이 도입되어 메타 데이터를 주고 받을 수 있게 되었다. 버전 정보와 요청 메서드가 함께 전송된다. 상태코드가 응답의 시작에 붙어 전송된다. HTML 이외에 Content-Type의 데이터를 전송할 수 있다. /* 요청 */ GE.. 2023.06.23
[Lv.2] 메뉴 리뉴얼 - JavaScript (feat. combination) 문제 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 순열 공부하면서 조합은 공부 안했던 사람,,, JS로 조합! 공부해자,, 주어진 코스별 가능한 조합을 찾는다. 그 중에서 2번 이상 주문된 조합을 찾는다. 또 그중에서 가장 많이 주문된 경우를 찾는다.. 그냥 문제에서 하라는대로 한다... 조합 구하기! // 조합을 구하는 함수 const combination = (arr, n) => { // 배열의 길이가 1일 때는 자기 자신을 담은 .. 2023.06.11
[Network] TCP와 UDP의 차이점 전송 계층은 송신자와 수신자 사이의 데이터 전달을 담당하는 계층이다. 그리고 그 데이터를 보내기 위해 사용하는 프로토콜에는 TCP와 UDP가 있다. 프로토콜이란? 더보기 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계를 말한다. ** 즉, 통신 규약 및 약속!! 기본요소) 1. 구문 : 전송하고자 하는 데이터의 혁식, 부호화, 신호 레벨 등을 규정 2. 의미 : 두 기기간의 효율적이고 정확한 정보 전송을 위한 사항과 오류 관리를 위한 제어 정보 규정 3. 시간 : 두 기기 간의 통신 속도, 메시시 순서 제어 등을 규정 TCP (Transmission Control Protocol) : 신뢰성 있는 데이터 통신을 가능하게 해주는 프로토콜 특징 설명 연결형 서비스 클라이언트가 연결.. 2023.06.06
[Network] OSI 7 Layer OSI 7 계층 데이터를 주고 받는 과정에는 많은 단계가 있고, 이를 역할에 따라 7개의 계층으로 나눈 것. 분리된 각 계층은 독립적인 역할을 할 수 있다. 문제가 발생했을 때에도 어떤 계층에 문제가 생겼는지도 파악이 가능하다. === 유지보수성과 용이성 up! 간단히 요약하자면 아래와 같다. 1. 물리계층 (Physical Layer) : 데이터를 전기적인 신호로 변환해서 주고 받는 기능을 담당한다. - 전송하려는 데이터가 무엇인지, 어떤 에러가 있는지는 신경쓰지 X 2. 데이터 링크 계층 (Data Link Layer) : 물리계층을 통해 송수신되는 정보의 오류와 흐름을 관리하여 안전한 정보의 전달을 수행할 수 있도록 한다. - MAC 주소로 통신함 - 종단 간 신뢰성 있는 전송을 보장 (흐름 제어 .. 2023.06.05
[Lv.3] 택배 마스터 광우 - JavaScript (근데 이제 Permutation을 곁들인..) 외... JS로 소프티어 푸는 사람 없는건대,,, 구글에 검색해도 잘 안나와서 넘 외롭다,,, 순열! 구하기! const permutation = (arr, num) => { // 길이가 1일때는 자기 자신이 담긴 리스트 반환 if(arr.length === 1) return [arr] const res = [] arr.forEach((v, idx, arr) => { // 현재 인덱스에 해당하는 원소를 제외, 나머지 원소로 이루어진 rest 배열 생성 const rest = [...arr.slice(0, idx), ...arr.slice(idx+1)] // rest 배열의 조합 구하기 const permutations = permutation(rest , num-1) // 현재 인덱스를 배열의 가장 앞쪽.. 2023.06.02

인기 글

Project

요약본

티스토리툴바