無限

몸은 현실 마음은 낭만

Develop & Journal
반응형
SMALL

분류 전체보기 76

Vue 데이터바인딩 문법

원룸파는 쇼핑몰을 한번 만들어봅시다. 일단 레이아웃 부터요. XX 원룸 XX 만원 XX 원룸 XX 만원 HTML 코드들은 안에 집어넣으면 됩니다. 자바스크립트 기능은 script 태그 안에 data(){ return { } } 이걸 열고 데이터를 object 형식으로 저장하시면 됩니다. 이게 Vue의 data보관함, 변수보관함이라고 보시면 되겠습니다. 중요한 데이터는 다 여기 보관하십시오. 중괄호니까 object 형식에 맞춰서요. 그럼 이제 price1 이라는 데이터를 HTML안에 꽂아넣어서 유저에게 보여주고 싶으면 {{ price1 }} 이것만 쓰면 됩니다. {{ price1 }} 만원 저장하면 브라우저에 60만원이라고 잘 뜹니다. Q. 뭐임 그냥 애초에 60만원 이렇게 하드코딩하면 되는데 굳이 데이터..

Vue.js 2024.01.28

Vue3 설치

1. nodejs 최신버전 설치 우측 최신버전이 뭔가 에러가 덜 납니다. 그래도 에러나면 LTS 왼쪽 버전으로 바꾸실 수 있습니다. 제어판에서 삭제 후 재설치하면 됩니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS code 에디터 설치 구글 검색해서 다운받고 설치 3. 아무데나 작업용폴더 만들고 에디터로 오픈 코딩실력이 부끄럽다면 은밀한 곳에 만들어줍니다. 에디터 상단 메뉴에 open folder라고 있을겁니다 그렇게 오픈하셈 ▲ 에디터 왼쪽 위에 아까 만든 폴더명이 떠야합니다. 4. 에디터에서 터미널 열고 npm install -g ..

Vue.js 2024.01.28

Vue 라이브러리를 사용하는 이유

이건 web-app을 만들 때 씁니다. Web-App은 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻합니다. 쉽게 말해서, 페이지 전환시 페이지를 새로 요청하는게 아니라 자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것입니다. 근데 그냥 자바스크립트로 이런거 만들려면 귀찮고 코드가 길어집니다. 그래서 Vue React Angular 이런거 쓰면 쉽게 개발이 가능합니다. 근데 굳이 다른거 냅두고 Vue 쓰는 이유를 아십니까. 1. 쉬워서 씁니다. 이게 진짜 중요한 이유입니다. React Vue Angular 전부 똑같이 웹앱을 만들어낼 수 있습니다. Angular는 매우 방대하고 Typescript를 강제로 써야하고 React는 기존 JS문법을 매우 많이 활용하고 Vue는 Vue 문법을..

Vue.js 2024.01.28

자바스크립트 기초

프로그래밍이란? 컴퓨터가 똑똑한 이유는 컴퓨터가 안에 담겨있는 프로그램 덕분 프로그래밍 : 사람이 우너하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위 따라서, 자바스크립트는 HTML과 CSS와 다르게 프로그래밍 언어라고 불리운다. 웹 프로그래밍이란? 웹 프로그래밍 : '웹 브라우저'를 동작시키는 프로그램을 작성하는 것 백엔드 프로그래밍 : 서버에서 데이터 관리를 프로그래밍 프론트엔트 프로그래밍 : 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍 자바스크립트의 특징 모든 웹 브라우저에서 작동한다. 웹 브라우저에서 실행 결과를 즉시 확인할 수 있다. 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램을 만들 수 있다. 다양한 자바스크립드 공개 API를 사용할 수..

JavaScript 2024.01.08

서버리스(ServerLess)

서버리스(ServerLess) 서버리스 아키텍처란? 서버리스는 언뜻 단어로만 보면 'Server + Less'로 '서버가 필요 없다'는 뜻으로 생각될 수 있습니다. 하지만 실제 의미는 클라우드 서비스 공급자가 서버를 관리, 실행하며, 요청이나 특정 이벤트가 있을 때 클라우드의 서버를 이용하거나 서비스 할 어플리케이션을 동작시키는 것입니다. 이를 통해 사용자(개발자)는 서버 관리에서 완전히 자유로워지며 실제 구현해야 할 기능에 더 집중할 수 있게 됩니다. 서버리스는 보통 '서버리스 컴퓨팅' 또는 '서버리스 아키텍처'로 불립니다. 서버리스 개념은 어플리케이션 관점에서 BaaS(Backend as a Service)와 FaaS(Function as a Service)로 나누어 살펴보면 이해가 더 용이합니다. ..

몰입 교육 2023.08.05

Cloud Service

Cloud 개념 클라우드 컴퓨팅이란 인터넷 기반의 컴퓨팅을 말합니다. 인터넷 상의 가상화된 서버에 프로그램을 두고 필요할때마다 컴퓨터나 스마트폰 등에 불러와 사용하는 서비스입니다. 클라우드(Cloud)라는 단어가 말해주듯, 인터넷 통신망 어딘가에서 구름에 싸여 보이지 않는 컴퓨팅 자원(CPU, 메모리, 디스크 등)을 원하는 대로 가져다 쓸 수 있습니다. 구름에 싸여 있다는 것은 그 내부를 보려고 하거나 알지 않아도 얼마든지 내가 원하는 것을 꺼내어 사용할 수 있다는 것이며, 인터넷이 연결된 어느 곳에서든 이것을 보장 받을 수 있다는 뜻입니다. 장점 웹서비스 운영자 입장에서 클라우드를 바라본다면 다음과 같은 장점이 있습니다. 서버를 직접 구매할 때 고려해야 할 전력, 위치, 확장성을 고민하지 않고 데이터 ..

몰입 교육 2023.08.04

MSA(Micro-Service Architecture) 설계

Micro-Service Architecture MSA(Microservices Architecture)는 대규모 시스템을 구축하기 위한 아키텍처 패턴 중 하나로, 서비스 기능 단위로 시스템을 구성하는 접근 방식입니다. MSA는 기능을 독립적으로 개발하고 배포할 수 있는 잘 분리된 마이크로서비스들로 시스템을 구성합니다. 이로 인해 시스템이 탈중앙화되고, 서비스 간의 느슨한 결합을 갖게 됩니다. 분산 처리 시스템: MSA는 분산 처리 시스템의 한 유형입니다. 시스템의 기능은 작은 단위의 서비스로 나누어지고, 이 서비스들은 분산되어 서로 다른 서버 또는 컨테이너에서 실행됩니다. 이렇게 분산되어 실행되는 서비스들은 서로 독립적으로 동작하며, 다른 서비스들과 통신을 통해 상호작용합니다. 대규모 시스템: MSA는..

몰입 교육 2023.07.31

네트워크 기초

네트워크 기초 네트워크란 네트워크는 컴퓨터와 기타 장치들이 데이터를 교환할 수 있도록 연결된 구조를 말합니다. 인터넷도 하나의 거대한 전 세계 네트워크입니다 . 라우터, 스위치 라우터: 네트워크 간에 데이터를 전송하는데 사용되는 장치로, 최적 경로를 결정하여 데이터를 보냅니다. 스위치: 네트워크 내에서 데이터를 전달하는데 사용되는 장치로, MAC 주소를 기반으로 데이터를 전송합니다. LAN, WAN LAN (Local Area Network): 가까운 지리적 위치에 있는 컴퓨터와 장치들을 연결하는 작은 규모의 네트워크입니다. WAN (Wide Area Network): 지리적으로 넓은 지역을 연결하는 네트워크로, 여러 개의 LAN을 연결합니다. 인터넷도 하나의 대표적인 WAN입니다. OSI 7 Layer..

몰입 교육 2023.07.28

GIt 사용자 지정 및 버전 커밋하기

Git Bash를 사용합니다 0) Git 설치 확인 깔려있는 git 버전을 확인할 수 있습니다. 1) 사용자 정보를 지정해 줍니다. 이름과 이메일을 설정해줍니다. 2) 현재 Git 리포지토리에서 설정된 모든 구성 옵션들을 보여주는 명령어입니다. 이 명령어를 사용하면 Git 설정에 대한 정보를 쉽게 확인할 수 있습니다. 1번에서 설정했던 이름과 이름이 Git설정에 보이는 것을 확인할 수 있습니다.(노란색글씨) 3-1) 현재 사용자의 홈 디렉토리에서 "project" 디렉토리로 이동하게 됩니다. 3-2) git init을 실행하면, Git은 .git 디렉토리를 생성하고, 이 디렉토리에 Git의 객체(database)들과 설정 파일들이 저장됩니다. 이를 통해 Git은 버전 관리에 필요한 모든 정보를 저장하고 ..

몰입 교육 2023.07.26

웹이 동작하는 원리 & 데이터 모델링

# 웹이 동작하는 원리 HTTP 프로토콜: 웹에서 클라이언트와 서버 간의 통신을 담당하는 규칙과 규약. 3-way 핸드쉐이크: TCP/IP 프로토콜을 사용하여 클라이언트와 서버가 연결을 설정하는 과정. HTTP/1.1과 HTTP/2.0: HTTP 프로토콜의 버전 차이와 기능적 향상. API와 라이브러리의 차이점 API (Application Programming Interface): 외부 시스템과 상호작용하기 위한 인터페이스로, 다른 애플리케이션에 기능을 노출시키는 방법. 라이브러리: 코드 조각들의 집합으로, 어플리케이션의 특정 기능을 제공하거나 보완하는 데 사용. 웹 브라우저 동작 원리 DOM (Document Object Model): 웹 페이지의 구조화된 표현 방식으로, 웹 브라우저가 HTML 문서..

몰입 교육 2023.07.24

병합정렬(MergeSort)

지난 시간까지 시간 복잡도 O(N ^ 2)인 선택 정렬, 버블 정렬, 삽입 정렬 알고리즘을 공부했습니다. 이어서 평균 시간 복잡도 O(N * logN)인 퀵 정렬에 대해서도 공부하는 시간을 가졌습니다. 이번 시간에 다룰 내용은 병합 정렬(Merge Sort) 입니다. 병합 정렬도 대표적인 '분할 정복' 방법을 채택한 알고리즘입니다. 결과적으로 퀵 정렬과 동일하게 O(N * logN)의 시간 복잡도를 가집니다. 다만 퀵 정렬은 피벗 값에 따라서 편향되게 분할할 가능성이 있다는 점에서 최악의 경우 O(N ^ 2)의 시간 복잡도를 가진다고 하였습니다. 병합 정렬은 정확히 반절씩 나눈다는 점에서 최악의 경우에도 O(N * logN)을 보장합니다. 개념 자체도 굉장히 쉽기 때문에 퀵 정렬을 이해하신 분들이라면 어..

Algorithm 2023.07.23

퀵정렬(QuickSort)

우리들이 흔히 알고 있는 정렬 알고리즘인 선택 정렬, 버블 정렬, 삽입 정렬 알고리즘은 모두 시간 복잡도 O(N^2)을 가지는 알고리즘이었습니다. 사실 이러한 복잡도를 가지는 알고리즘은 데이터의 갯수가 10만 개만 넘어가도 일반적인 상황에서 사용하기가 매우 어려운 알고리즘입니다. 그렇기 때문에 더욱 빠른 정렬 알고리즘이 사용될 필요가 있습니다. 그 대표적인 빠른 알고리즘이 바로 퀵정렬 알고리즘입니다. 퀵정렬은 대표적인 '분할 정복' 알고리즘으로 평균 속도가 O(N * logN) 입니다. 퀵 정렬은 하나의 큰 문제를 두개의 작은 문제로 분할하는 식으로 빠르게 정렬합니다. 더 쉽게 말하자면 특정한 값을 기준으로 큰 숫자와 작은 숫자를 서로 교환한 뒤에 배열을 반으로 나눕니다. "특정한 값을 기준으로 큰 숫자..

Algorithm 2023.07.23

알고리즘 Introduction & Analysis

Introduction 알고리즘 (Algorithm) ※ 주어진 일(또는 문제)을 처리하여 원하는 결과(output)를 얻기까지의 과정을 명확하고 단계적으로 서술한 것 예) 조리법 : 음식을 만드는 알고리즘 길안내 : 낯선 도시에서 길을 찾아가기 위한 알고리즘 세탁기조작법 : 세탁기 조작을 위한 알고리즘 악보 : 음악연주를 위한 알고리즘 ※ 알고리즘을 찾는 작업의 효시 현대의 컴퓨터가 개발되기 훨씬 전부터 수학의 한 분야로 시작 ※ 목표 특정 유형의 모든 문제들을 해결할 수 있는 방법을 서술하는 일련의 명령들을 찾는 것 ※ 알고리즘의 예 : 유클리디안 알고리즘(Euclidean algorithm) 그리스 수학자 유클리드가 발견함 ※ 일단 작업을 수행하기 위한 알고리즘을 찾은 다음에는 알고리즘이 기초하고 ..

Algorithm 2023.07.08
728x90
반응형
LIST