2일차부터는 React와 Redux을 연동하는 교육을 진행했다. 아래 모듈을 필수로 포함해 환경 셋팅을 요청드렸다. 내가 정말 도움을 많이 받은 블로그도 같이 소개해드렸다. https://d2.naver.com/helloworld/1848131 redux redux-pender redux-actions 그치만 아무래도 에밀리는 처음으로 스스로 개발 언어를 스터디하는거다보니 어려움이 있었다. 나도 처음에 공부할때 내가 뭘 모르는지도 모르는 상태였는데, 아마 비슷할 것 같다. 그래서 단계별 실습으로 두려움과 복잡함을 극복하고자 아래와 같이 진행 순서를 명시해줬다. 모듈 설치 폴더 구조 만들기 redux + redux-pender 연결하기 redux-action + redux-pender 연결하기 1번까지 완..
Beter 프로젝트의 개발환경을 NextJS, Apollo, GraphQl, React, Typescript 구성으로 셋팅하기로 했다. 1. Project 만들기 npx create-next-app cd npm run dev 2. Typescript 셋팅하기 /tsconfig.json 만들기 npm run dev 위 과정을 마치고 pages와 api 폴더에 자동으로 생성되었던 _app.js와 hello.js을 타입스크립트 파일로 바꿨다. // api/hello.js -> api/hello.ts import { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default (req: NextApiRequest..
이번에 후배가 인턴을 하게되면서 준비했던 내용을 정리해봤다. 레이첼이랑 둘이서 하다보니 이게 맞는건지 확신이 안들었는데, 이참에 다시 개념을 잡을 수 있었다. (혹시 이 시리즈를 보고 '어 이거 아닌데?' 하시는 분이 계시면 댓글로 알려주시면 감사하겠습니다ㅠㅠㅠ) 첫날에는 가볍게 React에 대해서 학습했다. CRA, Babel, Redux, Webpack 등등 느낌만 받길 원했는데, 내가 처음 React을 접했을때 엄청난 모듈들에 압사 당했을때처럼 후배도 조금 쫄게 되었다. (도망안갔으면 좋겠다고 생각한거 같다...) CRA: https://create-react-app.dev/ Babel: https://babeljs.io/ React + Redux 구조 흐름도 파악하기 둘째날부터 본격적으로 교육을 ..
내가 프론트엔드를 맡아서 할때 백엔드에서 업무 부하가 심해 자처한 작업이었다. 엑셀 템플릿이 따로 없어서 단순 Export는 쉬웠다. 그런데 고객이 요구하는 엑셀 템플릿을 보고 무릅을 꿇었다. 다양한 색깔과 병합됐다가 분리되었다가 하는 셀들...거기다 차트까지..! 순간 똥밟았다고 생각했지만 그래도 한번 건드린 일은 끝까지해야되기 때문에 여러가지 시도를 해봤다. 우선, 알록달록한 셀 색깔부터 찾아봤다. NodeJS 환경에서는 sheetjs, xlsx-style, xlsx-chart, excel4node 등등 다양한 엑셀 Export 관련 라이브러리가 있었다. sheetjs는 무료모드로 엑셀을 변환할때 스타일과 차트가 모두 제외되었다. 그래서 사용한 모듈이 xlsx-style이었다. xlsx-style로 ..
