틈틈히 메모중

1. 함수의 실행순서를 보장한다. 이거하고나서 저거하자가 가능해짐const a = () => (id: string) => { console.log(`Received ID: ${id}`);};const b = a(); // 여기서 a()가 두 번째 함수를 반환b("123"); // 출력: "Received ID: 123" 2. 상태를 유지하는 클로저 const counter = () => { let count = 0; return () => { count += 1; console.log(count); };};const increment = counter();increment(); // 출력: 1increment(); // 출력: 2increment(); // 출력: 3counter() ..

자바스크립트는 싱글 스레드(=실행 창구가 하나다)이다. 그러니까 실행은 순서대로 되겠찌? 슬프게도 Nope...그러나 웹 브라우저 (=자바스크립트 실행기) 작동방식에 의해web APIs를 통한 비동기 실행이 가능하다. 비동기실행이란? 순차실행하다가 오래걸리는 연산을 만났다고 할 때,기다렸다가 다음을 실행하는 것이 아니고, 일단 재껴두고 다음꺼 요청 넣음웹 브라우저의 비동기 작업방식 짧게 요약 : 일단 오래 걸리는거 될때까지 webAPIs로 보내서 완료되면 큐->실행스택으로 올라오게 해서 실행하고,오래걸리는거 저렇게 처리할동안 실행스택에서는 다음 코드를 실행요청 들어감= webAPIs의 기능이 그런 편 (ex. setTimeout(), setInterval() = 더짧게 요약된걸 보고싶다면 아래 그려둔 ..

📡 웹의 동작 과정 🌐 1. 사용자가 브라우저에 URL을 입력 🌐 => 브라우저는 입력된 URL을 파싱해서 프로토콜(http, https), 도메인 경로등을 추출 2. 도메인 이름을 IP주소로 변환하기 위해 DNS서버에 요청 보내면서 브라우저는 반환된 IP주소로 TCP/IP 연결 시도함 (DNS조회와 TCP/IP연결을 동시에 병렬적으로, 비동기적으로 수행됨), 브라우저는 DNS 조회와 동시에 반환된 IP 주소를 사용하여 TCP/IP 연결을 시도하고, 동시에 HTTP request message를 생성하여 TCP 전송 계층에 전달함. (일반적으로 HTTP는 80번 포트 사용/ HTTPS는 443번 포트 사용) 3. HTTP request message에 headers를 추가해서 패킷을 생성함 4. 패킷은 ..

Component들을 조합하면서 생긴 문제점 : 데이터를 표시하기 위해서 상위 컴포넌트에서 하위컴포넌트까지 Props를 일일히 내려줘야 함 - 즉, 데이터가 필요한 지점까지 props를 넘겨줘야 하기 때문에 해당 데이터를 쓰지 않는 중간 컴포넌트에도 props를 일일히 넣어야 했음 - Props가 많아질수록 Model 이 계속 여기저기 누덕누덕 들어가는 것처럼 됨 위 구조의 문제를 해결하기위해 Flux패턴 이 나옴 Flux 패턴이란? - props로 Model이 분할되는 형태에서 Flux는 Store에서 상태를 관리하는 방식으로 변경됨 - View에서 action을 통해 데이터를 호출하면 dispatcher가 store에 데이터를 불러와 두고 그 값을 View에서 표시함 - Store라는 독립적인 상태 ..

MVVM패턴이란 ? MVC패턴에서 Model, View, Controller로 구성된 내용 중 Controller가 View Model로 바뀌어 만들어진 패턴 View Model이란? View부분을 추상화 한 계층으로 템플릿과 바인딩문법등을 사용해서 "선언적인 방식"을 취하여 여러 처리에 대해 하나의 액션으로 처리함 데이터 바인딩(뷰모델을 변경하면 뷰의 데이터도 변경되도록)처리도 해줌 MVVM아키텍처를 사용하게된 이유? -> Controller부분이 너무 방대해지고, 반복되는 부분들이 많아짐 -> 반복되는 부분은 미리 선언해두는 방식으로 개발하면 편하지 않을까? -> 반복되는 부분을 선언적인 방식(ex. jsx와 같이 약속된 선언을 바탕으로 개발)으로 변경함 -> 앵귤러, React, Vue...등 생겨..

MVC패턴 : App의 구성요소를 모델(Model), 뷰(View), 컨트롤러(Controller)로 구분한 패턴 - 장점 : 재사용성, 확장에 용이함 - 단점 : 애플리케이션 규모가 크고 복잡해질수록 모델-뷰 관계가 복잡해지는 경향있음 모델의 역할 ? 데이터 자체 -서버에서 온 데이터 등... 어디엔가 저장해둔 정보 (=> 장바구니안에 상품, 몇개담았는지 수량) 뷰의 역할 ? - user interface요소 (=> 장바구니를 어떻게 보여주는지에 대한 내용) - HTML + CSS로 그려진 화면단 관련 요소들 - 데이터를 별도로 저장하지 않음 컨트롤러의 역할 ? 모델과 뷰 사이 중간 다리 역할 - 뷰에서 변경된 내용이 있으면 컨트롤러에게 알려서 모델에서 저장, 갱신함 - 모델에서 변경된 내용이 있으면 ..

TCP / IP (Transmission Control Protocol / Internet Protocol) : 인터넷 통신을 위한 표준 프로토콜 ** IP 프로토콜에서 패킷 순서, 검증등이 안됨(IP 특징 : 비연결성 / 비신뢰성 / 흐름제어 오류복구기능 없음) -> 이를 해결하기 위한 프로토콜 : TCP/UDF (TCP특징 : 연결된상태에서 양종단간 신뢰성 있는 데이터 전달, 흐름제어함) IP는 데이터 배달을 처리하고, TCP는 패킷을 추적 및 관리함 OSI 7계층 (ISO) 장비 데이터흐름 프로토콜 TCP/IP 4계층 응용계층 데이터 TCP 계열 - HTTP(80) - FTP(데이터전달:20,제어전달:21) - SMTP(25) - TELNET(23) UDP 계열 - DNS(53) - SNMP (메시..

1. Single Responsibility Principle (단일 책임 원칙) - 각 모듈은 하나의 책임만을 담당해야 한다. 각 모듈은 변경되는 이유가 하나여야 한다. 하나의 함수가 하나의 동작만 하도록 설계하라는 원칙 (모듈을 설계할때는 빵공장을 세우는 것이아닌 '반죽하는 기계', '빵굽는 오븐'과 같이 각자의 역할을 하는 기계를 만드는 것) **설계할 때 고려사항이 뭐가 있을까? 하나의 책임맡고있니, 응집도높게, 결합도낮게, 우리 조직은 소통에 있어서 유연한가, 2. Open-closed Principle (개방-폐쇄 원칙) 확장하는 것에는 열려있고, 수정에는 닫혀있도록 한다. 기존코드를 변경하지 않고(closed), 새로운 코드를 추가하는 것(open)으로 기능 추가 할수있도록 설계해라. -> ..

소프트웨어 공학 : 품질 높은 소프트웨어를 개발하기 위한 학문 [개발단계] : - 계획(비용, 일정...) - 요구사항 분석(고객의 요구사항을 듣자, 과다한 것들은 협상) - 설계(어떻게 동작하는지 설계정의 - 디자인 / ) - 구현(스토리보드보고 실제 프로그램 코딩, 디버깅, 단위테스트진행) - 테스트(요구사항만족하는지) - 유지보수(문제수정, 발전) - 3R : 역공학(Reverse Engineering) , 재공학(Re-engineering), 재사용(Reuse) - 역공학 : 개발산출물분석을 통해 설계수준분석하여 문서화진행 - 재공학 : 유지보수를 통해 기존 소프트웨어를 해결(분석해서 재구성함-> 역공학-> 마이그레이션), 예방 유지보수 - 재사용 : 일부를 다른 프로젝트에 재사용함(합성중심 :..

재귀 Recursion ?  자기 자신을 호출하여 문제를 해결하는 프로그래밍                               더 작고 더 간단한 하위문제로 분할됨 (즉, 전체중 일부 하위문제해결법을 가지고 전체문제를 해결함)나의 경우에 재귀를 떠올릴때면 ? 생각나는 그림이 엘리베이터에 탔을 때 서로 마주본 거울 같은 느낌이다. 마주 본 거울은 계속 자신을 반사반사반사하면서 작아지고 어떤 한 점에 이른다. 재귀를 쓸 때 생각 할 것들1. Base case(종료조건)이 필요함 2. 자기 자신을 호출해야 하고 하위 문제를 결합하여 전체에 대한 해결책을 얻어야 함 (recursive case)3. 재귀 호출시 반드시 종료조건으로 수렴할 수 있도록 하는 조건 필요4. 호출할때마다 콜스텍을 쓰기 때문에 메모리..

프로젝트를 생성 할 폴더에서 터미널 실행 yarn create vite -> 생성할 프로젝트 이름 입력하면 프로젝트 폴더 생성됨 프로젝트 폴더에서 터미널 실행 yarn -> React 선택하고 -> Typescript 선택하면 끝!

Array 일반적으로 배열은 메모리에 할당된 연속적인 공간을 차지함 int arr[5] = {1,2,3,4,5}; //메모리에 연속적인 공간에 1,2,3,4,5를 할당함 //컴퓨터는 배열의 첫번째 값의 메모리주소만을 기억함 //인덱스로 배열에 접근하면 컴퓨터는 첫번째 메모리주소로부터 인덱스만큼 떨어진 곳을 찾아 값을 가져옴 //그렇기 때문에 참조시 O(1)의 성능을 가짐 => 참조는 빠름 처음에 5만큼의 크기를 차지할 배열을 선언하고 이후 10만큼의 크기로 변경하려고 하면 컴퓨터는 크기가 10인 연속적인 공간의 메모리를 다시 찾아야 하고, 값도 복사해서 다시 할당함 + 데이터 중간에 삽입하면 모든 데이터의 위치를 변경해야 하기 때문에 오버헤드 많이 발생 => 일반적으로 배열은 데이터 추가 삭제에 있어서 ..