에러 useRef를 사용시에 해당 ref(observedRef)를 console.log를 찍어보면 null로 찍힌다. function App() { const observedRef = useRef(null); console.log(observedRef.current); return ( Hello CodeSandbox Start editing to see some magic happen! ); } 해결방법 useRef는 리액트에서 DOM을 연결해주는 Hook으로써, 원하는 element에 ref 속성을 넣어주면 useRef가 객채를 반환하여 current 속성에 dom을 넣어준다. 바닐라 자바스크립트에서 document.getElementbyId. useRef 초기값에 어떤 값을 입력하더라도 null이 출..

에러 Context API를 이용하여 state를 전역관리하고 있다. 그런데 router.push를 이용하면 state 업데이트가 공유가 되지 않고 있다. 혹은 새로 고침시에도 state가 찾을 수 없다고 한다. 해결방법 이럴 때는 localStorage을 활용해보자. 리액트 사용자는 localStorage를 custom Hook, utils, Context API와 결합하여 사용할 수도 있다. 혹은 중요한 정보는 SessionStorage을 활용하자 *localStorage : 데이터를 사용자 로컬에 보존하는 방식으로, 데이터를 저장하고 덮어쓰기, 삭제 등 자바스크립트로 조작이 가능하며, 모바일에서 사용이 가능하다. *SessionStorage : 로컬스토리지는 브라우저 창을 닫더라도 데이터가 유지되는..

Semantic Versioning(SemVer)이란? "devDependencies": { "eslint": "8.11.0", } 우리는 흔히 npm packages에서 위의 예시와 같이 버전이 일괄되게 표시되어있음을 알 수 있다. 이는 Github의 공동창업자인 톰 프레스턴 베르너(Tom Preston-Werner)가 만들었으며, 오픈소스 프로젝트에 일반적으로 사용되어 사용자가 이 package (api)가 어떤 식으로 변경되었는지가를 알 수 있다. 혹은 오픈소스가 아니더라도 개발자의 release 버전을 위와 같이 표기하면 좋기도 하다. 즉, 시맨틱 버저닝(Semantic Versioning)이란, 소프트웨어의 버전 변경 규칙에 대한 제안을 뜻한다. Major, Minor, Patch 버전 MAJO..

문제 현재 리액트 앱(Next.js)에서 useEffect를 이용해서 외부에서 스크립트를 불러와서 쓰고 있다. 그런데 return () => { const s = document.getElementById("inlineContent-flixMedia"); s.parentElement.removeChild(s);} cleanup 함수로 변환했음에도 불구하고 컴포넌트를 리렌더링 하였을 때, 스크립트가 두번 생성되는 에러가 발생하였다 외부 스크립트(flixmedia) : 해당 스크립트는 물건 상세설명 이미지를 만들어주는 스크립트이다 https://www.flixmedia.com/flix-solutions/retailer/faqs FAQs Flixmedia works with over 1,000 retailer..

Github Actions 개요? GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 *CI/CD(지속적 통합 및 지속적 전달) 플랫폼입니다. Repository에 대한 모든 pull request들을 빌드 및 테스트하거나 병합된 pull request들을 프로덕션에 배포하는 워크플로를 만들 수 있습니다. GitHub Actions - Supercharge your GitHub Flow CI(Continuous Integration)/CD(Continuous Deployment)란? CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법입니다. CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포입니다..

모노레포(mono-repo)란? 단일을 의미하는 mono와 Repository가 합쳐진 단어로, 여러 가지의 멀티 레포(multi-repo)에 반대되는 개념으로서 하나의 저장소에 여러 프로젝트 및 패키지를 가진 것을 의미한다. 모노레포의 장점 여러 패키지에서 하나의 설정을 공유할 수 있다. : 예를 들어, Eslint나 Prettier 등 설정을 루트 레벨에서 관리할 수 있기 때문에 여러 Repository에서 각각 따로 관리하던 설정을 공유할 수 있다. 패키지(package) 버전 통합 및 의존성 해결 : 멀티 레포에서 A라는 Repo는 babel 패키지 x.x.1 버전을 사용하고 B라는 Repo에서 x.x.2 babel 패키지를 사용하고 있다면 추후에 다른 버전으로 인한 이슈가 생길 수 있는데, 모노..

모바일 테스트 웹이나 SPA 개발하기 위해서는 모바일로 테스트는 필수인데, 보통은 모바일 웹뷰를 테스트하기 위해서 크롬이나 파이어폭스로 모바일 웹뷰로 확인하는데 간혹 어떠한 문제들은 실제 모바일 환경에서만 발생하기도 한다. 이러한 문제들은 cross browser testing이나 Browserstack 툴들에도 확인되지 않기 때문에 실제 모바일 환경에서 확인해야하만 한다. 다음은 실질적인 모바일 환경에서 테스트하는 방법을 서술해보았다. 1. LAMBDATEST LT Browser 손쉽게 여러개의 디바이스(실제 환경과 조금 다를 수 있음)를 테스트할 수 있고, 캡쳐 및 동영상 녹화 기능도 자체적으로 탑재된 브라우저이다. 그리고 로그인하면 다른 툴(Github, Jira 등)에도 공유가능하다. LT 브라우..

간혹 도커를 사용하다보면 포트를 이미 쓰고 있어서, 에러가 발생하는 경우가 있다. 에러 메세지 : Ports are not available: listen tcp 0.0.0.0:80: bind: address already in use 필자의 경우 tcp 0.0.0.0:80 포트를 프로젝트에서 traefik 돌리려고 하는데, 이미 사용중이라고 계속 에러 메세지가 뜬다. sudo lsof -i:80 위의 명령어를 통해 현재 해당 포트를 조회할 수 있는데, httpd 에서 사용하고 있는데 검색을 통해 알아보니 아파치(apache) 가 해당 포트 사용중이다. (맥북 아니면 sudo 생략 가능) 이럴 경우 아래의 명령어를 통해 아파치를 멈춰주면 된다. 아파치 멈추게하는 명령어 sudo launchctl unlo..

맥북을 이용하고 있다면 npm 패키지를 설치하거나 실행할 때 위와 같은 에러 코드(npm errno -13 EACCES: permission deneid)가 뜨는 경우가 있다. 이럴 경우 항상 앞에 sudo 를 붙여야하는데, 이럴 경우 여러모로 불편한 사항이 많이 발생한다. 해당 에러는 현재 설치된 node_modules 가 관리자 권한이 없어서 항상 sudo 명령어를 실행해야한다. 이를 해결하는 3가지 방법을 알아보자. 1. chown 리눅스 명령어를 이용하여 파일 및 디렉토리를 소유권을 변경하는 방법 (node_modules 경로 확인 명령어) npm config get prefix (필자의 node_modules 설치된 경로) /Users/사용자/.npm-global (node_modules를 관리..

npm 혹은 yarn 을 통해서 이미 프론트 혹은 백엔드 등 포트를 sudo command를 통해서 실행중인데, 브라우저를 종료하더라도 포트는 계속 돌아간다. 이럴때 사용중인 포트 PID 를 확인하고 강제로 종료시켜보자. 1. 사용중인 포트 PID 확인하기 현재 8888포트를 실행중이다. 아래의 명령어를 통해서 포트 관련 사항을 확인할 수 있다. sudo lsof -i:[PORT NUMBER] 예 ) sudo lsof -i:8888 그럼 사용중인 포트 정보가 나온다. 2.현재 8888포트는 4507 PID 를 사용중인데, PID 를 종료시켜보자. sudo kill -9 4507 그럼 사용중인 PID를 죽였다면 1번 확인 명령어를 실행하더라도 위와 같이 뜨지 않는데, 그럼 해당 포트는 종료가 된것이다.

간혹 맥북에서 npm install 를 잘못된 경로에 설정하여 node_modules을 잘못 설치하는 경우가 있다. 이럴 경우 권한 거부 에러가 떠서 삭제 할 수 없는 경우가 있다. 에러코드 Git: warning: failed to remove node_modules/'파일명': Permission denied 이럴 경우 간단한 명령어로 삭제할 수 있는데, 먼저 터미널에 들어가서 잘못 설치된 파일 디렉토리로 이동한다. 필자의 경우 위와 같이 현재 폴더에서 node_modules 폴더로 이동해야하는데, 이럴때 cd node_modules 명령어로 해당 폴더로 이동한 다음에 명령어로 통하여 해당 파일을 삭제한다. 필자는 .yarn-integrity 파일을 삭제해야했다. (만약 디렉토리를 삭제하고 싶다면 폴..

웹팩 번들 분석 플러그인(webpack bundle analyzer Plugin) 은 웹팩을 이용하여 번들링되는 모듈들을 분석해서 보기 좋게 시각적으로 표현해주는 모듈이다. 모듈의 용량을 분석하여 효율적으로 모듈을 관리할 수 있도록 도와준다. 앱이 크면 클수록 모듈 종류가 많아지며, 용량이 커져 무거워지게 되는데 이때 필수인 webpack bundle analyzer! 이를 이용하여 큰 모듈의 경우 minify 버젼을사용하거나 다른 방법으로 줄일 수 있다. 오늘은 어떻게 webpack bundle analyzer 세팅하는지 알아보자. 먼저 해당 플러그인을 Dev 모드로 설치하자 # NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D..

혼자서 코드를 작성하는게 아니라 협업을 하는거면 lint는 필수. 그 중 eslint 사용하고 있다면 에러가 날 경우, 어떻게 처리 혹은 대처하는지 단계별로 알아보자. 적용 순위는 1 > 2 > 3 로써 3번은 최후의 수단이다. 1. 해당 오류가 있는 코드를 수정하거나 혹은 사용하지 않는 파일이라면 삭제한다. 가장 깔끔한 방법으로 권장하는 방법이다. 일단 에러 코드를 구글에서 검색하여, stackoverflow 등을 참조하여 코드를 추가 혹은 수정하여 처리할 수 있으면 가장 깔끔한 방법이다. (허나 인터넷의 경우 대부분 3번처럼 규칙을 아예 꺼버리는 경우가 많다.) 예를 들어, babel-lint 를 설치하거나 webpack 적용하여 lint 에러를 처리하는 경우가 가장 깔끔하다. 다만 이럴 경우 처리 ..

현재 프로젝트에는 Prettier, Stylelint, Eslint 가 정상적으로 들어가있다. Vscode 내에서 Extension 역시 모두 다 설치하였다. 그런데 문제는 setting.json 에 들어가서 "editor.formatOnSave": true, 를 키고 아무 파일이나 저장하면 lint 에러가 뜨고 다시 다른 아무 파일 저장하고 다시 문제있는 파일을 저장하면 원래데로 돌아오는 기이한 현상(?)이 발생하는것이다. (말로도 설명하기 어려운 문제) 그래서 몇시간동안 setting.json 도 엄청 수정해보고, eslint, stylelint, editorconfig 까지 다 수정해보는 헛수고까지 했는데,,, 문제는 바로 vscode extension 이 기본 포맷터로 인식을 못하고 있는 것이였다..

​vscode 이용시 생산성을 높여주는 extension들. 오늘은 개인적으로 사용하고 추천하는 extension 리스트들을 정리해보았다. Auto Close Tag 태그를 쓸 때 자동적으로 끝맺음 태그도 쓸 수 있게 해준다. Auto Rename Tag 태그를 수정할 때, 관련된 태그도 같이 수정해준다. Auto Import Import 코드를 쓸 때 자동완성 해준다. Beautify 코드 포멧터로 들여쓰기를 정리해준다. Jira and Bitbucket (Official) 프로젝트에서 Jira 나 Bitbucket을 사용한다면 vscode 내에서 연동해준다. Docker 역시 프로젝트 혹은 개인적으로 도커를 사용하고 있다면 도커와 연동해주는 Extension Lint 및 코드 포맷터 확장 프로그램 1..

프로젝트를 스크럼으로 진행시에 Bitbucket 혹은 Jira 를 많이 사용하게 된다. VScode 에도 Extensions 를 Marketplace 에서 설치해주면 손쉽게 Jira와 Bitbucket 사용이 가능하다. 사용 방법은 marketplace 에서 검색을 하면 공식버전을 설치하면 된다. 보통의 경우, Bitbucket Cloud를 로그인하여, 사용이 가능하다. 다만 회사에서 별도의 Bitbucket 를 사용할 경우, 지라 혹은 빗버켓 사이트를 추가해줘야한다. 예를 들어, 보통 회사에서 따로 운영하고 있으며, 아래의 주소와 같이되어있는데 아래의 URL 를 입력해주고, 그 회사에 본인 Bitbucket 아이디 및 비밀번호 이용해주면 자연스럽게 연동이 된다. 회사 URL https://bitbuck..