profile
안녕하세요. 노드로 개발하는 마운틴러버 개발자 입니다.

리액트 입문기 - 리덕스를 사용한 리액트 상태 관리

리액트 애플리케이션을 리덕스를 사용해서 관리를 하게 되면, 컴포넌트 파일과 별개로 상태업데이트 모듈을 관리 할 수 있기 때문에 유지보수에 좋습니다. 가장 많이 사용하는 리덕스 패턴은 프레젠테이셔널 컴포넌트 컨테이너 컴포넌트 이 두가지로 분리 해서 사용하는 패턴입니다.

6일 전
·
0개의 댓글

리액트 입문기 - 리덕스

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리 입니다.리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.리덕스의 대해서 알아보도록 하겠습니다.1\. 액션객체상태에 어떠한 변화가 필요하면 액션이

2021년 1월 14일
·
0개의 댓글

깃과 깃허브, ssh통신

깃과 깃허브에 대해서 알아보도록 하겠습니다.git이란 소스코드를 관리하는tool이고gitHub는 git으로 관리한 코드를 사용해서 프로젝트를 서비스 하는 것입니다.

2021년 1월 14일
·
0개의 댓글

express프로젝트에 git연결하기

\* git 생성방법 \* git 스테이징에 파일 add add뒤에 .은 전체 경로를 의미합니다. \* 주의점node_modules파일은 크기가 크기 때문에 git스테이징에 add 하지 않습니다.또한 package.json에 모듈에 대한 정보가 들어있기 떄문에 굳이

2021년 1월 14일
·
0개의 댓글

리액트 입문기 - Hooks

Hooks는 리액트 v16.3에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있습니다. 지금 부터 Hook에 대해 알아보도록 하겠습니다. useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수

2021년 1월 13일
·
0개의 댓글

리액트 입문기 - 컴포넌트의 라이프 사이클

모든 리액트에는 라이크사이클(수명주기)이 존재합니다.라이프 사이클은 클래스형 컴포넌트에서만 사용이 가능합니다.라이프 사이클 메서드의 종류는 총 9가지 입니다. \* 접두사에 따른 메서드 Will접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드Did접두

2021년 1월 12일
·
0개의 댓글

리액트 입문기 - 컴포넌트 반복

반복되는 코드를 작성할 때 map함수를 사용하여 컴포넌트를 렌더링 할 수 있습니다. \* map문법 \* map문법 예제 key는 컴포턴트 배열을 렌더링 했을때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다. \* key설정 key값을 설정할때는 map함수의 인자

2021년 1월 12일
·
0개의 댓글

리액트 입문기 - ref:DOM

HTML에서 DOM요소에 id,name을 붙히듯이 리액트 내부에서도 DOM에 이름을 다는 방식이 있습니다. 바로 ref(Reference) 개념 입니다.기본적으로 state나 useState를 사용하여 이벤트를 핸들링 하나, 이것으로는 할 수 없는 이벤트를 발생시켜야

2021년 1월 12일
·
0개의 댓글

리액트 입문기 - 이벤트 핸들링

사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트 라고 합니다.리액트의 이벤트 시스템은 웹브라우저의 HTML이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.컴포넌트 생성 및 불러오기이벤트 핸들링 하기임의 메서드 만들기input여러개 다루기onk

2021년 1월 11일
·
0개의 댓글

Node.js 입문기10 - 시퀄라이즈

노드에서 MYSQL데이터베이스에 연결을 하고 작업을 쉽게해주는 라이브러리가 시퀄라이즈 입니다.시퀄라이즈는 ORM(Object-relational Mapping)으로 분류됩니다. ORM은 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주는 도구 입니다.시퀄라이즈를 사

2021년 1월 11일
·
0개의 댓글

Node.js 입문기9 - req,res객체

req,res객체는 http모듈의 req,res 객체를 확장한 것 입니다.

2021년 1월 10일
·
0개의 댓글

Node.js 입문기8 - Express/Router 객체로 라우팅

익스프레스를 사용하지 않고 라우팅을 하려면 매우 복잡하기 때문에, 익스프레스를 사용하게 되면 깔끔하게 라우팅을 관리할 수 있습니다.참고자료Node.js 교과서

2021년 1월 10일
·
0개의 댓글

Node.js 입문기7 - Express 미들웨어

미들웨어는 익스프레스의 핵심입니다. 요청과 응답의 중간에 위치하여 미들(Middle)웨어 라고 부릅니다.미들웨어는 요청과 응답을 조작하여 기능을 추가하거나 나쁜 요청을 걸러내기도 합니다.미들웨어는 app.use와 함께 사용됩니다.

2021년 1월 9일
·
0개의 댓글

리액트 입문기 - 컴포넌트의 종류

컴포넌트는 특정부분이 어떻게 생기지를 정하는 선언체를 말합니다. 컴포넌트는 클래스형, 함수형 두가지가 존재합니다. 지금부터 컴포넌트에 대해서 자세히 알아보겠습니다.클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있습니다.클래스형 컴포넌트는 r

2021년 1월 9일
·
0개의 댓글

리액트 입문기 - JSX

JSX는 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생겼습니다. 보기 쉽고 익숙하다활용도가 높다.ReactDom.render란?컴포넌트를 페이지에 렌더링 하는 역할을 코드입니다. react-dom 모듈을 불러와 사용할 수 있습니다. 첫번째 파라미터 : 페이지를

2021년 1월 9일
·
0개의 댓글

리액트 입문기 - 리액트 프로젝트 생성

지금부터 리액트 프로젝트를 생성해서 리액트에 대해서 알아보도록 하겠습니다.리액트 설치를 위해 nodejs를 설치합니다. nodejs설치시 npm도 같이 설치 됩니다.cmd 창을 열어 프로젝트를 생성할 경로로 이동합니다.npm init react-app <프로젝트

2021년 1월 9일
·
0개의 댓글

리액트 입문기 - 리액트의 특징

지금부터 리액트의 특징을 알아보도록 하겠습니다.Dom이란?브라우저에서 객체를 문서 구조로 표현하는 방법. 트리형태의 구조를 가짐Virtual Dom이란 Dom의 가벼운 사본과 비슷합니다.리액트에서는 Dom에 업데이트를 하기전에 다음과 같은 절차를 가집니다.데이터 업데이

2021년 1월 9일
·
0개의 댓글

리액트 입문기 - 리액트란

지금 부터 리액트란 무엇인지 알아보도록 하겠습니다.리액트는 페이스북에서 성능을 아끼고 사용자 경험을 제공하기 위해 구현한 라이브러리 입니다.리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는데 사용합니다. 구조가 MVC, MVW등인 프레임워크들과 달리 오직

2021년 1월 9일
·
0개의 댓글
post-thumbnail

Node.js 입문기4 - 노드 내장 객체

노드에서는 브라우저의 window객체와 비슷한 내장 객체와 내장 모듈을 제공합니다.따로 설치하지 않아도 사용이 가능합니다. 지금부터 자주 사용하는 내장객체에 대해 알아보겠습니다.참고문서Node.js 교과서

2021년 1월 2일
·
0개의 댓글

Node.js 입문기3 - 모듈 만들기

노드는 코드를 모듈로 만들어 여러 프로그램에서 모듈을 재사용할 수 있습니다.보통 파일 하나가 모듈이 되고, 파일별로 코드를 모듈화 할 수 있어서 관리하기 편합니다.브라우저의 모듈2015년 자바스크립트에도 import/export 모듈 개념이 도입되었지만, 브라우저에는

2021년 1월 2일
·
0개의 댓글