Redux Essentials, Part 1
What is Redux? Redux: action 이벤트를 이용하여 애플리케이션 state(global state)를 업데이트하고 관리하는 라이브러리 Redux와 함께 쓰이는 라이브러리 react-redux redux-toolkit Redux DevTools Extension Concept Redux store안에 global state를 보관하고 action을 통해서...
React - Context API
context 이용 context를 이용하여 컴포넌트 트리 전체에 데이터를 제공한다. createContext import {createContext} from 'react' const SampleContext = createContext({ color: 'black' }) context객체를 생성한다. 매개변수로 default context 객체를 받는다. Provider에 의해...
React - Render props
Sharing data with other components 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서 props를 사용한다 class Parent extends Component { construcotr(props) { super(props); this.state = {x: 10, y:20} } render() {...
react-router-dom 맛보기
Static Routing vs Dynamic Routing Static Routing URL을 통해서 요청하면 서버 어딘가에 저장되어 있는 static file(html, ejs ,…)로 응답하여 UI를 렌더링하는 방식 예시) express.js의 routing app.get("/", ()=> { res.render('home') //...
immer 맛보기
why immer? immer는 불변 객체의 내용을 수정하는 경우에 사용한다. 불변 객체의 내용을 수정하여 새로운 불변 객체를 만들어 낸다. 리엑트에서 렌더링을 위해 원래 객체 또는 배열의 내용을 바꾸지 않고 새로운 객체...
Tagged Template Literals
Template Literal 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. `(backtick) 기호로 문자열을 감싸면 템플릿 리터럴이다. 리터럴 안에서 자바스크립트 표현식(expression)을 쓰고 싶으면 ${}안에 작성하면 된다. // example const name = "James"...
React - Basic Hooks - 1
Hooks 함수형 컴포넌트에서 state, 라이프 사이클 기능 등을 사용할 수 있게 하는 함수 useState 함수형 컴포넌트에 state를 사용할 수 있게한다. useState는 배열을 반환하는데 배열의 첫번째 요소는 state변수, 두번째 요소는 해당...
React - state 변경하기
React의 State State는 리엑트 컴포넌트안에서 정의되고 변경 가능한 데이터다. 기본적으로 클래스형 컴포넌트에서 사용하며 함수형 컴포넌트에서는 useState 훅을 이용해 사용할 수 있다. State값이 변경하여 업데이트가 발생하면 리렌더링이 이루어진다. State 정의 클래스형...
React - 조건부 렌더링
조건부 렌더링이란 조건부 렌더링이란 특정 조건에 따라서 화면에 보여지는 부분을 다르게 렌더링 하는 것을 말한다. React 컴포넌트에서 화면에 보여지는 부분을 구성하는 것은, render()함수의 return 부분이다. 특정 변수의 값에 따라서 렌더링...
React - 컴포넌트에 method 추가하기
컴포넌트 메소드 컴포넌트에 메소드를 추가하여 이벤트 헨들러로 등록할 수 있다. // Example <button onClick={컴포넌트 메소드}>버튼</button> 클래스형 컴포넌트에서 메소드 추가하기 - 1 클래스형 컴포넌트에서 메소드를 추가하기 위해서는 bind() 작업이 필요하다. //...
multer 맛보기
dive in multer Nodejs 교과서로 공부중인데 multer라는 패키지를 알게 되었다. 파일을 업로드 할때 사용하는 패키지인데 매커니즘을 더욱 완벽히 이해하고 싶어서 몇 가지 내용을 좀 더 알아보았다. Form 브라우저에서 서버로 데이터를...
Mongodb CRUD methods
Mongodb data document mongodb의 기본적인 데이터 단위는 document다. RBMS의 row라고 보면 된다. {“key”: value}의 형식을 가지고 있다. 자바스크립트 객체와 유사하다. document의 key의 타입은 string이기 때문에 “ “로 감싸줘야 한다. {"apple":...
Python으로 cli app 만들기
CLI(Command Line Interface) application이란 Text를 이용하여 프로그램에 명령(Command)를 내려 상호작용하는 Application 또는 program CLI APP을 만들기 위해서는 Text를 커맨드로 바꾸는 Parsing이 필요하다. argparse python에서는 cli를 만들기 위한 parser를 제공하고 있다....
유저컨트롤러 만들기(Creating a User conroller) - 3
순서 Login 구현하기 Logout 구현하기 1. Login 구현하기 로그인과 관련된 action은 두 가지가 있다. 로그인 화면 보여주기 authenticate() 로그인 화면 보여주기 module.exports = { // .... login: (req, res) =>...
Argument - Keywords vs Default argument - 1
1. Argument 유형 # caller func(arg1, arg2) func(arg1=value1, arg2=value2) func(*iterable) func(**dict) # function header def func(name) def func(name=value) def func(*name) def func(**name) def func(*other, name) def func(*, name=value) 2. Positional...