코딩 기록기

구조분해 (Destructuring assignment) 1. 문법 구조분해의 기본 문법은 아래와 같습니다. const [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7]; console.log(c); // 1 console.log(d); // 2 console.log(rest); // [3, 4, 5, 6, 7] const { e, f } = { e: 1, f: 2 }; console.log(e); // 1 console.log(f); // 2 const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 cons..

ES6의 호환성 해결 방법은 ? 브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데, 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다. 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다. 사이드 이펙트 (Side Effect) 란 ? 사이드 이펙트란 사전적의미로는 '원래의 목적과 다르게 다른 효과 또는 부작용' 이라는 상태를 말하..

Array 특징 Array은 입력된 데이터들이 메모리 공간에서 연속적으로 저장되어 있는 자료구조이다. 메모리상에서 연속적으로 저장되어 있는 특징을 갖기때문에, index를 통한 접근이 용이하다. index만 알고 있다면 시간 복잡도 O(1)만에 해당 원소로 접근할 수 있다. 조회 각 데이터의 index를 가지고 있고 무작위 접근이 가능하기 때문에, index로 각 데이터에 직접 접근이 가능 데이터 삽입과 삭제 데이터의 삽입과 삭제 시 그만큼 index를 맞춰주어야 함 예시 : 5개의 데이터가 있을 때 맨 앞을 삭제했다면 뒤쪽의 나머지 4개는 앞으로 한 칸씩 이동해야됨 이로 인해 삽입과 삭제가 많다면 Array는 비효율적임 Linked List 특징 LinkedList는 여러 개의 노드들이 순차적으로 연결..

ES6에서 추가된 기능 ( String Literal, 객체 비구조화 ( Object Destructuring ), 객체 리터럴 ( Object Literal ), for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, includes, Trailing Commas, Map & Set ) 1. String Literal ES6의 String Literal을 활용하면 문자열을 좀 더 직관적으로 결합할 수 있습니다. es5 const val1 = 'my string'; const val2 = 'my string2'; const conVal = val1 + ', '+ val2; console.log(conVal); // my st..

우선 그림 🔥 간단 이해 🔥 차식 방법은 프로그램을 위 그림같이 데이터와 기능(함수)으로 나누어서 기능의 목록을 절차적으로 수행. 객체지향 방법은 데이터(변수)와 기능(메소드)을 가진 독립적인 객체를 만들고, 그 객체들의 집합을 프로그램이라고 함. 이 각각의 객체들 간의 유기적인 상호작용을 통해 로직 구성. 객체지향 (OOP: Object-oriented Language) 프로그래밍 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 프로그래밍 패러타임 프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 ..

스코프(Scope) 스코프(Scope)라는 영어 단어 자체는 ‘범위’라는 의미를 가진다. JavaScript 에서도 ‘범위’의 의미를 가지고 있다. 스코프란? 식별자 접근 규칙에 따른 유효 범위 스코프의 정의는 식별자 접근 규칙에 따른 유효 범위이다. 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. 그 범위를 스코프라고 부른다. 그래서 각각을 Block Scope와 Function Scope라고 부른다. 스코프의 주의 사항 1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다. 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다. 2. ..

HTTP 란? HTTP는 Hypertext Transfer Protocol의 약자로 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 통신 규약을 의미한다. HTTP는 기본적으로 평문 데이터 전송을 원칙으로 하기 때문에 개인의 프라이버시가 오가는 서비스들(전자상거래, 전자메일, 사내 문서 등)에 사용하기 부적합하다. HTTP 장단점 장점 무상태(Connectionsless) 클라이언트가 요청을 서버에 보내고 서버가 적절한 응답을 클라이언트에 보내면 바로 연결이 끊긴다 비연결성이란 특징 때문에 서버 입장에선 통신 연결을 유지하지 않아 리소스 낭비가 줄어드는 장점이 있다 통신마다 새로운 세션을 열어야 하는 작업은 클라이언트가 서버에게 요청 시마다 인증해야 하는 단점이 생겼다 비연결 (Stat..

상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태 란? React에서 State는 component 안에서 관리되고 사용자의 액션에 따라 변경될 수 있는 JS객체이다. state는 특징으로 자식 컴포넌트간의 다이렉트 데이터 전달은 불가능하다. 자식 컴포넌트 간의 데이터를 주고 받기 위해서는 부모 컴포넌트가 필요하다. 자식이 많아진다면 상태 관리가 매우 복잡해진다. > Props drilling 이슈 발생 상태관리는 왜 해야하는가? 상태 관리의 복잡성을 해결하기 위해서이다. 예를 들어 A컴포넌트의 상태를 D컴포넌트에서 사용한다면 B,C는 필요하지 않지만 전달위해 Props를 만들어 넘겨주어야하는 문제가 있다. > Props drilling 이슈 발생 평소 state 관리는 어떻게..

랜더링이란 ? 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다 랜더링 과정 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다. DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다. CSS설정 및 위치를 설정한다. Render트리가 그려지고 브라우저 화면에 표시된다. SSR이란 ? 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. 참고로 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 ..

useEffect()란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행. componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행 compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. 기본 형태 u..