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 ..

문제 문제 바로가기> SWEA 5650번: 핀볼 게임 SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 풀이 크게 3가지를 고려해주었다. 1. simulation 시, 빈칸의 좌표만 따로 담아 둘 것인지? 그냥 2중 for문을 돌면서 빈칸을 찾을 것인가? 빈칸의 좌표를 따로 담아둘 경우, 저장 공간은 더 사용하지만, 조금 더 속도를 높일 수 있을 것 같다는 생각이 들었지만, 빈칸이 많은 경우, 저장 공간 + 속도 측면에서 모두 별로라고 판단해서 100*100이기 때문에 그냥 2중 for문을 도는 것을 선택했다. 2. 웜홀을 어떻게 쌍을 지어줄 것인지 웜홀이 2개가 쌍으로 들어오기 때문에, vector의 pair..

BERT 2018년, 구글이 공개한 사전 훈련된 모델 트랜스포머를 이용하여 구현 (트랜스포머의 인코더를 쌓아올린 구조) 위키피디아(25억 단어)와 BooksCorpus(8억 단어) 데이터로 사전 훈련 (Unsupervised Learning) 모든 자연어 처리 분야에서 좋은 성능을 내는 범용 Language Model BERT등장 이전에는 데이터의 전처리 임베딩을 Word2Vec, GloVe, Fasttext 방식을 많이 사용 BERT가 높은 성능을 얻을 수 있었던 이유 레이블이 없는 방대한 데이터로 사전 훈련된 모델을 가지고, 레이블이 있는 다른 작업(Task)에서 추가 훈련과 함께 하이퍼파라미터를 재조정 * Fine-tuning : 다른 작업에 대해서 파라미터 재조정을 위한 추가 훈련 과정 = 추가적..

기존 seq2seq 모델의 한계 입력 시퀀스를 하나의 벡터로 압축하는 과정에서 입력 시퀀스 정보가 일부 손실 *이를 보완하기 위해 Attention 이용했었음 Transformer 기존의 RNN 기반의 모델과 달리, Self-Attention을 사용하여 입력 시퀀스의 전체적인 의미를 파악하고 처리하는 방식으로 동작 * RNN을 모두 Attention으로 대체 Encoder Input Embedding 입력 문장의 각 단어를 고정 길이의 벡터로 변환 Positional Encoding RNN이은 단어의 위치에 따라 단어를 순차적으로 입력받아서 처리하기 떄문에 단어의 위치 정보를 가질 수 있었음 트랜스포머는 단어 입력을 순차적으로 받는 방식이 아니므로 단어의 위치 정보를 다른 방식으로 알려줄 필요가 있음 단..

Optimizer 학습은 cost function의 최소값을 찾는 것을 목표로 한다. 여기서 최소값을 찾아가는 것을 최적화 = Optimization / 이를 수행하는 알고리즘을 최적화 알고리즘 = Optimizer 이라고 한다. * 즉, 모델의 매개변수를 조정하여 cost function을 최소화하고 모델의 예측 성능을 향상시키기 위해 사용하는 것이 Optimizer이다!! Cost function : 모델의 예측값과 실제값의 차이를 나타내는 함수 (데이터셋에 대한 예측값과 실제값의 차이를 계산) Loss function : 한 개의 데이터 샘플에 대해 예측한 값과 실제값의 차이를 나타내는 함수

Gradient Descent 모델의 손실 함수를 최소화하기 위해 사용되는 최적화 알고리즘 중 한 종류 Batch Gradient Descent 전체 학습 데이터셋을 사용하여 모델 업데이트 , batch_szie = n 안정적, 병렬처리가 가능하여 속도는 빠르지만, 업데이트 속도는 느림 (한 epoch 당 1번 update) 전체 데이터셋을 처리하는 동안 계산이 느리고 메모리를 많이 사용 cost에 대한 gradient Stochastic Gradient Descent 학습 데이터셋의 각 샘플에 대해 모델 업데이트 , batch_szie = 1 업데이트 속도는 빠르지만, 불안정 (한 epoch 당 n 번 update) loss에 대한 gradient Mini-Batch Gradient Descent 미니..

C 절차지향적 언어 컴파일러 언어 (기계어로 변환된 후 실행 ) Low Level 언어 ( 어셈블리어 수준으로 하드웨어 제어 가능 ) 시스템 자원을 개발자가 직접 제어할 수 있음 시스템과 하드웨어 제어, 운영 체제 개발 등의 영역에서 주로 사용 C++ 컴파일러 언어 객체지향 언어 엄격한 타입 체크 개임 개발에 많이 사용 객체 지향 프로그래밍은 코드의 재사용성을 높이고 유지보수를 용이하게 하는 등 생산성을 높이는 특징을 가지고 있음 JAVA 객체지향 언어 Garbage Collection 지원 인터프리터와 컴파일러를 모두 사용 웹 서비스 개발, 안드로이드 앱 개발에 주로 사용 Javac(Java Compiler)를 이용해 소스코드를 .class 파일로 컴파일하고, 이후 JVM의 인터프리터에서 바이트코드를 ..

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 ..

Dropout 딥러닝에서 overfitting을 방지하는 regularization 기법 중 하나 무작위로 선택한 일부 뉴런들을 무시 ( 해당 뉴런들의 출력을 0으로 만듦 ) 모델이 다양한 입력에 대해 다양한 방식으로 반응하도록 만들어주어 일반화 능력을 높이는 데 도움을 줄 수 있음 모델을 여러 개를 만들지는 않지만, 훈련 과정에서 앙상블과 비슷한 효과를 냄 서로 다른 학습데이터를 통해 모델을 학습시키거나 모델이 서로 다른 구조를 가지면 학습 성능을 개선할 수 있음 그러나 하나의 네트워크를 훈련시키는 것도 어려운데 여러개의 네트워크를 훈련시키는 것은 매우 어려운 일임 또한, 여러개의 네트워크를 훈련시켰더라도 사용시에 연산 시간이 소비되어 속도가 느려지는 문제가 발생할 수 있음 Dropout은 이 두 문제..

Pre-training ( 사전 학습 ) 방대한 데이터를 사용하여 모델을 사전 학습 시키는 것 Pre-trained 모델을 비슷한 task에 대해 새로운 모델을 만들 때 사용하면 학습 시간을 상당히 줄일 수 있음 CV, NLP 등 다양한 분야에서 사용되지만, 주로 NLP에서 단어의 의미나 문장의 구조 등을 이해하기 위해 사용 Unsupervised learning, Supervised learning 모두 가능 (주로 unsupervised learning 방식으로 이루어짐) Transfer Learning ( 전이 학습 ) Pre-trained model을 사용하여 새로운 문제를 해결하는 기술 비교적 적은 양의 데이터로도 빠르게 정확한 모델을 만들 수 있으며, 컴퓨팅 리소스와 시간을 절약할 수 있음 F..