The Debugging Chronicles : "코드의 미학"

디스트럭처링 할당(Destrcturing assignment):구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화( 또는 구조 파괴)하여1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용36.1 배열 디스트럭처링 할당ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = arr[2];console.log(one, two, three); //1, 2, 3 ES6=> 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당이때,배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다.할당 기준은 배열..

스프레드 문법 (spread syntax): 전개 문법 : ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. ES6에서 도입되었다. 스프레드 문법을 사용할 수 있는 대상: for...of 문으로 순회할 수 있는 이터러블에 한정된다.=> Array, String, Map,Set, DOM 컬렉션(NodeList, HTMLCollection),arguments 스프레드 문법의 결과여러 값들의 값이 중요한 것이 아니라 값들의 목록이 중요하다.스프레드 문법의 결과는 값이 아니다.스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아니라는 뜻이다.스프레드 문법의 결과는 변수에 할당 할 수 없다.const list = ...[1, ..

자바스크립트에서 태그 하나를 DOM이라고 한다.그리고 DOM은 각 각 가지고 가지고  있는 속성을 Property라고 한다. 그런  propety 들이 모여있는 것을 가지고 온것을 Props라고 한다. 그래서 props는 태그가 가지고 있는 속성을 이야기한다. 그럼 props를 어떻게 보내고 가지고 올까? 그림으로 먼저 살펴 보자 A라는 사람의 정보를 컨테이너에서 컴포넌트로 보낸다고 생각해보자  그리고 B라는 사람이 있다고 생각해보자. 그럼 컴포넌트를 만들어서또 정보를 바꿔서 보내줘야한다.또 C라는 사람이 있다면? 그래서 차라리 정보를 변수로 전달하는 것이다. 만약에 홍길동이 값이 들어 왔을 때변수가 인식해서 사용자에게 값만 바꿔서 전달하는 것이다. 컴포넌트는 재사용하고 값이 들어온 것을 그대로 보여주자..

리액트 컴포넌트를 생성할 때 마다직접 작성하기 힘들다 이런 상용구를 단축키로 간편하게 만들 수 있는 extension이다.  확장 프로그램 이름은 Reactjs code snippets 제작자가 charalampos karypidis인 것을 설치하면 된다. 단축키를 살펴 보자면 tirggercontentrsc화살표 함수형 컴포넌트 생성rsf함수형 컴포넌트 생성rcc클래스 컴포넌트 생성rrc클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성rcjcimport와 export 없이 클래스 컴포넌트 생성rwwwdimport 없이 클래스 컴포넌트 생성  rsc를 주로 많이 사용한다.! rsc 치고 tab을 누르면 짠하고 나타난다. 단축키의 더 자세한 내용은  Details에서 확인할 수 있다.

dependencies는 의존성 파일을 이야기 한다.설치되어 있는 라이브러리들의 키 값을 이야기 한다.node modules 폴더 안에는 라이브러리들이 설치 되어있는데해당 폴더는 용량이 크기 때문에 공유하지 않는다. 따라서 npm i  or npm install 이라는 명령어를 치게 되면package.json 의 dependencies에 명시되어 있는 라이브러리들을 알아서 설치가 된다.(node_modules폴더가 생성) 그리고 npm 명령어는 script 안에 있다.그래서 npm start는바로 이것을 이야기한다. 단 npm start를 제외하고는 build,test,eject는 run을 적어줘야한다. build는 실제로 배포하기 전에 번들링을 한 상태로 폴더가 만들어진다.그러면 그 빌드 폴더만 배포하..

모달창, 스위트알랏, alert(),....모바일에서 시작되어 웹에 정착되었다. 실습에서 비동기로 처리되어 있는 경우가 많은데  그럼 웹에 최적화 되어 있는 안내창을 만들어보자  페이지 주도권 스크립트의 동작 방식을 이해해야한다.main.do로 바로 이동하기 때문에 Login.jsp 에 잔류해 있는 시간이 없는 것이다.  수행을 100%으로 했다는 것을 로그를 찍어 보면 알수 있다.문제가 스크립트는 view에 있기 때문에 jsp를 써야하다는 것이다스크립트를 컨트롤러에 써다는 것이 문제인 것 이다.loginFalse.jsp 라는 페이지를 만든다.그리고 페이지를 이동할 곳을 적는다. 컨트롤러에서  한 단계 더 나아가기 그럼 모든 페이지를 다 만들어야할까? 페이지가 너무 많다... 근데 모든 안내페이지가 다음..

section01. 프로젝트 구조 설계 - 웹의 구조도 작성 1. 웹 앱 구조도 · 앱의 전체 흐름을 파악하는데 도움을 준다. · 메인 페이지로부터 각 주요 화면의 연결 구조를 계층 구조로 작성하여 표현한다. · 주요 화면에 딸린 내용이 많을 경우 다시 그에 따른 각각의 하위 화면도 구조에 포함시킨다.​ - 필요 페이지 명세서 1. 웹 앱의 메인 화면과 주요 화면에 해당하는 페이지의 명세서 작성 · 페이지의 명세서에는 각 페이지가 표시하거나 처리하는 내용등을 간략하게 기술해서 실제로 구현될 때 사용한다. · 명세서 예시페이지명파일명페이지가 표시하는 내용[main] 페이지index.html사이트의 개략적인 소개와 메인 페이지에서 각 주요 화면으로 이동하는 내비게이션 바 제공[movies] 페이지s1.htm..

section01. 자바스크립트로 Canvas 제어 - HTML5 캔버스의 사용법 · 캔버스는 그래픽을 그릴 수 있는 영역을 말하며, 태그와 자바스크립트를 사용해서 웹 페이지 상에서 그래픽을 그린다. · 태그는 단지 그래픽을 그릴 수 있는 영역을 제공하는 컨테이너(그릇)로 실제로 그래픽을 그리기 위해서는 자바스크립트를 사용해야 한다. · 태그는 너비(width)와 높이(height)를 속성으로 가진다. · 캔버스를 제어하기 위해서는 id 속성도 필요하다. · 캔버스에 표시할 마우스 포인터의 상대적인 위치를 얻기 위해 특정 구역을 정의하는데 쓰이는 태그 안에 넣어서 사용하는 것이 좋다.   - 캔버스 제어하기 · 만들어진 캔버스에 도형이나 그림 등을 그리거나, 그려진 것들을 움직이게 만드는 등의 ..

(function(인수리스트){처리할 문장})();section01. 자바스크립트의 개요 *자바의 리터럴(데이터의 값)리터럴은 값을 의미하며 숫자 타입은 그냥 기술하고, 문자열 타입은 큰따옴표(" ")로 둘러 싸서 표현하다.부울(boolean)타입, 문자(character)타입 및 함수, 객체 ,배열, 값도 리터럴로 취급한다. 리터럴(값)설명5정수 리터럴5.0실수 리터럴"test", 'test'문자열 리터럴, 자바스크립트는 문자열 표현에" ", ' '를 둘다 사용할 수 있음false부울 리터럴nullnull 리터럴, 레퍼런스 타입(객체 타입)변수의 초기화 등에 사용.객체 변수가 이 값을 갖게 되면, 할당된 객체가 없다는 의미[1,2,3]배열 리터럴function(){}함수 리터럴{id: "aaa"}객체 ..

업로드(upload): 클라이언트(사용자, 브라우저) 이 본인이 로컬(폰, PC)에 가지고 있는 데이터를 서버(DB, 톰캣, 프로젝트)로 올리는 과정 로컬(폰, PC): resource ----> 서버(톰캣,프로젝트) 준비물1. 이미지 파일(데이터)2. 자바의 소스파일 -> .jar(라이브러리, 소스파일)                                   이미지 업로드를 구현할 때 필요한 클래스, 메서드를 제공   cos.jar 파일을 설치하는 방법 1. JAVA Build path 2.WEB-INF >> lib  3.apache-tomcat-10.1.28/lib   이미지를 등록해 보자     실습 순서1. 마이페이지에서 특정 MEMBER의 프로필 이미지를 출력2. 회원가입 페이지에서 새로운..