JavaScript
-
[2019.09.01] 오늘의 TIL - node 버전에 변경하는 방법개발 블로깅/오늘의 TIL 2019. 9. 1. 11:46
프로젝트를 git clone 후 npm install을 실행하며 발생한 오류를 처리 중 배운 내용 정리. # node 버전 환경 project의 node 버전은 8.x.x. (버전 확인은 project최상위 디렉토리의 '.node-version'파일에서 확인 가능) 나의 node 버전은 12.x의 최신 버전. $ node -v // 로컬 node 버전 확인 # install 실행 결과 엄청나게 이상한 모듈 로그가 계속 올라오며 설치과정이 끝나지 않음. # 해결 방법 내 로컬 노드 버전을 project 버전에 맞게 다운그레이 함. 1. npm Cache 삭제 $ npm cache clean --force 2. node 버전 관리 플러그인 'n' 설치 npm install -g n 3. n 최신버전 설치 n..
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..
-
[2019.08.14] Mobx State Tree(mst) 사용법개발 블로깅/React 개념 2019. 8. 14. 21:00
Mobx State Tree는 Mobx에서 조금 더 체계가 잡힌 패러다임....? Mobx의 type, action 등 구조의 자유도가 높았다면, mobx state tree는 관련된 것들끼리 tree 구조로 구성하도록 한다. (설명이 아직은 어렵다..) # mst를 사용하기 위한 환경 세팅 $ npx create-react-app $ yarn add mobx mobx-react mobx-state-tree # model 정의 model은 컴포넌트 내에서 사용되는 하나의 store이다. 해당 store 값을 조작하는 함수인 actions. store 변경으로 인해 자동으로 연상되는 (mobx의 computed와 같은)값 views. 위와 같이 하나의 store와 해당 store에 관련된 것들끼리 모여 하..
-
[2019.08.12] CRA(Create-React-App) 사용 시, npx를 써야하는 이유!개발 블로깅/기타 개념 2019. 8. 12. 21:17
# npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm 버전이 5.2.0 이상이면 바로 사용할 수 있다. # npx를 이용한 CRA 설치 리액트를 처음 시작할때, 또는 리액트 환경을 쉽게 구축하여 프로젝트를 진행하고자 할때 사용되는 것. $ create-react-app HelloReact 그러나 위 명령어를 사용하기 위해서, 먼저 crate-react-app 패키지를 npm으로 글로벌 설치를 해 주어야 한다. $ npm i -g create-react-app $ create-react-app HelloReact 그러면 CRA 패키지가 PC에 글로벌하게 설치되어 쉽게 사용할 수 있다. 실제로도 이러한 방식은 일반적으로 많이 쓴다. 그러나 이..
-
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 12. 01:40
# Mobx-react 기본 개념 및 사용법 1 [2019.08.11] Mobx-react 기본 개념 및 사용법 1 (살짝 어려움 주의) Redux와 같이 global state 관리를 할 수 있는 mobx라는 라이브러리. Mobx는 Redux처럼 React에 종속되어 있는 라이브러리가 아니므로, 꼭 React가 아닌 일반 javascript 내에서 또는 vue.js와 같은 다른 웹 프레.. helloinyong.tistory.com 앞에서 구현한 Counter 컴포넌트를 이용하여 Mobx에 대해 더 알아보도록 하자. # observable 값 변경에 의한 연산 처리 computed Counter 값을 변경할 때마다, 자동으로 제곱된 값이 나오도록 해보자. src/Counter.js import Reac..
-
[2019.07.18] Styled-components 사용법(매우쉬움)개발 블로깅/기타 개념 2019. 7. 19. 00:23
엄청나게 간편해진 CSS 적용법! (이젠 내 인생에 확장자 .css파일을 건들 일은 없을 것 같다..ㅎ 아마도..) $npm i -S styled-components 그리고 직접 Component를 만들되, 거기에 style을 입힌다. import styled from 'styled-components'; const TempSpace = styled.div` background-color: white; margin: 0 0 10px 0; ` 스타일 작업을 위 코드와 같이 입힌 컴포넌트를 생성하여 사용하면 된다 # style에 props 넘기는법 (이부분이 매우 중요!) 해당 컴포넌트에 props를 내려서 style를 변경시킬 수 있다. 예를들어, TempSpace라는 컴포넌트에 check라는 props값..
-
Cup Holder 소개 - 2주 프로젝트핵인싸 개발자의 길/코드스테이츠 Immersive Course 2019. 6. 25. 01:12
시연영상 github Cup holder 코드스테이츠 2주 프로젝트 Cup holder - 조진혁, 김종욱, 정인용. Cup holder has 2 repositories available. Follow their code on GitHub. github.com 나의 2주 프로젝트 블로깅 내용 # 진행사항 Blogging 2주 프로젝트를 마치며 - https://helloinyong.tistory.com/120 2주 프로젝트 벌써 넷째 날 - https://helloinyong.tistory.com/119 2주 프로젝트 둘째 날 - https://helloinyong.tistory.com/118 2주 프로젝트 첫째 날 - https://helloinyong.tistory.com/117 # 기술스택 & T..