![]()
- 우분투 설치하기 자 이제 우분투를 설치하러 가보겠습니다. 저희가 사용할 버전은 18.04 버전입니다. https://releases.ubuntu.com/18.04/ Ubuntu 18.04.4 LTS (Bionic Beaver) Select an image Ubuntu is distributed on three types of images described below. Desktop image The desktop image allows you to try Ubuntu without changing your computer at all, and at your option to install it permanently later. This type of image is what m releases.ubu..
![]()
- postgresql 이란 관계형 데이터 베이스의 일종입니다. 제가 사용하는 이유는 postgresql로 하라고 해서입니다. 일반적인 RDB는 sql문으로 관리하기 때문에 db는 선택입니다. - postgresql 설치 파일 다운로드 postgresql 사이트에 접속하여 설치하면 됩니다. 하단의 링크를 남겼고 저는 하단의 표시한 부분을 클릭 다운로드하였습니다. (64비트입니다.) 11을 택한 이유는 최신보단 안정적인 하나 아래 버전을 선택했습니다. 원하시면 12 하셔도 무방합니다. https://www.enterprisedb.com/downloads/postgres-postgresql-downloads PostgreSQL Database Download Please Note: EDB no longer ..
![]()
- vmware란 Windows 또는 Linux PC에서 단일 가상 머신을 실행하기에 적합한 유틸리티입니다. 쉽게 말하자면 vmware라는 프로그램을 사용하면 윈도란 운영체제 내에 다른 운영체제 더 사용할 수 있게 해 줍니다. https://www.vmware.com/kr.html 위의 경로는 홈페이지 사이트이고 아래는 다운로드하기 위한 화면 예시입니다. https://www.vmware.com/kr/products/workstation-player/workstation-player-evaluation.html 위와 같은 다운로드 url에서 다운로드 가능합니다. 저의 컴퓨터 os는 윈도기 때문에 윈도 기반으로 사용합니다. 다운로드한 파일로 install 진행해주시면 됩니다. enhanced keyboar..
![]()
koa를 간단히 설명하자면 express와 같은 node.js에서 서버를 실행하기 위해 사용하는 웹 프레임워크입니다. express의 개발자분들이 만드셨고 특징은 가벼움과 비동기 작업을 정식 지원하는 부분입니다. 써 내려가면서 설명하겠습니다. (큰 차이는 잘 느껴지지 않았습니다.) - 초기 설정 yarn init -y를 실행하여 본인이 원하는 폴더에 파일을 생성합니다. yarn add koa를 통해 해당 프레임워크를 다운로드합니다. https://www.npmjs.com/package/koa koa Koa web app framework www.npmjs.com src폴더를 생성하고 index.js 파일을 폴더 내부에 생성합니다. const Koa = require('koa'); const app = n..
![]()
지금까지 잘 따라와 주셔서 감사합니다. 이제 카운터의 컨테이너를 만들 것입니다. 그전에 흐름을 한 번 더 살펴봐주세요. 이해가 잘 간다면 다음으로 진행해주세요. #데이터의 흐름 컴포넌트(View)의 버튼(어떤 기능)을 클릭합니다. 그러면 컴포넌트의 데이터를 관리하는 용도의 컨테이너에서 클릭된 기능을 dispatch (action)합니다. 클릭된 기능은 액션 타입으로 구분해줍니다. 액션이 실행됐다면 그에 맞는 타입의 리듀서가(모듈) 클릭된 기능을 이행합니다. 이행한 값은 스토어에 저장됩니다. 스토어에 새로운 값이 저장되면 View를 리 렌더링 해줍니다. #카운터 컨테이너 가장 처음 만들 것은 폴더입니다. src경로에 containers 폴더를 만들어줍니다. 만들었을 때 컴포넌트, 컨테이너, 모듈 폴더가 각..
![]()
이번 프로젝트는 리액트에서 주로 사용되는 데이터 구조인 리덕스에 대해서 알아보려 합니다. 이해하기 쉬운 카운터를 이용해서 설명할 예정입니다. 제가 느낄 때 기본 패턴보다 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..
현재 미국에는 있고 한국에서는 test중인 youtube 쇼핑몰. 이미 생각 있는 it 기업에서 관련 프로젝트 진행 중일 것이다. naver나 kakao는 국내 기업인만큼 무언갈 실행할 때 국내 기준 계획 추진이 빠를 것이다. 하지만 youtube는 다르다. 국내 기업 그이 상의 리소스와 빅데이터를 확보했지만 글로벌 기업인만큼 한국에서 하는 사업 추진이 더딜 수밖에 없다. 그럼 어떤 것을 생각해야 할까. youtube 쇼핑몰에서 어떤 이익을 창출할 수 있을까에 대한 써드파티는 아직 많지 않을 것이다. 그렇다고 내가 프로그래머로서 뭘 하기도 애매하다. 일반적으로 할 수 있는 일(국내에 시스템 도입하자마자 올리는 게 포인트다.) 1. 유튜브와 쇼핑몰 관련 설명 및 설정 영상을 만든다. 미국의 시스템을 미리 ..
![]()
-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..
