Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다. 다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다. 구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다. 리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다. (리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다) 출처 github.com/CookPete/react-player/issues/145

개인적으로 세 가지 프론트엔드 프레임워크를 경험해보았다. (Vue의 경우는 짧게 1달만 사용해봐서 정확히 판단하기는 어렵지만 그럼에도 이 세가지 프레임워크(?)를 주관적으로 비교해보려고 한다. 비교 (차이점 위주로) Angular React Vue 모델 MVC Virtual DOM(Flux) Virtual DOM(Flux) NPM Trends(28.02.2021) 541,128 10,499,740 2,388,670 특징 비유 데스크탑 모바일 태블릿 데인터 바인딩 및 큰 변화 양방향, Angularjs → Angular 단방향, class → functional 양방향 구조 객체 지향, HTML/CSS/Typescript 객체 지향(Class) → 함수형, js.jsx vue 사용 용도 Enterprise..

다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..

Udemy 는 저렴하게 온라인 강의를 들을 수 있는 유용한 사이트이다. 다만, 해외에서 만들어진 사이트 특성상 한국어로 된 강의가 많지 않아, 영어로 강의를 시청해야하는 경우가 많다. 영어 자막으로 한국어를 번역하고 싶은데, 구글 번역기 자동으로 돌리면 새로운 자막이 나올때마다 다시 영어로 돌아가는 경우가 있다. 이럴 때 개발자 도구를 통해서 콘솔로그 창에 해당 스크립트 입력해주면 자동적으로 영어 자막을 구글 번역기를 통해서 한국어로 계속해서 볼 수 있다. 코드 if(typeof window.i!=='undefined'){clearInterval(window.i)}else{let lastText='';function check(){let toEl=$('.well--container--2edq4 span'..

간혹 도커를 사용하다보면 포트를 이미 쓰고 있어서, 에러가 발생하는 경우가 있다. 에러 메세지 : 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..

Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'. 현재 프로젝트에서 리덕스를 쓰며, 구글 extension 으로 리덕스를 디버깅하고 싶다면 redux devtools 를 사용하게 될 것이다. 그러나 만약 프로젝트에서 js나 jsx가 아닌 tsx,ts(타입스크립트)를 쓰고 리덕스 디버깅 extension 사용한다면 위와 같은 에러가 발생할 것이다. 위의 에러는 번역하면 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__가 윈도우라는 타입을 가지고 있지 않기 때문이다. 이럴 경우 Window 타입을 정의해주면 된다. import * as React from 'react' impo..

맥북을 이용하고 있다면 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 파일을 삭제해야했다. (만약 디렉토리를 삭제하고 싶다면 폴..

현재 진행중인 프로젝트가 Drupal + React 로 진행중이다. Drupal(드루팔)은 PHP로 만들어진 CMS 이며, 해외에서는 symfony, Joomla, Wordpress와 함께 많이 쓰인다. 한국에서는 거의 안쓰이다보니 관련 강의 혹은 영상을 찾기가 하늘에 별따기 수준이다. (그나마 워드프레스는 비교적 쓰여서 조금 있긴하다) 오늘은 그중에 Twig 에 대해 간략하게 요약해보도록 한다. 먼저 Twig란 PHP 프로그래밍 언어의 템플릿 엔진으로 구문은 Django 템플렛에서 유래한다. 템플릿 언어로 HTML 기본적으로 양식을 채택하고, 그 위에 자바스크립트를 넣는 형식이라고 보면 쉽게 이해가 된다. 다만 문법이라던지 쓰임새는 자바스크립트와 비슷한 듯하면서 다르다. 크게 많이 쓰는 방법은 두 가지..

웹팩 번들 분석 플러그인(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 이 기본 포맷터로 인식을 못하고 있는 것이였다..

독일 시간으로 현재 새벽 4시. 방금 전에 응급실에 갔다왔다. 다름이 아니라 오늘 토요일 아침에 일어나자마자 등에 담(?)이 와서 숨쉴때마다 아프고 움직일 때마다 아팠다. 그래서 처음에는 조금 조심하면서 움직이면 낫겠지 생각하며, 보온물주머니에 따뜻한 물을 담아서 찜질을 해줬다. 진통제를 먹을까하다가 괜히 아무 약이나 먹으면 안될거 같아 약국도 안가고 버텨보았다. (어차피 주치의 약속도 하루만에 독일에서 잡는 것은 불가능하기 때문에 버텨보기로 했다) 그런데 밤이 되서도 통증은 더욱 심해지고 심지어 잘려고 누우려고 할때도 너무 아파서 눕지를 못하겠는 것이다. 그래서 새벽 2시에 인근 응급실을 차를 운전해가며 방문하였다. (독일은 보통 주치의를 먼저 만나고 진료를 받아야하나, 밤이나 주말에 많이 아프면 바로..

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

블로그를 다시 쓴지 1년. 그리고 독일회사(독일에 있는 프랑스 회사이지만)에서 수습기간만 채우고 짤린지 6개월. 그리고 다시 독일회사로 이직한지 6개월. 최근에 그리고 수습기간(Probezeit)가 끝나고, 오늘 팀매니저와 인사 관련 담당자와 온라인미팅(코로나때문에 3개월 정도 홈오피스를 하고 있다). 이사도 했고, 1년동안 참 많은 일이 있었다. 아무도 궁금하지 않으시겠지만, 감상에 젖으면 지난 1년에 있었던 일에 관해서 글을 쓸 수도 있겠다. 오늘 수습기간 끝나고 나에 대한 평가(?) 그리고 회사에 대한 피드백 관련해서 10분 정도 미팅을 했는데, 다행히 이번 팀매니저나 인사 담당자는 나에 관련해서 부정적인 피드백은 없고 회사에 대해 내가 만족하다고 하니 다행이라고 별 내용도 없이 끝나긴 했다. 하지..