DH의 개발 공부로그

템플릿 문법Vue의 템플릿 문법이란 데이터를 렌더링 된 DOM에 바인딩하여 화면을 조작하는 방법을 말합니다.템플릿 문법은 크게 데이터 바인딩과 디렉티브 두가지로 나누어 볼 수 있습니다.먼저 데이터 바인딩과 관련 된 부분 먼저 살펴보면 아래와 같습니다.1. 데이더 바인딩텍스트 보간법텍스트 보간법은 뷰의 데이터 바인딩으로 사용되는 가장 기본적인 방법으로 "Mustache"(이중 중괄호) 문법을 사용하는 방법입니다메시지: {{ message }}해당 부분에서 이중 중괄호 안의 message는 컴포넌트의 message 데이터 값으로 대체가 됩니다.예를 들어보면 message값이 안녕하세요!라면 실질적으로는 아래와 같은 코드가 됩니다.메시지: 안녕하세요!그리고 message 값이 변경 될 때마다 변경된 값으로 업..

📋 특정 Commit만 원하는 브랜치에 Merge하기 GitHub나 GitLab을 이용해서 형상관리를 할 때 대부분이 develop브랜치에서 작업을 하다가 master에 병합(Merge)하는 식으로 작업을 많이 할 것 입니다. 그런데 develop 브랜치를 작업하다보면 여러 상황으로 인해 특정 부분의 커밋(commit)을 급하게 먼저 master 브랜치에 핫픽스 해야하는 경우가 발생할 수 있습니다. 그러면 이럴 때 그 부분만 다시 다른 브랜치에 작업을 하고 병합을 할 수도 있겠지만...그런 작업은 이미 작업을 했던 부분을 다시 작업을 해야하는 번거로운 작업이며, 여러 상황에 대응을 하려면 이미 작업했던 해당 커밋(commit)만 pull하고 merge하는게 좋은 방법입니다! 이런 상황에서 사용하는게 바로..

Vue.js Vue.js는 사용자 인터페이스 개발을 위한 자바스크립트 기반의 프로그레시브 프레임워크(Progressive Framework)입니다. 여기서 말하는 프로그레시브는 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해서 개발하는 것을 뜻하며, 한마디로 뷰는 웹과 앱의 장점을 모두 수용하여 진화된 웹앱을 개발할 수 있는 프레임워크 입니다. 또한 뷰는 프레임워크이기 때문에 라이브러리인 리액트와 다른 차이점도 있습니다. Vue.js의 장점 직관적이고 배우기 쉽다. 컴포넌트 기반의 프레임워크로 코드 재사용을 높이고, 양질의 코드를 개발할 수 있다. 앵귤러(Angular)의 장점(데이터 바인딩), 리액트(React)의 장점(가상 돔)을 다 가지고 있다. Vue.js 특징 1. MVVM 패턴 M..

스코프(Scope) 스코프란? 번역하면 "범위" 를 뜻하며, 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다. 예를 들어 이름이 같은 2개의 변수 중 어느 것을 참조해야 하는지, 어떻게 식별해야 할지를 정할 때 필요한 것으로, 정리하자면 "식별자에 접근할 수 있는 범위" 를 정의한 것을 스코프라고 합니다. 스코프의 구분 자바스크립트의 스코프를 구분해보면 2가지로 구분할 수 있습니다. 1. 전역 스코프 (Global Scope) 2. 지역 스코프 (Local scope)전역 스코프는 전체 범위, 코드 어디에서든 참조가 가능한 스코프를 말합니다. 그리고 지역 스코프는 해당 지..

trim() trim이란? 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환해주는 메서드입니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다. 간단하게 설명하자면 자바스크립트에서 문자열의 공백을 제거할 때 사용하는 메서드입니다. 예제 const greeting = ' Hello world! '; console.log(greeting); // output: " Hello world! "; console.log(greeting.trim()); // output: "Hello world!"; trimStart() 또는 trimEnd()를 이용하여 한 쪽의 공백만을 제거할 수도 있습니다. const gre..

호이스팅 (Hoisting) 호이스팅(hoisting)이란,끌어올리다, 올리다, 게양등의 뜻으로 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 쉽게 말해서 변수 및 함수 선언이 해당 스코프의 상단으로 "끌어올려지는" 현상을 말합니다. 예시 코드를 통해서 알아보겠습니다. // 입력 코드 console.log(a) // undefined var a = 5; // 실제로는 아래와 같이 실행 var a console.log(a) // undefined a = 5 즉, 코드의 실행 순서와는 상관없이 변수 및 함수 선언이 스코프 상단으로 옮겨지는 것을 의미합니다. var과 let, const의 차이 var, let, const는 자바스크립트에서 변수를 선언하기 위해 사용이 되는..

리액트 절대경로 Vite와 타입스크립트 상황에서의 절대경로 설정을 하는 방법은 정리를 했었는데 create-react-app로 리액트 프로젝트를 생성을 했을 때 절대경로 설정 하는 방법을 알아보겠습니다. [Vite, TypeScript] Vite + 타입스크립트 환경에서 절대 경로 설정하기! jsconfig.json 우선 package.json 과 같은 위치에 jsconfig.json 파일을 생성해줍니다. 그리고 json 파일 내부에 아래와 같이 작성한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그 후 다시 서버를 실행해주면, 기존의 방식인 상대경로가 아닌 절대경로로 설정할 수 있게 됩니다. // 상대경로 import Title ..

스택(STACK) 1. 스택이란? 스택은 "쌓다", "쌓이다"라는 의미로, 데이터를 차곡차곡 쌓아서 후입선출 형태 즉, LIFO(List In First Out) 의 자료구조 입니다. 위의 이미지와 같이 데이터가 아래에서 부터 순서대로 쌓이며 가장 마지막에 쌓아둔 데이터부터 삭제해나가는 구조를 가졌습니다. 2. 스택의 특징 스택 내부에는 top을 통해서만 접근이 가능합니다. top은 제일 최상위에 위치한 데이터를 반환합니다. 스택에 데이터를 삽입할 때는 push를 이용하여 top 위에 쌓게 됩니다. 스택에서 데이터를 삭제할 때는 pop으로 top에 위치한 데이터를 삭제하게 됩니다. 3. 스택의 장단점 top을 통해 데이터에 접근하기 때문에 접근, 삽입, 삭제가 빠르다. top을 통해서만 접근이 가능하기 ..