분류 전체보기
-
ES6+ | Destructuring 구조 분해 할당 & 객체 확장 표현식JavaScript/ES6+ 2020. 3. 6. 16:57
Destructuring 구조 분해 할당 & 객체 확장 표현식 객체 확장 표현식 ES6에 도입되었으며 객체 내부에서 표현식을 사용하거나 보다 편리하게 키와 키값을 저장할 수 있도록 하는 문법 객체의 키에 저장할 값을 가진 변수와 키의 이름이 동일한 경우 키 이름만 작성 가능 객체 생성 블록 안에 대괄호[]를 사용하여 표현식 작성 가능 함수 선언 시 function 키워드 생략 가능 const x = 0; const y = 0; const obj = {x, y}; console.log(obj); // {x: 0, y: 0} const randomKey = 'other'; const comObj = { ['the' + randomKey]: 'hello?' } console.log(comObj); // {th..
-
ES6+ | Spread Operator 전개 연산자JavaScript/ES6+ 2020. 3. 6. 15:26
Spread Operator 전개 연산자 나열형 자료를 추출하거나 연결할 때 사용하는 연산자 배열, 객체, 변수명 앞에 마침표 세 개(...) 입력 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용 가능 기본값 지정 가능 Spread Operator 배열, 함수 인자 표현식 배열에 저장된 순서대로 요소 나열 기본값을 지정하면 해당 변수에 저장될 값이 없을 때 기본값이 저장됨 const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4] // Destructuring(구조 분해 할당)과 함께 사용 const [first, second, thi..
-
ES6+ | Template Literal 템플릿 문자열JavaScript/ES6+ 2020. 3. 6. 14:42
Template Literal ES6에 새로 도입된 문자열 표기법 Template Literal 특징 백틱(``) 사용 내부에 큰따옴표(""), 작은따옴표('') 혼용 가능 여러 줄에 걸쳐 문자열 작성 가능 줄바꿈을 그대로(enter) 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 예제 const t1 = `"안녕"이라고 '안녕'`; console.log(t1); // "안녕"이라고 '안녕' const t2 = `줄바꿈을 이렇게 편하게 할 수 있습니다.` console.log(t2); /* 줄바꿈을 이렇게 편하게 할 수 있습니다. */ const v1 = `제 나이는 ` const v2 = 20; const t3 = `${v1}${v2}살입니다.` console.log(t3); // ..
-
ES6+ | let & constJavaScript/ES6+ 2020. 3. 4. 16:56
let & const ES6에 새로 도입된 변수 선언 키워드 const는 불변 변수를 let은 가변 변수를 선언할 때 사용 var ES5까지 변수를 선언할 수 있었던 유일한 키워드 var 특징 함수 레벨 스코프(Function-level scope) 함수의 코드 블록을 변수 스코프로 함 즉, 함수 외부에서 생성한 변수는 모두 전역 변수 for 문의 초기화식에서 선언한 변수(ex. i)를 for문 외부에서 참조 가능 var 키워드 생략 가능 의도치 않은 전역 변수 양산 가능성이 있음 변수 중복 선언 가능 원치 않게 변수의 값이 변경될 가능성이 있음 변수 호이스팅 변수를 선언하기 전 문장에서도 변수를 참조할 수 있음 ※ 전역 변수는 사용이 편리한 반면 유효 범위가 넓어서 어디에서 사용할 것인지 확인하기가 어..
-
ReactJS | Component StylingJavaScript/React JS 2020. 2. 28. 11:06
Component Styling CSS Styling 컴포넌트.js 파일에서 컴포넌트.css 파일을 import 하는 형식 중복되는 클래스명이 있으면 안 됨 여러 개의 컴포넌트들은 웹팩을 통해 하나로 합쳐지는데 중복되는 클래스명이 있으면 둘 중 하나가 덮어 쓰여짐 SMACSS, BEM 과 같은 CSS 방법론을 적용할 수도 있고 CSS Selector를 활요하는 방법도 있음 CSS Selector CSS에서 스타일링을 원하는 html 요소(element, tag)를 선택하는 패턴 Selector 설명 .class class="class"인 요소를 전부 선택 .class1.class2 class1과 class2의 요소를 전부 선택 .class1 .class2 class1 내부의 class2 요소 전부 선택 ..
-
ReactJS | Component 개요JavaScript/React JS 2020. 2. 28. 10:53
Component 리액트의 기본 동작 단위라고 할 수 있음 컴포넌트는 재사용 가능하게 작성되어야 함 부모 컴포넌트로부터 Props를 입력받아서 리액트 요소(React Element)를 반환하는 형태로 동작 컴포넌트를 작성하기 위해서는 컴포넌트.js 파일 상단에 import React from "react"; 를 작성해야 함 컴포넌트는 주로 기능별로 나누어서 작성 es) 메인 컨테이너, 헤더, 메인 컨텐츠, 컨텐츠 아이템 Component hierachy 클래스형 Component HTML JSX // React.Component를 상속하는 HelloReact 클래스형 컴포넌트 작성 class HelloReact extends React.Component{ render(){ /* render: 그림을 그리..
-
ReactJS | 개요 및 JSX 문법JavaScript/React JS 2020. 2. 28. 10:39
REACT JS UI를 효과적으로 구축하기 위해 사용하는 JavaScript기반 오픈 소스 라이브러리 React 특징 선언적(Declaretive): 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컨포넌트 기반(Component-Based): 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 작성하지 않고 새로운 기능 개발 가능, 재사용성이 높음 프론트엔드를 객체 지향적으로 개발할 수 있도록 하는 라이브러리 클라이언트 렌더링뿐만 아니라 서버 사이드 렌더링도 지원 클라이언트 렌더링 : 필요한 데이터를 그때 그때 받아오는 것 서버 사이드 렌더링: 데이터를 서버..
-
JSP | 에러 처리 with XMLJAVA/JSP 2020. 2. 22. 23:02
JSP 에러 처리 에러 처리 개요 JSP페이지는 에러 발생 시 웹 브라우저 전체 화면이 에러 메세지로 표시됨 에러가 어떠한 경로로 발생하게 되었는지 스택을 뒤집어서 추적하는 것 에러 페이지가 무시무시하기 때문에 그대로 출력하지 않고 에러 발생시 다른 페이지를 출력함으로써 에러를 처리함 에러 코드 HTTP 에러 코드 에러 메세지 200 OK, 에러 없이 전송 성공 404 Not Found 문서를 찾을 수 없음 요청 문서를 찾지 못한 경우 발생하는 에러 URL을 잘 보고 주소가 올바로 입력되었는지 확인 500 Internal Server Error, 서버 내부 오류 웹 서버가 요청 사항을 수행할 수 없는 경우 발생 404 코드는 주로 사용자가 잘못된 페이지를 요청할 때 발생 500 코드는 프로그램 코딩 오류..