본문 바로가기

분류 전체보기328

[자바스크립트/한줄정리] 화살표 함수 생략 방법 화살표 함수 생략 전 export default createRouter({ scrollBehavior: () => { return { top: 0, } }, }) 화살표 함수 생략 후 return { }이 생략되고 리턴되는 객체데이터를 소괄호( )로 감싸주었다 export default createRouter({ scrollBehavior: () => ({ top: 0 }) }) 2022. 7. 8.
[웹개발] API, RESTFUL API, End Point 정리 API 1. API란 Application Programming Interface의 약어 애플리케이션: 고유한 기능을 가진 모든 소프트웨어 인터페이스: 두 애플리케이션 간의 서비스 계약 (계약에는 요청과 응답으로 통신하는 방법을 정의한다) 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘을 말한다 하나의 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 규칙을 말한다 (이곳에서 이야기하는 규칙은 코드를 의미한다) 클라이언트가 서버에 특정 데이터(Resource)를 생성, 조회, 수정, 삭제를 요청할때 사용하는 코드를 말한다 2. API의 종류 1) Public API (open API) 누구나 사용가능한 공개된 API 회사 내부에서 사용하는 API(Private API)를 외부에 공개하는.. 2022. 7. 8.
[Vue] props로 문자 데이터가 아닌 다른 데이터(숫자, 객체, 선언한 데이터 등)을 전달하는 방법 props로 문자 데이터 전달 App.vue HelloWorld.vue {{ message }} props로 문자가 아닌 다른 데이터 전달 props를 전달할때 v-bind: 디렉티브를 사용해 데이터를 전달한다. 이때 v-bind는 생략하고 :만 사용할 수 있다. App.vue :v-bind를 사용해 props값으로 숫자데이터를 전달하고 있다. 만약 :v-bind를 사용해 props값으로 문자데이터를 전달하고 싶다면 쿼트로 한번 더 감싸준다. 선언한 데이터를 속성으로 가질때도 v-bind: 디렉티브를 사용한다. // data 옵션에서 생성한 message라는 데이터를 연결했다 // v-bind:로 연결했기 때문에 message는 문자열이 아니다 2022. 7. 6.
[Vue] Vuex 개념, 설치, 사용 방법 (스토어 모듈화시키기) Vuex 개념 Vuex는 왜 필요한가? Vue에서 사용할 데이터는 data 옵션에 정의해준다. 그리고 선언한 data를 props를 사용해 하위 컴포넌트에 전달할해준다. 여기서 문제가 생긴다. 만약 선언한 data를 상위 컴포넌트에서 사용할 경우에는 data를 전달해줄 방법이 없다. 또한 어떤 컴포넌트의 하위 컴포넌트의 하위 컴포넌트가 선언한 data를 필요로할때 이 값을 전달하기 위해서는 해당 값을 필요로 하지 않는 컴포넌트도 props를 전달하기위해 선언해주어야한다는 번거로움이 있다. 이렇게 컴포넌트 내부에서 데이터를 선언해 사용하면 다른 컴포넌트에서 접근이 쉽지 않다. 이를 해결하기 위해 전역 데이터 저장소인 vuex를 사용한다. Vuex란 무엇인가? 위에서 vuex는 전역 데이터 저장소라고 하였다.. 2022. 7. 6.
[npm/에러해결] npm에서 패키지 설치시 code ENOSELF 에러 해결 방법 ⚠️ 에러내용 Vue 프로젝트에서 vuex 패키지를 설치하려고 시도했을때 해당 에러메세지가 발생하였다. npm i vuex ❓ 에러발생이유 에러가 발생한 이유는 사실 에러 메세지에 나타나 있다. 터미널 에러 메세지 Refusing to install package with name "vuex" under a package also called "vuex". Did you name your project the same as the dependency you're installing? 대충 해석 vuex라는 이름을 가진 프로젝트에서는 같은 이름을 가진 vuex 패키지 설치가 불가하다. 프로젝트 이름이 설치하려는 패키지 이름과 동일하지 않은지 확인하도록! 프로젝트의 package.json에 있는 프로젝트 이.. 2022. 7. 6.
[웹개발] URL과 URI 차이점 정리 ⚠️ 이 포스팅은 torang.log 블로그에 URL과 URI의 차이점 포스팅을 공부하고 정리한 블로그 포스팅입니다. ⚠️ URL vs URI URL (Uniform Resource Locator) 리소스가 실제로 존재하는 위치(Locator)를 가리킨다 여기서 리소스란 애플리케이션이 클라이언트에게 제공하는 정보를 말하며 리소스는 이미지, 동영상, 텍스트, 숫자 또는 모든 유형의 데이터일 수 있다 Path Variable 방식 https://maplecoding.tistory.com/category/React 위의 예시에서는 https://maplecoding.tistory.com 에서 /category/React 라는 경로를 나타내고 있다 서버에서는 해당 라우팅(웹주소)에 대한 알맞은 자원(해당 웹페이.. 2022. 7. 1.
[Vue/한줄정리] 싱글 파일 컴포넌트(SFC)란? CLI로 뷰 프로젝트를 생성하고 나면 App.vue라는 파일이 자동으로 생성되는데 코드에는 HTML, CSS, JS를 넣을 수 있는 섹션이 구분되어져 있다. App.vue 파일처럼 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 vue 확장자를 가진 파일을 싱글 파일 컴포넌트라고 말한다. App.vue 2022. 6. 30.
[Vue] 컴포넌트 전역등록, 지역등록 전역등록 TheHeader 라는 컴포넌트를 전역적으로 등록해주었다. import { createApp } from 'vue'; import App from './App.vue'; import HelloWorld from './components/HelloWorld.vue'; createApp(App) .component('hello-world', HelloWorld); .mount('#app'); 지역등록 모듈 시스템에서 컴포넌트를 다른 컴포넌트에 지역적으로 등록하는 방법이다. 등록하고 싶은 컴포넌트를 import해준다. 2022. 6. 30.
[웹개발/문제해결] 파일 저장시 eslint 설정대로 코드 정리가 안될때 해결방법 1. setting.json 파일 열어주기 window에서는 Ctrl + Shift + P, Mac에서는 Cmd + Shift + P로 파일 검색창 열어준 후 setting.json 입력하면 해당 파일을 열어줄 수 있다. 2. setting.json에 아래의 코드를 넣어준다 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, 2022. 6. 30.
[Vue] vite.js로 Vue 프로젝트 시작하고 ESLint, 경로 별칭까지 설정해주기 vite.js로 Vue 프로젝트 시작하기 npm으로 설치하기 npm create vite@latest yarn으로 설치하기 yarn create vite 원하는 프레임워크 선택하기 원하는 옵션 선택하기 (자바스크립트 or 타입스크립트) package.json에 명시된 패키지들 설치해주기 npm install 프로젝트 시작하기 npm run dev eslint 설정해주기 eslint 설치해주기 npm i -D eslint eslint-plugin-vue .eslintrc.json 파일 만들어주고 eslint 설정해주기 .eslint.json 파일 생성 .eslint.json 파일에 코드 넣기 (기호따라 변경 가능) { "env": { "browser": true, "node": true }, "extend.. 2022. 6. 30.
[npm/에러해결] npm ERR! code EEXIST ⚠️ 에러내용 CLI로 Vue 프로젝트 생성하기 위해서 아래의 명령어를 실행했을때 에러가 발생하였다. npm install -g @vue/cli ❓ 에러발생이유 -g 를 붙여서 전역으로 설치 할 경우 발생하는 오류 ❗️ 해결방법 아래의 코드를 입력해주고 profile이라는 숨겨져 있는 파일을 vi 에디터로 열어준다. mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.profile i로 해당파일을 수정모드로 바꿔주고 아래의 코드를 맨 하단에 입력해준 후 :wq 키워드로 파일을 저장, 종료시켜준다. export PATH=~/.npm-global/bin:$PATH 변경된 profile 파일을 적용해준다. source ~/.profile 2022. 6. 30.
[VI에디터/에러해결] E325 : ATTENTION 해결방법 ⚠️ 에러내용 git commit 메세지를 작성하려고 할때 E325 : ATTENTION 에러가 발생 ❓ 에러발생이유 VI 에디터 사용중 정상적으로 에디터가 종료되지 않고 빠져 나왔을 경우 에러가 발생한다. 나의 경우는 커밋 메세지를 작성하던 도중 VI 에디터를 종료하였다. 즉 메세지가 작성되지 못하고 커밋이 되었다... ❗️ 해결방법 경고창 맨 마지막줄에 나온것처럼 파일경로에 있는 COMMIT_EDITMSG.swp 파일을 삭제해준다. If you did this already, delete the swap file "파일경로/.COMMIT_EDITMSG.swp" 해당 경로로 이동한후 COMMIT_EDITMSG.swp 파일을 삭제해주는데 이때 COMMIT_EDITMSG.swp 파일은 숨겨진 파일이므로 파.. 2022. 6. 23.
[웹개발/한줄정리] package.json에서 일반 의존성, 개발 의존성이란? 일반 의존성 브라우저에 동작에 필요한 패키지 설치시 --save 키워드를 붙였으나 npm 버전이 업데이트 된 이후로 생략이 가능하다 npm install --save 개발 의존성 개발시에만 필요한 패키지 설치시 맨 마지막에 --save-dev 키워드가 필요하다 --save-dev 키워드의 축약형 -D를 사용할 수 있다 npm install --save-dev npm install -D 2022. 6. 23.
[자바스크립트] addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까? addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까? addEventListener는 두번째 인자로 어떤 이벤트가 발생했을때 실행할 함수를 가진다. (이벤트가 동작한 후에 실행할 함수를 인자로 가짐) ❌ 틀린 코드 1. addEventListener의 두번째 인자에 함수 호출을 가지게 될 경우: 이벤트가 발생했을때 함수가 실행되어 리턴값을 addEventListener의 두번째 인자값으로 가지게 된다. window.addEventListener('click', offEditMode()); ✅ 올바른 코드 2. addEventListener의 두번째 인자에 콜백 함수 안에 함수 호출 or 함수 자체를 가지게 될 경우: 콜백함수안에 원하는 함수를 호출하거나 함수자체를 인자.. 2022. 6. 23.
[npx] 저장소에 있는 프로젝트 버전 없이 클론하기 npx degit username/repositoryname newname 프로젝트를 버전과 함께 다운받고 싶을때는 git clone을 사용한다. 2022. 6. 20.
[npm/에러해결] npm ERR! code ELIFECYCLE 해결방법 1. cache 삭제 npm cache clean --force 2. node_modules 삭제 rm -rf node_modules 3. package-lock.json 삭제 rm -rf package-lock.json 3. 패키지 다시 설치 npm install 4. 프로젝트 시작 npm start 2022. 6. 20.
[JavaScript] 팩토리 함수란? 참조형 데이터(객체, 배열, 함수)를 리턴하는 함수 참고 Vue.js에서 data함수도 객체를 반환하므로 팩토리함수다 2022. 6. 20.
[Vue] 컴포지션 API 사용법 컴포지션 API란? Vue 프로젝트의 구성요소 data, computed, methods... 등을 유연하게 구성하여 사용할 수 있도록 도와주는 API를 말한다. 컴포지션 API가 필요한 이유 규모가 큰 어플리케이션에서 코드 공유와 재사용을 높이기 위해 컴포지션 API를 사용한다. 일반 Vue 프로젝트에서는 data 옵션에 데이터를 등록하고 computed 옵션 안에 연산된 데이터를 등록하며 methods 옵션 안에서는 함수를 등록해 사용해준다. 프로젝트의 규모가 커져 관리해야할 data, computed data, methods 등이 늘어나게 되면 관련된 기능을 가진 코드끼리 묶어주는 것이 좋다. 이를 도와주는 API가 composition API다. 일반 Vue 프로젝트(Options API)의 로직.. 2022. 6. 19.
[Vue] 요소나 컴포넌트를 참조할 수 있는 refs 사용법 refs 특정한 요소나 컴포넌트를 등록한 이름으로 참조하는데 사용하는 속성 1. 요소 참조하기 h1 요소에 ref를 hello라는 이름으로 등록해주었다. h1요소는 등록한 ref로 참조할 수 있게 된다. 참조한 요소는 HTML 구조에 연결이 된 이후에 엑세스 할 수 있으므로 mounted 라이프사이클 안에서만 등록한 요소를 ref로 찾을 수 있다. 해당 요소를 참조할때는 this.$refs.이름으로 찾아준다. Hello World 2. 컴포넌트 참조하기 요소를 참조한 것과 마찬가지로 참조하고 싶은 컴포넌트에 ref="이름"을 등록해준다. ref를 등록해주면 컴포넌트의 가장 최상위 요소를 참조해준다. 등록해준 컴포넌트의 최상위 요소는 this.$refs.컴포넌트이름.$el로 접근해준다. Hello Worl.. 2022. 6. 18.
[Vue] Provide와 Inject를 사용해 데이터 전달해주기 자식의 자식 컴포넌트에게 데이터 넘겨주기 1. props ChildComp.vue ⊂ ParentComp.vue ⊂ App.vue App 컴포넌트가 자식 컴포넌트로 ParentComp를 가지고 있고 ParentComp가 자식 컴포넌트로 ChildComp를 가지고 있다고 할때 ChildComp도 역시 App 컴포넌트의 자식 컴포넌트가 된다. 이때 App 컴포넌트에서 데이터를 ChildComp에게 props로 보내주게 되면 props가 ParentComp를 거쳐갈 수 밖에 없다. 이렇게 사용하지 않을 props를 하위 컴포넌트에게 전달하기 위해 받는 현상을 props drilling이라고 한다. 예제 App 컴포넌트의 하위 컴포넌트인 ParentComp 에게 props로 msg를 전달해주었다. ParentC.. 2022. 6. 18.

티스토리툴바