티스토리

Developer Calssess

검색하기

블로그 홈

Developer Calssess

calssess.tistory.com/m

Calssess 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

@types 라이브러리란? 자바스크립트로 만들어진 써드 파티 라이브러리(jQuery, lodash, chart 등)를 타입스크립트에서 사용하려면 각 기능에 대한 타입이 정의되어 있어야 합니다. 예를 들면 아래와 같은 코드는 타입스크립트에서 제대로 동작하지 않습니다. // app.ts import $ from 'jquery'; $(document).ready(); 그 이유는 제이쿼리 라이브러리의 내부 코드에 대한 타입이 정의되어 있지 않아 이 라이브러리를 들고 와서 사용할 때 타입스크립트 파일에서 타입 추론을 할 수 없기 때문입니다. 이런 경우에는 @types 라는 라이브러리를 설치하면 됩니다. npm i -D @types/jquery 대중적으로 흔히 사용되는 자바스크립트 라이브러리는 대부분 @types라는 별칭으로 타입스크립트 추.. 공감수 0 댓글수 0 2023. 4. 20.
react-query 설명 및 간단 사용기 react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. #사용하는 이유 저의 경우 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존 하게 됩니다. 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종(?)이 탄생하게 됩니다. (예를 들면 서버에는 이미 패치된 데이터가 클라이언트에서는 패치되기 전 데이터가 유저에게 사용되고 있는 것이라고 볼 수 있습니다.) 그래서 react-query를 사용함으로 서버, 클라이언트.. 공감수 0 댓글수 0 2023. 3. 13.
초보 프론트엔드 개발자들을 위한 Pub-Sub(Publish-Subscribe) 패턴을 알아보기2018/10/28 번역 머리말 이 글은 Hubert Zub의 Why every beginner front-end developer should know publish-subscribe pattern?을 번역한 글입니다. 일부 삽화의 내용은 직접 번역하여 새로 첨부했습니다. 가독성에 문제가 있다면 피드백 부탁드립니다. 여러분이 처음 프론트엔드 개발을 배우고 나서 스타일이나 그리드 시스템 등 미적인 부분에만 집중을 하다가 비지니스 로직, 프레임워크 등을 공부하면서 본격적으로 자바스크립트 코드를 작성하기 시작할 때를 떠올려 보겠습니다. [처음 시작은 이렇지만..] 이 시점에서 단순히 jQuery 트릭을 조금 쓰거나 시각적 효과 일부를 JS 로 구현하는 정도를 벗어나게 됩니다. 단순히 웹페이지가 아니라 웹 애플리케이션 을 만들기.. 공감수 0 댓글수 0 2023. 3. 13.
npm, yarn, pnpm 비교해보기 Table of Contents Introduction 자바스크립트 패키지 관리자의 역사 선구자 npm 많은 혁명을 가져온 yarn classic pnpm 빠르고 효율적인 디스크 관리 yarn berry, plug n play 패키지 매니저 설치하기 npm yarn classic yarn berry pnpm 프로젝트 구조 npm yarn classic yarn berry와 node_modules yarn berry with pnp pnpm Lock 파일과 dependency 저장 CLI commands 의존성 관리 패키지 관련 자주 쓰이는 커맨드 성능과 디스크 관리의 효율성 보안 npm yarn pnpm 결론 참고 Introduction npm 에서 시작한 node package management의 역.. 공감수 0 댓글수 0 2023. 3. 10.
CRA SSR without eject 이 페이지는 사실 서버사이드 렌더링을 사용하진 않는다. 우선 SSR 의 전제조건은 다음과 같다. 1. CRA 를 Eject 하지 않는다. 한번 eject 하면 되돌릴 수 없고, react-scripts 가 해주는 많은 편의기능을 포기하는 동시에 업데이트도 골치아파 진다. timarney/react-app-rewired 와 같은 패키지도 존재하지만 이 역시 메이저 업데이트를 바로 지원하지 않을 가능성이 높고, create-react-app 의 dependency 도 충분히 피곤하다. 2. 전체 페이지를 렌더링한다 SEO 를 위해서 전체 페이지 렌더링이 필수적인 것은 아니나 분명 전체 페이지를 그리는 것이 좋은 것은 자명하고, First Meaningful Paint 라는 측면에서도 그렇고, 유저에게 매번 .. 공감수 0 댓글수 0 2023. 2. 16.
Elixir + Phoenix LiveView + Svelte, Why? https://www.youtube.com/watch?v=lAaD-6OQSHE 요즘 누군가에 의하면 기술 하나에 꽂혀서 다른 기술은 다 천대하고 있다고 하니, 용기를 갖고 좀 더 꽂혀보도록 하겠다. Elixir 너무나 아름다운 파이프라인 오퍼레이터... Elixir 를 좋아하게 된 건 순전히 pipeline 오퍼레이터 때문이었다. 한참 FP 를 해보겠다고 lodash/fp 를 많이 사용할 때였는데, 함수 하나에 여러가지 행동을 하는 코드를 작성하는 곳에 주로 사용하였다. 말하니 복잡한데 다음 코드라고 생각하면 쉽다. const doSomething = flow( split(‘,’), map((x) => x.toUpperCase()), filter((x) => x.startsWith(‘A’)), ); 한두.. 공감수 0 댓글수 0 2023. 2. 16.
JS .js vs .mjs .mjs Vs .js 원래 Node.js의 모듈 시스템은 commonjs를 사용했습니다(require과 module.exports를 사용하는..) 그러다가 ECMAscript 모듈 시스템이 표준이 되었고, Node.js는 이를 지원하게 되었습니다. Node.js 는 .cjs 파일로 commonjs 모듈 시스템을 지원했고, .mjs파일로 ECMAsript 모듈 시스템을 지원했습니다. 그러고 js파일은 둘 다 모두를 지원하게 되었습니다. (default는 commonjs) (package.json에 "type" :"module"쓰면 ecma 모듈 지원) .JS const b = require("./main2.js"); console.log(b.a); 받아오는 js function hello() { retur.. 공감수 0 댓글수 0 2023. 1. 27.
[react] Zustand zustand : 독일어로 상태 react state-management " zustand 상태관리가 왜 필요한가 사용자와의 활발한 인터랙션을 모두 처리할 수 있으며, 실시간 통신을 통해 데이터를 받아오고 이를 기반으로 렌더링 하는 등 다양한 기능을 포함하고 있다. 그렇지만 기반이 되는 핵심은 애플리케이션 수준에서는 자체적으로 상태를 관리해야하는 역할이 필수적으로 요구된다는 점이다. React에서 상태란 오늘날 웹 프론트엔드 개발에 있어서 상태라는 것은 크게 보면 웹 애플리케이션을 렌더(render)하는데 있어 영향을 미칠 수 있는 값이라고 한다. Plain Javascript Object hold information influences the output of render ___ 공식문서 리액트는 독.. 공감수 0 댓글수 0 2023. 1. 19.
ES6 Map(), Set() 얼마 전부터 회사 업무를 진행할 때 본격적으로, 그리고 의식적으로 ES6 에 도입된 문법을 적용하고 있는데, 그중에서 가장 자주 활용하는 자료구조, Map 과 Set 에 대해 이야기해보려고 합니다. 이 글의 모티브는 상당부분 Mozilla 웹기술블로그에 기반합니다. 사내세미나에서 발표한 내용을 글로 정리했습니다. Map Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션 key 를 사용해서 value 를 get, set 할 수 있음 key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만 key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의! // 새로운 map 을.. 공감수 0 댓글수 0 2023. 1. 19.
React 18의 useSyncExternalStore, Tearing 현상은 무엇인가? React18의 Tearing현상과 이를 해결하기 위한 useSyncExternalStore에 대해 알아봅시다. 원문 : https://blog.saeloun.com/2021/12/30/react-18-usesyncexternalstore-api Meet the new hook useSyncExternalStore, introduced in React 18 for external stores Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com useSyncExternalStore API에 대해 알아보기 전에 이 새로운 훅을 이해하기에 유용한 용어에 익.. 공감수 0 댓글수 0 2023. 1. 18.
useEffect와 useLayoutEffect React에는 굉장히 수많은 Hook이 있다. 지금도 계속 생기고 있을 것이다. 하지만 나의 경우에는 맨날 쓰는 Hook만 쓰긴 한다. useState 와 useEffect 정도… 사실 이것만 있어도 대부분의 기능을 구현하는데 문제 없었기에 그런 것도 있긴 하다만 React의 기능을 완전히 이용하지는 못하고 있었다. 오늘 회사에서 3분기 회고를 하는데 동료 분께서 이런 세태에 대해 언급하시면서 useLayoutEffect Hook이란게 있다라는 말씀을 하셨다. 뭔지는 몰랐지만 뭔지 궁금해져서 이번주에는 이에 대해 간단히 알아보도록 하자. useEffect와 문제점 React Hook은 Functional Component에서도 기존 Class Component만이 제공하던 기능을 사용할 수 있도록 해준 .. 공감수 0 댓글수 0 2023. 1. 11.
React.memo와 useMemo 차이점 React.memo React.memo는 Higher-Order Components(HOC)이다. 👀 Higher-Order Components(HOC)란 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return해주는 함수이다. const NewComponent = higherOrderComponent(WrappedComponent); 일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면에, higher-order component는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다. HOC는 리액트의 API가 아니라 리액트가 컴포넌트를 구성하는데 있어서의 일종의 패턴이라고 보면된다. React.memo의 사용법은 다음과 같다. const MyComponent = React.memo((p.. 공감수 0 댓글수 0 2023. 1. 11.
[React]setState Callback 함수 사용 이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다. 목차 setState의 Callback 함수를 사용하는 경우 Class 컴포넌트의 setState Callback Function 컴포넌트의 setState Callback setState의 Callback 함수를 사용하는 경우 react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다. 우선, Callback 함수를 사용하지 않은 경우 어떠한 문제가 발생하는지 알아봅시다. 다음은 [* 2] 버튼을 클릭하면 this.state.num의 값을 2배로 변경 후 콘솔에 this.state.num의 값을 출력하는 함수입니다. twiceBu.. 공감수 0 댓글수 0 2023. 1. 11.
[Redux] redux 기본 - action dispatch / subscribe 1. 변경한 state value를 화면에 구현하기 reducer / store 개념을 종합하여 버튼을 눌렀을때 값이 변화하는 logic을 구현해본다. 1-1. addEventListener을 활용해서 action dispatch HTML에서 생성한 버튼 tag(속성)에 click 이벤트를 추가하고, 클릭 시 action dispatch를 발동해서 state + 1 을 하도록 구현한다. //Vanilla import { createStore } from "redux" const add = document.getElementById("add") const minus = document.getElementById("minus") const number = document.querySelector("span".. 공감수 0 댓글수 0 2022. 12. 19.
웹팩(webpack) VusJS, Bootstrap 빌드 시 scss 오류! 오늘은 갑자기 생긴 오류에 대한 포스팅을 해보려 한다. 업무를 하는 중 갑자기 오류가 나왔다. 내용은 아래와 같다. 콘솔 내용을 확인해보면 버전이 바뀌어서 생긴 오류인거 같다. 버전이 바뀌면 작고 큰 오류들이 생겨난다. 콘솔 내용을 잘 확인해보면 문제해결을 하는데 있어서 큰 어려움을 겪지 않으며 빠른 해결을 할 수 있다. 콘솔오류 `text-emphasis-variant()` has been deprecated as of v4.4.0. It will be removed entirely in v5. The `bg-variant` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5. 구글링 구글링을 해서 이것저것 찾던 중 아주 .. 공감수 0 댓글수 0 2022. 5. 16.
Nuxt js dot env 적용하기 (자체 cross-env 적용기) If you are using version > 2.13 then you won't need to install dotenv anymore because it's already built in https://nuxtjs.org/docs/directory-structure/nuxt-config/#runtimeconfig .env support Similar to vue-cli (*), .env file will be always loaded via dotenv and is accessible via process.env and options._env. process.env is updated so one can use it right inside nuxt.config for runtime config. V.. 공감수 0 댓글수 0 2022. 5. 12.
데이터레이어(dataLayer)란 무엇일까? 이번 글에서는 구글 태그 관리자 데이터 레이어 (dataLayer)에 대해 알아보겠습니다. 구글 태그 관리자를 제대로 활용하려면 데이터 레이어를 사용해야 합니다. 사실 조금 어려운 개념입니다. 저도 처음 접했을 때 이해가 잘 되지 않았습니다. 여러분도 처음 들어본 개념이라면 이해가 되지 않으실겁니다. 그래도 끝까지 읽어주세요. 데이터 레이어 = 태그 관리자로 정보를 전달하기 위한 자바스크립트 개체 데이터 레이어는 웹사이트에서 태그 관리자로 정보를 전달하기 위한 자바스크립트 개체입니다. (자바스크립트란 개발 언어 중 하나이며, 자바 언어와는 별개의 언어입니다 ^^;) 페이지 정보나(페이지 제목, URL) 회원의 구매 정보(결제수단, 상품카테고리) 등을 넣을 수 있습니다. 그리고 그 값을 GTM으로 수집해서.. 공감수 0 댓글수 0 2022. 3. 18.
meta viewport (메타 뷰포트 태그) 사용법 meta viewport(메타 뷰포트 태그) 사용법 얼마 전에 meta 태그 사용법이란 글을 썼는데 [html] meta 태그 사용법 위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요. 힌트를 주신 admin 님께 감사합니다.^^ 오늘 다룰 부분은 meta viewport(메타 뷰포트 태그) 입니다. 웹페이지 소스를 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요. meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트(viewport) 크기 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조) meta viewport 태그는 W3C 명세에는 없지만,(따라서 표준이 아님) iOS 장치(아이폰 운영체제 브라우저 safari)가 널리.. 공감수 0 댓글수 0 2022. 3. 17.
Custom Hooks을 만들어보자! 안녕하세요. 오늘은 React의 custom hooks에 대해 알아보고 직접 만들어보는 시간을 가져보도록 하겠습니다. Custom hook이란? 요즘 React 개발 트랜드는 react hook을 적극 활용하는 것입니다. hook을 사용함으로 인해 class component 없이도 여러 state 값을 변경해줄 수 있게 되었고, 이는 React 개발자들이 function component를 통한 간결한 코드 작업을 할수있게끔 만들어주었습니다. useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만, 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다. 이름에서 알 수 있다시피 c.. 공감수 0 댓글수 0 2022. 3. 17.
useCallback 과 useMemo 의 차이 먼저 메모이제이션(memoization) 이란? useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚는다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo와 useCallback 을 너무나도 어렵게 설명하는 곳이 많아서 여기서는 간단하게만 적어본다. 1. useMemo 메모이제이션된 '값'을 반환한다. 용법 useMemo(() => fn, deps) ⭐️ useMemo 는 deps 가 변한.. 공감수 0 댓글수 0 2022. 3. 16.
CSS에서 rem 단위 사용하기 CSS 단위 CSS에서 길이나 크기를 다룰 때 사용하는 단위는 px, em, vw, vh 등 다양합니다. 웹 개발을 해보셨다면 그중에 픽셀 단위 px가 제일 익숙할 것입니다. 그런데 누군가는 rem 단위가 더 유연하고 좋은 단위라고 말합니다. 실제로 Bootstrap이나 TailwindCSS 등의 CSS 프레임워크는 rem 단위를 사용하여 개발되었습니다. 이번 글에서는 rem 단위가 왜 좋은 것인지, 픽셀 단위와 무엇이 다르고 어떻게 사용해야 하는지, 그리고 유의사항은 무엇이 있는지 자세히 알아보겠습니다. 픽셀 절대 단위 px 픽셀 단위 px는 CSS에서 가장 기본적인 단위입니다. CSS에서 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값은 정확히 이 값이라고 절댓값으로 단호하게 선언하는 것입니다. C.. 공감수 0 댓글수 0 2022. 3. 16.
text-size-adjust 브라우져의 텍스트 크기 조절 반응형으로 작업을 해보신분들은 아마도 아실겁니다. 아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다. 이걸 방지하는것이 text-size-adjust 입니다. text-size-adjus 는 4가지 속성을 사용할 수 있습니다. 1. auto html { -webkit-text-size-adjust: auto; } 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다. 자동으로 조절한다는것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다. 2. none html { -webkit-text-size-adjust: none; } 텍스트의 크기를 자동으로 조절하지 말라는 뜻이다. 대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리.. 공감수 0 댓글수 0 2022. 3. 16.
[css] rem 의 정의와 사용법, 픽셀보다 권장하는 이유 출처: https://aboveimagine.tistory.com/85 픽셀 사용을 추천하지 않는 이유 픽셀은 고정된 절대값이므로 접근성에 저해될 수 있다. 즉, 유저 입장에서 볼 때 브라우저의 기본 폰트값을 변경하더라도 픽셀값은 변하지 않는다. 물론 유저가 ctrl +/- 를 이용하여 줌 하는 경우에는 접근성을 해치진 않는다. REM Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modif.. 공감수 0 댓글수 1 2022. 3. 16.
componentDidUpdate componentDidUpdate(prevProps, prevState) props가 업데이트될 때의 과정입니다. 업데이트되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출됩니다. 그 후 shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 됩니다. 이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다. componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있습니다. componentDidUpdate(prevProps, prevS.. 공감수 0 댓글수 0 2022. 3. 4.
Intellij에서 TODO 기능을 사용해보자 Intellij에서 프로젝트를 열면, 항상 궁금했던 것이 하나 있는데, 도대체 이 TODO 기능은 도대체 어떻게 쓰는가? 에 대한 것이었다. 도대체 어떤식으로 작동하는 건데..라며 생각했던적이 있었다. 얼마전에 //TODO 주석이 포함된 복사하다가 오잉? 하이라이트가 되는 것을 보고, TODO기능의 쓰임에 대해서 찾아보았다. TODO는 어떻게 쓰는가? 의외로 간단했다. 주석달고 //TODO나 //FIXME를 통해서 색반전이 되면서 더 가독성이 높아진다. 그리고 또한 멀티라인을 사용하고 싶은경우 -를 앞에 붙혀주면 멀티라인도 가능하다. 그리고 TODO 탭에서 그 코드가 TODO와 FIXME가 몇번째 줄인지도 알려준다. TODO도 커스텀하게 사용가능함! FIXME는 빨간색으로 강조를 하면 더 좋을텐데... .. 공감수 0 댓글수 0 2022. 3. 4.
SQL의 종류 DDL, DML, DCL 이란? SQL의 종류 DDL, DML, DCL 이란? SQL(Structured Query Language) - 구조적 질의 언어 이란? 해당 질의 언어를 통해 데이터베이스를 제어하고 관리할 수 있습니다 DDL(Data Definition Language) - 데이터 정의어 DDL(Data Definition Language) - 데이터 정의어 란? 데이터베이스를 정의하는 언어이며, 데이터리를 생성, 수정, 삭제하는 등의 데이터의 전체의 골격을 결정하는 역할을 하는 언어 입니다. 종류 역할 CREATE 데이터베이스, 테이블등을 생성하는 역할을 합니다. ALTER 테이블을 수정하는 역할을 합니다. DROP 데이터베이스, 테이블을 삭제하는 역할을 합니다. TRUNCATE 테이블을 초기화 시키는 역할을 합니다. * .. 공감수 0 댓글수 0 2022. 2. 25.
git merge와 git rebase의 차이 git에서 두 개의 브랜치를 병합할 때 사용하는 두 가지 방법이 있습니다. 1. git merge 2. git rebase 1. git merge //1. master 브랜치로 이동 $git checkout master //2. 병합할 브랜치를 master브랜치에 merge $git merge [master에 병합할 브랜치 명] //위 1,2를 한번에 표현 가능 $git merge [master에 병합할 브랜치 명] master 병합을 하면 합쳐진 브랜치의 커밋 메시지가 중복으로 쌓이게 됩니다. 커밋 순서를 바꾸지 않습니다. 존재하는 브랜치가 변경되지 않습니다. 새로운 merge commit을 생성합니다. git merge --abort : 병합을 취소하는 명령어 위 이미지는 Main 브랜치에 Featu.. 공감수 0 댓글수 0 2022. 2. 24.
npm install과 npm ci의 차이 들어가기 전에 최근에 git clone 후 npm install을 했을 때 package-lock.json가 변경되는 문제를 겪었고 npm ci 명령어를 통해 해결하게 되었던 일이 있었다. 이 문제를 통해 package-lock.json이 존재한다고 하더라고 npm 버전에 따라 npm install이 다르게 구동되어 package-lock.json을 기존과 다른 내용으로 덮어쓸 수 있게 된다는 것을 알게 되었다. 그럼 npm ci는 무엇이기에 이런 문제를 해결해 준 걸까? 그리고 모듈을 설치할 때 무조건 npm ci를 사용하면 되는 걸까? 위의 궁금증 해결을 위해 npm install과 npm ci가 무엇이고, 둘의 차이는 어떤 것인지 그리고 언제 사용하면 좋을지에 대해 정리를 해봤다. npm insta.. 공감수 0 댓글수 0 2022. 2. 24.
package-lock.json이란? package-lock.json은 왜 생성될까? 우리가 기존에 사용하는 package.json 만으로는 정보가 부족하기 때문입니다. package.json 에서는 버전정보를 저장할 때 version range 를 사용합니다. “내가 사용할 패키지의 버전은 1.2.7버전이다.” 라고 말하는 대신 “나는 1.2.7버전 이상의 패키지를 사용할거다.”처럼 말하는 방식인데요. (전자처럼 버전정보를 명시하는 것도 가능합니다.) 협업을 하기위해 같은 package.json 을 사용해 각자의 컴퓨터에 같은 패키지들을 설치해서 같은 개발환경을 구성하게됩니다. 하지만 몇가지 조건이 들어맞아버리는 불행한(..) 상황이 오게되면, 같은 package.json 을 사용해서 npm install 을 진행하더라도 서로 다른 nod.. 공감수 1 댓글수 0 2022. 2. 24.
private npm registry 구축 이 글은 "private npm registry" 를 의미하는 사내 npm 저장소를 다룬다. 이를 위해 Verdaccio 를 이용하는데, 전반적인 이해와 사용 방법을 알아본다. 본인은 실제로 우리가 사용하는 npm 에 대해 조금 더 알게 된 계기가 되었다. 사내 npm 저장소를 구축할 일이 없어도 유용한 글이 될것이라 생각한다. Verdaccio - https://github.com/verdaccio/verdaccio private npm registry 는 무엇인가? 우리는 현재 npm 을 통해 많은 모듈들을 이용한다. npm 에서 많은 모듈을 우리는 그저 편하게 install 하여 사용하고 있다. 우리가 이렇게 사용할 수 있는 건, npm 은 public 하게 제공해주기 때문이다. 반대로 privat.. 공감수 1 댓글수 0 2022. 2. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.