즐코

데이터가 바뀌면 화면(컴포넌트)이 바뀐다. 데이터가 추가/삭제/수정된 거를 알아채서 그 컴포넌트만을 바꿔준다. 원래는 props를 쓰려면 아래처럼 constructor로 props라는 인자를 React객체로부터 받아와야하는데 생략이 가능해서 엥간하면 생략한다. props는 부모 (상위) 엘리먼트가 물려준 속성값이라고 생각하면 된다. 나중에 html태그의 속성값과 헷갈리면 안된다. Input에서 this.props를 출력해보면 아래와 같이 객체가 전달된다. App이라는 컴포넌트가 Input 하위 컴포넌트에 객체형태의 데이터를 전달해준거고, Input 컴포넌트가 그걸 받아서 value로 써먹은 거다 state : 내 컴포넌트 안에 저장된 데이터를 담은 객체 한 컴포넌트 클래스나 함수 내에서 하나밖에 쓰지 못..

리액트 JS라이브러리 아래의 cdn을 넣어주면 바로 react와 babel을 쓸 수 있다. react : 리액트가 동작하는 핵심적인 코드가 들어있다. react-dom : 바뀐 값을 찾아서 그 영역만 바꿔주는 걸 도와주는 역할, 리액트 코드를 웹에다가 붙여주는 역할 리액트로 엘리먼트 생성 React.createElement(인자 3개) 1/ element명 2/ 속성값 : 여러 속성값 넣을 땐 객체 형태로 넣는다. {id:'ingoo', class:'ingclass'} 이벤트핸들러를 넣어주고싶다면 카멜케이스로 넣어줘야한다. (onClick 이렇게) 3/ innertext,innerHTML 같이 태그 안에 들어갈 내용들 // 속성값이 없을 때 const btn = React.createElement('bu..

출처 : http:// https://inpa.tistory.com/entry/SOCKET-%F0%9F%93%9A-WS-%EC%9B%B9%EC%86%8C%EC%BC%93-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0?category=914796#thankYou 여태 http 통신만 배우다 보니 웹소켓이란 걸 인지하지 못했다. 늘 우리가 접하는 채팅, 경매, 주식 사이트, 구글docs 등 실시간으로 통신이 필요할 경우엔 이 웹소켓 프로토콜을 사용한다. http 통신은 클라이언트가 요청을 해야만 서버가 응답을 준다. 요청 없이는 서버는 아무것도 응답해주지 않는다. 이 websocket 통신은 그렇지 않다. 양방향이 가능하다. 서버도 클라이언트의 요청없이 선톡이 가능하다. ..

1. 초반 설정 https://developers.kakao.com/ kakao developers 가입부터 해야하고, 그 뒤로 코드 치기 전에 초반 설정이 많다. 코드 상에 꼭 필요한 3가지를 초반 설정 시에 메모장에 적어둘 것 1/ REST API 앱키 (문서를 보다보면 client id라고 표현하는데 같은 단어임) 2/ Redirect URI : 이건 내가 정하는 거긴 한데, 정했으면 다시 찾기 귀찮으니 기록해두기 3/ Client Secret : 소금과 같은 것 1. 상단 오른쪽 > 내 애플리케이션 > 애플리케이션 추가하기 > 사진 및 정보 입력 (저 사진은 카카오 로그인 눌렀을 때 보이는 사진이라고 하니 실무에선 회사 로고를 쓴다고 함) 2. 내 애플리케이션 클릭 > 메인 화면에 앱키가 바로 뜸..

multer 라이브러리 사용법 - 하나의 파일 업로드 - 다수의 파일 업로드 - file input이 여러개일때 파일 업로드 - 비동기 파일 업로드 파일 업로드도 텍스트를 보내주는 것과 똑같다. 컴퓨터는 0,1밖에 모르니 파일,사진을 보내도 텍스트 파일로 본다. 파일 업로드에는 multer 라이브러리를 사용하는 걸 배웠다. npm install multer const multer = require('multer') 우선 파일을 업로드할 html파일을 작성해보자. 늘 하듯 form 형태로 보낸다. 다만, 여기서 이전과 다른게 있다면, enctype 이다. 아래와 같이 3가지 옵션이 있는데, default값이 application/x-www-form-urlencoded여서 이전엔 이 부분에 대해서 신경쓰지 ..

node.js 내부 라이브러리 path와 대표적인 함수들을 배워보았다. 이것들을 이용해서 파일 업로드 라이브러리 multer를 배웠다. 이건 다음 포스팅에서 정리할거임 내부 라이브러리라 npm install path 같은 거 할 필요 없다. 그냥 바로 const path = require('path') 하면 됨 __dirname 현재 실행 중인 파일의 절대경로가 찍힌다. 각 코드 실행환경이 윈도우냐 리눅스에 따라 결과물이 살짝 다르다. 윈도우(역슬래쉬) / 리눅스(정슬래쉬) path.join() vs path.resolve() 공통점 : 둘 다 인자로 경로들을 받아서 그걸 합쳐가지고 문자열 형태로 합친 경로를 리턴해준다. (파일명을 넣어도 됨) 아래 결과물을 보면 절대경로(__dirname) + 파일명(..

우선, 서버쪽에 idcheck라는 라우터를 만들어준다. 전체적으로 적용할 솔루션은 아래와 같다. 사용자가 input에 입력한 id를 가져와서, 우리가 가지고 있는 사용자 정보 (user)와 비교하여 아이디가 같은 게 있다면, item에 담아준다. result란 값을 우선 1로 잡아주고, (let result = 1) 중복된 아이디가 있다면 (item이 undefined가 아닐 때) result=2로 응답에 담아서 보내준다. 중복된 아이디가 없다면 (item이 undefined 라면) result=1로 응답에 담아서 보내준다. 이 때, response를 보내줄 때, 즉 통신을 할 때는 객체형태의 데이터는 보내줄수 없다. 따라서, json형태로 바꾸어서 보내주는 게 포인트이다. res.send(JSON.st..

저번 미니 프로젝트 복습 겸 사용자계정을 DB에서 당겨오는 방식으로 JWT 로그인 기능 구현을 연습해보았다. 사실 router 분리를 해야하지만 로그인 기능만 구현할 거니까 server.js 파일에 다 때려박았다. 이번엔 async await를 써보자고 마음먹었다.. 우선 써보기전에 원래 했던대로 콜백지옥을 만들어보앗다. pool.getConnection의 인자로 콜백함수가 들어가고, conn.query에도 3번째 인자로 콜백함수가 들어가니 그안에서 if문까지 써버리면 엄청난 depth가 생긴다. 특히, pool과의 connection을 다시 return해주는 conn.release()를 어디 괄호뒤에 써야할지 찾는 것도 힘들다. 그래서 async, await으로 바꿔보았다. 어떻게 바꿀지 감이 안잡혀서..

buffer = 컴퓨터가 이해할 수 있는 binary data (이진수 데이터)의 스트림을 직접 다루기 위해 node.js에서 제공해주는 API다 = 브라우저에서 사용하는 JS에는 없다. buffer가 뭔지 알기 전에 기본적인 걸 잠깐 짚고 넘어가야겠다. - Character Set 문자 집합 각각의 문자를 컴퓨터가 이해할 수 있도록 숫자로 정의해놓은 규칙표 (유니코드, 아스키코드 등) * charCodeAt() 메소드 JS 메소드 중에 .charCodeAt()를 활용하면 각 문자를 유니코드표에 맞춰 숫자로 출력해준다. 문자.charCodeAt(0) 하면 문자열의 0번째인 y를 나타내는 숫자를 출력해준다. - 문자인코딩 위에선 문자를 숫자로 변환했다면 (y->121) 이젠 컴퓨터가 정말로 알아먹을 수 있..

어떤 웹사이트던간에 회원/비회원에 따라 페이지가 구분된다. (마이페이지, 회원정보 수정, 게시판 페이지 등..) 즉, 서버는 사용자를 구분하여 사이트 내 각각의 기능들을 허용해줄지 말지 결정해서 응답을 해야한다. 그래서 웹사이트 내에서 사용자가 페이지 이동 시, 서버가 각 페이지에서 이 사용자를 기억하기 위해 즉, 사용자의 로그인 상태 유지를 위해 필요한게 인증과 인가이다. 1. 인증(Authentication) & 인가(Authorization) 과 세션 리마인드.. 인증(Authentication) 인가(Authorization) 사용자의 id와 pw를 확인해 회원임을 인증하는 과정 (로그인/회원가입) 로그인을 하고나서 (회원임을 인증하고 난 이후에) 한 웹사이트 내에서 여러 페이지/서비스를 이용할 ..