kasumil의 코딩 공작소

프로젝트는 블로그 프로젝트입니다. 1. next.js지만, 실질적으로는 react에 가까운 코드입니다.(spa 위주로 코드 적용)2. app라우팅으로 진행하였고,  구조를 store, lib, component로 분리하였며,ui컴포넌트와 container컴포넌트(실행함수 제어)를 분리하여 구분하였습니다.3. redux toolkit 그리고 rtk-query를 적용하여, 사용하여 각 페이지별 코드를 분할하였습니다.(/auth, /post 등)4. 인터셉터를 적용하여 서버 통신방식을 Baerer에 붙이거나 또는 쿠키를 통해 적용하여 해당 값을 받게 하였습니다. 1. koa쪽에선 jsonwebtoken을 적용하여, 리프레쉬토큰 발급과 액세스토큰을 발급하여 해당 코드를 통해 코드 갱신주기를 하였습니다. 해당 토..

대학교를 졸업하기 전에 컴퓨터 관련 개발자가 되고 싶다는 꿈을 품고,개발자 붐이 일어나기 전인 2020년도에 위**라는 부트캠프 학원에 입문했습니다.해당 학원을 수료한 후 별다른 지원은 없었습니다.(이력서를 한 번 봐주는 것 외에는 A/S가 끝이었습니다. 차라리 국비 지원 프로그램을 이용할 걸 그랬습니다. 무료였는데 말이죠! 지금도 가끔 '내 700만 원!'을 생각하며 후회합니다.)학원을 수료한 후 약 400개 정도의 이력서를 뿌려 간신히 입사에 성공했습니다.신입을 키워주겠다는 말에 끌려 입사했죠.인터넷에 올라온 멋진 포트폴리오처럼 만들기에는 디자인적인 지원이 전무했고,제 개발 실력도 부족해 선뜻 만들지 못했습니다.디자인이 구려도 2~3개라도 만들어볼 걸 그랬습니다.간신히 입사한 회사는 스타트업이었고, ..

리액트 토스티파이 사용중인데, 중복 호출이 되는 문제가 발생했다. 이를 어떻게 막나 고민했는데, 방법이 쉽게 나오나했다. https://fkhadra.github.io/react-toastify/introduction/ React-toastify | React-Toastify Financial Contributors on Open Collective fkhadra.github.io 바로 container에서 limit 1을 넣는 것. 그런데, 이건 그냥 알림을 1개로 제한하는 기능이라. 연속호출시 꺼지면 다시 여러번 호출되는 문제가 발생하더라. 그래서 찾아보니 https://fkhadra.github.io/react-toastify/prevent-duplicate/ Prevent duplicate | R..

간단한 지도 만들기 기능. 대략적인 기능은 chat gpt를 통해 만들었으나 세부 기능은 최신화가 되지 않아서 내가 만들어야 했다. 주소 검색에 따라 주소출력을 구현하여야만 했어 만들었다. import React, { useState } from 'react' import { GoogleMap, useJsApiLoader, MarkerF } from '@react-google-maps/api'; const containerStyle = { width: '100vw', height: '100vh' }; const OPTIONS = { minZoom: 4, maxZoom: 18, } function Map() { const { isLoaded } = useJsApiLoader({ id: 'google-map..

www.도메인.com 도메인.com 위 주소는 엄연히 다르다. 그런데, 해당 주소를 매칭시키는 방법은 딱히 없길래 끄적거려본다. 아파치 .conf 파일에서 ServerName example.com ServerAlias www.example.com DocumentRoot /var/www/html RewriteEngine on RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule ^(.*)$ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 리다이렉팅 모듈을 넣어주면 route53를 통하거나 해서 굳이 어렵게 할 필요없이 그냥 www로 자동 리다이렉팅 된다. 끝.

특이하게도 node-sass가 설치도중 버전이 호환되지 않는다면, Error: spawn powershell.exe ENOENT Error: spawn powershell.exe ENOENT npm ERR! code ECONNRESET npm ERR! code ECONNRESET npm ERR! syscall read npm ERR! errno -4077 npm ERR! network read ECONNRESET npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! netw..

React-native-video에서 발생한 에러인데, 해결방법이 레퍼런스를 봐도 모르겠더라... 현재 RN버전이 0.73인데 레퍼런스 내용대로 한다면 android에 따로 추가할 필요가 없다. https://www.npmjs.com/package/react-native-video react-native-video A element for react-native. Latest version: 5.2.1, last published: a year ago. Start using react-native-video in your project by running `npm i react-native-video`. There are 269 other projects in the npm registry using r..

리액트에서 JS를 쓰다보면, 성능이슈를 종종 겪는다. 원래 배울때 보통 스프레드 연산자를 통해서 새로운 배열을 만들고, 해당 값만 갱신해서 사용하길 권장하는데 이때, 새로운 배열을 만들때 성능이슈가 발생하는 경우를 보았다. 해당 값만 갱신하는 경우 문제가 없는 부분... 정말 짜증나는 부분이었다. 왜 해당 부분만 이슈가 발생하는지는 원리는좀 더 찾아봐야하지 않나 싶다. const [allList, setAllList] = useState([]); inputHandler(e, index)} value={text} /> const inputHandler = async(e, index) => { const inputList = [...allList]; inputList[index] = e; setAllList..

결론적으로 말하면 되긴하나 안된다. 내 경우 비디오 파일을 읽고 해당 내용의 유니크함을 지키기 위해서 해당 내용을 설정하였다. 그런데, php의 경우 해당 부분을 서버에서 읽어 문제가 되지 않으나, 리액트는 브라우저라 해당 내용이 되지 않았다. 브라우저 메모리 초과로 인해 청크로 쪼갰더니 32자리 글자가 200자가 넘어가더라... const chunkSize = 1024 * 1024; // 1MB 조각 const fileSize = file.size; let offset = 0; let md5Checksum = ''; while (offset < fileSize) { const chunk = file.slice(offset, offset + chunkSize); offset += chunkSize; co..

웹팩으로 개발하기. 웹팩은 ES5으로 자동 변환 기기이므로 해당 설정하기만하면 너무 쉽다. 그런데, 그만큼 설정이 지랄맞다. 드럽게 어렵다. 그 이유가 문서가 개판. https://webpack.kr/concepts/ Concepts | 웹팩 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr 부가 설명이 불친절하기때문이다. npm install webpack webpack-cli html-loader css-loader style-loader file-loader url-loader dotenv-webpack svgr-webpack --save-dev n..