분류 전체보기45 [JS] undefined, null undefined은 변수를 선언하고 값을 할당하지 않은 상태 null은 변수를 선언하고 빈 값을 할당한 상태 즉, undefined는 자료형이 없는 상태 (독립 자료형이 존재) 자료형 ❓ 1. 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다 2. bigint – 길이 제약 없이 정수를 나타낼 수 있습니다 3. 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다 4. 불린형 – true, false를 나타낼 때 사용합니다 5. null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다 6. undefined – undefined 값만을 위한 독립 자료.. 2021. 6. 24. [JS] Iterable object, Array-like object Iterable 객체 (= 반복 가능 객체) iterable 객체란 for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체를 의미 배열(Array) 객체는 내장 iterable 객체이기 때문에 for ... of 문법을 이용하여 각 요소를 반복할 수 있다 또한 String 객체, Map 객체, Set 객체도 내장 iterable 객체이다 다음과 같은 조건을 만족하면 배열이 아닌 일반적인 객체도 iterable 객체가 될 수 있다 - 이름이 Symbol.iterator인 메소드를 정의해야 한다(혹은 상위 프로토타입 체인에서 상속받아야 한다) - 해당 메소드는 인자가 없으며, iterator 객체를 반환해야 한다 iterable 객체의 Symbol.iterator 메소드가 반환하는 객체는 .. 2021. 6. 23. [JS] ES6 특징 ECMAScript란? ES는 자바스크립트를 이루는 코어(Core)스크립트 언어로써, 다양한 환경에서 운용될 수 있게 확장성을 갖고 있기때문에 사용처가 웹환경으로 국한되어 있지는 않습니다. 자바스크립트는 웹브라우저에서 돌아갈 수 있도록 BOM과 DOM을 함께 사용하는 확장성이 됩니다. 이러한 확장성들은 ES 버전에 따른 문법과 기능의 확장을 가능하게 합니다. DOM (Document Object Model) : 문서 객체 모델 문서 객체 모델은 객체지향 모델로써 구조화된 문서를 표현하는 형식입니다 -> 문서, 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리합니다 BOM (Browser Object Model) : 브라우저 객체 BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델입니다.. 2021. 6. 22. [SQL] Join Join이란? 관계형 데이터베이스에서는 중복 데이터를 피하기 위해서 데이터를 쪼개 여러 테이블로 나눠서 저장합니다 이렇게 분리되어 저장된 데이터에서 원하는 결과를 다시 도출하기 위해서는 여러 테이블을 조합할 필요가 있습니다. 관계형 데이터베이스에서는 조인(JOIN) 연산자를 사용해 관련 있는 컬럼 기준으로 행을 합쳐주는 연산입니다. Join의 종류 내부 조인 (INNER JOIN) 교차 조인 (CROSS JOIN - CARTESIN JOIN) 등가/동등/동일 조인 (EQUI JOIN) 자연 조인 (NATURAL JOIN) 외부 조인 (OUTER JOIN) 완전 외부 조인 (FULL OUTER JOIN) 왼쪽 (LEFT OUTER) 오른쪽 (RIGHT OUTER) 내부 조인 (INNER JOIN) 내부 조.. 2021. 6. 22. [Web] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지) 쿠키란? 1. 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미 2. 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 (↔세션) 3. 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다 4. SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다 (CSRF 취약) 5. 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재 6. 대부분의 브라우저가 지원 document.cookie하면 현재 쿠키 정보가 나옴 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질수 있다 Response Header에 Set-Cookie 속성을 .. 2021. 6. 21. [Redux] 사용했을때 장점 일반적인 웹, 앱에서 데이터를 활용하는 방식 1. 데이터를 가져옴 (fetch) 2. 저장 (store) 3. UI 구현 4. 데이터 변경 서버로 부터 가져온 데이터를 표현하고 사용자 액션에 따라 적절히 업데이트 시켜주는 것 위와 같이 데이터를 활용하기 위해 React만으로도 충분합니다. React의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 레이아웃 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 됩니다. 그러다 부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트들은 변화된 상태에 맞게 data 혹은 UI를 변경합니다. 컴포넌트들은 다음과 같은 몇 가지 상황에서 리랜더링 됩니다 1. 자신의 상태(state)값이 변경될 때 2. 부모 컴포넌트가 리랜더링될 때 3. 자신.. 2021. 6. 21. [SSR] 서버사이드 렌더링 overview 서버사이드 렌더링(SSR)은 브라우저에서 전적으로 렌더링을 담당하는 클라이언트 사이드 렌더링(CSR)과는 다르게 웹 서버에서 어느 정도 완성된 HTML을 제작해서 로딩하는 방식을 의미합니다 기존에는 유저 인터렉션(User Interaction)이 거의 없는 스태틱 페이지(예를 들어 통계 페이지나 About 페이지 등 동적으로 페이지가 변할 일이 거의 없는 페이지)에만 주로 서버 사이드 렌더링을 사용했었습니다. 즉 극히 제한된 상황에서만 SSR을 사용했었습니다. 하지만, 요즘에는 렌더링 속도 개선, SEO 최적화 등 여러 가지 퍼포먼스적인 이슈들로 인해서 SSR을 UserInteraction이 많은 동적인 페이지에도 적용하고 있습니다. React - Nextjs (Vue - Nustjs) .. 2021. 6. 16. [CSS] GRID 코드 예제 grid-template-columns ---> 세로 방향 grid-template-rows ---> 가로 방향 column-gap ---> 세로 공백 row-gap ---> 가로 공백 gap ---> 세로 가로 공백 layout 방법 (Grid Template Areas, Rows and Columns, Shortcuts, Line Naming) 1. Grid Template Areas 2. Rows and Columns 3. Shortcuts 4. Line Naming Grid Template (fr 활용법) Place Items (요소를 개별적으로 위치를 지정해준다) Place Content (요소를 묶음단위로 위치를 지정해준다) Auto Columns and Rows (지정범위를 초과할 경우 자동.. 2021. 3. 12. [OOP] 디스 바인딩 디버깅 과정 디스 바인딩 class Person { constructor(name, age) { this.name = name; this.age = age } sayHi() { console.log(`Hello, my name is ${this.name}`) } } const jace = new Person('jace', 20) let h1 = document.querySelector('.h') h1.addEventListener('click', jace.sayHi) 위와 같이 코드를 입력하고 h1 태그를 클릭하게 되면 sayHi 메소드 안의 this.name 값이 undefined가 뜨는걸 볼 수 있다. class Person { constructor(name, age) { this.name = name; this.. 2021. 3. 3. [JS] 프로토타입과 클래스 객체 생성자 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게함 인스턴스가 초기화될 때 실행하는 생성자 함수 function Animal(type, name, sound) { // 생성자 constructor this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } let dog = new Animal('개', '멍멍이', '멍멍') // 인스턴스 instance let cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); // 멍멍 cat.say(); // 야옹 객체 생성자를 사.. 2021. 2. 26. [JS] OOP OOP (Object Oriented Programming) 배경 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 불림 (C, 포트란 등) 절차적 언어는 순차적인 명령의 조합 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식으로 바뀜 데이터와 기능이 별개로 취급되지 않고, 한번에 묶어서 처리가 가능해짐 특징과 의미 프로그램 설계 철학 모든 것은 '객체'로 그룹화 됨 재사용성을 얻을 수 있음 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론 클래스와 인스턴스 클래스는 일종의 원형(original form)으로, 객체를 생성하기 위한 청사진 인스턴스는 클래스의 사례 클래스는 객체를 만들기 위한 생성자(constructor) .. 2021. 2. 26. [JS] 구조 분해 객체 구조 분해 구조 분해 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언이 가능합니다. const obj = {a: 1, b: 2 }; const {a, b} = obj; console.log(a); // 1 console.log(b); // 2 함수의 파라미터에서도 구조 분해를 할 수 있습니다 let obj = {a: 1, b: 2}; function print({ a, b}) { console.log(a) console.log(b) } print(obj); // 1 // 2 만약 b값이 주어지지 않았다고 가정한다면 두 번째 출력에서 undefined가 나타납니다 let obj = { a: 1}; function print({ a, b}) { console.lo.. 2021. 2. 25. 이전 1 2 3 4 다음
