kasumil의 코딩 공작소

youtu.be/OGO4XtWl8Sc 작성한 내용. 소개부분에서 본문아래에 여백을 만듬. 다른 컴포넌트와 차별을 주기위해서 만듬. nav바가 width: 768이하일때만 렌더링되게 만듬. 사이드바를 클릭시에 해당 기능을 작동하게 만듬. footer와 구분하기 위해서 여백을 추가

위코드에 졸업한지도 오래되었지만, 요즘 코로나 시국이라 웹 개발자(코더)가 늘어나서 그런지 취업이 너무 힘들다. 기존에 내가 wecode에서 작업한 1,2차 회사홈페이지 클론으로는 도저히 취업이 힘들기에 나만의 작품이 있어야 한다고 판단. 그러므로 해당 페이지를 직접 만들어보기로 했다. 오랜만에 코드를 직접 치니 갑자기 막 헷깔려서 약간 헤매고 있다. 뭘 불러와야되더라? 이러고 있지만 구글링하니 바로 나와서 ㅎㅎ 글자 폰트는 뭐로 바꾸지? 이런 것들이 갑자기 생각이 안나서 깜짝 놀랐다. 뭐 그래봤자 바로 검색해서 찾아서 적용했고 말이다. 물론 리덕스도 잘 리덕스 데브툴즈 연동했다. initialState값을 적용해서 해당 값을 잘 읽어오고 있다. (리덕스는 처음 적용중이라 action 함수쪽에서 뭘로 적..

방법은 간단했다. 프론트엔드단에서 npm build나 yarn build로 정적 파일을 구축하고, 이를 서버측에서 이러한 파일을 사용할 수 있도록 라이브러리(koa-static)를 설치하여 정적파일을 읽는 기능을 구현하여 소비자가 요청시에 해당 프로그램을 읽게 연동시키면 된다. 이를 몰라서 어떻게 구현하나 고민이 많았는데, 간단했다. const buildDirectory = path.resolve(__dirname, "../../blog-frontend/build"); app.use(serve(buildDirectory)); app.use(async ctx => { // Not Found이고, 주소가 /api로 시작하지 않는 경우 if (ctx.status === 404 && ctx.path.indexO..

메서드 설명 GET 데이터를 조회할 때 사용합니다. POST 데이터를 등록할 때 사용합니다. 인증 작업을 거칠 때 사용하기도 합니다. DELETE 데이터를 지울 때 사용합니다. PUT 데이터를 새 정보로 통째로 교체할 때 사용합니다. PATCH 데이터의 특정 필드를 수정할 때 사용합니다. update와 replace 함수는 용도는 비슷하지만 구현 방식이 다릅니다. update(PATCH)는 기존 값은 유지하면서 새 값을 덮어 씌우는 반면, replace(PUT)은 Request Body로 받은 값이 id를 제외한 모든 값을 대체합니다. # 요청 PATCH http://localhost:4000/api/posts/1 { "title": "변경됨" } # 결과 { "id": 1, "title": "변경됨",..

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 FrameworkProduction 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..