본문 바로가기
  • 살짝 구운 김 유나

분류 전체보기144

[Git] 브랜치명 변경하고 원격 저장소에 반영하기 보호되어 있는 글 입니다. 2024. 4. 18.
[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. 1. 4.
[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. 9. 12.
[모던 자바스크립트] 38장 브라우저의 렌더링 과정 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링(출력)하는지 살펴보자. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 .. 2023. 8. 6.
[모던 자바스크립트] 26장 ES6 함수의 추가 기능 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. ES6 이전의 함수는 다음과 같이 활용될 수 있었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메.. 2023. 7. 25.
[모던 자바스크립트] 16장 프로퍼티 어트리뷰트 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 16.1 내부 슬롯과 내부 메서드 앞으로 프로퍼티 어트리뷰트를 이해하기 위해서는 내부 슬롯과 내부 메서드의 개념에 대해 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호( [[…]] )로 감싼 이름들이 내부 슬롯과 내부 메서드다. 조금 쉽게 이해해보자면 ECMAScript 문서에서 자바스크립트 내부의 동작을 설명하기 위한 가상 메서드이다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 .. 2023. 7. 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. 7. 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. 6. 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. 6. 11.