kasumil의 코딩 공작소

Express에서 문제가 되던 단점을 Express 개발자들이 이를 개선하여 새로 만든 프레임워크입니다. Express가 프레임워크로 다양한 기능을 갖고 있는 반면에, Koa는 미들웨어만 내장으로 갖고 있어 내가 필요한 기능만 가져와 구축하여 만들면 되므로 훨씬 가볍다는 장점이 있습니다. koajs.com/ Koa - next generation web framework for node.js Introduction Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and API..

리액트 라우터와 호환되지 않는 단점을 가지고 있으나, 코드스플리팅, 데이터로딩, 서버사이드 렌더링을 가장 쉽게 적용할 수가 있어 매우 각광받는 방식이다. 리액트 라우터를 쓰려고 하는 경우 직접 코드스플리팅, 데이터 로딩, 서버사이드 렌더링을 직접 구현해야한다. nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Razzle Next.js처럼 서버 사이드 렌더링을 쉽..

배우는데, 너무 어렵다. 코드스플리팅, SSR, JWT 배우는데 굉장히 어렵고 힘들다는 생각만 드네 Redux가 어려웠는데, 리덕스보다 더 어려운 thunk, saga보면 짜증나고, 불변성 유지해주려고 immer 이런것으로 써주면 편하긴한데, 리덕스에서 적용하긴 힘들어지고 너무 연관되면서 까다로워지니 어렵다 어려워~

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..

해당 코드는 '도서 "리액트를 다루는 기술"에 저술된 코드입니다.' import React, { useReducer } from "react"; const initialState = () => { counter: 1 }; function reducer(state = initialState, action) { // action.type에 따라 다른 작업 수행 switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } useReducer 리덕스를 이해하기 위해서 useReducer를 이해해야..

잠깐 서버구축으로 node로 외도한 건 비밀. 다시 돌아왔습니다. 테슬라 클론을 진행 중 입니다. 현재 스크롤이벤트에 발목이 잡혔는데요. {data && data.car.map((el, i)=> { return ( ) }) } 그 이유는 리액트에서 DOM에 직접 접근하기를 권하지 않고 있습니다. useRef란 것을 사용해야하는데, 해당 것을 사용하기가 어렵다는 것이죠. 자료가 별로 없습니다. 기껏해야 해당 위치로 버튼과 연동하는 방식? 하지만 직접 접근이 가능하니 그것으로 접근해도 됩니다. document.addEventListener('scroll', function() { var currentScrollValue = document.documentElement.scrollTop; console.log..

const http = require('http'); const fs = require('fs'); const app = http.createServer((req, res)=> { let url = req.url; if(req.url == '/') { url = app.js; } if(req.url == '/favicon.ico') { return res.writeHead(404); } res.writeHead(200); res.end(fs.readFile(__dirname + url)); }) app.listen(3000) 나는 프론트엔드 개발자로서 Node.js를 공부하고 있다. 그런데, 백엔드쪽에서 배포해본적이 없어서 그러는데, if(req.url == '/') { url = app.js; /* a..

youtu.be/D8JnyG-Die4 최근 크롤링을 진행할 수 있게되어, 개인 사이드프로젝트가 이제 진행되고 있다.위코드 졸업한지 4개월만에!! 아무도 크롤링, 웹스크래핑에 대해서 알려주지 않았기에 고생했던 부분 ㅠㅠ파이썬의 경우 크롤링을 해봤지만, 웹스크래핑을 알려주지 않아서 그냥 전체페이지 긁어와서 해당 페이지 내용을일일히 긁어와야 했던지라 포기했으나 이제 다시 진행하게 되었다. 하지만 초짜라 그런지 자료구조를 이상하게 짜서 잘못만들어졌다. 동영상을 보면FOOTER부분보다 아래에 빈칸이 생겨 있는 것이다. json파일 자료만 봐도 잘못 만들어서 다시 만들어야한다.쓸데없는 map을 돌릴때 필요없는 FOOTER자료까지 긁어와서 해당 빈칸이 생긴 것으로 추측한다.이를 고치고, 다시금 JSON을 만들어서 진..

구글에서 노드 크롤링을 검색하면 의외로 자료가 없다. 그나마 검색되는 내용중에 'cheerio', 'cheerio-httpcli'를 사용하라고 한다. 하지만 'puppeteer'에 관련된 내용은 없더라. 어쨌든간에 노드크롤링에 대한 해당 내용을 찾아보았다. data-make.tistory.com/436 [Node.js] cheerio module 로 크롤링하기 .Install cheerio module - Install Cheerio from npm npm i cheerio .Using cheerio 달러 환율의 일별 시세를 크롤링 해보려고 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 c.. data-make.tistory...

expressjs.com/en/starter/generator.html Express application generator Express application generator Use the application generator tool, express-generator, to quickly create an application skeleton. You can run the application generator with the npx command (available in Node.js 8.2.0). $ npx express-generator For earlier Nod expressjs.com npx express-generator npm install -g express-generator //..