2. FrontEnd/Javascript

[JS] MVC패턴 & Flux패턴

MVC패턴 (Model, View, Controller) : 양방향 데이터 바인딩 Model, View, Controller 의 약자이다 Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다 Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여짐 사용자가 View를 통해 데이터를 입력하면, View역시 Model을 업데이트 할 수 있다는 점 즉, 데이터가 양방향으로 흐를 수 있다는 것 만약 여기서 규모가 커지면 Model과 View가 많아져 View가 다양한 상호작용을 위해 여러개의 Model을 동시에 업데이트하고 Model역시 여러개의 View에 데이터를 전달하는 상황이 발생한다. 한 Model이 업데이트되면 View가 업데이트되고, 업데..

2024. 4. 3. 17:17

3. Backend/NestJS

[코드팩토리 NestJS 강의] Query and Parameters (쿼리와 파라미터)

1. REST API 세트(GET, POST, PUT, DELETE) Method 주소 의미 사용 [GET] http://localhost:3000/posts 다수의 Post를 가져온다 Query 사용 [GET] http://localhost:3000/posts/11 11이라는 ID를 갖고있는 Post하나를 가져온다. Query 사용 [POST] http://localhost:3000/posts 새로운 Post를 생성한다 Body 사용 [PATCH] http://localhost:3000/posts/8 8이라는 ID를 갖고있는 Post를 부분 변경한다. Body 사용 [PUT] http://localhost:3000/posts/8 8이라는 ID를 갖고있는 Post를 변경하거나 생성한다 Body 사용 [D..

2024. 3. 12. 16:29

2. FrontEnd/Javascript

[JS] This의 4가지 역할

▶️ This 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 경우 Java와 같이 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. this는 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서(=문맥에 따라서) 그 역할이 크게 4가지정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수(new) 호출 4. apply/call/bind 호출 1. 함수 호출 (일반함수 실행 방식 Regular Funct..

2023. 8. 31. 16:50

2. FrontEnd/TypeScript

[TS] TypeScript의 탄생

✅ TypeScript 의 탄생 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 알려진 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했습니다. (* C#의 창시자가 타입스크립트도 만들었기 때문에 둘이 비슷한점이 꽤 있다.) ✅ TypeScript는 오픈소스이다. 또 타입스크립트는 오픈소스로 공개되어있다. 그래서 현재도 많은 프로그래머들이 이 언어의 개발과 유지보수에 참여하고 있고 다양한 토론을 이어가고 있어서 앞으로도 발전 가능성이 아주 창창한 언어라고 볼 수 있습니다. ✅ TypeScript는 JavaScript의 확장판 타입스크립트는 기존의 자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련된 여러가지 기능들을 추..

2023. 5. 23. 15:02

2. FrontEnd/Javascript

[JS] LocalStorage, SessionStorage, Cookie의 차이점

▶️ WEB STORAGE HTML5에는 웹 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함된다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다. (쿠키는 여전히 존재하고 적절한 클라이언트 저장도구이다) HTML5에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제한다는 의미는 아니므로 ..

2022. 9. 18. 18:59

2. FrontEnd/Javascript

[JS] 호이스팅

노션에 적어서 했던 이론들을 정리하여 올려봅니다 : > ✅ 호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 ✅ 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 { } 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것 실제 메모리에서는 변화가 없다 ✅ 호이스팅의 대상 ..

2022. 9. 11. 16:39