블로그 인기글도 Termux 관련 글이기도 하고 42Seoul의 LaPiscine 과정도 끝나 본과정을 기다리고 있는 지금 뭔가 심심해서 termux를 활용 할 만한 방법이 또 뭐가 있을까 하다 휴대용 개발 ide를 만들어 보는 건 어떤가하고 code-server 프로젝트를 termux에 설치를 하기 시작해보았다! 일단 code-server에서 제공하는 파일을 그대로 사용하여 실행을 해보니 su 명령어에서 오류가 나는 것을 볼 수가 있었다 ㅠㅠ 한번 su 명령어를 수정하여 설치후 실행을 해보니 nodejs를 찾지를 못하여 직접 실행파일을 수정 하였더니 서버는 정상적으로 띄어 지나 libstdc++.so.6 라이브러리가 없어서 계속 오류가 났다 ㅠㅠㅠ 그래서 guide문서를 보면서 Standalone Re..

교수가 없고 동료 간 학습이라는 것을 말로만 들었을 때 어떤 방식인지 참 궁금했었다. 1일차를 진행하면서 어떤 방식인지 어떤 점이 더욱더 나를 성장시키게 하는지에 대해 조금 알게 된 기분이다. 맨 처음 등록 후 아무 설명도 없이 인트라 계정을 로그인하라는 이메일만 받은 후 이다음부터 무엇을 해야 하는지 아무것도 모르는 상황이었다. 교수가 없으니 질문의 대상도 한정이 되었는데 Slack과 주변의 같은 동료들과 무엇을 해야 하는지에 대해 이야기하기 시작하더니 점차 어떤 것을 해야 하는지 서로서로 공유를 하면서 목표를 잡고 빠르게 공부를 시작하게 되었다는 게 신기하고 놀라웠다. 과제를 진행하면서 동료 평가도 받게 되었는데 그때 만난 동료하고 이야기를 하면서 42서울의 시스템에 대해 파악을 하게 되고 내가 풀었..

개발을 하면서 Cookie에 있는 token을 사용하여 사용자 인증을 구현하였는데 PlayGround에서 Cookie와 함께 전송이 정상적으로 처리가 안되어서 불편하게 되는 부분이 있었는데 이점을 해결하는 방법을 발견하여 이렇게 글을 작성해봅니다.. Playground의 우측 상단의 Settng으로 들어가서 아래의 옵션을 추가하고 저장을 합니다. "request.credentials": "same-origin" 그리고 이제 HTTP HEADERS 항목에 아래와 같은 형태로 쿠키를 추가하면 됩니다. { "Cookies" :"token=토큰값;" } 이제 위처럼 정상적으로 인정처리가 되어 결과값이 정상적으로 반환되는 것을 볼 수 있습니다.

게시판 기능을 구현을 하면서 react-simplemde-editor 를 사용하여 이미지 업로드 기능까지 구현을 하였는데 문제를 발견한 부분이 Drag & Drop 으로 이미지를 삽입시 추가된 IMG 내용을 onChange 으로 전달을 하지 않아 Drag & Drop 이미지 삽입후 즉시 저장시 이미지 업로드 내용을 반영하지 않아서 한번 소스 코드를 분석 하게 되었습니다. 소스 부분을 분석하다 보니 Events를 등록하는 부분이 있어서 한번 분석을 하게 되었습니다. addEvents = () => { if (this.elementWrapperRef && this.simpleMde) { this.editorEl = this.elementWrapperRef; this.editorToolbarEl = this...

이전에 제작하던 simple-next-express-boilerplate 에 pm2를 사용하여 dockerfile를 추가하는 것을 예제로 작성했습니다. 원래 기본적으로 pm2로 cluster mode를 사용할 때에는 아래와 같은 형태로 사용을 하면됩니다. pm2 start ecosystem.config.js module.exports = { apps: [ { name: 'server', script: './server/server.js', instances: 0, exec_mode: 'cluster', env: { NODE_ENV: 'development' }, env_production: { NODE_ENV: 'production' } } ] } 이 파일을 실행을 하게 되면 오류가 떨어지는 모습을 볼 ..

개발을 하다가 보니 기본적으로 제공하는 next.js의 Routing 시스템이 편리하지만 API 부분에 대해서는 조금 불편한 점이 발견되었습니다. 기본적으로 middleware를 추가하는 작업에 대해 번거로운 작업을 동반해야 하고 그리고 기존 Express에서 사용하던 middleware에 대해 호환이 완벽하게 안된다는 점에서 따로 찾아보게 되었습니다. next.js 공식문서 개발을 하면서 multer를 사용하여 이미지 업로드 기능을 구현을 원하는 부분이 있었는데 multer를 사용하여 개발을 할려고 하자 아래와 같은 코드가 완성 되었습니다. import multer from "multer" const upload = multer({ dest: 'uploads/' }) export default (req..

jaeseokim.github.io/React/React-Nextjs-useSWR-Hook-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React, Next.js] - useSWR Hook 알아보기! Next.js를 공부하다 Client 단에서 Data Fetch할 때 자주 사용 되는 swr 에 대해서 알게 되어 한번 정리를 해보았습니다. ⭐ 혹시 잘못 이해해서 잘못된 부분이 있다면 댓글로 알려주세요.! ⭐ useSWR 이란? jaeseokim.github.io Next.js를 공부하다 Client 단에서 Data Fetch할 때 자주 사용 되는 swr 에 대해서 알게 되어 한번 정리를 해보았습니다. ⭐혹시 잘못 이해해서 잘못된 부분이 있다면 댓글로 알려주세요.!⭐ useSWR ..

Next를 사용하는 가장 큰 이유중 하나인 "Pre-Rendering" 기능에 대해 공부를 하면서 깨달은 점 몇가지가 있어서 정리를 해보았습니다. getInitialProps 를 이용한 CSR, SSR 요청 구분 Next.js의 문서를 보게 되면 getInitialProps 함수가 실행 될 때 넘어오는 context 의 값에 대해서 설명하는 부분이 있습니다. getInitialProps receives a single argument called context, it's an object with the following properties: pathname - Current route. That is the path of the page in /pages query - Query string secti..