TS, JS/react

이번 프로젝트는 리액트에서 주로 사용되는 데이터 구조인 리덕스에 대해서 알아보려 합니다. 이해하기 쉬운 카운터를 이용해서 설명할 예정입니다. 제가 느낄 때 기본 패턴보다 Ducks 패턴이 더 편리하여 Ducks패턴을 사용하였습니다. *Ducks 패턴이란 리듀서 함수, 액션 타입 변수, 액션 생성 함수를 하나의 파일에 작성하는 방식입니다. (이번 프로젝트에서는 모듈이라는 폴더를 생성합니다. counter 컴포넌트가 있다면 위의 3가지를 하나의 파일에 몰빵 합니다. ) # 데이터 구조 및 흐름 기초적인 구조를 먼저 설명하고 넘어가겠습니다. 자세한 부분은 진행하면서 풀어가겠습니다. 컴포넌트 : 모든 웹에 보이는 뷰를 담당합니다. 보이기만 하는 껍데기입니다. 컨테이너 : 컴포넌트에서 보이는 기능들을 여기서 처리..

이번에 설명해볼 내용은 Context API에 관해서입니다. redux와 같은 상태 관리를 위한 라이브러리입니다. react의 내장 라이브러리로서 사용 가능합니다. create-react-app으로 리액트 프로젝트를 하나 생성해줍시다. 후에 import React, {createContext, useState} from 'react'; const ColorContext = createContext({color:'pink'}); export default ColorContext; 위와 같은 js 파일을 하나 생성합니다. createContext는 초기값 설정이라고 보시면 됩니다. json 타입으로 color를 pink로 초기화해주었습니다. import React from 'react'; import Col..

-React에서 Router란 SPA(싱글 페이지 어플리케이션)에서 경로 설정만으로 다른 화면을 보여주는 기술입니다. html 파일로 예를 들어보겠습니다. html에선 보여줄 화면이 3개라면 html 파일 3개가 각각 경로가 되어 화면에 보여줍니다. 하지만 SPA는 싱글 페이지 이기 때문에 화면이 하나입니다. 그러니까 router 같은 경로 설정을 이용하여 보여주는 화면을 다르게 설정하는것입니다. [ router기본 기능 및 qs, params, history 설명입니다. 자주 쓰는 기능을 다뤘습니다. ] -React에서 바로 실천해보기 npm install create react-app [원하는 프로젝트 명] yarn add create react-app [원하는 프로젝트 명] 명령 프롬프트에서 원하는..

이 밑으로 css에 관한 새로운 지식에 관한 나열입니다. 이런 것도 있구나 하고 봐주시게끔 간결한 페이지로 만들었습니다. $red: #fa5252; $orange:#fd7e14; $yellow:#fcc419; $green:#40c057; $violet:#7950f2; @mixin square($size){ $calculated:32px * $size; width:$calculated; height:$calculated; } .SassComponent{ display:flex; .box { background:red; cursor:pointer; transition: all 0.3s ease-in; &.red{ background: $red; @include square(1); } &.orange{ bac..

hooks를 쉽게 사용해봅시다. 일단 실행부터 해보고 구조를 뜯어보는 방식이 이해하기 쉽다고 생각합니다. 이전에 했던 reducer의 복습을 한번 할 겁니다. useReducer 기출 변형 import React, {useReducer }from 'react'; function reducer(state, action){ console.log(`action의 name ->${action.name}`); console.log(`action의 value ->${action.value}`); return{ ...state, [action.name]:action.value }; } const App =()=>{ const [state, dispatch]= useReducer(reducer, {user:'' , n..

hooks 란 react 16.8 버전부터 도입된 기능으로 함수형 컴포넌트에서 할 수 없었던 상태 관리를 가능하게 해주는 내장 라이브러리입니다. useState useEffect useReducer 설명합니다. create react app을 이용하여 새로운 프로젝트를 만들어 줍시다! 먼저 useState를 설명드리겠습니다 딱 한 페이지 분량으로 설명합니다. 클래스형 컴포넌트의 setState와 동일하게 값이 변경되면 리 렌더링을 해줍니다. 하지만 useState는 사용할 때 요렇게 사용한다. 간단하게 짜 봤는데 설명드리자면 import React , {useState} from 'react'; const App =()=>{ const [data , setData] = useState(0); return..

이 글이 필요하신 분은 이미 react.js 와 node.js의 차이에 대해 아실 거라 믿고 진행하겠습니다. 1, 2 탄으로 정리해서 수정하였고 이전의 글에서 보완 완료했습니다! 3탄은 예정! 1은 node.js 2는 react 파트로 나뉩니다. node.js를 아신다면 아래 링크로 넘어가 주세요. www.yeolceo.com/57 react 에서 express 로 값 전달하는 법 2 -YEOL 이설명만 하고 바로 리액트 설치하겠습니다! react에서 express로 값을 넘겨주려면 2가지 라이브러리를 react에 설치해야 합니다. 바로 axios와 http-proxy-middleware입니다. -axios react에서 express로 get이.. www.yeolceo.com 자 원하시는 부분 바로 들..

node.js를 사용하고 에디터는 atom을 사용합니다. (ide 다른 거 쓰셔도 무방합니다.) Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. javaScript 개발을 위한 환경이라는 의미입니다. V8 JavaScript engine What is V8? V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, m..

간단하게 배우는 dashboard 마지막 글입니다. ant design의 기본기를 익히시기에 편한 글이었기를 바랍니다. 측면 메뉴바 측 사이더를 만들어주기 위해 components에서 Menu를 찾으시면 됩니다. 가장 첫 번째 나오는 Menu컴포넌트의 코드를 보고 내용을 확인하시길 바랍니다. 간단히 요약한 코드입니다. 메뉴를 사용한다는 의미로 태그를 만들었고 그 안에 아이템으로 DashBoard를 설정했습니다. 큰 메뉴의 첫 번째에는 DashBoard 가 뜹니다. 그아래 SubMenu를 설정하는데 그 내부를 그룹화하는 ItemGroup이 있습니다. 메뉴를 그룹화하는데 타이틀 -> 즉 이름을 저런 이름의 그룹으로 만들어라 하는 내용입니다. SubMenu안에 아이템을 넣어주면 아래와 같은 모양이 완성될 것입..

이번에는 사이드 바를 제외한 layout 설정을 마무리 하겠습니다. layout 컴포넌트에 코드를 토대로 화면을 코딩합니다. 레이아웃은 헤더(상단 메뉴) , 사이더 (측면 메뉴) 컨텐츠( 중앙 내용) , 풋터 (하단에 설정할 내용) 으로 정리합니다. 씬은 처음부터 나눠놓고 시작하는 것이 효율적입니다. 스타일 설정은 사이더를 보시면 저런 식으로 색을 넣을 수 있습니다. red를 넣어줘서 구분을 줍니다. 화면을 보시면 글자가 잘 안 보이시고 크기도 작습니다. 그러니 글자 크기를 변경하러 갑니다. 타이틀을 이용할 건데 레벨이 크기를 의미합니다. 편하신 거 가져오셔서 헤더 사이에 넣을 겁니다. import는 꼭 해줍시다. (from 'antd'가 겹치면 import { Layout , Typography} fr..