WEB
-
react-next pagination 구현WEB/react 2019. 8. 22. 11:46
db: sequelize 2, first. dispatching load request second. load posts with axios using query like axios.get(`api/post/${postId}?offet=${offset}&limit=&{limit})`third. load posts with offset and limits like db.Post.findAll({where: {id: req.params.id}, limit : req.query.limit,offset: req.query.offset})
-
react - next 프레임워크를 활용해 ssr(server side rendering) 간단히 해결WEB/react 2019. 8. 20. 03:06
server side rendering을 next의 getInitialProps를 활용해 간단하게 해결해보자. redux와 redux-saga를 활용해 문제를 해결한다. 다양한 액션 중 블로그에서 포스팅한 글들을 프론트 서버에서 백엔드 서버로 요청하는 것을 해보자. pages 폴더의 _app.js 에서 useEffect를 활용해 dispatch를 한다고 하면 1. next와 redux-saga를 연결할 패키지를 다운 받는다 npm i next-redux-saga npm i next-redux-wrapper npm i redux-saga 2. saga를 config 하자. (_app.js) 파일 import rootSaga from './saga.js' // saga를 지정해 놓은 파일 im..
-
npm library - multer (이미지 업로드)WEB/express 2019. 8. 18. 22:41
1. 사용이유 - 프론트 서버에서 multipart/form-data형식으로 들어올 때 사용된다. const multer = require('multer'); 를 한뒤, const upload = multer({ 설정 사항 }); 을 통해 multer를 설정한다. 그 후, upload는 함수이므로 각종 router의 미들웨어로 활용한다. 2. 설정 사항들. [routes/post.js] //라우터 폴더의 /api/post .. 를 처리하는 js 파일 const multer = require('multer'); const path = require('path'); const upload = multer({ storage : multer.diskStorage({ //파일을 어디에다 저장할 것인지. (현재 돌..
-
Javascript 기초 문법(1)WEB/javascript 2019. 7. 5. 19:29
Contents 주석 변수 기본 자료형 (primitive values) 기본 연산자 (operators) 제어문 함수 주석 // single-line comment /* multi-line comment */ 쉽죠? c언어와 똑같네요 변수 반드시 문자로 시작합시다. 변수는 Case-sensitive합니다. 즉, 대소문자에 주의해주세요 var x ; 로 변수를 선언 합니다. 근데, var는 쓰레기입니다. 쓰지마세요. 여기서 var는 variable, 즉 변수라는 말입니다. 현대에 와서는 let과 const를 주로 사용합니다. let은 다시 값을 할당할 수 있는 변수를 선언하는 것이고, const 는 값을 재할당하지 못하는 변수를 선언하는 것입니다. 코드예제 클릭해주세요 위의 코드를 봅시다. 우선 x를 선..
-
Javascript 시작하기WEB/javascript 2019. 7. 5. 19:06
Javascript 란? 웹페이지를 생동감 있게 만들어주는 언어. 극단적으로 얘기해보자면 웹페이지에 linux, window 같은 가상머신도 구현가능합니다. https://bellard.org/jslinux/ JSLinux JSLinux Run Linux or other Operating Systems in your browser! The following emulated systems are available: CPUOS (Distribution)UserInterfaceVFsyncaccessStartupLinkTEMUConfigComment x86Linux 4.12.0 (Buildroot)ConsoleYes click here url x86Linux 4.12.0 (Buil bellard.org Java..
-
Html 기본 태그WEB/html 2019. 7. 5. 18:11
Html 기본 태그들 글자서식 태그, , , 텍스트 서식 목록 태그 , , 링크 태그 이미지 태그 테이블 태그 오디오 태그 비디오 태그 시작전 간단한 예제 코드 안녕하세요 하하 안녕하세요 하하 반갑습니다 하하 결과 안녕하세요하하안녕하세요 하하 반갑습니다 하하 : 단락(Paragraphs) 하나하나의 짧은 이야기 토막 단락의 전후에 빈 줄이 추가 : 강제 줄바꿈 태그 : 프로그래머가 입력한 그대로 화면에 표시 헤딩(heading) : ,,,,, 웹페이지의 머리기사 텍스트 서식 태그 설명 ... 볼드체로 만든다 ... 이탤릭체로 만든다 ... 텍스트를 강하게 표시한다 ... 텍스트를 강조한다 ... 텍스트가 코드임을 표시한다 ... 위첨자(superscript) ... 아래첨자(subscript) 예시 강하..
-
Html 공부 시작WEB/html 2019. 7. 5. 17:30
Html 이란? HTML (Hypertext Markup Language) 특징1. 프로그래밍 언어는 아니다. 특징2. 우리 브라우저(예:크롬, 인터넷 익스플로러)가 웹페이지가 어떻게 생겨먹었는지 알 수 있도록 해주는 markup language 이다. Markup Langauge 란? 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 종류. 앞으로 보게될 과 같이 태그를 열고 닫아서 데이터의 구조를 명기하는 언어라는 뜻. HTML 요소(Element)의 구조 안녕하세요! 반갑습니다! * 는 태그. 태그 : 브라우저에게 html형식의 코드다 라고 알려줌. 태그 : 페이지를 열 때 브라우저에 표시되는 요소와 다르게, head의 내용는 페이지에 표시되지 않는다. 대신에 페이지에 대한 meta d..