2024/12 20

[Backend] Dorker 총 정리

이번에 백엔드를 조금씩 맡으면서 도커를 사용할 일이 생겼으나 실제 설명과 그 때마다 검색하는 것으로는 영 이해가 되지 않아 이 참에 한 번 크게 정리하고자 했다.Docker?애플리케이션을 실행하는 상자(컨테이너)를 만드는 도구이 상자(컨테이너) 안에는 애플리케이션과 그것을 실행 하는 데 필요한 모든 것이 들어 있음.즉, 애플리케이션이 어디서든 동일한 환경에서 실행되도록 상자(컨테이너)를 만들어서 이 문제를 해결함Docker는 이사박스 , 즉 물건을 상자에 넣으면, 어디로 이사를 가든 그 상자 안에 있는 물건은 똑같이 유지됨.Docker는 어플리케이션이 어디서든 동일한 환경에서 실행되도록 상자(컨테이너)를 만들어서 이 문제를 해결해줌컨테이너?컨테이너는 Docker가 만든 애플리케이션을 실행하는 상자컨테이너..

BackEnd Skils 2024.12.30

[모딥다] JS (10) - strict mode

1. 암묵적 전역: 변수의 선언이 존재하지 않지만 자바스크립트 엔진이 암묵적으로 전역 객체에 프로퍼티를 동적 생성하는 것: 아래처럼 x는 선언되지 않았기 때문에 foo 스코프를 넘어 전역 스코프로 넘어갔을 때도 x 변수는 선언이 되지 않아 Referrence Error가 떠야할 것 같지만 그렇지 않고 전역객체에 암묵적으로 x 프로퍼티를 동적 생성함.: 그래서 꼭 var , let ,const 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. function foo() { x = 10; } foo(); console.log(x); 2. strict mode: 그럼에도 불구하고 오타나 문법 지식의 미비로 인한 실수는 발생하기 때문에 이러한 오류를 발생시키지 않기 위한 환경을 만드는 것이 중요하다..

[모딥다] JS (9) - 프로토타입

1. JavaScript: 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어: JS는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라고 할 수 있다.: 원시 타입의 값을 제외한 나머지 값들(함수 , 배열 , 정규 표현식 등)은 모두 객체라고 할 수 있다. 2. 객체지향 프로그래밍: 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임: 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작함: 실체는 특징이나 속성을 나타내는 속성(어트리뷰트 / 프로퍼티) : 추상화는 다양한 속성 중에서 필요한 속성만 간추려 내어 표현하는 것ex) "이름"과 "주소"라는 속성을 갖는 person 객체c..

[모딥다] JS (8) - 함수와 일급객체

1. 일급객체란?: 아래와 같은 조건을 만족하는 객체를 일급 객체라 한다.1) 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능함2) 변수나 자료구조(객체, 배열) 등에 저장할 수 있다.3) 함수의 매개변수에 전달 할 수 있다.4) 함수의 반환값으로 사용할 수 있다.=> JS의 함수는 위 조건을 모두 만족하므로 일급 객체다.=> 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다.  2. 일급객체로서 함수가 가지는 가장 큰 특징: 일반 객체와 같이 함수의 매개변수에 전달 할 수 있으며, 함수의 반환값으로도 사용할 수 있다는 것이다. 3. 함수 객체의 프로퍼티: 함수는 객체기 때문에 프로피터를 가질 수 있다.function square(number) { return n..

[Frontend] 블로그 개발 일지 (1) - monorepo 도입

요즘 AI를 사용해서 효율성 향상을 위한 방법을 많이 고민하고 있는데 개인적으로 CS 및 개념 공부 외에도 실제로 향상성을 높이기 위해 노력해야한다는 것을 절실히 느끼고 있다. 그래서 cursor ai를 사용해서 사이드 프로젝트를 해보려고 하는데 여기서 가장 큰 목표는 두 가지로 잡았다.1. 개발 속도 향상2. AI를 활용하여 빠른 개발 지식 습득  그래서 사이드 프로젝트의 일환으로 이전에 사수분께서 프론트엔드 개발자가 자기 블로그쯤은 만들어봐야 한다는 말씀이 생각나 내 블로그 제작을 목표로 시작 했다.  그 중 첫 번째로 프론트엔드와 백엔드 모두 경험해보고 싶었고 Next.js로 프론트,백 둘다 하는 것도 고려해봤으나 (사실 제일 적합한 방식이라고 생각한다.) 이왕 사내에서 express도 차후 사용해..

FrontEnd Skils 2024.12.22

[Frontend] Next.js 15 버전 params 에러

1. 개발 개요cursor ai에 익숙해지기 위해 사이드 프로젝트의 일환으로 블로그를 만들던 중 Next.js로 프론트엔드를 구성했는데 아래와 같은 에러를 보았다. 보아하니 블로그 상세 페이지 즉,  id를 params로 받아오는 곳의 타입 문제가 발생했는데 예전에 Next.js를 사용할 때와 동일한 코드와 로직이였는데 pwa 도입 후 테스트를 위해 build 하던 도중 발생한 에러였다. 한 번도 본 적이 없던 에러라 구글링을 해보니 Next.js 15버전부터 params와 searchParams의 접근 방식이 바뀌었다고 한다.Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'. Types ..

FrontEnd Skils 2024.12.22

[모딥다] JS (7) - 생성자 함수에 의한 객체 생성

1. Object 생성자 함수: new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환됨.const person = new Object();// 프로퍼티 추가person.name = "Lee"; : 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함.: 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.: :객체 생성 방법은 객체 리터럴을 사용하는 것이 더 간편한다. 2. 생성자 함수1) 객체 리터럴에 의한 객체 생성 방식의 문제점: 직관적이고 간편하나 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적임const circle1 = { radius: 5, getDiameter() ..

[모딥다] JS (6) - 프로퍼티 어트리뷰트

1. 내부 슬롯과 내부 메서드1) 내부 슬롯 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Psuedo Property) 2) 내부 메서드 : 의사 메서드 ex) ([[...]]) 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체: 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함: 프로퍼티 상태란 프로퍼티의 값, 값의 갱신 가능 여부 , 열거 가능 여부, 정의 가능 여부를 말한다.: 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯이다.ex) [ [ Value ] ] , [ [ Enumerable ] ] , [ [Configurable ] ]= 프로퍼티 ..

[모딥다] JS (5) - var , let ,const 키워드와 블록 레벨 스코프

1. var 변수 문제점1) 변수 중복 선언 허용2) 함수 레벨 스코프 : var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정함.: 따라서 함수 외부에서 var로 선언한 변수는 코드 블록 내 선언해도 모두 전역 변수가 됨.3) 변수 호이스팅: 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작함 2. let 키워드: 변수 중복 선언 금지: 블록 레벨 스코프 - 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름: 변수 호이스팅 발생 X: var 키워드와 달리  "선언 단계" 와 "초기화 단계"가 분리되어 진행 된다.: 따라서 초기화 단계 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생함: 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 ..

[모딥다] JS (4) - 전역 변수의 문제점

1. 변수의 생명 주기1) 지역 변수의 생명 주기: 변수는 선언에 의해 생성되고 할당을 통해 값을 갖음. 그리고 소멸하는데 이러한 것을 생명 주기라고 함.: 만약 생명주기가 없다면 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.: 변수 선언은 선언문이 어디에 있든 상관 없이 가장 먼저 실행됨, 즉 한 줄 씩 순차적으로 실행되는 런타임 시점이 아닌 시작 전 자바스크립트 엔진에 의해 먼저 실행된다. => 전역 변수에 한정된 설명: 지역 변수는 함수 몸체의 다른 문들이 순차적으로 실행 되기 이전에 자바스크립트 엔진에 의해 변수가 선언되고 undefined로 초기화 된다. 그 후 함수 몸체의 다른 문들이 순차적으로 실행 될 때 값의 할당이 이루어진다. :  즉, 지역 변수의 생명 주기는 함수의 생명 주기..