분류 전체보기 (75) 썸네일형 리스트형 Package.json 살펴보기 Package.json name package.json 에서 가장 중요한 항목은 name과 version이다. 필수로 입력되어야 하며 없다면 패키지를 설치하게 할 수 없다. name과 version을 통해 각 패키지의 고유성을 판별하게 되고, 그렇기 때문에 내용이 변경된다면 version을 바꾸어 주어야만 한다. 규칙 점이나 밑줄로 시작할 수 없고 대문자를 포함해서는 안된다. URL의 일부분임으로, 커맨드라인의 인수이자 폴더명이다. 따라서 모든 URL-safe하지 않은 name은 거부된다. 조언 name에 node또는 js를 넣지 않는다. package.json을 쓰고 있는 시점에서 이미 JS라는 것을 알 수 있고, engines항목에서 실행기반을 지정할 수 있다. name은 JS 파일 내에서 requi.. node.js 의 path, import meta, fileURLToPath 모듈 경로 node.js 의 path, import meta, fileURLToPath 모듈 경로 운영체제 파일이나 디렉토리의 경로를 다루는 데 필요한 모듈인 path 경로처리를 할 때 은근히 오류 발생의 소지가 있기 때문에 따로 설정하게 되면 오류가 생길 수 있다. 예를 들어 유닉스 계열의 OS와 윈도우 계열의 OS는 서로 다른 문자로 디렉토리 구조를 표현한다. 유닉스 계열 운영체제는 / 문자를 사용하는 반면 윈도우 운영체제는 ₩ 문자를 사용한다. 유닉스 계열 $ pwd /Users/user 윈도우 $ cd C:\Users\user 또한 이 두 운영체제는 PATH 환경변수를 표현할 때도 서로다른 문자를 사용하여 여러 경로를 나열한다. 유닉스 계열의 운영체제에서는 : 문자를 사용하는 반면, 윈도우 운영체제는 ; 문.. Mono-Repo 와 관련 라이브러리 툴(turborepo, yarn workspace) Multi-Repo 멀티 레포는 여러 레포지토리에 패키지를 분산해 주는 것을 의미한다. 말 그대로 하나 또는 두개 이상의 패키지 관리는 하나 또는 두개이상의 레포지토리로 구성하여 관리하는 것이다. 예를 들어 A라는 패키지를 구성하는 B,C라는 패키지가 있을 경우 B-Repository, C-Repository 로 나눠 두는 것을 의미한다. 여기서 꼭 A라는 패키지가 없어도 상관 없다 의미자체를 보면 패키지별로 레포지토리를 분리한다고 보면 된다. 보통 패키지와 페포지토리는 1:1관계를 맺으며 통상 사용하는 방식으로 생각하면 된다. 장점 레포지토리멸 오너를 지정 패키지 별로 레포지토리가 분리되어있다는 것은 각 패키지 별로 관리가 가능하는 것이다. 이에 대해 각 레포지토리별 오너를 지정할 수 있고 이로 인해 .. npm yarn yarn berry 패키지 관리 툴이다. Node Package Manager 패키지 관리자: command line client + npm registry 기본적으로 node.js 내에 npmd은 내장되어 있다. 기본적으로 패키지 관리자가 없다면 따로 코드를 작성하거나 다운로드 받아서 붙여주어서 사용해야하지만 이러한 패키지 관리 툴이 있다면 온라인에서 바로 한줄의 코드로 해당 코드 및 프로젝트를 받아와 바로 사용할 수 있다. package.json을 사용하여 의존성을 관리하고 어떤 패키지가 다운로드되었는지 어떤 버전을 사용하는지 등을 기록하여 어드 곳에서도 동일한 환경을 구축할 수 있다. Yarn 페이스북에서만든 패키지 관리자 툴이다. npm 과 같은 기능을 수행한다. yarn은 npm의 단점을 향상시키기 위해 만들어진 .. 이미지 최적화 및 성능 개선 기존 프로젝트의 이미지가 온전히 원본 이미지를 img src를 사용해서 가져오고 있었기 때문에 이미지 관련 작업이 필요했다. 1) 우선은 프론트 단에서는 이미지를 viewport에 잡힐 때 load 시키고 (Intersection Observer) 2) 빠르게 구현했어야 했기 때문에 이미지 캐싱, 레이지 로딩 및 압축 포매팅 등 기능을 제공하는 next image를 사용했다. 3) 업로드 하는 부분도 Toast UI 에디터를 사용하고 있었기 때문에 사진을 에디터에 불러오는 훅을 커스텀해서 s3에 업로드 하기 전에 Next API를 사용해서 해당 이미지 최적화 로직을 구현하고, s3에 업로드한 후 백엔드에 업로드된 이미지 주소를 보내주었다. 이 외에도 웹폰트, 스크롤, 스켈레톤 등을 통해서 성능을 개선할 .. leetcode: 3. Longest Substring Without Repeating Characters JS solution https://leetcode.com/problems/longest-substring-without-repeating-characters/ Longest Substring Without Repeating Characters - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 🔒 문제 Given a string s, find the length of the longest substring without repeating characters. Example 1: In.. V8엔진 작동 방식 feat 웹 어셈블리 V8 엔진은 C++로 만들어 졌으며, JS와 웹어셈블리를 실행할 때 사용된다. V8 엔진은 브라우저 위에서 뿐 아니라 독립적으로도 사용될 수 있으며 예는 node.js가 있다. V8 엔진에서의 동작 방식을 보면 JS 코드를 읽기 -> parsing -> bytecode -> 실행 순으로 이뤄지는데 최근 브라우저에서는 turbofen 엔진을 통해 최적화를 진행한다. V8 엔진은 다음과 같은 일을 수행하게 되는데 1) JS 코드 실행 2) 객체를 메모리 힙 영역에 할당 3) 사용하지 않는 객체를 GC에서 해제 4) hidden class를 사용하여 객체 프로퍼티 참조하여 참조 속도 개선 5) turbofen 엔진을 통해 최적화 -> 속도, 메모리 최적화 hidden class 여기서 정적 타이핑 언어와 달리.. vertical percentage bar 바닥부터 채우기 세로로 된 퍼센테이지 바를 만들기위해서 아래와 같이 구조를 만들었다. 그런데 내부 퍼센테이지에 따라 채워져야하는 바가 위에서부터 채워지는 문제가 생겼다. 이미지 스프라이팅을 하고 있었기 때문에 이미지에 absolute와 cover를 사용해서 강제로 bottom:0을 만드는 것은 할 수 없었다. 사람모양이어서 사진의 바닥에서부터 퍼센테이지에 따라 그림에 맞춰 바닥부터 올라왔어야 했기에 어떻게 하면 좋을지 검색해도 원하는 부분은 안나왔다. 결론적으로 flex와 background-position-y를 통해 해결했다. /* 상위 컴포넌트 */ const GrayBar = styled.span` background: url(..) no-repeat; background-position: ; width: ; he.. 이전 1 2 3 4 5 ··· 10 다음
