티스토리

기록 (21.7.19 ~

검색하기

블로그 홈

기록 (21.7.19 ~

wnsdufdl.tistory.com/m

개발 관련 글을 씁니다. 주로 배운것 복습, TIL

구독자: 4

방명록 방문하기

반응형

주요 글 목록

라이브러리 만들때 package.json "type": "module" "exports": { ".": { "types": "./dist/index.d.ts", "require": "./dist/index.umd.cjs", "import": "./dist/index.js" } }, "types": "./dist/index.d.ts", "main": "./dist/index.umd.cjs", 위와 같이 적게 되는데, "type": "module"type명시하지 않으면 CommonJS이다.commonjsCJS 방식을 사용한다는 뜻. 기본적으로 .js는 commonJS 모듈로 해석되며 ESM 모듈은 .mjs 확장자를 명시적으로 지정해줘야 한다.require()와 module.exports를 사용할 수 있.. 공감수 1 댓글수 0 2024. 11. 5.
vite 주요 기능 Typescript: 트랜스파일링만 수행, 타입검사는 IDE와 빌드에서 진행되도록 권장JSX: esbuild를 이용해 컴파일함css: .css 파일을 가져오면 HMR을 지원하는 태그를 통해 페이지에 주입됨.정적에셋(png,...): import하면 public url 반환됨JSON: 바로 import 가능. 가져올 필드 지정하면 트리세이킹 됨. 공감수 0 댓글수 0 2024. 9. 10.
webpack 강의 메모: css loader loader기본적으로 loader는 img, css 같은 JS가 아닌 파일을 변환번들링해주는 녀석이다.css loaderloader: css 파일을 빌드할 수 있게 도와주는 모듈 아래 style-loader, css-loader가 css를 빌드할 수 있게 도와준다.var path = require("path");module.exports = { mode: "none", entry: "./index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "c.. 공감수 0 댓글수 0 2024. 9. 3.
build 했을때 번들 크기 너무 크면 꼼수 일단 이런거라도 찾아보자. before throttle만 쓸껀데 lodash에서 71.5k를 쓰고 있다. After lodash/throttle만 이용하자. 공감수 0 댓글수 0 2024. 4. 12.
자신없는 커밋할때 https://gyuwon.github.io/blog/2021/04/04/commit-message-driven-development.html 커밋 메시지 주도 개발 나는 자신이 없는 코딩을 할 수록 계획을 작게 나눈다. 작은 계획을 실천하도록 사용하는 도구 중 한가지는 코드를 쓰기 전에 내가 어떤 코드를 쓸 지 커밋 메시지를 먼저 작성하는 것이다. 누군 gyuwon.github.io 공감수 0 댓글수 0 2024. 3. 17.
웹개발 vscode prettier 설정 https://green-grapes.tistory.com/entry/VSCode-prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 [VSCode] prettier 설정하기 1. 일단 확장(extensions) 들어가서 prettier 치고 가장 처음 나오는 거 다운 받는다. 2. ctrl 과 , 키를 동시에 눌러서 설정 창을 연다. 3. 설정에서 Editor: Default Formatter 검색 Prettier -Code Formatter 선택 4. 설 green-grapes.tistory.com 공감수 0 댓글수 0 2024. 3. 17.
webpack에서 vite로 마이그레이션 이 프로젝트를 webpack에서 vite로 마이그레이션했다. 1. 빈 vite 만들고 필요한 것 복붙 https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/ 번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기 Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구로 요즘 인기를 끌고 있습니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠 tech.cloudmt.co.kr 위 글이면 왠만한건 다 해결된다. 3. index.html은 root로 옮기기 localhost:3000을 켰는데 아무것도 되지 않았다. cra에서는 index.html을 public폴더에 만.. 공감수 1 댓글수 1 2024. 1. 7.
Rest 정리 Rest url과 http method로 어떤 자원을 주고 받을건지 명시하여 통신하는 api. http 기반으로 만들어진 api라서 stateless하다. 즉, 정보를 저장하지 않고 클라이언트에서 보내준 요청에 대해서만 응답한다. 그리고 통신이 이루어질때만 연결하고, 통신이 끝난 후에는 연결을 끊는다. http 캐싱은 일반적으로 get에 대한 응답만 캐싱하는데 rest도 마찬가지다.(사실 post,put,delete에 대한 캐싱을 신경쓰는게 이상하다. 데이터를 변경하면 당연히 캐시도 갱신시켜야 하니깐) Restful하게? url 작성 url에는 몇가지 규칙이 있는데 다음과 같다. 행위는 method로 나타낸다. 행위를 위해 url에 동사를 쓰지 않음 대문자보다는 소문자를 사용 '/'로 계층 구조를 나타낸다. 공감수 0 댓글수 0 2023. 11. 23.
React와 Express로 Kakao Login OAuth 구현하기 (1) React,Express의 기초코드를 설명하진 않는다. 1. 프론트에서 인증코드 요청 /signin 페이지를 다음과 같이 만들었다. 버튼을 클릭하면 카카오 인증코드를 받을 수 있는 페이지로 리다이렉트 된다. const auth = (e: React.FormEvent) => { e.preventDefault(); const kakaoAuth = `https://kauth.kakao.com/oauth/authorize?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`; window.location.assign(kakaoAuth); }; return ( Kakao Signin ); 2. 인증 코드 전달 위의 kakaoAuth페.. 공감수 0 댓글수 0 2023. 7. 12.
라이브러리 버전의 디테일을 관리하는 package-lock.json npm install을 하면 package-lock.json을 참조해서 설치하고자 하는 패키지가 어떤 버전의 패키지에 의존성이 있는지 확인해서 함께 설치해줌 서버를 다시 풀받고 로컬에서 실행하니 켜지지 않았다. 히스토리 King이신 옆팀 백엔드 개발자분께 도움을 청했다. package-lock.json이 문제였다. 그러면서 이런말씀을 하셨다. package-lock.json은 백엔드에만 국한된 것이 아니라서, 준열님도 공부하면 좋을 것 같은데? 그럼 package-lock.json이 무엇일까 package-lock.json package.json 파일에는 라이브러리들의 버전이 적혀있는데, package.json은 협업에 있어서 라이브러리 버전 관리의 제 역할을 완벽하게 수행하지 못한다. 예를 들면 pac.. 공감수 1 댓글수 0 2022. 12. 22.
핵클 라이브러리 : A/B 테스트, 기능 플래그, 실시간 데이터 분석, 모니터링 핵클은 A/B테스트 , 기능 플래그, 실시간 데이터분석 모니터링 툴이다. 핵클 라이브러리: 간편한 A/B테스트 A/B테스트는 신규 기능을 도입할 때 주로 쓰인다. 일부 고객들에게는 기존 기능을, 나머지 고객들에게는 새로운 기능을 보여주고 두 기능중 어떤 것이 더 효과적인지를 판단하는 방법이다. 핵클 도입전에는 A페이지, B페이지를 만들고 일정확률로 B페이지로 리다이렉트 시키는 방법을 사용했다. 핵클 도입 이후, 테스트를 원하는 특정 섹션에만 A/B테스트를 세팅하여 코드양을 줄이고 생산성도 증대되었다. 하기 코드는 next.js에서 사용한 A/B테스트 세팅, _app.tsx SDK초기화 코드이다. (공식문서) - A/B테스트 세팅 //동일한 컴포넌트내에서 A/B테스트 세팅, B페이지를 따로 만들지 않아도 .. 공감수 0 댓글수 0 2022. 4. 1.
react와 next.js를 비교하며 라이브러리와 프레임워크 차이 알아보기 React.js와 Next.js를 비교하자. 라이브러리 : React.js Create-react-app으로 만든 리액트의 경우 항상 index.js에서 아래와 같이 ReactDOM.render()를 통해 태그에 JS파일들을 렌더링시킨다. ReactDOM.render( , document.getElementById("root") ); 그리고 페이지를 동적 변환 시키기 위해 react-router-dom이라는 또다른 라이브러리를 설치해야한다. 즉 사람이 라이브러리를 사용한다. 프레임워크 : Next.js pages폴더안에 js파일만 생성하면 그 자체로 동적변환이 되고, import react를 하지 않아도 .js파일을 사용할 수 있다. 이는 Next.js 내부 코드 아주 깊은 곳에서 router, Reac.. 공감수 1 댓글수 0 2022. 1. 25.
WebPack 기본 정리 체계적인 설명보다는 제가 이해한 것들을 두서없이 적어놓았습니다. 기존 문제점 JS파일이 많아졌을때 각 파일들의 변수들이 서로의 스코프를 침범하지 않도록, 그리고 각 파일들의 실행순서를 올바르게 하기 위해 개발자들이 의존성을 일일이 파악해야는 불편함이 있었다. 만약 JS파일이 1억개라하면 개발자들이 모든 JS파일들의 의존성을 분석하는 것은 어렵다. 웹팩은 최상단 자바스크립트 파일에서 시작해 연결된 파일들을 타고 내려가며 의존성 그래프를 만들어낸다. 무엇이 무엇에 의존성을 가지고 있고 무엇이 무엇보다 먼저 포함되어야 하는지, 무엇을 분리해야하는지 분석하면서 자바스크립트 파일들을 조합해 하나 또는 여러 개의 번들(bundle)을 만든다. 개발자는 파일들의 의존성을 파악할 필요 없이 웹팩이 만든 번들파일을 삽입.. 공감수 0 댓글수 0 2022. 1. 3.
문자열 유니코드 유니코드는 전 세계의 모든 문자를 컴퓨터에서 동일하게 사용하도록 설계된 산업 표준이다. ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자를 다루기 위한 알고리즘 등을 포함한다. 인코딩(부호화) 어떤 문자나 기호를 컴퓨터가 이용할 수 있는 신호로 만드는 것. 인코딩(반대는 디코딩)의 기준을 문자셋(charset)이라고 하는데, 문자셋의 국제 표준이 유니코드이다. ASCII 영문 알파벳을 사용하는 대표적 문자 인코딩으로 7 비트로 모든 영어 알파벳을 포현할 수 있다. 52개의 영문 알파벳 대소문자와, 10개의 숫자, 32개의 특수 문자, 그리고 하나의 공백 문자를 포함한다. 유니코드는 ASCII를 확장한 형태이다. UTF-8과 UTF-16 UTF-8과 UTF-16은 인코딩방.. 공감수 0 댓글수 0 2021. 10. 25.
비쥬얼스튜디오에서 install 'code' command in PATH 가 되지 않을때 해결법 (eacces: permission denied, unlink '/usr/local/bin/code') OS : Mac OS 터미널에서 code . 를 입력하면 zsh: command not found: code 이런 오류가 뜨는 맥북이 있다. 그럼 대부분의 글에서 VSC로 들어가 Command Palette(Shift+command+P)에 [ Shell Command : install 'code' command in PATH command ] 를 입력한 후 다시 터미널에 code . 를 입력하라고 한다. 이렇게 하면 대부분 해결되는것 같다. 하지만 나의 경우는 그렇지 않았다. 다음과 같은 메시지가 떴다. EACCES: permission denied, unlink '/usr/local/bin/code' 해결책 https://github.com/microsoft/vscode/issues/129884 위의 .. 공감수 0 댓글수 0 2021. 10. 5.

반응형

문의안내

티스토리
로그인
고객센터

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