[Study]

state , setState , useState 란? + props

input 과 button 다루기

새로운 리액트 프로젝트 생성

class를 이용한 문법 : constructor , super , render , props

이미지 넣는 방법

Bootstrap을 활용하여 Responsive grids 활용하기

import , export 문법

상품목록 컴포넌트화 (props 전달 , map함수)

페이지 나누기 (react-router-dom)

페이지 나누기 (navigate, nested routers, outlet)

SWR(stale-while-revalidate)란?

useRef 란?

useSWR mutate 란?

useSWRInfinite 란?

Redux 란?

REST 와 WebSockets 기본개념

Firebase 란? + 사용법

React-Bootstrap , React-Icons 사용법

react-hook-form 이란? 사용법

regex 정규표현식 [검색]

reduce( ) 메서드

[React / Express.JS Study] Main전송 - nodemailer 사용 >폴더 트리 > 🔵 Front-End client public/ src/ ContactForm.js App.js index.js package-lock.json package.json README.md > 🔵 App.js...

리액트는 SPA이기 때문에 하나의 index.html 탬플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이 때 React-Router-Dom 라이브러리가 새 컴포넌

TypeORM은 node.js에서 실행되고 TypeScript로 작성된 객체 관계형 매퍼 라이브러리이다.TypeORM은 MySQL, PostgreSQL, MariaDB, MS SQL Server, Oracle, SAPHana 및 WebSQL과 같은 여러 데이터베이스를

npm i cookie / npm i @types/cookie 를 사용하여 쿠키를 설치한다.쿠키 옵션추가를 해야하는 부분이 있는데 참조 : https://ko.javascript.info/cookie⬆️ 위와 같이 백엔드에서 쿠키를 설정하는데 옵션들이 있다.h

https://ag-grid.com/vue-data-grid/row-selection/#checkbox-selection

수정 페이지나 등록을 처리하는 페이지에서 페이지이동 , 새로고침 을 방지하는 방법

type 과 interface는 TypeScript에서 사용되는 두 가지 방법으로, interface객체의 형태를 정의하는데 사용된다.예제확장 상속선언적 확장type 은 불가능 타입 객체의 확장성을 고려한다면 interface를 사용하는 것이 좋다.

타입스크립트를 사용하면서 data.value.setData(resultData); 로 작성을 했더니 'data.value' is possibly 'undefined'.ts(18048) 라는 오류가 생겼다. 이는 'data.value'는 '정의되지 않음 (null | u

enum은 TypeScript에서 제공하는 기능으로 열거형 enumeration을 정의하는 데 사용된다. 열거형은 서로 관련된 상수들의 집합을 의미한다.enum UserRole 을 만들고 열거형을 사용하여 사용자의 역할을 설정하고 확인할 수 있다코드의 가독성 향상 :

구현 전이 단어들을 2단어 마다 줄바꿈을 하기위해 구현했다.구현 후 (예상)마지막은 ,는 없어야한다.idx % 2 === 1 로 인덱스의 홀수를 찾는다.idx !== arr.length -1 마지막 인덱스를 찾기위해 (인덱스는 0 부터 시작 이므로 length의 -1가

URL https://ag-grid.com/vue-data-grid/provided-cell-editors-text/Ag-Grid-Vue 테이블에서 제목 , 설명 컬럼에서 Cell Editing 기능을 사용하였고Max-Length 를 지정하여야 했다. 방법은

데이터 > 2-3. 데이터 구조화 및 해석에 대해 알아봅시다.II. 데이터 > II-3. 데이터 구조화 및 해석에 대해 알아봅시다.ex)데이터 라는 대단원이 있고 대단원의 넘버 다시 - + 중단원의 넘버가 붙는 형식으로 변환을 해야했다.기존의 백엔드에서는 hordr ,

TestData의 값이 바뀌는걸 감지해서 함수를 실행시키려고 했다.watch(testData, updateData);결론적으로는 testData.value로 watch하느냐 testData로 watch를 하느냐는 달랐고 {deep:true} 속성을 사용하여 객체의 내부

[vue-study] window.open 새창postMessege 보내기 (데이터 전달) window.open 함수 부모 컴포넌트 Router 자식 컴포넌트

원래는 JAVA를 공부해보고 싶었지만 그래도 익숙한 JavaScript와 현재 프로젝트에서 배운 TypeScript와 같이 사용하기 좋은 NestJS를 먼저 배워보는게 나을거 같아 강의를 듣고 공부를 시작하게 되었다.NestJS 는 효율적이고 확장 가능한 Node.js

NestJS를 이용해서 프로젝트를 시작할 때 Nest CLI를 이용하면 간단히 프로젝트를 시작할 수 있습니다. Nest CLI를 이용해서 아래의 명령어를 작성하면 새 프로젝트 디렉토리가 생성되고 초기 핵심 Nest 파일 및 지원 모듈로 디렉토리가 채워져 프로젝트의 기존

설치를 하고 npm run start:dev 로 하고 await app.listen(3000); 로 설정된 http://localhost:3000/ 으로 들어가면 'Hello World!' 가 나온다. 해당 파일을 보고 어떻게 실행이 되는지 알아보자.expr

속성 설명tsconfig.json(jsconfig.json) 파일은 TypeScript(JavaScript) 프로젝트의 설정을 정의하는 파일이다. 이 파일은 TypeScript(JavaScript) 컴파일러가 프로젝트를 어떻게 컴파일할지에 대한 다양한 옵션을 지정할 수

⚠️ Vue CLI가 유지 관리 모드에 있습니다!새로운 프로젝트의 경우 이제 Vitecreate-vue 기반 프로젝트를 스캐폴딩하는 데 사용하는 것이 좋습니다 . 또한 최신 권장 사항은 Vue 3 도구 가이드를 참조하세요 .이유 및 설명Vite의 장점: Vite는 차세

🕵️shims-vue.d.ts 이란?shims-vue.d.ts 파일은 TypeScript 프로젝트에서 Vue 파일(\*.vue)을 사용할 수 있도록 도와주는 선언 파일입니다. TypeScript는 기본적으로 .vue 파일을 인식하지 못하기 때문에, 이 파일을 통해 T

eslint 설정

vue 공식문서 (Provide-Inject 바로가기)컴포넌트 예 ) <Parent> -> <Child> -> <DeepChild>일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 할 때 props를 사용합니다. props만 사용하면 전체

App Module안에 BoardModule과 AuthModule이 있으면 각 모듈안에 Controller Entity Service등이 있습니다. 그래서 우선 모듈이 무엇인지 알아보겠습니다.앱 구조모듈은 @Module() 데코레이터로 주석이 달린 클래스입니다. @Mo

컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환합니다.컨트롤러는 @Controller로 데코레이터로 클래스를 데코레이션하여 정의됩니다.데코레이터는 인자를 Controller에 의해서 처리되는 경로로 받습니다.핸들러는 @Get , @Post , @Delete

[문제해결] XML 형식의 엑셀 파일 다운로드 해당 유저의 리스트를 POST 메서드의 body에 담아 전송하고, 엑셀 파일을 다운로드하는 기능을 구현해야 했다. 예 ) > 위 의 데이터 🕵️ Blob 란? Binary Large Object의 약자로, J

기존에는 eslintrc 로 세팅을 하다가 eslint.config.js 로 세팅하는 방법을 알아보기 위해 작성하였다. .eslintrc: 기존 프로젝트에서 사용하는 경우 계속 사용할 수 있으며, 간단한 설정에는 충분합니다.eslint.config.js: 새로운 프로젝

기존에는 vue.config.js 에서 CommonJS 방식으로 설정을 배웠고 해왔다.vite를 사용해보고자 사용하는데 ESmodule 방식으로 설정을 하는데 좀 어려웠다여기에서 나는 resolve alias 를 설정하고 server proxy를 환경벌로 설정하고 싶었

TanStack Query 문서TanStack Query는 서버 상태를 관리하고 비동기 데이터 페칭을 간편하게 할 수 있도록 도와주는 라이브러리다. React Query로 시작했지만, 이제는 React뿐만 아니라 다른 프레임워크에서도 사용할 수 있도록 확장되었다.npm

#디자인패턴 #리액트 React 디자인 패턴 : 커스텀 훅 패턴 (Custom Hook Pattern) 🕵️ 디자인 패턴이란? 디자인 패턴(Design Pattern)은 소프트웨어 설계에서 자주 발생하는 문제를 해결하기 위해 검증된 일반적인 해결책을 제공하는

🕵️ Velog에 글을 작성하면 GitHub에 업로드가 되게 하고 싶었다.해당 로컬 디렉토리에서 mkdir -p .github/workflows 를 입력하여 폴더를 생성한다..github/workflows 폴더 생성 후 update_velog.yml 파일 생성하고

🕵️ Vue/Cli 를 사용하여 vue.config.js 세팅을 하게되어 속성의 기능과 옵션을 숙지하기 위해 글을 쓰게 되었다. 주로 쓰는 속성을 업로드하고 추후 추가적인 기능이나 시간이 난다면 속성을 더 업데이트 할 예정이다.Type : stringDefault :

🕵️ Github Actions 를 사용하여 코딩테스트 문제를 풀고 커밋 푸시를 하면 README.md에 나열된 테이블에 날짜, 난이도, 문제 타이틀, 바로가기 링크를 추가하고 싶었다. yml 파일과 python 코드를 작성하여 ubuntu에서 실행을 하게 되는데 디

Vue 3 Compositon API에 있는 ref()의 얕은 버전이다. Vue.js 문서ref()와 달리 shallowRef()의 내부 값은 있는 그대로 저장되고 노출되며 내부 깊숙이까지 반응형으로 동작하지는 않는다. .value 접근만 반응형이다.객체 내부의 속성

Vue 3 Compositon API의 헬퍼 함수로, 현재 코드가 종속성 주입(Context Injection)을 사용할 수 있는 환경(컨텍스트) 안에 있는지를 확인하는 데 사용된다. 현재 컴포넌트가 Vue의 종속성 주입 시스템에 접근할 수 있는지를 알려준다. Vue