소금빵의 인공눈물

1. homebrew 공식 홈페이지 : https://formulae.brew.sh/formula/openjdk@17 brew install openjdk@17 2. 설치된 openjdk 링크파일 생성 sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk 3. zshrc에 JAVA_HOME 설정 rc파일을 변경하기 위해 관리자 권한이 있거나 sudo명령어를 사용해야합니다. 아래와 같이 jdk 버전에따라 JAVA_HOME 변수를 구분해두면 추후 path에서 간단하게 변경하여 사용할 수 있습니다 :) vi ~/.zshrc ### zshrc 안에 내용 입력 ### e..

Husky란? Git hook입니다. git과 관련된 액션이 일어날때 husky에 설정한 처리가 수행됩니다. 쉬운 예시로, pre-commit 훅을 사용하면 커밋 전 husky에 사용자가 설정한 액션이 수행됩니다. 공식사이트 : https://typicode.github.io/husky/ 사용 전 주의사항 : husky를 설치하려는 프로젝트의 폴더 경로에 .git이 있어야 합니다. husky는 yarn으로 설치할때와 .git의 위치에 따라 설치 방법이 달라져서 조금 까다롭습니다. 저는 오늘 프로젝트 폴더가 아닌 상위 폴더에 .git이 있는 관계로 설치 과정이 평범하지 않아 이러한 상황에 설치하는 방법을 알려드리려고 합니다 :) 일반적인 구조 내 폴더 구조 ReactApp (Root) ㄴ .git ㄴ ....

안녕하세요 :) 이번 글에서는 nvm으로 node의 버전을 변경하는 방법에 대해 알려드리겠습니다. 프론트엔드는 프로젝트마다 node와 npm의 버전이 다르고, 이에따라 자주 버전을 교체해주어야 하는 불편함이 있어 node를 따로 설치하기보단 nvm(node version manager)을 활용하여 노드의 버전을 자주 바꾸게 됩니다. nvm 명령어로 간단하게 node의 버전 변경하는 방법을 설명드리겠습니다. bashrc와 zshrc에서 설정할 수 있습니다. 저는 zshrc에서 변경하였습니다. 아래 순서대로 진행해주시면 되겠습니다. nvm 설치 # nvm 설치 brew install nvm .zshrc파일 수정 # /.zshrc 파일 열기 vi ~/.zshrc # .zshrc파일 끝에 아래 두 줄 입력 ex..

프로젝트를 생성하기 전에, vite에 대해 간단히 설명드릴게요 :) vite란? 대규모 프로젝트에서 javascript 모듈이 증가될 수록 javascript 기반의 도구는 병목현상이 발생됨에 따라 개발의 생산성을 낮추고 변경 파일에 대한 피드백에 영향을 주었으나 vite에서 지원하는 ES Modules(ESM)을 통해 이러한 현상을 해결할 수 있습니다. 자세한 설명은 아래 공식 홈페이지를 참고해주세요. https://ko.vitejs.dev/guide/why.html 버전 node : 20.11.1 (버전 변경 방법 : https://withwltn.tistory.com/31) yarn : yarn berry (4.1.1) react : 18.2.0 typescript : 5.2.2 프로젝트 생성 프로..

lazy-loading이란? 앱의 초기 구동시 모든 컴포넌트의 리소스를 가져오지 않고, 리소스를 컴포넌트 단위로 분리시켜 필요한 것들만 다운로드합니다. 특히 대규모 프로젝트에서 사용하는 컴포넌트가 많아질수록 로드하는 시간이 길어지는데 이를 줄이는데 유용합니다. 사용 방법 router.js에서 component import 하는 부분을 함수로 변경합니다. const routes = [ { path: '/page/home/detail', name: 'DetailPage', meta: { menuAth: 'menu0001' }, component: () => import('../page/home/homeDetail.vue'), //함수화 } ] export default routes 주의점 app.vue 또는..

defineExpose란? vue3에서 defineExpose란 자식 컴포넌트에서 선언된 함수(API)를 부모 컴포넌트에서 직접적으로 호출(import)하여 사용할 수 있는 함수입니다. 사용 방법아래 코드는 Composition API 에서 defineExpose를 사용하는 간단한 방법입니다. 1. childComponent.vue 자식 컴포넌트에서 expose할 함수 선언 2. 부모에서 함수 호출 자식함수호출!

vue를 개발하던 중 이런 에러가 떴다. 검색해보니 해당 오류는 같은 컴포넌트를 한 번 더 호출해서 이미 해당 경로인데 우케 또 일루가냐~~ 라는 에러라고한다. 하지만 가야합니다 원래는 코드는 router-link로 html에서 꽂았는데 여기선 해결방법이 없어보여서 함수로 뺐다. 1. 클릭하는 html 요소에 해당 함수를 박는다. @click="repoCheck(el.name)" @keyup="repoCheck(el.name)" 2. el.name 요소를 전달받은 repoCheck 메소드는 router에 push를 하는 동시에 에러가 나는 것을 catch하여 무시하기로 한다! methods: { repoCheck(rn) { this.$router.push({ name: 'repositoryFile', p..

npm 모듈 설치시 npm ERR! 하면서 뜨는 에러들 너무 킹받는다. 해결방법 : npm install [설치할모듈] --save --legacy-peer-deps

[사건의 발단] Git같은 서비스를 개발중이라 디렉토리 들어갈때마다 n개의 라우트 경로를 생성해야 될 일이 생겼다. 일반 string으로 'testdir1/testdir2/testdir3' 으로 넣으면 'testdir1%2Ftestdir2%2Ftestdir3' ㅇ..이래 ㅋ 구글링해도 %2F에 관해선 거~~~의 안나왔다. 그나마 route 공홈에서 언급을 했는데 이런말을 한다. 심지어 %2F 가 들어가면 Url 복붙해서 다른페이지로 열었을때 HTTP404 Bad Request 떠서 더 안됨 [삽질의 시작] route 공식에서는 중첩라우트 만드는 방법에 대해 이렇게 설명한다. https://router.vuejs-korea.org/ko/guide/essentials/route-matching-syntax...

1. click이벤트 지정 @click은 v-on:click과 같은 의미다 테이블의 인자값을 넘기기 위한 row.name 변수와 $event핸들러(DOM의 이벤트 활성화)를 넣어주었다. 2. method 안에서 받은 이벤트를 콘솔로 찍어본다. (event 생략가능) clickRepo(name) { console.log(name); },