양씨

요즘 코딩테스트 준비를 시작했다코딩테스트 문제를 푸는데 vscode에다가 문제를 풀고 복붙해서 채점을 받는 형식을 사용하는데 자동완성 기능이 자동으로 켜져 있어서 이 기능을 끄고 푸는 것이 실력향상에 도움이 될 듯싶어 알아보다가 vscode에서 프로젝트별로 자동완성을 끌수 있는 방법이 있어 기록해두려 한다. 프로젝트 루트에 .vscode 폴더 안 settings.json을 만든다아래를 복붙 { "editor.quickSuggestions": { "other": false, "comments": false, "strings": false }, "editor.suggestOnTriggerCharacters": false, "editor.suggest.sho..

최근, 모던 리액트 딥다이브를 읽고 있다.  csr, ssr 차이 파트를 읽던 중 "웹 렌더링은 html을 파싱하여 dom을 만들고, css를 파싱하여 cssom을 만든다"라는 구문을 자연스럽게 읽는 순간, 파싱의 정확한 개념이 뭐지란 생각이 들었다. 면접을 준비하거나 그 전에도 자연스럽게 파싱,파싱 했는데 정확히 무슨 개념인지 모르고 사용한 것 같아서 정리해 보려한다. 파싱이란?언어학에서는 문장을 그것을 이루는 구성 성분과 그 사이 위계 질서를 분석하여 문장의 구조를 결정하는 것컴퓨터과학에서는 일련의 문자열을 토큰으로 분해하고 그것들로 이루는 트리를 만드는 것결국, 파싱은 주어진 데이터를 해석하고 분석하여 원하는 형식 또는 구조로 변환하는 작업을 의미한다 파싱은 토큰화, 구문 분석의 단계로 나뉘어진다토..

js에서 this는 자바와 같은 일반 프로그래밍 언어와 다르게 특이하게 작동한다.js에서 this는 현재 실행 중인 코드에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 다만, 함수 호출 방식에 따라 동적으로 결정된다. 함수를 선언할 때 this가 결정되는 것이 아닌 함수를 호출할 때 this가 결정된다는 의미 함수를 어디서 호출하느냐에 따라 그 의미가 달라지기 때문에 좀 세분화 해보았다(굉장히 오묘하게 작동하긴한다..js 개발자가 오류라고 인정했다는,.) this 바인딩전역 컨텍스트: 전역 범위에서 this는 전역 객체를 참조(브라우저에서는 window 객체)일반 함수 호출: 일반 함수 호출 시, this는 전역 객체를 참조(엄격 모드에서는 undefined)생성자 호..

타입과 인터페이스는 우리가 원하는 식으로 타입을 설정해줄 수 있게 도와준다. 사실 둘의 역할이 비슷해보이기도 한다. 이 둘의 차이를 명확히 알아보려한다!  타입스크립트에서 type과 intertace는 값의 타입에 대한 구조를 정의하기 위해 사용한다.비슷해보이지만 각 타입을 정의 가능여부나 확장, 병합을 할 때의 차이가 있다.//타입type User = { name: string; id: number;};//인터페이스interface User { name: string; id: number;}  원시, 유니온, 튜플 타입을 정의할 때type을 이용하면 원시, 유니온, 튜플 타입을 정의할 수 있지만,//원시 타입type MyString = string;const str: MyString = 'Hel..

초기 웹사이트는 텍스트와 링크로만 구성된 정적인 페이지였다. 사용자가 하이퍼텍스트를 통해 문서 간을 이동하는 것이 전부였고, 동적인 상호작용은 불가능했다. 그러나 웹사이트가 많아지고 사람들이 웹사이트에서 더 많은 액션을 원하게 되면서, 단순한 하이퍼텍스트의 한계를 넘어서는 동적인 페이지가 필요해졌다. 자바스크립트는 이러한 요구를 충족시키기 위해 탄생한 언어이다. 자바스크립트는 1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)가 10일 만에 만들었다고 알려져 있다. 초기에는 간단한 스크립트 언어로 시작했지만, 다음과 같은 발전을 통해 그 성능과 활용 범위가 크게 확장되었습니다.V8 엔진: 2008년 구글이 만들었고 js를 컴파일하여 매우 빠른 실행 속도를 제공한다. Node...

템플릿 리터럴은 ES6에서 도입된 기능으로 문자열을 더 쉽게 다룰 수 있게 해주는 문법이다.  템플릿 리터럴 도입 전문자열 여러줄const multiLine = "이것은 여러 줄에 걸쳐\n" + "작성된 문자열입니다.";console.log(multiLine); 문자열에 변수 포함const name = 'yang';const greeting = 'hello, ' + name + '!';console.log(greeting); //hello, yang!   템플릿 리터럴(Template Literals)템플릿 리터럴은 백틱(``)을 사용하여, 이전과 달리 아래와 같이 가독성 좋고, 간결하게 사용할 수 있게 되었다. 문자열 여러줄const multiLine = `이것..

먼저, 클로저에 대해 살펴보기 전에 스코프에 대한 개념을 간단히 정리해보자 스코프(scope)스코프는 변수가 접근할 수 있는 범위를 뜻한다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있다. 전역 스코프전역 스코프에 선언된 변수는 코드 어디서든 접근 가능하다. 전역 스코프에 변수를 선언하려면 함수나 블록 외부에서 선언하면 된다.var globalVar = 'I am global'; // 전역 변수function globalExample() { console.log(globalVar); // 'I am global'}globalExample();console.log(globalVar); // 'I am global' 지역 스코프js에서 지역 스코프는 블록 스코프와 함수 스코프로 나뉘어진다.보통의 경우..

npm과 npx의 차이점에 대해 자세히 알아보자! npmnpm(Node Package Manager)는 Node.js 패키지 매니저이다. npm을 사용하면 다양한 패키지(모듈)을 쉽게 설치하고 관리하는 것이 중점이다. npm은 아래와 같이 사용하는데 패키지 설치: npm install 명령어를 사용하여 패키지를 설치모든 의존성 패키지는 package.json에서 npm install로 설치하여 원하는 패키지를 로컬(node_modules)에 설치글로벌 설치: -g 옵션을 사용하여 패키지를 전역(global)으로 설치스크립트 실행: package.json 파일에 정의된 스크립트를 실행예를 들어, npm run build는 build 스크립트를 실행패키지 관리: 의존성 버전 관리, 업데이트 등을 쉽게 가능..

REST API란 REST의 원리를 따르는 API를 의미하고, RESTFUL이란 REST의 원리를 따르는 시스템을 의미한다그렇다면 REST란 무엇일까? REST란 HTTP URI를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. REST는 자원(Resource), 행위(Verb), 표현(Representation)의 세 가지 요소로 구성된다자원(Resource): `http://example.com/users/1`는 ID가 1인 사용자 자원을 식별행위(Verb): GET, POST, PUT, DELETE를 통해 자원에 대한 동작을 정의표현(Rep..

어디서 잘못된 글을 몇번봐서인가..let, const는 호이스팅 되지 않는다고 알고 있던 사람이었다부끄럽긴 하지만 이참에 다시 자세히 알아보았다 먼저 js에서 변수는 선언, 초기화, 할당 3가지 단계를 거친다선언: 변수의 이름을 등록(var, let, const로 변수를 선언)초기화: 메모리 공간을 확보하고 초기값을 설정할당: 변수에 실제 값을 할당var x; // 선언console.log(x); // undefinedx = 5; // 할당 console.log(x); // 5let y; // 선언y = 10; // 할당console.log(y); // 10const z = 15; console.log(z); // 15 여기서 특징은 var는 선언과 초기화가 동시에 이루어지고, const는 선언과 동시에..