꿈으로 가는 길 꿈으로 가는 길

* cmd 에서 서버 띄울때* npm start * 컴포넌트 끼리 데이터 교류는 부모 자식 흐름으로 교류해야 한다. * props * 문자열 종류 외이 값을 컴포넌트에 전달할때는 { } 로 감싸야 한다.* String * 그 외 * 이벤트* input이 많을때는 []안에 key값을 넣자. this.setState({ [e.target.name] : e.target.value });* DOM* DOM 태그 사용시 꼭 닫아야 한다! * , * 리액트 컴포넌트에서는 id 사용할 수 있지만, 되도록 사용하지 말자. ( 컴포넌트 끼리 id가 중복될 수 있으므로 )* ref 를 사용하자!

"리액트를 다루는 기술" 책을 읽고 정리 ( 저자 : 김민준 )저자 블로그 : https://velopert.com/reactjs-tutorials 저자 블로그 : https://velog.io/@velopert/tags/react[1장] 리액트시작 [ 리액트 ]* 페이스북에서 고안.* 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민X * 기존 뷰를 날려버리고 새로 렌더링* BUT, 이 방식대로 하면 CPU 점유율도 많이 잡아먹고 메모리도 많이 사용할텐데.. > 하지만 잘 구현한 것이 React!* 오직 View 만 신경쓰는 라이브러리 ( 프레임워크가 아니다! )* 리액트의 초기 렌더링과 리렌더링* 이것으로 성능을 아끼고 최적의 유저 경험을 제공한다. [초기 랜더링]* render() {...} * 어..

NULL 객체 패턴 우리는 종종 아래와 같은 null 검사 코드를 사용할때가 있습니다.null 검사 코드를 사용할 때의 단점 : 개발자가 null 검사 코드를 빼먹기 쉽다는 점.(따라서 NPE(NullPointException)이 발생하기 쉽다.) Null 객체 패턴 구현- null 대신 사용될 클래스를 구현한다. 이 클래스는 상위 타입을 상속받으며, 아무 기능도 수행하지 않는다.- null을 리턴하는 대신, null을 대체할 클래스의 객체를 리턴한다. Null 객체 패턴 장점- Null 검사 코드가 최소화 되므로 코드가 간단해진다.- 수많은 Null 검사 로직없이도 대신할 객체를 리턴하므로 Null 검사 코드 누락에 따른 문제 제거 Null 객체 패턴의 단점- 시스템에 널 검사 로직이 별로 필요하지 않..

템플릿 메소드 패턴 : 슈퍼 클래스에 기본적인 로직의 흐름(커넥션 가져오기, SQL 생성, 실행, 변환)을 만들고, 그 기능의 일부를 추상메소드나 오버라이딩이 가능한 protected 메소드 등으로 만든 뒤 서브클래스에서 이런 메소드를 필요에 맞게 구현해서 사용하도록 하는 방법=> 템플릿 메소드 패턴 사용방법 찾아보기, 어디에 사용하는지. 팩토리 메소드 패턴 : 서브클래스에서 구체적인 오브젝트 생성방법을 결정하게 하는 것. 전략패턴 ( Strategy Pattern ) 자신의 기능 맥락에서 필요에 따라 변경이 필요한 알고리즘 클래스를 필요에 따라 바꿔서 사용할 수 있게 하는 디자인 패턴. * 중용한 건 상속 구조를 통해 성격이 다른 관심사항을 분리한 코드를 만들어내고, 서로 영향을 덜 주도록 했는지를 이..

3장 주제 : jQuery를 이용해서 사용자의 동자에 반응하는 코드를 만들기! & 코드를 한번만 작성한 뒤 여러번 활용하는 방법! [html에서 이벤트 리스너란?]DOM 의 일부/ 이벤트 리스너는 페이지의 어떤 요소에든 등록할 수 있고 꼭 링크나 버튼에만 만들어야 하는 건 아니다.브라우저는 이벤트 리스너를 통해 사용자가 페이지에 무슨 일을 하고 있는지 알아내고 자바스크립트 해석기에 알려 줘서 어떤 동작을 할지 안 할지 결정하게 합니다. [요소에 이벤트 등록하기 = 묶는다(bind)] 이벤트 등록하는 방법 $('선택자').click(function(){ alert("text");}); $('선택자').bind('click', function(){ alert("text");}); 1번은 DOM요소가 있을 때..

[프로젝트에 필요한 것은?!][사용자의 요청을 실제 프로젝트의 필요조건으로 바꾸는 일은 중요한 기술이고 꾸준한 연습이 필요합니다. (잊지 말아야 겠어요ㅠ)]!!!! 요청을 필요조건으로 바꾸기, 호출순서 만들기, 새처럼 빨리 움직이세요... !!!! [브레인파워]div를 명시할때 CSS클래스만 사용? ID만 사용? 두가지 조합을 사용? 무엇이 좋은 가요?? -> 내생각은 클래스는 그룹단위로 (혹은 여러개로) 동시에 적용하고 싶을때, ID는 그 곳에만 적용하고 싶을때 사용하는듯?! [어느 브라우저에서나 동작하는 자바스크립트 메서드로 요소를 식별할 수 있습니다. => ID 선택자 ] {(HTML의 요소와 속성 : 웹페이지의 구조 담당)(CSS : HTML 요소의 스타일 담당)(jQuery : 요소의 동작을 조..

DOM 은 document of model로써 트리 형식으로 되어 있습니다. DOM에서 요소를 가지고 와서 jQuery를 이용하여 브라우저에서 각 요소들이 동작을 하게 하는 거죠.[ 자바스크립트 해석기는 원래 있던 HTML과 CSS 파일을 바꾸지 않습니다. 단지 브라우저 메모리에 들어 있는 페이지의 DOM 표현을 바꾸는 겁니다. ] jQuery는 $기호를 가지고 사용하는데 , $는 Jquery의 단축표기이다. [jQuery 사용법]$(요소를 선택).메서드();요소 선택법1. $("h1").hide(); // jQuery 요소 선택자 , 2. $(".h1_class_name").hide(); // jQuery 클래스 선택자3. $("#h1_id").hide(); // jQuery ID 선택자 ※ 선택자를 ..

25장. 테스트 주도 개발 패턴 중요한 것!테스트를 하기전에 테스트 목록을 작성하자. * 나에게 테스트 목록을 작성하는 것은 여전히 어려운 일이지만 노력해보자.테스트를 할때 assert 구문을 먼저 쓰자assert를 먼저쓰고, 점점 찾아가다 보면, 어느 순간 테스트의 아웃라인이 잡혀있게 된다.* assert를 먼저 쓰는것은 좋은 방법 같다. 항상 assert를 쓰기 전에 먼저 앞부분을 작성하였는데... 순서를 뒤짚어 봅시다.!! 26장. 빨간 막대 패턴한 단계 테스트 : 테스트는 아는 것에서 모르는 것으로 라는 방향이 유용할듯!테스트로 설명이 가능하게 만듭시다~학습테스트 : 패키지의 새버전 또는 다른사람(외부)이 만든것을 테스트(?) 하는것.회귀테스트 : 사실은 처음 코딩할 때 작성했어야 하는 테스트 이..