본문 바로가기

전체 글66

react 클래스 컴포넌트의 this 리엑트에는 클래스 컴포넌트를 사용할 때는 this를 어떻게 사용하는지가 컴포넌트의 퀄리티를 바꾸게 됩니다. 튜토리얼이나 도큐먼트 문서를 보면 props나 state를 관리할 때 this를 사용하는 것을 많이 볼 수 있습니다. 그렇다면 this가 어떻게 사용되는지 알아보도록 하겠습니다. import React from "react"; class App extends React.Component { // 상태값 num 선언 state = { num: 0 }; // 버튼을 누르면 this.state.num을 1만큼 증가시킴 increase() { this.setState(current => ({ num: current.num + 1 })); console.log("increase메서드의 this는", this..
javascript에서 Class 사용하기 - 2 Class 정의 JavaScript에서 Class는 사실 함수입니다. 함수를 함수 선언과 함수 표현식으로 정의할 수 있듯이 class 문법도 class 선언과 class 표현식 두가지 방법으로 정의가 가능합니다. JavaScript 엔진은 function 키워드를 만나면 Function 오브젝트를 생성하듯, class 키워드를 만나면 Class 오브젝트를 생성합니다. class는 클래스를 선언하는 키워드이고 Class 오브젝트는 엔진이 class 키워드로 생성한 오브젝트입니다. Class 선언 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야합니다. 그렇지 않으면 ReferenceError 가 발생합니다. Class 표현식 Class 표현식은 ..
javascript에서 Class 사용하기 - 1 소개 javascript는 ES6에서부터 Class 지원을 시작했습니다. 단 javascript의 class는 다른 객체지향 언어에서 사용되는 Class 문법과는 다르게 사용됩니다. javascript에는 Class라는 개념이 없기 때문에 javascript는 prototype을 이용해 상속을 구현합니다. prototype javascript의 Class를 이해하기 위해서는 prototype에 대한 이해가 선행되어야 하기 때문에 prototype에 대해서 알아보도록 합시다. 자바스크립트는 원시 값(primitive, 또는 원시 자료형)을 제외하고는 모두 객체입니다. Object와 Function은 function(즉, 생성자)입니다. object는 객체를 의미합니다. function Card() { } ..
React Recoil 사용하기 소개 Recoil은 component의 state를 더 쉽게 관리하기 위해 페이스북에서 제작한 react state 관리 라이브러리다. react 자체에 이미 state 관리 기능이 내장되어 있지만 보완해야할 점이 있어 Recoil이 만들어 졌다. react의 한계 https://recoiljs.org/ko/docs/introduction/motivation - component의 state는 공통된 element까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. - Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. - 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)..
React에서 Axios 사용하기 소개 Axios, Ajax, Fetch 같은 http client들은 비동기 http 통신을 위한 방법 중 하나입니다. 특히 이번에 소개할 Axios는 Fetch와 유사한 점이 많고 promise 객체를 기반으로 사용됩니다. async와 await을 사용하여 함수의 실행 순서를 제어할 수 있고 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경해 Fetch처럼 stringify를 사용하지 않아도 됩니다. 또한 interceptors를 사용해 requests가 then이나 catch로 처리되기 전에 cancle하거나 interceptor 할 수 있고 자체적으로 요청 위조에 대한 보안 기능을 가지고 있어 보안면에서 훌륭합니다. Promise javascript 비동기를 간편하게 처리할 수 있도록..
마음대로 할 수 있는것 사회 속에서 구성원으로 지내다 보면 자신이 원해서 하는 일을 하기가 어려워지게 된다. 어떤 일을 하더라도 많은 사람의 이해관계가 얽혀있는 일을 맡은 이상 온전히 내 마음대로 하는 건 힘든 게 현실이고 마음대로 할 거면 직접 회사를 차리라는 말이 갑자기 생각나는데 회사를 차려도 과연 마음대로 할 수 있을까?라고 자신에게 되물어 보면 내가 할 대답은 당연히 No다. 오히려 일개 사원 생각해야 하는 부분보다 더 많은 관점에서 생각해야 하고 책임감이 막중하기 때문에 자신의 생각만을 온전히 반영하기는 어려울 것이라 생각된다. 그래서 사회에서의 나는 할 일을 하는 구성원으로서 남겨두고 사회에서 벗어나 있는 동안의 내가 무엇을 하고 싶을지 한번 고민해 보았다. 친한 친구들과 밤새도록 게임을 하거나 대화하기 자연이 있..
Docker Docker Compose file 열어보기 Docker Compose Docker는 하나의 앱당 1개의 DockerImage를 만들어 사용하기를 권장하기 때문에 여러 컨테이너를 실행해야 되는 경우가 발생할 수 있습니다. 이런 경우 컨테이너마다 실행하는게 번거롭기 때문에 Docker에서 Docker Compose라는 다중 컨테이너를 한번에 실행가능하게 해주는 도구를 제공합니다. Docker Compose는 Docker를 최초 설치할 경우 함께 설치가 되기 때문에 Docker를 설치하신 분들은 따로 설치할 필요가 없습니다. Docker Compse Example version: '3' services: mysql: build: context: ./mysql dockerfile: ./Dockerfile image: mysql-image containe..
Docker DockerFile Docker를 사용하게 된다면 DockerFile을 필수적으로 작성하게 된다. DockerFile 내에는 Docker Image를 어떻게 구성할지에 대해 작성할 수 있고 Dockerfile에서 구성한 설정들로 자동으로 DockerImage가 작성됩니다. DockerFile DockerFile은 텍스트 형식의 파일로 기본적으로 이름은 DockerFile로 설정하지만 특별한 경우에 따라 다른 이름으로 설정해서 사용이 가능합니다. 다만 이렇게 사용할 경우에 다르게 설정한 이름을 명시해줘야 합니다. DockerFile에 작성 가능한 설정들 FROM : Docker Base Image (기반이 되는 이미지, : 형식으로 설정) MAINTAINER : 메인테이너 정보 (작성자 정보) RUN : Shell Scrip..
Django 커스텀 커맨드 만들기 장고로 커스텀 커맨드 만들기 장고 manage.py에 커맨드를 추가하려면 장고의 사용자 지정 커맨드를 만들면됩니다. 커스텀 커멘드를 작성하는 것으로 manage.py부터 사용할 수 있는 커멘드를 늘릴 수가 있습니다. 이 글에서는 이 사용자 지정 커맨드를 만드는 방법을 설명합니다. 구체적으로는 ↓를 살펴 보겠습니다. 사용자 지정 커맨드 개요 프로젝트 만들기 앱 만들기 커맨드 만들기 커맨드 실행 커맨드에 대해 자세히 알아보기 사용자 지정 커맨드 개요 Django의 커스텀 커맨드는 정확히 "custom django-admin commands"를 말합니다. Django에서는 앱마다 커맨드를 만들 수 있습니다. 이 커맨드는 manage.py에서 실행할 수 있습니다. 예를 들어 showposts커맨드를 만들면 ↓와..