본문 바로가기

전체 글328

[리액트] 라이프사이클이란? 함수형 컴포넌트에서 사용하는 라이프사이클 Hooks 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://wavez.github.io/react-hooks-lifecycle/ React hooks lifecycle diagram wavez.github.io 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드를 언제 사용할까? 컴포넌트가 처음 렌더링되었을때 특정작업을 하고싶을때 컴포넌트를 업데이트하기 전/후 특정작업을 하고싶을때 컴포넌트가 사라질때 특정작업을 하고싶을.. 2022. 8. 5.
[리액트] 라이프사이클이란? 클래스 컴포넌트에서 사용하는 라이프사이클 메서드 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드.. 2022. 8. 5.
[리액트] moment, moment-timezone 모듈을 사용해 현재시간, 다른 나라 시간 데이터 불러오기 패키지 소개 momentjs https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" momentjs.com 현재 시간 표시하기 (위치에 기반한 현재 시간) 1. 모듈 설치하기 yarn add moment 2. 해당 모듈 import 해오기.. 2022. 8. 5.
[npm/한줄정리] 패키지 매니저(npm, yarn)으로 패키지 설치할때 @next 키워드의 의미 vuex라는 패키지를 yarn, npm으로 설치하려면 아래와 같은 코드가 필요하다. 여기서 나오는 @next 키워드는 다음 버전을 의미한다. npm install vuex@next --save yarn add vuex@next --save 터미널에 해당 코드를 입력하면 최신버전과 다음버전의 정보를 알 수 있다. npm info vuex 2022년 7월 1일 날짜로 가장 최신 버전의 vuex와 다음 버전의 vuex는 같기 때문에 @next 키워드는 필요하지 않다. 2022. 7. 8.
[웹개발/한줄정리] 트리 쉐이킹(tree shaking)이란? 필요없는 코드를 제거함으로서 코드를 최적화하는것 2022. 7. 8.
[자바스크립트/한줄정리] 화살표 함수 생략 방법 화살표 함수 생략 전 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.

티스토리툴바