본문 바로가기
[Development] MVC 패턴 2020. 5. 26. 12:04 MVC 는 로직을 model, view, controller로 분리하여 data를 처리하는 방법을 말한다. view에서는 화면을 담당한다. controller는 data를 받아서 model에게 넘겨준다. 또한 model에서 data를 받아와서 view에게 주는 역할도 한다. model은 해당 data를 관리한다. 말로만 들어서는 잘 이해가 가지 않을 수 있다. // headers.pug 위 코드는 html template 언어인 pug를 사용하여 작성한것이다. indent를 사용하여 구분하는것 외에는 큰 차이는 없다. form tag로 get요청을 보내는 소스이다. 검색어를 넘기는것 같다. view에서 data를 넘기면 controller는 // controller.js controller는 해당 dat..
[Javascript] 비동기함수(3) - Promise 2020. 5. 26. 10:58 앞선 포스팅에서 비동기 함수를 사용할때의 callback hell을 설명한 바 있다. [Javascript] 비동기함수(2) - CallBack 비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수.. artdev.tistory.com 2015년 6월 , Ecma International 에서는 es2015라는 새로운 문법을 도입하였다. 약 500p 분량의 내용이 있는데 나도 아직 모르는문법이 수두룩하다. ecma2015바로가기 es6라 불리는 이 문법에 promise가 설명되어있다. 조금 deep해서 mdn의 설명을봐도 좋을것 같다. -mdn m..
[Javascript] 비동기함수(2) - CallBack 2020. 5. 25. 17:43 비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수가 실행된다고 가정해보자. server에게 data를 가져오는 http요청을 하는 함수이다. // Client side code... function getUserData() { //request (kim 이라는 user의 데이터를 요청 ) someCallToServer({username:"kim"},(err,data)=> { if(err){ return "err!!!"; }else{ // 받아온 data를 가지고 작업... } }) } 보통 이런식으로 작업을 하게 된다. callback으로 넘겨..
[2WeeksProject] Questionnare 2020. 4. 7. 17:13 Questionnaire app은 발표자와 질문자가 좀더 편하게 질문할수 있도록 하는 app이다. 실시간으로 질문응답을 할 수 있게 만들어 졌으며, 질문자는 익명처리가된다. flow 발표자의 로그인화면과 질문자의 코드 입력화면 발표자는 로그인을 하고 이벤트를 하나 만들면 (해당 이벤트에는 이벤트 코드가 있다.) 질문자는 해당 이벤트 코드를 입력하고 이벤트에 진입할수가 있다. 이벤트 개설(뒷편에는 이벤트가 개설된것이 보인다.(이벤트코드 : 008866)) 발표자 이벤트 진입화면과 , 질문자가 해당 코드를 입력하고 이벤트를 진입하는 화면이다. 질문자는 이제부터 해당 이벤트에 실시간으로 질문을 입력할수가 있다. 질문자가 질문을 올리면 발표자는 실시간으로 질문을 받을수 있고, 해당 질문의 좋아요 기능을 넣어서 ..
[NodeJS] JWT 2020. 3. 29. 15:38 // JWT란? // 왜쓰는가? // npm package 소개
[HTTP] CORS 2020. 3. 29. 15:35 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. mdn 그렇다. 말 그대로, 내 출처(도메인, 프로토콜, 포트)에서 다른 출처(도메인, 프로토콜, 포트)에 있는 자원에 접근할 때 적용되는 규칙이다. 자원의 요청을 아무나 막 하면 안되니까, 이런 정책이 있는것이다. 해당 자원을 가져오고 싶으면 해당자원을 가지고 있는 서버로부터 권한을 부여 받아야 한다. "preflighted" requ..
[Javascript] 비동기함수(1) - Event Loop 2020. 3. 29. 11:09 코드는 위에서 아래쪽으로 순차적으로 실행된다. console.log('첫번째'); console.log('두번째'); console.log('새번쨰'); 콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순서대로 실행되지 않는경우를 볼수가 있다. 바로가기 : [ Javascript WEB API ] console.log('1'); window.setTimeout(function(){ console.log('1초 후 실행'), 1000 }) console.log('3'); 위의 코드는 web api중 하나인 setTimeout이라는 매서드를 사용한것이다. 코드의 실행시간을 정할수가 ..
[ReactJS] state 2020. 3. 3. 11:53 (함수 컴포넌트로 state를 표현하는방법은 react hooks라는 방법으로 표현을 할수가 있다. 이 부분은 좀더 공부하고 포스팅 해야 겠다.) State 컴포넌트의 표현은 함수뿐만 아니라 클래스로 표현할수가 있다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } const element = ; consloe.log(element); 컴포넌트를 리액트 엘리먼트로 만들어 콘솔을 찍었을때 반환하는것들이다. 신기..

티스토리툴바