
2019.07.30(화) Java Script 함수 사용 예제 Ex01 // Ex01 // 함수의 기본적인 모양꼴 4가지 // 함수형식1 f1(); // 선언과 순서와 사용없이 사용가능(호이스팅 가능) function f1() { console.log('나는야 f1()'); } // f1(); // 이것도 가능 console.log('------------'); // 함수형식2(헷갈림 주의) //f2(); // 선언과 순서와 사용없이 사용불가(호이스팅 불가) // 함수는 변할 일이 거의 없기 때문에 const를 사용한다. const f2 = function(){ // var f2 = function f3() 가능 console.log('나는야 f2()'); } f2(); console.log('-----..

2019.07.29(월) React 시작 전 필요한 JS 문법 익히기 Java Script 변수 타입 Ex01 // Ex01 // 웹 에서는 alert 라는 메시지 창을 띄우는 것이 있는데 console은 디버깅 창에서 볼 때 사용한다. console.log(1); console.log('문자열'); console.log('호랑이'+100); // 자바에서 사용하는 문법인데, 결과적으로 문자열, 이 방법 비추천 console.log('호랑이', 100); // 이 방법을 사용하는 것을 권장한다. ','로 연결 // 순서를 따질 때 앞에 숫자를 붙이고 내가 원하는 문자열을 작성하며 실행 순서를 구분할 때 사용한다. console.log(1, '내가원하는문자열1'); console.log(2, '내가원하는문..

2019.07.29(월) VScode 환경설정 Nodejs 설치 https://nodejs.org/ko/ 에서 설치 그 후 cmd에서 node -v 하면 버전이 나오면 설치 완료 npm -v 를 해서 같이 버전 확인해서 설치가 되었는지 확인하기 VSCode 설치 후 환경설정 할 때 반드시 깔아야 될 것들 ESLint Relatice Path 경로 작성할 때 편하다. guides 들여쓰기가 잘 못 되었을 때 체크를 해준다. Reactjs code snippets [개발자 : charalampos karypidis] 인 것 찾아서 install ...더보기 * 주의 할 점 단축키를 다른 툴에서 변환하는 툴을 깔면 VSCode와 충돌이 발생하기 때문에 VSCode 단축키를 그냥 사용해라. 포맷까지 사용해야 될..

1. Observer pattern(옵저버 패턴) 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들한테 연락이 가고 자동으로 내용이 갱신되는 방식으로 일대다(one-to-many) 의존성을 정의한다. 보통 옵저버 패턴은 대부분 상태를 저장하고 있는 주제 인터페이스를 구현한 하나의 주제객체와 주제객체에 의존하고 있는 옵저버 인터페이스를 구현한 여러개의 옵저버 객체가 있는 디자인을 바탕으로 한다. 가. 데이터 전달 방식 주제객체에서 옵저버러 데이터를 보내는 방식(푸시 방식) 옵저버에서 주제객체의 데이터를 가져가는 방식(풀 방식) 2. 디자인 원칙 옵저버 패턴은 주제와 옵저버가 느슨하게 결합 되어 있는 객체 디자인을 제공 주제가 옵저버에 대해서 아는 것은 옵저버가 특정 인터페이스(Observer 인터페..

1. PROTOTYPE 이란? JAVA나 C++과 같은 프로그래밍 언어는 클래스 기반 객체지향 언어이다. 이와 달리 JAVA SCRIPT는 프로토타입 기반 객체지향 프로그래밍 언어다. 그렇기 때문에 자바스크립트의 동작 원리를 이해하기 위해서는 PROTOTYPE 개념을 잘 알고 있어야 한다. 클래스 기반 객체지향 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이(Class-less)도 객체를 생성 할 수 있다. 2. JAVA SCRIPT 에서의 객체 생성 방법 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티(멤버) 또는 메소드를 상..

1. MyLinkedList를 구현 조건 양방향으로 구현 CRUD(add, get, set, delete) 기본적으로 구현(삭제, 삽입 위치는 상관 없음) 제네릭은 구현해도 되고 안해도 됨 2. 구현 코드 class Node 양방향이기 때문에 클래스 Node의 필드를 Node left, Node right를 선언하고 T num에 값을 넣도록 함 는 제네릭으로 원하는 타입을 사용 할 수 있도록 함 class Node { Node left; Node right; T num; Node(T n) { num = n; } } MyLinkedList MyLinkedList 객체를 생성했을 때 객체가 CRUD가 일어 날 수 있도록 add(), get(), set(), delete() 메소드를 직접 구현 해 주었다. C..

Web developer는 크게 front end(프론트엔드) 개발자와 back end(백엔드) 개발자, 그리고 full stack(풀스택) 개발자로 나뉘게 된다. 이렇게 나누는 것은 그냥 회사에서 업무분담이 어떻게 나누어 지는지의 차이이다. 오히려 적절한 인원이 확보되고 업무 체계가 잘 잡혀있는 회사가 업무 분담이 세세하게 나누어져 있는 경우가 많다. 1. Front end front end는 사이트 이용자의 눈에 보이는 부분(HTML/CSS/JAVA SCRIPT 등)을 개발하는 것을 말한다. front end 파트는 개발자만 있는 것이 아니라 UX designer, WEB designet, front end developer로 구성되는데, UX designer는 사용자에게 최고로 편리한 경험을 제공하..

1. upCasting(업캐스팅) 참조형 캐스팅의 경우 사용하는 경우다. 기본적으로 캐스팅은 서로 관련없는 데이터끼리는 변환되지 않는다. 참조형에서 참조형 데이터가 서로 관련이 있다는 것은 무슨 의미냐면 가. 상속 관계가 맺어진 경우, 나. 인터페이스로 인해 확장이 된 경우를 말한다. 가. 상속 관계가 맺어진 경우 class Parent가 있고 class Child extends Parent 클래스가 있다고 가정하자. Child는 Parent 클래스를 상속 받으므로 Child 클래스가 Parent 클래스 보다 가지고 있는 데이터 양이 무조건 많다. 왜냐하면 Child 클래스는 적어도 Parent 클래스의 데이터를 가지고 있기 때문이다. (1). Parent parent = new Child(); pare..