익명의 개발노트

node.JS로 개발한다면 아래 셋 중에 하나는 반드시 사용한다. 1. express 2. koa 3. hapi 1. Express 장점 : Node.js 프레임워크 중 커뮤니티가 가장 큼, 서버 쉽게 실행/ 운영가능, 내장된 라우터로 코드 재사용가능. 단점 : 수작업이 많음. 내장된 에러핸들링 없어서 미들웨어 잃어버릴 수 있음. 문제에 대한 접근법이 여러가지임. 메모리를 많이 먹음, async/ await을 정식지원하지 않아서 오류처리하는 부분은 편법으로 사용해야함. 2. Koa 장점 : 메모리를 덜 먹고 표현력이 좋다. 미들웨어 작성이 쉽다. 개발자가 필요한 미들웨어만 구성해 사용할 수 있음. ES6를 도입하고 있어 ES6문법사용가능, async/ await 정식제공 단점 : 불안정하고 많은 양의 개..

리덕스 : 상태관리(로직작성하는부분) 를 컴포넌트 밖에서 처리하도록 도와주는 라이브러리이다. 없는 상태로 뭔가를 만드려면 로직도 복잡해지고, 그냥.. 복잡하다는 느낌밖에 없었다. 이걸 이해해보려면, 리액트로 투두리스트 한번 만들어보길 바란다. 리덕스를 사용하면, 스토어에서 모든 상태관리가 일어난다. 1. 액션 : 상태변화를 일으킬때 참조하는 객체(타입이 반드시 있어야함) 2. 스토어 : 애플리케이션의 상태값을 저장, 관리 3. 디스패치 : 액션을 스토어에 전달하는 것을 말함 4. 리듀서 : 상태를 변화시키는 로직이 있는 함수. 파라미터를 2개받음.(현재상태, 액션객체), 함수내부에서 스위치 문을 만들어 액션 타입에 따라 새로운 상태 만들어서 리턴함. 5. 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 ..

css 작업의 종류에는 몇가지가 있다. 1. 순수 CSS파일로만 작성하는 방법 2. Sass 3. CSS module 4. styled-components 살펴보자. 문법은 약간씩 다르다. css의 JS같은 느낌? 1. Sass 장점 1) 자주쓰는 CSS 스타일 분리해서 사용가능 2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이 3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다.. 2. CSS Module 장점 1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능 2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘..

라이프싸이클을 보자마자. 안드로이드 라이프싸이클이 생각나는 것은 왜일까.... 위 메서드를 작성 후 실행하면 실행순서는 Constructor → getDerivedStateFromProps → render → componentDidMount 순으로 실행된다. 업데이트시에는 getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate 순으로 실행된다 각 메서드들의 용도. 1. Constructor : 초기 State를 정할 수 있다. 2. getDerivedStateFromProps : props로 받아온 값을 state에 동기화시키는 용도 3. render : 컴포넌트들을 화면에..

컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다. 먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다. 1. DOM을 꼭 사용해야 하는경우 1) 특정 input 박스에 포커스 주기 2) 스크롤 박스 조작하기 3) canvas 요소에 그림그리기 등 2. 사용방법 1) props 설정하듯이 하면 된다. 2) 아래처럼 원하는 DOM에다가 ref를 주면된다. (...) return ( {this.box = ref}} //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음. > );

이벤트 방식은 html과 비슷하며, 약간다르다. 1. 이벤트효과이름은 camelCase로 작성해야함. 2. 이벤트에 JS코드 전달이 아닌 함수형태의 값을 전달함. 3. DOM요소에만 이벤트 설정할 수 있음. 우리가 만든 컴포넌트에는 이벤트를 줄수 없음. 우리가 만든 컴포넌트에 이벤트를 줘버리면 단순히 이름으로 인식해서 props를 전달해줌. 4. 이벤트의 종류는 많다. 참고 : https://reactjs.org/docs/events.html 이벤트 효과주는법 2가지 1. 랜더링할때 같이 효과부여 import React, {Component} from 'react'; import PropTypes from 'prop-types'; import './EventPractice.css'; class Event..

state를 다뤄보자. 사용법은 앞에서 배운 props와 비슷하다. state는 props과 다르게 컴포넌트 자신이 지닌 값으로 컴포넌트 내부에서 값을 업데이트 한다. 선언 방식은 두가지!. 1. 생성자를 생성하고 그안에 this.state={ } 이런식으로 만드는 방법 constructor(props){ //Component로부터 상속받아, Coponent의 메소드를 커스템해서 쓰고 싶어서 생성자 생성. super(props); this.state ={ number : 0 } } } 2. 생성자 없이 만드는 방법. (...) state={number:1000} // 생성자 없이 transform-class-속성문법으로 생성자 밖에서 정의가능. render(){ (...) State 값을 업데이트 시 주..

JSX는 리액트에서만 사용가능한 자바스크립트 문법이다. 규칙 1. return 받는 컴포넌트들은 하나의 부모컴포넌트로 쌓여있어야함. 2. JS 문법을 사용하고 싶으면 {}를 치고 그 안에 사용해야함. 3. 템플릿 사용시 문법이 약간다름. 아래와 같이 2개 만들어봤다. 속성부여하는 법을 보자. 1. 부모 컴포넌트 class App extends Component{ render() { return ( ); } } export default App; 2. 자식컴포넌트 class MyComponent extends Component{ render(){ return ( 내이름은 {this.props.name}이야. .{/*props사용시 this붙여야함. */} ) } } Props는 3가지 방법으로 컴포넌트에 ..

포스기 간단하게 만들어보기. 구현해야할 기능 1. 버튼 누르면 주문목록에 리스트 뜨기. 2. 주문목록에 뜬 리스트 +나 - 버튼 누르면 수량 증가 및 감소하기. 3. 삭제버튼 누르면 리스트 삭제하기. 4. 2,3번에 맞춰서 총 합계 가격 나타내기. 5. 결제버튼 누르면 주문목록 초기화 하기 6. 결제취소 버튼 누르면 결제전 화면으로 돌아가기. 7. 같은 버튼 누르면 두개 이상안들어가게 하기. => 아직 미구현. 느낀점 1. 간단한 페이지는 제이쿼리로 하는 것이 효과적이지만, 요즘 추세가 제이쿼리를 안쓰는추세라 바닐라 자바스크립트로 코딩해서 그런지 줄이 길어지는 단점이 있음. 2. 시행착오 1) 가격합계를 구할 때, 어떻게 할까 고민하다가, 배열을 하나 만들어서 넣었음. 그리고 넣은 값을 reduce로 합..

자바스크립트 프로토타입. 다른 블로그나 MDN을 봐도 무슨말인지 이해하기 힘들 것이다. 한마디로 정의하면, 인스턴스가 생성(instantiation)될 때 원형(original form), 즉 프로토타입(prototype)의 모양대로 인스턴스가 생성 인스턴스의 메소드는 Object.prototype.something으로 표현, prototype === 원형 프로토타입과 인스턴스의 관계는 붕어빵틀과 붕어빵의 관계라고 보면 된다. 프로토타입이 있어야 인스턴스를 만들 수가 있다는 말이다. 그럼 프로토타입은 무엇이냐?? 사전적의미는 원형이다. 자바스크립트는 함수형 언어이다. 우리가 쓰는 Array나 Object, 그안에 딸린 메서드 들도 전부 function Array(){}, function Object(){..