React HooksReact에서 제공하는 주요 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 관련 기능을 사용할 수 있도록 도와줌useState컴포넌트에서 상태(state)를 관리하기 위한 Hookstate: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 상태의 초기값// 사용법const [state, setState] = useState(initialValue);// Exampleconst [count, setCount] = useState(0);const increment = () => setCount(count + 1); useEffect컴포넌트의 부수 효과(side effects)를 처리하기 위한 Hook데이터 가져오기, 구독 설정, DOM 업데이트 등de..

Tailwind CSS유틸리티 퍼스트(Utility-First) 접근 방식을 기반으로 한 CSS 프레임워크HTML 태그에 직접 적용할 수 있는 미리 정의된 유틸리티 클래스를 제공하여, 별도의 복잡한 CSS 코드를 작성하지 않고도 빠르고 효율적으로 스타일링할 수 있도록 도움전통적인 CSS 작성 방식과 달리, 클래스 기반의 스타일링을 통해 빠르게 UI를 구현할 수 있음설치# tailwindcss 설치npm install -D tailwindcss# tailwind.config.js 파일 생성npx tailwindcss init 레이아웃 (Layout)Container : 반응형 컨테이너를 설정mx-auto : 수평 중앙 정렬flex : Flexbox 컨테이너 생성grid : 그리드 레이아웃 설정space-x..

회사에서 react를 이용해서 project를 진행하게 되었다 ..이 전에 react를 써본 경험이 거의 없어서,, (Vue.js 만 조금 써봤다) 이번 기회에 react에 대해 간단히 정리해 보려고 한다. React 란?React는 컴포넌트 기반의 JavaScript 라이브러리로, UI를 효율적으로 관리할 수 있도록 도와줌# Node.js 설치# install react.jsnpm install -g create-react-app# create projectcreate-react-app my-app# runcd my-app npm start Component재사용 가능한 UI 조각으로, 독립적으로 동작하며 다른 컴포넌트와 결합하여 복잡한 UI를 구성함ex) 버튼이나 폼 같은 UI 요소를 컴포넌트로 만들..

axios vue에서 권장하는 HTTP 통신 라이브러리 브라우저와 Node.js에서 실행되는 Promise기반의 HTTP 통신 라이브러리 Ajax 요청을 보내고 응답을 받는 것 뿐만 아니라 요청 및 응답을 변환, 중단 등 다양한 기능 제공 axios vs fetch axios - HTTP 요청과 응답을 자동으로 JSON 데이터로 변환 - Interceptors 제공 (요청과 응답을 변환하거나 중단 가능) - 설치 후 사용 fetch - 기본적으로 문자열로 반환하며, 이를 수동으로 JSON으로 변환 - Interceptors 제공 x - 설치할 필요 없음 (브라우저에서 기본 제공) axios 설치 CDN 방식 NPM 방식 npm install axios axios API 다음 API에 맞추어 비동기 통신을..

vue-router라우팅 : 웹 페이지 간의 이동 방법Vue.js의 공식 라우터라우터는 컴포넌트와 매핑Vue를 이용한 SPA(Single Page Application)을 제작할 때 유용URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여줌https://v3.router.vuejs.org/Vue Routerv3.router.vuejs.org vue-router 설치CDN 방식 NPM 방식npm install vue-router vue-router 연결routes 옵션과 함께 router instance 생성 Router 실습r 메인 자유게시판 질문게시판 사진게시판 vue-router 이동 및 렌더링네비게이션을 위해 router-link 컴포넌트를 사용속성은 to prop을 사용기본적으로 router-..

Nodejs 설치 Node.js를 설치하면 자동으로 npm이 설치되고, 이를 이용해서 @vue/cli를 설치 LTS 버전 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org # 설치 확인 node -v npm -v npm(Node Package Manager) - Node.js의 기본 패키지 관리자 - npm을 사용하여 다른 개발자가 작성한 패키지를 설치하고, 자신이 작성한 패키지를 배포 가능 - package.json 파일을 통해 패키지 정보 및 의존성 관리 npm 명령어 npm init : 새로운 프로젝트나 패키지를 만들 때 사용 (package..

Component Vue의 가장 강력한 기능 중 하나 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용 가능 중복 코드를 제거하고 유지보수가 쉬운 코드를 작성할 수 있으며, 애플리케이션 규모가 큰 경우에도 쉽게 확장 가능 전역 component Vue.component(tagName, options)로 등록 권장하는 컴포넌트 이름 : 케밥 표기법 (전부 소문자, -) 지역 component 컴포넌트를 components 인스턴스 옵션으로 등록 특정 인스턴스 내에서만 사용 가능한 컴포넌트 component template Vue.js에서 컴포넌트를 정의할 때, data ..

v-on DOM 이벤트를 듣고 해당 이벤트가 발생되면, 지정된 메소드를 호출 클릭 위 버튼을 클릭한 횟수는 {{counter}} 번 입니다. v-on:click = @click method Event Handler 이벤트 발생시 처리 로직을 v-on에 모두 넣기는 힘듦 v-on에서는 이벤트 발생시 처리해야 하는 method의 이름을 받아 처리 Greet Inline Event Handler 메소드 이름을 직접 바인딩 하는 대신 인라인 JavaScript 구문에 메소드를 사용할 수도 있음 원본 DOM 이벤트에 엑세스 해야 하는 경우 특별한 $event 변수를 사용해 메소드에 전달할 수도 있음 Greet Greet Event Modifier (이벤트 수식어) method는 DOM의 이벤트를 처리하는 것 보다..

Vue method Vue Instance는 생성과 관련된 data 및 method의 정의 가능 method 안에서 data를 this.데이터이름 으로 접근 가능 data : {{message}} method kor : {{helloKor()}} method eng : {{helloEng()}} Vue filter 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 filter를 이용하여 표현식에 새로운 결과 형식을 적용 중괄호 보간법 {{}} 또는 v-bind 속성에서 사용 가능 여러 개 사용 가능 {{msg | capitalize}} 천 단위마다 ',' 찍기 / 전화번호에 '- ' 넣기 금액 : 전화번호 : {{ msg1 | price }} {{ msg2 | mobile }} Vue computed..

Vue.js 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 됨 MVVM Pattern Model : 순수 자바스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 * 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용 * Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함 Vue Instance el Vue가 적용될 요소 지정 CSS Selector or HTML Element data Vue에서 사용되는 정보 저장 객체 또는 함수 형태 template ..

JSON (JavaScript Object Notation) JSON data : name-value 형태의 쌍으로 collection 타입 data는 , 로 나열 객체는 {} 로 표현 배열은 [] 로 표현 XML 사용시 파싱과 같은 복잡한 문제를 해결 XML에 비해 상대적으로 구문이 짧음 단, JSON은 전달받은 데이터의 무결성을 직접 검증 (XML은 스키마 이용) 텍스트 기반이므로 어떠한 프로그래밍언어와 플랫폼에서도 사용 가능 JSON 자료형 수 (Number) 문자열 String) : 끈따옴표로 구분 참/거짓 (Boolean) 배열 (Array) 객체 (Object) null (비어 있는 값) { "name": "신짱구", "age": 7, "married": false, "family": { "f..

Event 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생 JavaScript를 사용해 DOM에서 발생하는 이벤트를 감지하여 대응하는 여러 작업 수행 가능 이벤트는 일반적으로 함수와 연결이 되고,이벤트 발생 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 Event Handler (Listener) 이벤트 발생시 실행해야 하는 함수 Event 종류 마우스 이벤트 이벤트 설명 onclick 마우스로 Element를 클릭 했을 때 발생 ondblclick 마우스로 Element를 더블 클릭 했을 때 발생 onmouseup Element에 마우스 버튼을 올렸을 때 발생 onmousedown Element에서 마우스 버튼을 눌렀을 때 발생 onmouseover 마우스를 움직여서 Element..

Ajax (Asynchronous JavaScript and XML) 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법 (화면의 일부만 갱신 가능) 화면 갱신이 없으므로 사용자는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡 언어나 프레임워크가 아닌 구현하는 방식을 의미 CORS error가 발생할 수 있음 💡 일반 요청에 대한 응답 - data를 입력 후 event 발생 - Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리 - logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송 (화면 전환 발생) 💡 Ajax 요청에 대한 응답 - data를 입력 후 event 발생 - Ajax를 적용하면 event 발생시 서버에서 ..

DOM ( Document Object Model ) HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공 DOM 객체 가져오기 태그 이름(tag name)을 이용한 선택 💡 getElementsByTagName(tagname) : 태그이름이 tagname과 일치하는 element 배열 얻기 var selectedItem = document.getElementsByTagName("li"); // 모든 요소를 선택 for (var i = 0; i < selectedItem.length; i++) { selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변..

JavaScript 란? HTML, CSS와 함께 웹을 구성하는 요소 중 하나로, 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트(ex. 마우스 클릭)에 따라 특정 동작을 하도록 기능을 넣을 수 있음 사용 방법 내부 스크립트 ＜script＞태그를 HTML문서안에 넣어서 사용 주로 ＜body＞ 아래에 사용 외부 스크립트 자바스크립트 파일을 `.js` 확장자 파일로 저장한 후 불러옴 기본 문법 주석 // 한줄 주석 /* 블록 주석 */ 변수 JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var 키워드를 사용하여 선언 JavaScript는 동적타입(Dynamic / Weak Ty..