NOW OR NEVER

Javascript 객체 배열 안에 여러 개 객체 넣기 가능비어있는 객체 비어있는 객체 생성 후 사용자 액션에 따라 속성을 삭제할 수도 추가할 수도 있다. 객체 안 메소드도 추가 가능 with 동일한 객체를 이용한 객체.속성이름 들을 객체. 이 아닌 with(객체이름){ 속성이름}으로 사용 가능 속성이름은 key를 뜻함 속성 값은 value in 배열 속 값들을 하나씩 가져올 때 사용 ex) for(var i in array) : i는 인덱스 생성자 함수 대문자로 이름 작성 그냥 함수와 달리 생성자 함수는 this 사용 : 해당 클래스의 속성, 멤버 정의, 자바의 클래스 만드는 것과 비슷 즉 this 있으면 생성자 함수, 없으면 그냥 함수 tips input 태그 값 추가 후 해당 input 태그 값 비..

Javascript 객체 프로그래밍 : 자바처럼 클래스를 만들 수 있다. 웹프로그래밍 동적인 html을 생성 서버 사이드 스크립트 : 서버에서 동작하는 웹 프로그래밍, 서버 코드가 노출되지 않는다. ex) jsp 클라이언트(웹 브라우저) 사이드 스크립트 : 클라이언트 쪽에서 동작하는 웹 프로그래밍, 어떻게 만들어졌는지 서버코드가 노출 됨 ex) javascript jsp 안에서도 자바스크립트 표현 가능 : script 태그 사용 src/main/resources/static : 정적인 문서 만들 때 이 폴더에 작성 ex) html,css,script src/main/resources/templates : 사용자 요청에 의해 컨트롤러가 저장한 모델을 가지고 html을 동적으로 만들어주는 것을 통칭하여 vi..

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

React Sample Web App에 관하여 1. create react app이 기본적으로 제공하는 샘플 웹앱 실행 npm run start / npm start : create react app으로 개발환경을 만들고 난 후 npm run start 혹은 npm start을 terminal에 작성해 실행할 수 있다. 개발을 할 때 접속해서 개발 중인 앱을 확인하기 위한 주소(이 주소들 중 하나로 들어가면 확인 가능) Local: http://localhost:3000 On Your Network: http://192.168.35.217:3000 처음 실행했을 때 웹브라우저 상에 보여지는 앱은 create react app이 가장 최소한의 앱을 미리 구현해서 보여주는 앱 이다.(즉 react 기술로 만..

create react app을 활용한 개발환경 구축 순서 : npm 설치 -> create react app 설치 -> create react app 사용 1. node js 설치 npm은 node js로 만들어진 프로그램들을 쉽게 설치해 주는 일종의 앱스토어이므로 node js를 먼저 설치 설치 : https://nodejs.org/en/ LTS : 안정화 된 것 / current : 가장 최신 버전 2. npm node js 설치 시 자동으로 같이 설치됨 window에서 설치 확인 window key + R (실행 창 열기) cmd 입력해서 cmd 열기(cmd : commend의 약자로 명령어라는 뜻, 컴퓨터를 명령어를 통해서 제어하는 프로그래밍으로 즉 말로 제어하는 방법이다) cmd에서 npm -..

React 공식 문서 사이트 https://ko.reactjs.org/docs/getting-started.html 개발 환경 종류 online playground : 자기컴퓨터 세팅하는 건 까다로운 일, code sandbox 등 에서 리액트를 구현해볼 수 있는 온라인 사이트 add react to a website 이미 웹사이트를 가지고 있는 데 처음부터 끝까지 리액트로 만드는 것이 아니라 부분적으로 리액트를 추가하고 싶을 때 사용하는 옵션 시작하기는 쉽지만 뒤로 갈수록 개발환경을 직접 구축해야하는 어려움들이 많기 때문에 초급 개발자에겐 사용하기 까다로운 옵션 create a new react app Toolchains 리액트로 개발할 때 목표가 무엇인가에 따라서 그목표를 달성하기 위한 개발 환경, ..

ES6(2015) Shorthand property names https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer js에서 object는 항상 key와 value로 이루어져 있는데 key와 value의 이름이 동일한 경우 하나로 축약해서 작성 가능 ex) name : name -> name Destructuring assignment https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment object {} 이용 const { key1, key2 } = object js에서 o..

Class와 Callback 함수 class : 다양한 object를 만들기 위한 청사진 class에서 함수 선언시 function 키워드 사용하지 않아도 됨 class에 원하는 기능을 다 정의하게 되면 사용하는 사람이 자세하게 control할 수 없고 재사용률이 떨어진다. callback 함수 class를 하나의 완전히 다 만들어진 완전체로 만들기 보다는 레고로 조립을 해서 원하는 것을 만들 수 있는 것처럼 원하는 기능을 끼워 맞춰서 재조립이 가능한 것으로 만드는 것이 좋다. 그래서 callback 함수를 이용하는 것이다. class 내에서 callback 함수 활용 시 장점 callback 함수를 전달함으로써 원하는 기능을 수행할 수 있다. 사용하는 사람이 원할 때 원하는 기능을 수행할 수 있다. c..

연산자 boolean boolean : 어떤 data type이든 boolean이 될 수 있고 true가 될 수 있다. truthy한 값 falsy한 값들을 제외한 모든 값 무언가 data가 있다면 다 true object는 그 안에 data가 있든 없든 object 자체가 만들어진 것이기 때문에 true에 속한다. empty array(텅텅 비어진 배열) 자체는 object이기 때문에 true이다. falsy한 값 프로그래밍 언어에서 data가 없고 비어있는 것들은 false에 속한다. 0, -0, 텅텅 빈 문자열('', " "), null, undefined, NaN(숫자가 아닌 값들) 변수 선언 후 값을 할당하지 않는다면 그 변수에는 undefined 값이 할당되어지게 되어 falsy한 값이 된다...

함수 프로그래밍을 짤 때 무언가 반복적으로 계산되는(수행되는) 로직들이 있을 때 함수로 만듦. 왜냐하면 함수로 만들면 재사용이 가능하기 때문이다. 함수 선언 function 함수이름(인자){기능 수행 영역(code block)} 함수 선언시 function 키워드 사용 {} 즉 코드 블럭을 수행하는 것들을 함수이름으로 가리키게 됨 함수 이름 함수 자체를 가리키는 것 함수를 가리키고 있는 주소(refernce)를 가지고 있다 함수 이름 지정 가능 가능하면 의미있는 이름으로 설정 변수에서 이름을 원하는대로 지정하는 것처럼 함수 또한 원하는대로 이름 지정 가능 짧고 간결하지만 의미있는 이름으로 설정 인자 함수를 호출하는 사람으로부터 필요한 data를 받아오기 위해서 그리고 필요한 data를 받아올 때 함수 내..