본문 바로가기

전체 글

[REDUX]Redux Redux는 상태 관리 라이브러리이다. 영문 그대로 말하면 'Redux is a predictable state container for javascript apps.' 그래서 여기서 말하는 상태(state)가 뭘까? 리엑트의 개념을 알고 있다면 Props와 State에 대해 잘 알고 있을 것이다. 먼저 Props는 property의 줄임말이다. 이 props는 컴포넌트간의 데이터를 교환할 때 사용된다. 또 부모 컴포너트에서 자식 컨포넘트로만 보낼수 있다는 특징이 있다. 그리고 부모 컴포넌트로 받은 데이터는 자식 컴포넌트에서 수정이 불가능하다. State는 부모 컴포넌트에서 자식 컴포넌트를 주는게 아니라 컴포넌트 자체에서 데이터 변화를 반영할 때 쓰인다. 예를 들면 웹 페이지에서 점수를 주는 컴포넌트가 .. 더보기
[Node.JS]NPM & NPX 이번엔 npm과 npx에 대해 알아보자. 리엑트를 써본 사람이라면 모두 npm create-react-app 명령어를 사용했을 것이다. 이 명령어는 웹팩과 바벨의 환경을 설치해주는 것이다. 그러면 여기서 npx와 npm은 무엇일까. 먼저 npm은 node package manager의 줄임말이다. npm의 첫번 째 역할은 레지스트리라는 저장소이다. 이런식으로 다운 받은 라이브러리를 담고 있는 곳이 레지스트리라는 곳이다. npm install ***를 하면 모두 local인 레지스트리에 저장이 된다. npm install *** -g는 컴퓨터 안의 bin이나 다른 폴더 등 글로벌적으로 다운받아 지는 것이다. 그리고 어플리케이션을 켜거나 배포를 할 때 파일을 빌드하는 역할을 한다. 그러면 npx는 무엇일까?.. 더보기
[REACT]프로젝트 환경 구축 프로젝트를 시작하기 전에 Node 환경, Mongo DB, 로그인 기능 등의 환경을 구축해두었다. 이제 본격적으로 React를 학습할 차례이다. 먼저 리액트란 모두 알다시피 JS 라이브러리이다. 가장 큰 특징은 재사용성이다. 그 이유는 컴포넌트로 이루어져 있기 때문이다. 다음 특징으로는 Virtual DOM이다. 먼저 Real DOM은 만약 여러개의 리스트가 있을 때 하나의 리스트만 업데이트가 되어도 새로 Reload해야된다. 반면에 Virtual DOM은 그 바뀐 한가지 리스트만 DOM에서 바꿔준다. 그렇게 될 수 있는건 구조 때문이다. 먼저 리액트는 JSX를 렌더링 한다. 이 과정에서 Virtual DOM이 update가 된다. Virtual DOM은 이전 버전을 찍어둔 snap shot을 가지고 있.. 더보기
[REACT]React state 컴포넌트의 입력은 props이고 이 props를 컴포넌트의 함수 처리 하여 return값이 새로운 UI가 된다. 이때 함수를 다시 실행하여 새로운 return을 만들어주는 데이터는 바로 state이다. state를 사용하는 경우는 어떠한 변화나 이벤트가 생기면 함수를 다시 실행하여 새로운 값을 출력해주는 것이다. 먼저 state를 사용하기 위해선 import {userState, useState} from 'react'; 를 추가해준다. 그럼 바로 예시를 살펴보자. 우리가 하고 싶은 것은 아래처럼 Header 컴포넌트인 WEB을 클릭하면 Article에서 'WELCOME'을 나타내거나 nav를 선택했을 시에 그에 맞는 문장이 Article에 나오게 하고 싶은 것이다. 그러기 위해선 상태를 나타내는 변수를.. 더보기
[REACT]React 컴포넌트와 속성 컴포넌트 컴포넌트는 React의 핵심으로 초기 글에서 말했듯이 사용자 지정 태그이다. Header, Nav, Article이 App에서 사용된 컴포넌트라고 할 수 있다. 이렇게 함수형식으로 만들어져 태그형식으로 사용된다. 이 컴포넌트를 직접 만들어 사용하거나 다른 사람들이 만든 컴포넌트를 사용할 수 있다. Props Prop은 컴포넌트의 속성을 말한다. 각 컴포넌트의 속성을 주기 위해선 먼저 위처럼 title, topics, body처럼 값을 정해준다. 그 후 각 컴포넌트 함수에서 그 값들을 어떻게 사용할 건지 지정해준다. 각 함수들의 props가 다양하게 사용되는 것을 확인할 수 있다. (괄호를 하면 문자 그대로 인식하지 않아서 props를 사용할 때 {}를 사용한다.) 더보기
[REACT]React의 구조와 수정 & 배포 React의 구조를 살펴보자. 제일 먼저 src폴더의 index.js를 보면 이라는 태그가 있다. 이 ./App은 App.js라는 파일에서 import 했음을 위에서 확인할 수 있다. 그렇다면 이 ./App은 무슨 역할을 하는 것인지 App.js 파일을 확인해보자. App.js를 보면 알 수 있듯이 이 App이라는 Function는 html 구조를 가진 것을 알 수 있다. 그 함수안에서의 return 값이 index.js를 통해 사용자에게 보여지고 있는 것이다. 정리해보면 index.js는 웹의 입구이자 여러가지 전역적인 설정이 포함된다. 그리고 App.js의 수정을 통해 내용,UI를 편집할 수 있다. 그렇다면 화면 관리자모드에서 보이는 id가 root인 div는 무엇일까? Index.js에서 확인할 수.. 더보기
[REACT]React의 본질과 개발 환경 구축 React의 본질은 무엇일까? 본질이라는 말이 거창하지만 간단히 말하면 코드의 Grouping이라고 생각한다. 복잡한 코드 내용을 사용자 정의 태그를 통해서 간단히 사용, 재사용하는 것이다. React를 사용하는 방법은 Class와 Function이 있는데 최근에는 Function이 주를 이뤄서 나도 Function으로 사용할 예정. 이제 React 환경을 구축해보자. React 환경을 구축하기 위해서 node.js가 필요하다. 그 후에 VSC에서 React를 활용할 폴더를 열어준다. Terminal에서 ‘npx create-react-app 현재폴더’를 해주면 그 폴더에 React 환경이 설치된다. npm에서 사용가능한 언어가 나온다. 그 후 'npm start'를 명령해주면 React 개발 환경이 구.. 더보기
개발자가 되기 위해 차근차근 길고 길었던 3-1 학기가 끝나고 드디어 종강을 했다. 팀플도 많고 과제도 많아서 생각보다 많이 버거웠다. 이제는 방학이니까 내가 정말 하고 싶었던 공부와 운동에 최선을 다해야지.(계절학기 듣는건 비밀_) 내가 계획한 공부 방법은 다음과 같다. 먼저 코테 준비는 꾸준히 하루에 2시간정도 소요될 예정이고 7월 한달간은 강의를 들을 예정이다. 아직 나 혼자 서비스를 구현하지 못한다는게 창피하지만 어쩔수 있나 그게 내 과거인데~~ 이번 방학에 크게 발전해야지!! React와 Redux를 공부하고 React 기반의 클론코딩, 웹 사이트 구현을 할 예정이다. 가능하다면 Firebase를 이용한 채팅도 구현해 볼 것이다. 그 후 React와 Node.js를 통한 NodeBird SNS를 구현할 것이다. 한달동안 무.. 더보기

티스토리툴바