본문 바로가기

분류 전체보기

 (204)
얕은복사 & 깊은복사 데이터타입 원시값 String, Number, Boolean, Null, Undefined -> 자동 깊은 복사, 다른 메모리에 값 자체를 할당 참조값 Object, Symbol -> 얕은 복사, 가리키는 주소를 복사 얕은 복사 객체를 가리키는 주소를 같이쓰는것 바꾸면 같이 따라서 바뀌어 버린다 깊은 복사 spread 연산자 사용 (1 depth 까지만) Object.assign() 메소드 사용 (1 depth 까지만) 완벽한 깊은 복사 방법 재귀적으로 깊은 복사 수행 Lodash의 cloneDeep 함수 사용 (라이브러리) JSON.parse()와 JSON.Stringify() 함수 사용 JSON.stringify()는 객체를 json문자열로 변환한다. 이 과정에서 원본객체와 참조가 모두 끊어진다. J..
자바스크립트 프로토타입 Javascript 에서는 객체를 상속하기 위해 프로토타입이라는 방식을 사용한다. 이미 존재하는 생성자에게 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아보자 자바스크립트는 프로토타입기반 언어라고도 불리운다 모든 객체들이 그들의 프로토타입으로 부터 메소드와 속성들을 상속받는다. 모든 객체들은 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 동작 순서 : 프로토타입 체인 person 객체가 자체적으로 valueOf() 메소드를 가지고 있는지 체크 person의 프로토타입 객체 Person()의 생성자의 프로토타입에 valueOf() 메소드가 있는지 체크 여전히 없으므로 Person()의 생성자의 프로토타입 객체의 프로토타입 Obj..
자바스크립트의 형 변환(+ null & undefined 차이) 자바스크립트는 느슨한 타입언어, 동적 타입언어, 변수의 타입을 미리 선언할 필요가 없다. 프로그램이 처리되는 과정에서 자동으로 파악되고, 같은 변수라도 상황에 따라 타입이 바뀔 수도 있다. 자바스크립트는 컴파일 과정 없이 실행과 동시에 해석을 하는 인터프리터 언어 자바스크립트의 형변환은 2가지로 일어난다 (명시적형변환/암시적 형변환) 1. 명시적 형변환 string, number, boolean 타입으로 이루어진다 의도적으로 형태를 변형해서 사용하겠다는 것 String(123) String(NaN) Number('') //0 Number('123') //123 ParseInt('123a') //123 Boolean("") //false 2. 암시적 형변환 연산할 때 일어난다. 문자열이 하나라도 포함되면 ..
이벤트 버블링과 캡처링 캡처링과 버블링을 간단히 정의하면 다음과 같다. 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다. 버블링 버블링과 캡처링 ko.javascript.info 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. 사례) 테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 ..
API, SDK, Library, Framework API API : Application Program Interface all about communication : 다른서비스끼리의 의사소통 방법 응용프로그램에서 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 연결, 다리 /naver-map/jamsil 구현과 독립적으로 사양만 정의되어있다 API에 따라 접근권한이 필요할 수 있다 open API : 노출된 API 구성 : 요청, Library 응용 프로그램 개발을 위해 필요한 기능(함수)를 모아놓은 소프트웨어 독립성을 가진다 응용프로그램이 능동적으로 라이브러리를 사용한다 library와 API의 차이점은 구현 로직의 유무이다 SDK SDK : Software Development Kit 소스코드의 모음과 유틸리티 Tool ..
브라우저 렌더링 브라우저의 역할 코드를 읽어서 페이지 그려줌 브라우저의 공통적 구조 (7가지) 브라우저마다 다른 렌더링 엔진 렌더링 엔진의 목표 1) 모든 요소를 화면에 보여준다 2) 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다 동작과정(Critical Rendering Path) 1) html태그를 파싱해서 태그들을 토큰화 2) 브라우저의 랙싱과정으로 토큰이 각 노드로, 노드간의 연관관게로 DOM Tree 생성 3) js, css 필요한 애들을 따로 요청함 4) CCSSOM 스타일규칙을 읽어서 마찬가지로 트리구조로 생성 5) DOM Tree, CSSOM Tree 를 합쳐서 Render Tree 생성 6) 레이아웃 (reflow) : 뷰포트 내에서 요소들의 정확한 크기나 위치를 계산하는 단계..
HTTP란? (구성, 요청/응답메시지, 메소드 + CORS&OPTIONS) HTTP : Hyper Text Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) 구성 시작줄 헤더 본문 요청 http 메시지 예시 GET https://www.hello.com HTTP/1.1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ... Upgrade-Insecure-Requests: 1 (본문 없음) 첫줄 : 시작줄 : 메서드 + 주소 + HTTP 버전 두번쨰줄부터 : 헤더 한줄띄고 본문시작 응답 http 메시지 예시 HTTP/1.1 200 OK Connection: keep-alive Content-Encoding: gzip Content-Length: 35653 Content-Type: text/html..
쓰로틀링(throttling) 과 디바운싱(debouncing) 쓰로틀링, 디바운스 : 프로그래밍 기법 쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출 되지 않도록 하는것 ex) 게시글 ADD 함수, 2초 이내에 또 작성될 일은 없으니 게시글 추가 함수를 쓰로틀링 2초 처리해야지 디바운싱 : 연이어 호출되는 함수들 중 마지막함수 (또는 제일 처음 함수)만 호출하도록 하는 것 ex) 마우스 구린거 써서 딸까까까까깍따라라락깍 되는것들 한번으로 처리해줄게
리덕스 & mobX & ContextAPI 상태관리 툴 리덕스 mobX 컨텍스트API 왜 필요하냐? 로그인한 사람 정보, 전역변수들 등 과 같이 사이트에 전반적으로 필요한 정보들을 중앙 레파지토를 두고 필요할 때마다 편하게 꺼내쓰는 용도, 중앙 저장소가 없다면, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 연결 연결 연결 해서 전달할 수 밖에 없다. 매우 불편 장단점 리덕스 : 에러추적에 용이, 코드량이 많다, 중앙저장소도 논리적으로 구분도 가능 mobX : 에러 추적이 어려움, 코드량이 적다 컨텍스트API : 가벼운 작은 프로젝트 어떤걸 쓸래? 비동기를 지원하기 쉽냐? 어렵냐? 컨테스트API는 비동기 요청의 요청, 성공, 실패를 다 구현해야함. 컴포넌트 안에 데이터를 요청하는 코드를 작성함 컴포넌트는 렌더링만 집중 화면을 데이터를 가져오는 것과 ..
디자인 패턴 MVC, MVT, MVP, MVVM 웹프로그래밍 디자인 패턴 목적 : 각각 목적을 나누어서 코드를 관리, 좀 더 체계적으로 개발을 하기 위해서 MVC 패턴 Model : 데이터 View : Html, Css Controller : 사용자의 입력(Action)을 받고 처리 규칙 1. Model은 Controller와 View에 의존하지 않아야한다. (Model 내부에 Controller와 View에 관련된 코드가 있으면 안된다) 2. View는 Model에만 의존해야하고, Controller에는 의존하면 안된다 3. View가 Model로부터 데이터를 받을 때는, 사용자마다 다르게 보여주어야 하는 데이터만 받아야한다. 4. Controller는 Model과 View에 의존해도 된다. 5. View가 Model로부터 데이터를 받을 때, 반드시..

티스토리툴바