개발 블로깅
-
[2019.05.28] TypeScript 사용법 (TypeScript+Express 구현)개발 블로깅/Modern script 2019. 5. 28. 20:17
기존의 자바스크립트는 컴파일을 돌리지 않고 브라우저 상에서 돌아가는 언어여서 데이터 타입이 정말 느슨하다. 변수 타입이나 파라미터에서도 제한되는 것이 없고 너무나도 자유롭다 보니, 개발할 때 데이터 타입에 대한 오류사항이 정말 많이 일어나기도 한다. 그러나 실제 컴파일 환경에서 돌리듯 자바스크립트 문법에 데이터 타입을 하나하나 명시를 해 줌으로써 이를 방지할 수 있는 방식이 타입 스크립트이다. 4주 차 프로젝트를 진행하면서 백엔드 역할을 맡게 되었는데, 이번 기술 스택에 typescript를 사용하도록 되어있다. 이번 기회에 typescript를 손에 익힐 기회가 왔다. 백엔드 파트를 맡았으므로, typescriptfh express환경을 구성하는 방법을 정리해보려고 한다. # typeScript 기본적..
-
[2019.05.26] 오늘의 TIL - react key개발 블로깅/오늘의 TIL 2019. 5. 26. 17:43
배열만큼 동적으로 생성하여 만든 컴포넌트가 있다. 각 컴포넌트마다 state값을 가지고 있다. 배열 값 하나가 사라지는 작업으로 인해, 동적 컴포넌트 개수도 따라 하나가 사라지는데, 이 때 각 컴포넌트의 고유의 key 값이 없으면, 각 컴포넌트의 state는 자기위치 그대로 있고, 마지막 컴포넌트 하나만 사라진다. key값으로 인해 각 고유의 state값을 유지해 주어야한다. 그래야 중간에 값이 사라져도 virtual DOM으로 인해 컴포넌트 내 state가 유지되는 것을 막을 수가 있다.
-
[2019.05.19] 오늘의 TIL개발 블로깅/오늘의 TIL 2019. 5. 19. 18:34
오늘 리액트 2주 프로젝트 작업을 하다가 정말 알 수 없는 문제로 1시간을 아깝게 버린 일이 있었다.. 해당 문제는 아래의 예시와 같다.. var names = ['inyong','jack','carry','luck']; return ( {names.map((data,index)=>{ })} ) 위와 같이 name,key를 props로 던져준다. key는 동적으로 생성하여 사용시, 각 컴포너트 마다의 고유의 key값을 가지게 하는 것을 권장한다. 그래서 저렇게 key = {index}로 넣어서 각 고유의 키 값을 전달해주지만, MyComponent 태그 안에서는 key 값을 찾으면 계속 undefined로 나온다. class MyComponent extends Component { render(){ co..
-
[2019.05.12] 컨테이너 방식 독립환경 - Docker 개념개발 블로깅/기타 개념 2019. 5. 12. 21:50
개발을 하다 보면 하나의 환경에 여러 가지 기술을 쓰게 되는 경우가 많다. mysql을 돌리며 node를 돌리는 것과 같이... 그러나 이렇게 하나의 환경에 실행시키는 것보다, 환경을 서로 분리시켜서 따로따로 돌릴 수 있다면 어떨까? 서로 돌아가는 환경의 의존성이 사라지고, 개발환경 구성을 더욱 최적화 시킬 수 있을 것이다. Docker는 이러한 독립적인 환경으로 돌릴 수 있는 기술을 제공해준다. 하나하나의 환경을 컨테이너처럼 독립적인 환경으로 만들어서 사용할 수 있다. # 컨테이너 Docker에서는 각 각의 가상 환경을 컨테이너라고 부른다. 어떻게 보면 VMware나 VirtualBox와 같이 가상 OS를 생성하여 독립적인 개발환경을 만드는 것과 같다고 볼 수도 있다. 컨테이너와 가상OS의 차이 우선 ..
-
[2019.05.11] Express환경에서 mongoDB 사용하기개발 블로깅/Server&DataBase 개념 2019. 5. 11. 09:55
# mongoDB 개념 및 설치, 실행방법 mongoDB의 개념과 설치, 실행 방법은 이전에 블로깅 한 내용이 있어서 링크로 대체! https://helloinyong.tistory.com/42 [2019.03.26] NoSQL MongoDB 기초 MongoDB는 NoSQL의 종류 중 하나이다. NoSQL은 빅데이터 기반의 데이터베이스로, 정해진 칼럼이 아니라 컬렉션에 document가 계속 추가되는 방식이다. # MySQL과의 비교 mysql은 database를 새로 만들어주고 tabl.. helloinyong.tistory.com # express에서 MongoDB 사용법 express 안에서 mongoDB를 사용하기 위해서는 mongoose 모듈을 설치해야 한다. npm i -D mongoose n..
-
[2019.05.10] JWT-Token 방식의 정보 인증 [사용법]개발 블로깅/기타 개념 2019. 5. 10. 22:24
사용자가 로그인 후, 유저 정보를 cookie,Session 방식이 아닌 token 방식으로 안전하게 관리하는 방법이 있다. # token 방식의 특징 사용자 정보를 일일히 서버의 세션에 저장하지 않고, 사용자의 로컬에 저장. 사용자가 요청을 보낼 때마다 유저 정보 확인을 일일히 하지 않아도 됨. 웹 표준 기반 기술로써, 여러 환경에서 지원 이러한 토큰 방식을 사용하기 위해서는 JWT(Json Web Token) 기술을 사용한다. # JWT 모듈 설치법 npm i -D jsonwebtoken 모듈을 설치한다. # token 생성법 토큰을 생성하는 방법은 아래와 같다. const jwt = require('jsonwebtoken'); var userInfo = {id: 1, username: 'inyong..
-
[2019.05.08] react-redux 사용하기 (매우 어려움 주의...)개발 블로깅/React 개념 2019. 5. 8. 22:04
리액트 컴포넌트의 Depth가 커질 때마다 컴포넌트들끼리 state를 주고받기가 힘들어진다. 예를 들어, Depth가 5 정도 있는 컴포넌트가 Depth가 2 정도에 있는 컴포넌트의 state를 변경한다고 하면, 중간에 있는 모든 컴포넌트들이 해당 기능을 전달해 주어야 한다. 그래서 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 하는 방식이 redux이다... 개념이 정말 엄청나게 어렵다... 지금까지 배운 스프린트 중 제일 어려운 것 같다. 이틀동안 리덕스만 공부했는데, 이제야 감이 조금 잡힐 정도이다. 내가 공부해서 느낀대로, 습득한 대로 정리한 리덕스 개념. 우선 리덕스는 리액트 내부에 있는 기술이 아니다. 리덕스는 순수 html, javascript 내에서도 사용 가능하다. 그냥 대체적으로 ..
-
[2019.05.07] Sequelize - 조회,삽입,수정, 삭제 사용법개발 블로깅/기타 개념 2019. 5. 7. 09:11
# 각 시퀄라이즈 쿼리 사용법 # 조회 - findOne(All) const models = require('./database/models'); /* 특정 데이터만 조회 */ const getOneUser = async() => { const id = 1; const user = await models.Users.findOne({where: {id:1}}); console.log(user); } /* 전체 데이터 조회 */ const getUsers = async() => { const users = await models.Users.findAll(); } # 삽입 - create const models = require('./database/models'); const setNewUser = asyn..