개발 블로깅/기타 개념
-
[Yarn berry] Yarn Berry Install 과정 파헤쳐보기개발 블로깅/기타 개념 2023. 1. 23. 21:47
CI 환경에서 Yarn Berry Install 시간을 줄이기 위해 이것저것 실험을 해보다 보니, install 시에 진행되는 과정에 대해 깊게 알아볼 수 있게 되었다. 사실 pnp를 이용해버리면 install 과정 자체를 줄일 수 있을 것이란 희망이 컸었으나, 실질적으로 우리 모노레포 환경과, 특히나 Cypress와 같이 현 로컬 환경의 바이너리 정보들이 필요로 한 환경에서는 pnp가 큰 의미가 없다는 것을 알게 되면서... 좌절..(관련 링크) 그럼에도 불구하고, 우리 환경에서 pnp가 아니더라도 CI 시간을 단축시키기 위한 여러 가지 테스트를 해보는 중이다. CI 단에서 돌아가는 큰 스텝은 아래와 같다. - yarn install - yarn build - run Test Code 그 중, 우선은 ..
-
[Yarn berry] Yarn Berry 환경에 대한 이해도 높이기개발 블로깅/기타 개념 2022. 10. 9. 18:51
이번에 Yarn berry에서 이것저것 작업하게 되면서 Yarn Berry라는 환경에 대해 알게 된 내용들을 한번 정리해 보려고 한다. Yarn Berry 환경은 단순 자바스크립트 파일일 뿐이다. 이것을 설명하기 위해 우선 Yarn Classic 환경에 대해 먼저 다루어볼 필요가 있다. Yarn Classic을 먼저 알아보자. Yarn Classic 우리가 일반적으로 Yarn을 설치할 때는 Homebrew를 통해서 설치한다. Homebrew를 통해 설치하게되면, Yarn 패키지 자체는 우리 로컬 PC 내에서 Global Package 공간 어딘가에 저장이 되고 이후에 커맨드를 통해 실행시킬 수 있다. $ yarn add ... $ yarn remove ... 터미널에서 yarn으로 시작하는 명령어를 수행..
-
[Yarn berry] pnp가 Cypress환경에서 제대로 동작하지 않던 이슈 해결개발 블로깅/기타 개념 2022. 9. 25. 14:19
디펜던시 문제를 잘 해결하고 build와 run까지 문제없이 잘 돼서 이제 끝났나 싶었더니, 테스트 CI에서 뻥뻥 터지는 것을 발견했다. Cypress 환경에서 pnp를 사용하는 것에 대해 겪은 두가지 문제가 있었는데, 이에 대한 원인과 해결한 내용을 정리해 보려고 한다. cypress.config.ts 파일을 읽는데 .ts 확장자를 읽지 못하는 문제. 우선 pnp는 CommonJS를 Base로 동작하도록 되어 있고, 추가로 ESM 모듈 지원이 필요하다고 판단되면 추가 세팅이 되는 방식이다. 그래서 pnp install을 하면 루트 경로에 pnp.cjs(commonJS) 파일을 생기는데, 프로젝트 자체가 ESM 모듈 지원이 필요하다고 판단되면 pnp.loader.mjs 파일을 추가로 생성하도록 되어있다...
-
[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기개발 블로깅/기타 개념 2022. 9. 11. 22:30
이번에 프로젝트 빌드 환경을 개선시키기 위해 Zero install을 적용시키려고 한다. yarn berry 환경 세팅까지는 수월했으나, PnP(Plug In Play)을 통해 Zero install을 하려고 하니 Yarn에 대한 개념이 꽤나 필요했다. 그래서 이번에 Yarn Berry의 핵심 기능인 Plug In Play가 무엇인지 간단히 설명해보고, PnP를 통해 Zero Install을 하기 위해 우리가 해결해야 할 문제가 무엇인지 설명해 보려고 한다. Zero Install Zero Install은 말 그대로 설치를 하지 않고 이용하는 방식을 말한다. 기존에 node_modules에서 모든 디펜던시를 새로 인스톨하려고 하면, 모든 디펜던시 모듈이 인스톨에만 굉장히 많은 시간이 소모하게 된다. 그러..
-
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.개발 블로깅/기타 개념 2021. 12. 18. 20:43
ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그냥 생각없이 Prettier extension 설치해라, eslintrc 이렇게 세팅해라, 등등.. 따라 하니까 꼬이기도 하고, 저장을 시도하면 자동 수정은 안되고.. 그럴 때마다 속이 터졌는데, 이참에 아예 작정하고 시간 내서 제대로 파악 좀 해봤다. 아마 나처럼 하라는 대로 했는데도 왜 안되는지 궁금할 개발자들이 있지 않을까 싶다.(나만 그런걸까...) 직접 그 원인을 상세히 파악하고 알아보도록 하자. VSCode가 코드의 Lint Error를 잡는 것부터, 저장 시 자동 수정하는 설정까지....
-
Preload의 개념, 그리고 올바른 사용법개발 블로깅/기타 개념 2021. 9. 5. 00:54
웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. 한번 해당 기능이 어떻게 동작하는지 확인해보자. const JenkinsLogo= () => { return ( ); }; export default JenkinsLogo; 간단하게 Next.js 환경에서 jenkins.png 파일을 img 태그를 통해 화면에 띄우는 코드를 돌려보았다. 적용 전 ..
-
자바스크립트 검색엔진 최적화(SEO) 가이드 총 정리개발 블로깅/기타 개념 2021. 7. 20. 23:37
해당 글은 www.onely.com/blog/ultimate-guide-javascript-seo 아티클을 번역한 포스트입니다. 빠른 요약 자바스크립트는 정적 HTML 마크업 언어로 빌드된 웹 사이트 요소들을, 동적으로 동작시키도록 하는 언어입니다. 이 가이드는 자바스크립트 사용으로 인해 사이트의 랭킹이나 사용자 경험이 손상되지 않도록 하기 위해, 필수적으로 알아야 할 모든 것을 다룹니다. What is Javascript SEO? '자바스크립트 SEO'는 JS 기반의 웹사이트로 만들어진 테크니컬 SEO의 한 분야입니다. 검색 엔진이 완전히 크롤링, 렌더링하고 인덱싱 하기 쉽습니다. 오래된 브라우저를 포함하여 많은 유저들에게 연결합니다. 메타 데이터와 고정된 내부 링크를 유지합니다. 파싱 하고 자바스크립..
-
[2020.12.28] React 내 Render Stream 처리 기법(with kefir.js)개발 블로깅/기타 개념 2020. 12. 28. 21:41
Render Stream이란, 기능을 동작시키는데 필요한 로직들을 Stream으로 처리하여 단순하게 렌더링 기능을 구현할 수 있는 방식을 말합니다. 아래 예시 코드를 보시면, 각 로직 처리 부분을 단순히 FromStream 컴포넌트의 Stream props로만 내려주기만 하면, FromStream 컴포넌트에서 어떠한 로직이든 상관없이 로직을 수행하고 따로 상태 변경 로직 없이도 리렌더링을 처리하기 때문에, 코드 로직이나 상태가 매우 Less되어 프로젝트 관리나 메모리 성능면으로도 엄청난 이점을 주게 됩니다. Render Stream기법은 반응형 프로그래밍(Reactive Programming) 기반으로 구현한 방식입니다. 해당 글은 작성자 Dmitriy Kharchenko 님의 'how to Render..