틈틈히 메모중

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() = 더짧게 요약된걸 보고싶다면 아래 그려둔 ..

불변성(Immutable) ㄴ 상태를 변경하지 않는 것 ( 상태가 변경된다는 의미는 "메모리에 할당된 값을 변경하는 모든 행위") ㄴ 불변성을 지키지 않는 예시 ) 전역변수 남용해서 어디서 값이 바뀐지 모르는 상황, 변수에 재할당, etc... ㄴ 불변성을 지키지 않을 때 함수형 프로그래밍에서 일어나는 일 : 야근, 예기치 못한 동작(에러, 실행...등), 의도치 않은 상태 변화... ㄴ 불변성을 지키는 것으로 "참조에 의한 전달"로 변경될수 있는 자료형의 변화를 쉽게 감지할수 있어 예기치못한 상황을 막을수 있음 변수는 메모리 주소를 가지고 있고, 변수의 선언은 값이 할당될 공간을 마련하는 것 (변수는 값을 저장하기 위한 공간 자체, 메모리 공간을 식별하기 위해 붙인 이름) => 변수에 값을 할당하면 "..

요새 클린코드를 다시 읽으면서 아래 노션링크에 독서록을 남기고 있다. https://organized-panama-944.notion.site/337d75ef13ff40d7bc33dbba40d30dc6?pvs=4 그 중 오류처리 부분을 읽으면서 필자는 왜 이렇게 하라는 걸까? 라고 생각하며, 내 언어로 이해한 것들을 남겨 보았다:) - 오류코드보다 예외를 사용하라고 하는 이유는 뭘까? : 오류발생시 확인하는 과정도 잊지 않고 검토 할수 있고, 실행로직과 오류처리 코드가 뒤섞이지 않고 분리되어 가독성 측면에서도 좋고, 실행로직을 재사용하기에도 좋아지기 때문 - try-catch-finally문 작성을 권장하는 이유는 뭘까? : catch문이 실행된다면 try에 문제가 있을때이다. 그렇기 때문에 오류의 범위..

📡 웹의 동작 과정 🌐 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)으로 기능 추가 할수있도록 설계해라. -> ..

자바스크립트는 명령형, 함수형, 프로토타입기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 자바스크립트는 거의 모든 것이 객체임 ㄴ> 원시타입 값 제외한 나머지 값들(함수, 배열, 정규표현식, 객체...)는 모두 객체임 - 1) 객체 지향 프로그래밍 ㄴ여러개의 독립단위(=객체)의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 ㄴ실제 세계의 사물이나 개념을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작함 - 객체 (object) : 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조 상태 데이터(property)와 상태데이터를 조작하는 동작(method)을 묶어서 하나의 논리 단위로 묶어둔 것 - 속성 (attribute / property) : 실체의 특징..

추상화는 어디까지 하는게 좋은걸까 ? 결국 그 범위, 어느정도까지라는 것은 개발자의 손에 남겨진 과제… 추상화의 범위는 협업시에 추상화한 부분에 대해서, 공유가 잘 되어야 함 혼자 코드를 짜고 있다면 추상화수준이 같은 수준을 유지하고 있는지 확인하면서 진행하기 추상화를 할지 How to!? '구현' 위주로 먼저 진행 해보는 것도 좋다고 생각한다. '공통된 부분'을 뽑아내는 방식으로 진행하기 (김영한님 youtube 참조함) 프로젝트 리더가 추상화레벨, 추상화 적용될 로직에 대한 기준을 제시하면서 진행하거나 팀원들끼리 어떤 로직에 추상화를 어떤레벨로 적용해볼지 연구하면서 진행해보기 함수의 인자 개수는 0개인게 정말 이상적일까? 인자의 개수가 적을수록, 테스트시 유리하고, 유지보수에도 좋고, 가독성에도 좋기..