제리코드르렁

1. 모듈의 필요성자바스크립트는 초기에 작은 규모의 스크립트 작성에 사용되었지만, 점점 애플리케이션이 복잡해지면서 코드를 체계적으로 관리할 필요가 생김. 여러 기능을 하나의 파일에 모두 작성하면 코드가 복잡해지고, 변수와 함수의 충돌이 발생할 가능성이 높아짐. 이러한 문제를 해결하기 위해 모듈화가 필요함.모듈화를 통한 장점:코드 재사용: 자주 사용되는 기능을 모듈로 분리하여 여러 곳에서 사용할 수 있음.유지보수 용이: 코드를 기능별로 분리하여 관리하기 쉽게 만듦.충돌 방지: 모듈 내부의 변수와 함수가 전역 스코프를 오염시키지 않음. 2. ES6 모듈 시스템ES6에서는 모듈을 표준화하여 import와 export를 사용해 모듈 간 데이터를 주고받을 수 있게 만듦. 이를 통해 각 파일을 독립적인 모듈로 만들..

더 자세하게 알아보자 표현식 삽입템플릿 리터럴은 변수뿐만 아니라 표현식도 삽입할 수 있음. ${} 안에 수식, 함수 호출, 조건문 등을 포함할 수 있으며, 그 결과값이 문자열로 자동 변환됨.const a = 5;const b = 10;const result = `The sum of ${a} and ${b} is ${a + b}.`;console.log(result); // "The sum of 5 and 10 is 15."${a + b}는 5 + 10이 계산되어 15로 출력됨.여러 줄 문자열 (Multi-line String)템플릿 리터럴을 사용하면 여러 줄 문자열을 매우 쉽게 작성할 수 있음. 기존에는 \n을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대..

더 자세하게 알아보자 표현식 삽입템플릿 리터럴은 변수뿐만 아니라 표현식도 삽입할 수 있음. ${} 안에 수식, 함수 호출, 조건문 등을 포함할 수 있으며, 그 결과값이 문자열로 자동 변환됨.const a = 5;const b = 10;const result = `The sum of ${a} and ${b} is ${a + b}.`;console.log(result); // "The sum of 5 and 10 is 15."${a + b}는 5 + 10이 계산되어 15로 출력됨.여러 줄 문자열 (Multi-line String)템플릿 리터럴을 사용하면 여러 줄 문자열을 매우 쉽게 작성할 수 있음. 기존에는 \n을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대..

**리터럴(Literal)**은 프로그래밍에서 값을 직접 작성한 것을 의미함. 즉, 코드를 작성할 때 변수나 상수를 사용하지 않고, 값을 직접적으로 표현하는 방식임. 자바스크립트와 같은 언어에서 다양한 **자료형(숫자, 문자열, 배열, 객체 등)**을 리터럴로 표현할 수 있음. 리터럴은 코드를 더 직관적으로 작성할 수 있게 해주며, 데이터를 쉽게 표현할 수 있게 해줌. 1. 숫자 리터럴 (Numeric Literal)숫자를 직접적으로 나타내는 방식임. 정수 또는 실수 형태로 표현할 수 있음.const age = 29; // 숫자 리터럴 (정수)const pi = 3.14; // 숫자 리터럴 (실수)2. 문자열 리터럴 (String Literal)문자열을 표현할 때 사용하며, 큰따옴표("), 작은따옴표('..

스코프 (Scope) 는 변수나 함수가 유요한 범위를 의미즉, 코드 내에서 특정 변수나 함수가 어디에서 접근 가능하고, 어디에서 사용할 수 있는지를 결정하는 개념임자바스크립트에서는 스코프가 전역스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉘며, ES6에서 추가된 블록 스코프 (Block Scope)도 중요한 요소이다. 1. 전역 스코프(Global Scope)전역 스코프에서 선언된 변수나 함수는 코드 전체에서 접근 가능함.브라우저 환경에서는 **전역 객체(window)**에 변수와 함수가 자동으로 추가되며, 어디서든 참조할 수 있음.var globalVar = "I am global";function showGlobal() { console.log(globalVar); //..

자바스크립트의 this는 함수가 호출될 때 그 함수가 어떻게 호출되었는지에 따라 동적으로 결정되는 값임.this는 자바스크립트의 실행 컨텍스트(Execution Context)에 따라 값이 달라지며, 상황에 따라 가리키는 대상이 달라짐. 이 때문에 this는 자바스크립트에서 종종 혼란을 일으키는 개념 중 하나임. 자바스크립트의 this 기본 개념전역 컨텍스트에서의 this:브라우저 환경에서는 **전역 객체인 window**를 가리킴.console.log(this); // window 객체함수 내부에서의 this:일반 함수에서는 함수 호출 방식에 따라 this가 달라짐.기본적으로 전역 객체(window)를 가리킴.function showThis() { console.log(this);}showThis()..

async/await는 비동기 작업을 쉽게 처리할 수 있도록 ES8에서 도입된 자바스크립트 기능임.Promise 기반의 비동기 코드를 동기식 코드처럼 작성할 수 있게 해주는 문법으로, 비동기 작업의 가독성을 크게 향상시킴.Q. (비)동기가 뭔데 ?A. https://jerrycodezzz.tistory.com/54 동기(Synchronous) 비동기(Asynchronous)1. 동기(Synchronous)동기적 처리는 작업이 순차적으로 실행되는 방식임. 하나의 작업이 끝날 때까지 다음 작업이 대기하며, 작업이 완료된 후에야 다음 작업이 실행됨. 즉, 코드가 위에서 아래로 순jerrycodezzz.tistory.com async 함수async 키워드를 함수 앞에 붙이면, 해당 함수는 자동으로 Promise..

1. 동기(Synchronous)동기적 처리는 작업이 순차적으로 실행되는 방식임. 하나의 작업이 끝날 때까지 다음 작업이 대기하며, 작업이 완료된 후에야 다음 작업이 실행됨. 즉, 코드가 위에서 아래로 순서대로 실행됨.특징:작업이 직렬적으로 처리됨.하나의 작업이 끝나기 전까지는 다음 작업을 시작할 수 없음.결과를 바로 얻을 수 있음.function task1() { console.log("Task 1 시작"); console.log("Task 1 끝");}function task2() { console.log("Task 2 시작"); console.log("Task 2 끝");}task1();task2();Task 1 시작Task 1 끝Task 2 시작Task 2 끝여기서는 task1이 끝난 후에..

v-text, v-html: 텍스트와 HTML 바인딩.v-bind: 속성 값 바인딩.v-model: 양방향 데이터 바인딩.v-show, v-if: 조건부 렌더링.v-for: 리스트 반복 렌더링.v-pre, v-once, v-cloak: 렌더링 최적화 및 구문 무시. v-text요소의 텍스트 내용을 바인딩하는 디렉티브. HTML 태그를 무시하고 일반 텍스트로만 렌더링함.message 변수의 값이 텍스트로 출력됨. v-html요소에 HTML 내용을 바인딩함. 텍스트 대신 HTML 태그를 렌더링할 수 있음.htmlContent에 HTML 코드가 들어있으면 그 내용을 그대로 렌더링함. v-bindHTML **속성(attribute)**에 데이터를 바인딩할 때 사용함. 동적으로 속성 값을 설정할 수 있음. ima..

기본 파라미터 (Default Parameter) & 가변 파라미터 (Reset Parameter) 는 ES6에서 함수 매개변수를 더욱 유연하게 사용할 수 있도록 도입된 기능임 1. 기본 파라미터 (Default Parameter)기본 파라미터는 함수 호출 시 특정 인자가 전달되지 않았을 때 미리 정의된 기본값을 사용할 수 있게 해주는 기능임. 예전에는 함수 안에서 매개변수가 undefined인지 확인하고 값을 할당하는 식으로 처리했지만, ES6부터는 더 간결하게 기본값을 지정할 수 있음.function greet(name = "Guest") { console.log(`Hello, ${name}!`);}greet(); // Hello, Guest! (인자가 없을 경우 기본값 사용)greet("Jerry..

ES6 가 무엇인가 ?자바스크립트의 새로운 버전임. 자바스크립트를 더 쉽게 쓰고, 효율적으로 만들기 위해 나온 표준.원래 자바스크립트도 잘 작동했지만, ES6로 업데이트 되면서 여러 기능이 추가되고 개선된 거임 ! 비유로 말하자면, 스마트폰 : 자바스크립트 = 소프트웨어업데이트 : ES6  ES6의 핵심기능1. let 과 const2. 화살표 함수 (Arrow Function)3. 템플릿 리터럴 (Template Literals)4. 디스트럭처링 할당 (Destructuring Assignment)5. 클래스 (Class)6. Promise7. 모듈 (Modules) 1. let과 const let과 const는 ES6에서 도입된 새로운 변수 선언 방법임.기존의 var는 함수 스코프만을 지원했지만, le..

Vue.js에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다. 컴포넌트 기반의 프론트엔드 프레임워크에서는 컴포넌트 간의 데이터 흐름이 매우 중요하며, props는 그 중에서도 자식 컴포넌트가 부모로부터 필요한 정보를 받아올 수 있도록 하는 메커니즘이다.비유를 들자면, 부모가 자식에게 선물을 주는 것과 같다. 부모 컴포넌트가 자식 컴포넌트에 전달할 데이터를 준비하고, 자식 컴포넌트는 그 데이터를 받을 준비를 해야 한다.예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 사용자 이름을 전달한다고 가정하자: 여기서 부모 컴포넌트는 userName이라는 속성으로 "홍길동"이라는 값을 자식 컴포넌트에 전달한다. 자식 컴포넌트에서는 props를 통해 이 값을 받을 수 있다: 사용..

*쿠키(Cookie)**는 웹 브라우저에 작은 데이터 조각을 저장하는 데 사용되는 방법입니다. 서버와 클라이언트 간에 상태를 유지하거나 사용자 식별 정보를 저장하기 위해 사용됩니다. 쿠키는 주로 사용자 세션, 사용자 추적, 인증 상태를 관리하는 데 활용됩니다.쿠키의 주요 특징크기 제한: 쿠키는 하나의 도메인 당 약 4KB 정도의 데이터를 저장할 수 있습니다.만료 기한 설정: 쿠키는 만료 기한을 설정할 수 있어, 일정 기간이 지나면 자동으로 삭제됩니다.도메인별 격리: 쿠키는 생성된 도메인과 경로에서만 접근할 수 있습니다. 다른 도메인에서는 접근할 수 없습니다.자동 전송: 쿠키는 설정된 도메인으로 HTTP 요청이 전송될 때마다 자동으로 서버에 전송됩니다.쿠키 사용 방법1. 쿠키 설정 (JavaScript)브..

LocalStorage는 브라우저에서 제공하는 클라이언트 측 저장소로, 사용자의 데이터를 브라우저에 영구적으로 저장할 수 있는 공간입니다. LocalStorage에 저장된 데이터는 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 유지됩니다. 쿠키와 달리 만료 기한이 없으며, 비교적 큰 용량의 데이터를 저장할 수 있습니다.LocalStorage의 주요 특징영구 저장: LocalStorage에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다.용량 제한: 일반적으로 도메인당 약 5MB의 데이터를 저장할 수 있습니다.도메인별 격리: 각 도메인에 대해 격리되어 있어, 다른 도메인에서는 접근할 수 없습니다.키-값 쌍: LocalStorage는 문자열 형태의 키-값 쌍으로 데이..

Pinia - Persist는 Pinia로 관리하는 상태를 브라우저의 로컬 저장소(LocalStorage)나 세션 저장소(SessionStorage)에 자동으로 저장하고 유지할 수 있도록 도와주는 플러그인입니다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 상태를 유지할 수 있습니다.Pinia - Persist의 주요 특징자동 상태 저장: 스토어의 상태를 자동으로 로컬 저장소나 세션 저장소에 저장합니다.데이터 영속성: 페이지를 새로고침하거나 브라우저를 재시작해도 상태를 유지할 수 있어 사용자 경험이 향상됩니다.설정의 유연성: 어떤 스토어를 어디에 저장할지, 어떤 상태를 저장할지 등 다양한 설정이 가능합니다.Pinia - Persist 설치 및 사용 방법Pinia - Persist 설..

Pinia는 Vue 3를 위한 상태 관리 라이브러리입니다. 이전 버전의 Vue에서는 주로 Vuex를 사용했지만, Pinia는 Vuex의 다음 버전으로 간주되며, 더 직관적이고 사용하기 쉽게 만들어졌습니다.Pinia의 주요 특징간단한 API: Pinia는 Vuex보다 API가 더 간단하고 직관적입니다. 상태 관리에 필요한 개념을 최소화하여 더 쉽게 사용할 수 있습니다.Vue 3와 완벽한 호환: Pinia는 Vue 3의 Composition API와 완벽하게 호환되도록 설계되었습니다. Vue 3에서 상태 관리를 쉽게 구현할 수 있습니다.TypeScript 지원: Pinia는 TypeScript를 자연스럽게 지원하여 타입 안전성을 높여줍니다.모듈화: Pinia는 상태를 여러 스토어로 분리하여 관리할 수 있습니..

프레임워크와 라이브러리는 둘 다 소프트웨어 개발에서 사용하는 도구이지만, 그 사용 방식과 목적에서 차이가 있다. 차이를 이해하려면 제어권이라는 개념을 중심으로 설명할 수 있다.1. 라이브러리 (Library)정의: 라이브러리는 특정 기능을 쉽게 구현할 수 있도록 제공되는 재사용 가능한 코드 모음이다. 개발자가 필요할 때 직접 호출해서 사용하는 방식이다.제어권: 제어권은 개발자에게 있다. 즉, 개발자가 필요할 때 라이브러리의 기능을 가져와서 사용한다. 코드 흐름을 개발자가 결정한다.예시:React: React는 UI를 만들기 위한 라이브러리이다. 개발자가 원하는 방식으로 React를 호출해서 컴포넌트를 만들고 화면에 렌더링한다.Lodash: 자바스크립트 배열, 객체 처리와 같은 기능을 쉽게 해주는 라이브러..

1.1 justify-content (가로 축 정렬)이 속성은 Flexbox의 자식 요소들을 가로 방향으로 어떻게 배치할지 결정합니다. .container { display: flex; justify-content: center;}값:flex-start: 왼쪽 정렬 (기본값)center: 가운데 정렬flex-end: 오른쪽 정렬space-between: 자식 요소들 사이에 균등한 간격을 주되, 양 끝은 부모 요소에 붙음space-around: 자식 요소들 사이에 균등한 간격을 주되, 양 끝도 동일한 간격을 가짐space-evenly: 자식 요소들 사이와 부모의 양 끝까지 균등한 간격을 줌  1.2 align-items (세로 축 정렬).container { display: flex; align-i..

https://jerrycodezzz.tistory.com/44 CSS Flexbox 속성들1.1 justify-content (가로 축 정렬)이 속성은 Flexbox의 자식 요소들을 가로 방향으로 어떻게 배치할지 결정합니다. .container { display: flex; justify-content: center;}값:flex-start: 왼쪽 정렬 (기본값)center: 가운데jerrycodezzz.tistory.com 1. Flexbox (display: flex)Flexbox는 가로, 세로로 요소들을 쉽게 배치할 수 있게 해주는 레이아웃 도구입니다..parent { display: flex; /* Flexbox를 적용할 부모 요소 */ justify-content: cen..

import React from 'react';function Button({ label, onClick }) { return {label};}export default Button;

npx create-react-app 프로젝트이름

index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or se..

"emmet.includeLanguages" : { javascript" : "javascriptreact", "*html" : "html", } 1. "javascript": "javascriptreact"리액트에서 JSX 문법을 사용하기 때문에, javascript 파일 안에서도 HTML과 유사한 코드를 작성하게 된다.하지만, 기본적으로 Emmet은 .js 파일 안에서는 HTML 코드 자동 완성을 제공하지 않음이 설정을 추가하면, .js 파일에서도 Emmet이 리액트의 JSX 문법을 인식하고, HTML 태그 자동 완성 기능을 사용할 수 있게 됨.2. "*html": "html"이 부분은 모든 파일에서 HTML 자동 완성 기능을 제공하려는 설정리액트 뿐만 아니라, .html 확장자가 아니더라..

node_modules : 설치한 ㅁ도ㅠㄹ이 저장되는 장소public : index.html / src : 리액트를 작업할 폴더package.json : 라이브러리버전, 프로젝트 설정 기록

(nlpintent) ☁️  backend [2_branch] ⚡  git push origin 2_branchEnter passphrase for key '/Users/jerry/.ssh/id_rsa': Uploading LFS objects: 100% (2/2), 1.4 GB | 0 B/s, done.                                                                                                                                                            Enumerating objects: 89, done.Counting objects: 100% (89/89), done.Delt..

분명 맞는데 이렇게 나옴해결방법은eval "$(ssh-agent -s)"ssh-add ~/.ssh/id_rsa

과적합(Overfitting): 하이퍼파라미터를 너무 세밀하게 조정한 경우, 모델이 학습 데이터에 지나치게 맞추어져서 일반화 능력이 떨어질 수 있다. 이로 인해 새로운 데이터에 대한 성능이 저하될 수 있다.탐색 공간의 오류(Search Space Issue): 하이퍼파라미터 튜닝 시 잘못된 하이퍼파라미터 범위나 값들을 탐색할 수 있다. 예를 들어, 학습률이 너무 낮거나 높게 설정되면 최적화 과정에서 문제가 발생할 수 있다.데이터의 불균형(Data Imbalance): 하이퍼파라미터 튜닝 과정에서 특정 클래스나 패턴에 대한 가중치가 과도하게 조정되어, 모델이 데이터의 일부에만 적응할 수 있다. 이로 인해 전체적인 성능이 저하될 수 있다.과도한 복잡성(Too Much Complexity): 하이퍼파라미터를 ..

1. 데이터 전처리(Data Preprocessing)설명: 모델의 성능은 입력 데이터의 품질에 크게 좌우된다. 데이터의 전처리는 모델이 데이터를 더 잘 이해하고 학습할 수 있도록 도와준다.방법:데이터 정규화/표준화: 입력 데이터의 스케일을 맞춰 모델이 특정 특징에 과도하게 의존하지 않도록 한다.결측치 처리: 결측값을 적절히 처리하거나 제거하여 모델의 예측 성능을 저하시키지 않도록 한다.특징 엔지니어링(Feature Engineering): 중요한 특징을 새롭게 만들거나, 불필요한 특징을 제거하여 데이터의 품질을 높인다.효과: 데이터의 품질이 개선되면 모델이 더 잘 학습할 수 있고, 오버피팅(overfitting)이나 언더피팅(underfitting)을 줄일 수 있다.2. 특징 선택(Feature Sel..

GridSearchCV, RandomizedSearchCV, 그리고 Bayesian Optimizer는 머신러닝 모델의 하이퍼파라미터 튜닝을 위한 방법들이다. 각 방법은 특정 상황에서 유리하거나 불리할 수 있으며, 이러한 방법들을 비유를 통해 이해하면 더 쉽게 그 차이점을 파악할 수 있다.1. GridSearchCV개념: GridSearchCV는 설정된 하이퍼파라미터의 모든 조합을 일일이 테스트하여 최적의 조합을 찾는 방법이다. 예를 들어, 두 개의 하이퍼파라미터가 있고 각각 3개의 값을 가진다면, 총 3x3=9개의 조합을 모두 시도해 보는 것이다.비유: 축구장에서 골을 넣기 위해 여러 위치에서 슛을 해보는 것과 같다. 모든 위치에서 슛을 해본다면, 가장 정확한 위치를 찾을 수 있다. 그러나 모든 위치에..

원인 : 모델이 대부분 클래스에 대해 낮은 성능 보임, 데이터 불균형해결방법 : 메타정보 추가 및 하이퍼파라미터 튜닝param_grid = { 'max_depth': [3, 5, 7, 9], 'learning_rate': [0.01, 0.1, 0.2], 'n_estimators': [100, 200, 300], 'subsample': [0.8, 1.0], 'colsample_bytree': [0.8, 1.0]}grid_search = GridSearchCV(estimator=xgb_model, param_grid=param_grid, cv=3, n_jobs=-1, verbose=2, scoring='f1_weighted')grid..