![]()
v-for 반복문 1. v-for 반복문 이번엔 v-for 반복문에 대해 배워봅시다. #1. 바로 실습으로 들어갑니다. App.vue에 들어가 다음과 같이 입력합니다. Home Products About // → 브라우저를 실행하면, 다음과 같이 나오게 됩니다. 이렇게 코드를 짜다보면, 반복적인 HTML 태그가 나옵니다. 그것을 간단하기 위해 v-for 반복문을 사용합니다. v-for 반복문은 다음과 같이 사용합니다. #2. 그러면 방금 코드를 다음과 같이 수정하여, a 태그를 이용할 수 있습니다. Home // // → 브라우저를 보면, Home 메뉴가 3개 생긴 것을 확인할 수 있습니다. #3. 이제 배열과 v-for 반복문을 사용해 다음과 같이 입력하여, 메뉴를 생성할 수 있습니다. {{ menu ..
![]()
데이터 바인딩 1. 데이터 바인딩(Data Binding) Vue.js의 데이터 바인딩에 대해 알아봅시다! Vue.js에서 데이터 바인딩은 JS 데이터를 HTML에 넣는 문법을 말합니다. 데이터 바인딩을 쓰면, HTML을 코딩하기 쉽고 Vue의 실시간 자동 렌더링을 쓸 수 있습니다. #1. 바로 실습해봅시다. App.js에 들어가서 다음과 같이 입력해 줍니다. XX 원룸 XX 만원 XX 원룸 XX 만원 전에 보셨다시피 template 태그와 script 태그가 있습니다. 이 섹션들은 무엇을 의미할까요? 1) 템플릿(Template) 템플릿은 사용자에게 보여지는 HTML의 모양과 내용을 정의합니다. Vue.js의 템플릿은 HTML과 Vue.js의 특별한 구문을 혼합하여 사용합니다. 이 구문은 브라우저에서 ..
![]()
Vue.js 설치 1. Vue.js 설치 그러면 Vue.js를 설치해 봅시다! #1. 공부할 폴더를 생성한 후, VSCode의 터미널에 다음과 같이 입력하여 Vue.js를 설치해 줍니다. npm install -g @vue/cli #2. 설치가 끝났으면, 다음과 같이 입력하여 프로젝트를 생성해 줍니다. (저는 프로젝트명을 vuedongsan이라고 입력하였습니다.) vue create vuedongsan #3. 그러면 다음과 같이 나오게 됩니다. Vue 3버전의 Default를 클릭해 줍니다. → 조금만 기다리면, 정상적으로 설치가 되었습니다! #4. 터미널을 보면 cd test로 넘어간 후, npm run serve로 실행하면 된다고 나와있습니다. 그대로 해줍시다. #5. 그러면, localhost:80..
![]()
Vue.js 1. Vue.js Vue.js에 대해 배워봅시다! Vue.js란? 프론트엔드 웹 애플리케이션을 개발하기 위한 오픈 소스 JavaScript 프레임워크입니다. 화면에 데이터를 바인딩하고 동적으로 업데이트하기 위해 설계되었습니다. 이를 통해 개발자들은 UI를 쉽게 만들고 관리할 수 있습니다. 2. 기능 및 특징 1) 바인딩(Binding) 데이터와 DOM 요소 사이의 양방향 데이터 바인딩을 제공합니다. 이를 통해 데이터의 변경이 자동으로 화면에 반영되고, 화변의 변경이 데이터에도 반영됩니다. 2) 컴포넌트 기반 아키텍처(Component-Based Architecture) 컴포넌트 기반 아키텍처를 기반으로 하여, UI를 작은 독립적인 컴포넌트로 구성합니다. 이는 코드의 재사용성을 높이고, 유지보..
![]()
Express로 todo 리스트 만들기 3 1. todo 리스트 데이터 생성 이번엔 todo 리스트 데이터를 생성하는 기능을 만들어 봅시다. #1. app.js에 들어가 다음과 같은 내용을 추가해 줍니다. import express from "express"; import cors from "cors"; import mysql from "mysql2/promise"; // DB 설정 // const pool = mysql.createPool({...}); const app = express(); app.use(express.json()); // CORS 미들웨어 추가 app.use(cors()); const port = 3000; // 데이터 조회 // app.get(...); // 데이터 단건조회 //..
![]()
Express로 todo 리스트 만들기 2 1. Express로 todo 리스트 조회하기 이제 todo를 조회하는 기능을 만들어봅시다. #1. VSCode의 터미널에 다음과 같이 입력하여 mysql2를 설치해 줍니다. npm i mysql2 #2. app.js에 들어가서 다음과 같이 입력해 줍니다. import express from "express"; import cors from "cors"; import mysql from "mysql2/promise"; // DB 설정 const pool = mysql.createPool({ host: "localhost", user: "newbean", password: "juv0312", database: "todo_2024_02", waitForConnect..
![]()
Express로 todo 리스트 만들기 1. Express로 todo 리스트 만들기 Express를 사용하여 todo 리스트를 만들어 봅시다! #1. git에 올릴 repository와 작업할 폴더를 만들어 줍시다. (저는 todo-backend-2024-02라고 만들었습니다.) #2. VSCode에 다음과 같이 입력하여, express를 설치해줍니다. npm i express #3. 설치가 완료되었으면, package.json 파일에 다음과 같이 입력하여 import를 사용할 수 있게 설정합니다. { "dependencies": { "express": "^4.18.2" }, "type" : "module" } #2. 그 다음, app.js 파일을 생성한 후, 다음과 같이 입력해 줍니다. import e..
![]()
Angular 1. Angular Angular에 대해 알아봅시다! Angular는 Google이 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션을 구축하기 위한 도구와 기능을 제공하여, 개발자가 보다 쉽고 효율적으로 웹 애플리케이션을 구축할 수 있도록 돕습니다. 2. 기능 및 특징 Angular의 핵심 기능과 특징은 여러가지가 있습니다. 1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처를 채택하여, 개발자가 애플리케이션을 여러 개의 작은 컴포넌트로 분할하고 관리할 수 있도록 합니다. 2) 양방향 데이터 바인딩 모델과 뷰 사이의 양방향 데이터 바인딩을 지원하여, 데이터의 변경이 자동으로 화면에 반영되도록 합니다. 3) 의존성 주입 컴포넌트 간의 의존성을 관리하고 코드의 재..
![]()
유틸리티 타입 1. 유틸리티 타입 이번엔 유틸리티 타입에 대해 알아봅시다. 유틸리티 타입은 기존 타입을 변환하거나 새로운 타입을 생성하기 위해 사용되는 내장 타입입니다. 유틸리티 타입은 코드를 더 간결하고 유연하게 작성할 수 있도록 도와줍니다. 2. keyof keyof는 객체의 속성 이름 집합을 가져옵니다. 해당 객체의 모든 속성 이름을 포함하는 유니온 타입이 생성됩니다. 다음 코드처럼 사용할 수 있습니다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' // UserKey의 키 값을 입력해야 함 con..
![]()
제네릭(Generics) 1. 제네릭(Generics) 이번엔 제네릭(Generics)에 대해 알아봅시다! 제네릭이란? 코드를 재사용하고 유연성을 높이는 데 사용되는 강력한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 정의할 때 데이터 타입을 명시하지 않고 추상적으로 유지할 수 있습니다. 이렇게 하면, 여러 종류의 유형을 다루는 함수 or 클래스를 만들 수 있습니다. 2. 사용방법 사용방법에 대해 알아봅시다. 다음 코드를 확인해 봅시다. → getSize라는 함수를 arr1은 사용할 수 있지만, arr2는 string타입이라 사용할 수 없습니다. function getSize(arr: number[]): number { return arr.length; } const arr1 = [1,..
![]()
클래스(Class) 1. 클래스(Class) 이번엔 클래스(Class)에 대해 배워보겠습니다. 클래스란? 데이터와 해당 데이터를 처리하는 메서드(함수)의 모음입니다. TypeScript는 클래스를 선언할 때, 다음 예제와 같이 선언합니다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("red"); 2. 접근 제한자(Access Modifier) TypeScript에서는 접근 제한자를 지정해 줄 수 있습니다. 이를 통해 정보 은닉 및 캡슐화를 지원할 수 있습니다. TypeScript에서는 세 가지 주요 접근 제한자..
![]()
리터럴, 유니온/교차 타입 1. 리터럴 타입(Literal Types) 리터럴 타입(Literal Types)에 대해 알아봅시다! 리터럴 타입이란? TypeScript에서 변수 or 매개변수가 특정한 값을 나타내도록 사용되는 타입입니다. 해당 변수 or 특정한 값을 가질 때만 유효하도록 제한하는데 도움이 됩니다. TypeScript의 리터럴 타입은 string, number 두 가지가 있습니다. 2. 문자열 리터럴 타입(String Literal Types) 아래 코드에서 Job이 허용한 3개의 문자열 외에 다른 문자열을 사용하면, 오류가 발생합니다. type Job = "police" | "developer" | "teacher"; interface User { name: string; job: Job..
![]()
SourceTree로 원격 브랜치 다루기 1. SourceTree로 레포지터리 연결하기 이번엔 SourceTree로 레포지터리를 연결해 봅시다. #1. GitHub에 들어가서 새 레포지터리를 생성해줍니다. (저는 git-another-study로 설정하였습니다.) #2. 레포지터리 주소를 복사한 후, SourceTree에 들어가 상단 메뉴에 저장소를 누르고 원격 저장소 추가를 클릭합니다. #3. 창이 뜨면, 추가 버튼을 누르고 원격 이름에 origin2, URL / 경로를 전에 복사한 주소를 붙여넣기 합니다. → 그러면 origin2가 추가된 것을 확인할 수 있습니다. #4. 그럼 이제 상단 메뉴에서 Push를 누른 후, origin2로 변경한 뒤, Push 버튼을 클릭해 줍니다. → 그러면 정상적으로 ..
![]()
원격 브랜치 다루기 1. 원격 브랜치 다루기 이번엔 원격에서 브랜치를 다뤄봅시다! 우선 로컬에서 브랜치를 만든 후, 원격으로 push 해봅시다. #1. VSCode의 터미널로 들어가 다음과 같이 입력하여 브랜치를 생성해 줍니다. git branch from-local #2. from-local 브랜치로 변경 후, 다음과 같이 입력하여 원격의 브랜치 명시 및 기본 설정을 해 줍니다. (git push라고 입력하면, 대상을 명시하라는 메시지가 나타납니다.) git push -u origin from-local → GitHub에 들어가서 브랜치를 보면 main과 from-local 2개가 나오는 것을 확인할 수 있습니다. #3. GitHub에서 브랜치를 from-local로 변경 후, jaguars.yaml의..
![]()
Push와 Pull 1. push (원격 커밋 밀어올리기) 깃의 명령어인 push에 대해 알아봅시다. push란? 로컬 저장소에 있는 변경 사항을 원격 저장소로 전송하는 것을 말합니다. 작업한 코드 or 파일 등의 수정 내용을 다른 사람들과 공유하거나, 여러 기기에서 작업한 내용을 동기화하는 데 사용됩니다. 2. 사용방법 그러면 직접 사용해봅시다. #1. bears.yaml의 member에 Park을 추가해주고 다음과 같이 입력하여 커밋해 줍니다. Add Park to Bears #2. git push를 입력하여, 원격 저장소에 넣어줍니다. git push만 입력해도 되었던 이유는 전에 git push -u origin main라고 입력하여, 대상 원격 브런치가 지정되었기 때문입니다. → 그러면 정상적으..
