분류 전체보기346 Network - Cache 그리고 Cache-Control 캐시라는 단어는 오로지 캐쉬 ca-sh 였던 때가 있었다하지만 지금은 이 캐시 ca-che 라는 녀석이 업무 영역 전반에 자리잡고 있다이 친구 매력 있어서 궁금하다 좀 더 알아보자 Network - Cache 그리고 Cache-Control 클라이언트와 🔛 서버는 통신을 하며 데이터를 화면에 보여준다BUT 이전에 받은 데이터와 === 새로 요청한 데이터가 같으면 이 과정은 낭비이다 그 낭비를 줄이기 위해 cache 정책을 사용하게 된다잘 사용하면 Server는 부하를 줄이고, Client는 네트워크를 거치는 시간을 아낄 수 있다 데이터를 CDN같은 cache 서버 혹은 브라우저의 cache 안에 저장하고 꺼내서 사용하게 된다그러기 위해 요청 헤더에 Cache-Control 을 사용한다 캐시의 종류Pri.. 2024. 11. 14. Prettier - Prettier 로 통일된 코드 스타일로 협업하기 Prettier 는 코드 포매터 플러그인 중 하나이다. 사실 개인프로젝트에서 나혼자 사용하기 위해 세팅하거나, 이미 세팅되어 있는 부분들을 format on save 옵션을 걸어 사용하는 정도의 소극적 사용을 하고 있었다. 프로젝트 중에 코드 포매터가 없는 프로젝트가 있어, 적용해본 경험을 포스팅 해보려고 한다. 첫번째로 prettier 플러그인을 패키지 매니저 레벨에서 설치해주는 것이다. IDE 내부에서 익스텐션의 형태로 설치할 수 있겠으나, package.json 에 설치해야 모두가 같은 버전의 포매터를 사용할 수 있게 된다.pnpm add prettier --save-dev 이렇게 되면 package.json 의 devDependencies 라는 개발서버 전용 디펜던시로 설치된다. 즉 로컬에서만.. 2024. 10. 26. Git - fork 하고 원격 레포 동기화하기(fetch, pull request) 오픈소스, 프로젝트 등 다른 사람이 만든 레포 기반으로 작업해야할 때는 여러가지 방식이 있다.그중 하나가 Fork 방식이다. Fork 방식은 쉽게 말해다른 사람의 레포를 나의 레포로 복사해와서 여러가지 작업을 마친 뒤Pull request 를 올려서 merge 를 하는 방식이다.(물론 그사이에 다른 사람이 작업할 수도 있으니 중간중간 최신화도 시켜주면서 말이다) 1. 깃헙 레포 페이지를 들어가보면 Fork 라는 버튼이 보인다. 저 버튼을 눌러보자 2. 카피 레포(fork) 를 만들어주는 페이지로 들어가진다. 이렇게 레포를 만들어주자 3. 이제는 이 카피 레포를 원격 레포와 동기화 시켜주자 일단 오리지널 레포를 upstream 이라는 이름의 원격 저장소로 추가해주었다.$ git rem.. 2024. 8. 28. Git - Vite와 React, pnpm 으로 github page 배포하기 일단 이 포스팅을 남기는 이유는vite, react, pnpm 을 사용해 github page를 배포하려다 호되게 후두려 맞았기 때문이며, 지난날 삽질의 기록이기도 하다. 일단 vite 생태계는 좀 다르다. 빌드 결과물의 경로가 build 디렉터리가 아닌 dist 디렉터리를 바라본다.또한 baseurl 도 잘 지정해주어야 한다. 빌드는 결국 경로 지정 싸움이기 때문이다.그래서 vite 웹사이트에서 static site build 를 안내하는 섹션이 따로 있을 정도이다. 그래서 배포시 extra care 가 필요하다고 본다. 기억나는 데로 크게 세 가지 범주로 나누어 볼 수 있다. 1. 깃헙 페이지 세팅하기 2. vscode 세팅하기3. 깃헙 페이지 배포하기 Git - Vite와 React, pnpm 으.. 2024. 8. 25. HTML - 공식문서 1.7 Desige notes 그간 미루어 왔던 HTML 스펙문서를 읽고 정리해 보았다.영어실력도 기를 겸 영어문서를 내가 이해한 방식으로 정리도 함께 해보려고 한다. 1.7 Design notesHTML 을 처음 볼때 비합리적이고 일관성이 없어보인다. 많은 DOM API 를 서포팅하는 HTML 은 수십년 동안 많은 케이스 중에서 서로의 존재를 몰랐던 많은 사람들은 다양한 우선순위를 가지고 발전해왔다. HTML 의 기능들은 많은 소스들에 의해 만들어졌고, 항상 일관성있게 고안되지는 않았다.게다가 implementation 된 버그가 사실상(de-facto) 표준이 되었고, 이제는 법적(de-jure) 표준이 되었다.버그가 수정되기 전에 종종 콘텐츠가 그 버그에 의존하는 방식으로 작성되기 때문이다.그럼에도 불구하고 design g.. 2024. 8. 19. Git - Obsidian 메모앱과 깃헙 연동하기 메모앱 유랑민... 바로 나다!여러 노트 앱을 리뷰하고 사용해보면서 느낀점은 하나였다.폴더링되는 구조의 심플한 메모장을 찾고 있다는 것이다. 고심끝에 데브유 사수님이 추천해준 obsidian 이라는 노트앱을 어제 부로 정착하게 되었다. 정착하려고 보니 이게 왠일...?회사에서는 윈도우를, 집에서는 맥을 사용하는 나에게 동기화가 되지 않는다는 점은 큰 허들이었다.옵시디언에서 제공하는 싱크기능을 사용하기엔 한달에 4-5천원의 비용은 좀 부담스러웠다.그래서 obsidian 과 github 연동을 해보기로 하였다. (이렇게 땔래야 뗄수 없는 42가 되어버렸다...☆) Git - Obsidian 깃헙 연동하기 1. 깃헙에서 새로운 레포지토리를 만들어 주기 2. 레포는 "obsidian-custom" 이라고.. 2024. 8. 13. Git - 실행오류 this exceeds GitHub's file size limit of 100.00 MB 원격저장소에 100mb 가 넘는 파일을 push 하려고 했더니 다음과 같은 에러 메시지가 나왔다깃헙에서는 100mb 가 넘는 파일 업로드가 제한되는데, 이때 Github Large File Storage 를 활용하면 해결이 가능하다remote: error: Trace: d183cdc7e4067f908b9401bderemote: error: See https://gh.io/lfs for more information.remote: error: File Obsidian.exe is 168.57 MB; this exceeds GitHub's file size limit of 100.00 MBremote: error: GH001: Large files detected. You may want to try G.. 2024. 8. 7. CSS - Scss vs Css in Js 동작방식 비교하기 실무에서는 각기 다른 프로젝트에 scss 와 Css in js 를 둘다 사용한다. 알고 모르고의 차이가 엄청난 업무 효율의 차이를 가져온다. 어렴풋이 알고만 있고 설명할 수 없다면 그것은 지식이 아니기 때문에(의식의 흐름대로 이해해본) scss 와 css in js 에 대한 포스팅을 올려보게 되었다. 문득 면접 질문들 중에 렌더 과정에 대한 질문이 생각났다.당시에는 면접용으로 달달 외우듯이 공부했었지만실무에서 한 모먼트씩 떠오르며 기초체력을 바탕으로 추진력과 인사이트를 얻었던 계기가 되었다.더 추가되는 지식이 있으면 계속 업데이트해볼 생각이다 CSS - Scss vs Css in Js 의 동작방식 비교하기 SCSScssom 트리를 그리기 위해서는 css 파일을 읽어야 한다.기존의 css 파일은 좀 구렸다.. 2024. 8. 4. VScode - extension 오프라인으로 설치하기 vscode extension 을 vscode 내부에서 설치했었는데, 이번에 오프라인으로 설치해보고자 한다 :)생각보다 매우 쉬워서 공유하고자 한다. 1. vscode 마켓플레이스 사이트에 들어가서 extension 다운받기https://marketplace.visualstudio.com/ 2. extension 폴더에 다운받은 파일 넣어주기요부분은 필수는 아니지만 extension 들끼리 모여있으라고 넣어주었다. 3. vscode - 왼쪽하단의 설정버튼 - Command Palette 클릭해주기 4. install from VSIX 검색해서 클릭하면 파일 탐색기가 나온다 :) 파일 선택해주기 5. 잘설치가 되었다! 2024. 7. 26. 이전 1 2 3 4 ··· 39 다음 반응형
