분류 전체보기361 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 Design 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. JavaScript - async / defer 스크립트 속성 (feat. kakao sdk 로컬 에러) 카카오 sdk 는 로컬에서 돌아가지 않고 퍼블릭 url 에서만 돌아가게 된다. 스크립트 형식으로 삽입되면 에러를 내뱉을 때까지 한참을 기다려야 해서로컬 개발 환경에서의 개발자 경험이 좋지 못하다. // .... err// 나 : 잉....? 왜 안되지? 왜 그럴까html 은 async script 안에 async 속성을 사용하면 마찬가지로 브라우저는 백그라운드에서 다운로드한다.따라서 스크립트를 다운로드 하는 도중에도 HTML 파싱은 계속된다. 파싱이 완료 된후 스크립트는 실행된다.defer 와 달리 DOMContentLoaded 이벤트를 신경쓰지 앟고 HTML 파싱 후 그냥 되는데로 실행이 된다.실행순서가 보장이 안되고 제각각이다. 해결async 옵션을 통해 비동기적으로 완료되는대로.. 2024. 7. 15. 알고리즘 - 퀵 정렬(Quick Sort) 퀵 정렬 (Quick Sort)이란퀵 정렬은 특정 원소(피벗) 기준으로 주어진 배열을 두 부분 배열로 분할한 뒤, 각 부분 배열에 대해서 퀵 정렬을 순환적(재귀적)으로 적용하는 방식이다 퀵 정렬은 최악의 경우 시간 복잡도 O(n²) 이고 평균적인 시간 복잡도는 O(nlogn) 이다. 최악의 경우는 피봇이 배열의 맨 처음 혹은 마지막으로 쏠려 일어나는 불균형적인 분할인 상황이며, 최선의 경우는 피봇이 정확히 n/2크기로 분할되는 균형적인 분할로 볼 수 있다. 하지만 피봇의 임의성만 보장된다면 평균성능 O(nlogn) 의 가능성이 매우 높게 된다. 퀵 정렬을 분할 정복 단계로 본다면분할: 피벗을 기준으로 주어진 배열을 두 부분 배열로 분할한다.정복: 두 부분배열에 대해서 퀵정렬을 순환적으로 적용하여 각 부분.. 2024. 6. 9. Windows - PowerShell 에서 ohmyzsh git alias 명령어 적용하기 맥 쓰다가 윈도우를 쓰려니터미널 인터페이스 부터가 답답했다.하지만 리눅스 기반의 zsh 는 윈도우 기반의 개발 환경에서 너무 느렸고,이슈에 대한 예측이나 히스토리가 많이 없기에 리스키하다고 판단되었다. 기본적으로 파워쉘에서 원하는 alias 이름으로 된 함수를 만들고 명령어를 리턴하면 된다. (아주 간단하다)하지만 ohMyZsh 에서 사용하던 git alias 는 매우 방대함으로 포스팅을 해본다. 하지만 이 많은 명령어를 하나하나 언제 만들어주나 하는 생각에 아래 레포를 찾아버렸다. GitHub - gluons/powershell-git-aliases: :octocat: Oh My Zsh's Git aliases for PowerShell.:octocat: Oh My Zsh's Git aliase.. 2024. 6. 4. 이전 1 2 3 4 5 6 ··· 41 다음 반응형
