쏘피의 코딩일기_

이번 포스팅은 스마트인재개발원 에서 교육을 받으며 랩실 스터디를 겸해서 제가 개인적으로 공부했던 내용들을 정리하려고 합니다. 이전의 랩실스터디 포스팅을 참고하시면 저의 공부 내용들을 다시 확인하실 수 있습니다! 스마트인재개발원 의 쏘피의 랩실 스터디 내용이 궁금하시다면 아래의 링크를 참조해주세요!! 😎😎 다음과 같은 순서로 Vue 컴포넌트와 라우터를 설명해보도록 하겠습니다!! Vue 컴포넌트와 라우터 Vue 컴포넌트에 대해 상위(부모) - 하위(자식) 컴포넌트의 관계 상위 - 하위 간 컴포넌트 데이터 전달 Vue Router란? 컴포넌트란 다음과 같이 전역 컴포넌트와 지역 컴포넌트 두가지로 나누어 볼 수 있습니다. 프로그래밍 언어의 특징을 어느정도 알고 계신 분들이라면 전역과 지역의 차이점에 대해 이해하..

이번주에는 스마트인재개발원 랩실스터디에서 공부했던 내용 중 Vue.js 인스턴스에 대해 정리해 볼까 합니다! Vue에서 인스턴스의 개념은 매우 중요합니다. 그렇기 때문에 더욱더 기초를 잡고, 정리해야하겠죠?? 스마트인재개발원 스터디 발표내용을 바탕으로 내용을 정리해 보겠습니다. 뷰 인스턴스 뷰 인스턴스의 유효 범위 뷰 인스턴스 라이프 사이클 1. 뷰 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해서 필수적으로 생성해야하는 기본 단위 입니다. 뷰 인스턴스의 생성은 아래 그림과 같이 new Vue({}); 라는 입력을 통해 생성이 가능합니다. new Vue({ el: '태그이름', //기본적으로 최상위 실행인 App태그가 들어가게된다. data: { //data 내용들 }, }) 이렇게 data안에 실행이..

이번 포스팅은 '스마트인재개발원' 랩실에서 진행한 7/22 6주차 Vue.js 에 관한 발표자료를 주제로 활용하였습니다. Vue에서 이벤트를 다루는 방법에 대해서 알아보겠습니다. HTML에는 나 과 같은 기본 이벤트들이 있는데요, 또한 자바스크립트를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있습니다. 여기에서 Vue.js는 자바스크립트로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀 더 쉽게 구현할 수 있는 방법을 제공하고 있습니다. v-on 디렉티브를 사용해서 이벤트를 처리하는 방법에 대해 알아보겠습니다. 페이지에 보여지는 숫자를 증가시키고, 감소시키는 간단한 카운터를 만들어보며 예제를 알아보겠습니다. 우리가 카운터를 만들기 위해선, 버튼의 click 이벤트 발생 시 우리가 준비..

이번 포스팅은 스마트인재개발원 랩실스터디에서 공부한 내용을 담았습니다! 지난주 Vue.js 소개글(1) : https://jaws-coding.tistory.com/18 내 이름은 Vue.js! 나를 소개하지! [스마트인재개발원] 드디어 저의 스터디 최종 목표인 Vue.js 써보기의 도입부입니다!! 본 내용은 스마트인재개발원 랩실에서 4주 차 발표에 진행했던 Vue.js 주제를 가지고 포스팅했습니다. Vue.js란 무엇인가! 이것을 알 jaws-coding.tistory.com 이번 포스팅은 Vue.js의 장점과 사용예시를 들어보겠습니다. Vue의 장점은 크게 두 가지로 나뉘어 볼 수 있는데요, 1. 데이터 바인딩 2. 가상 돔 기반 랜더링 으로 나누어서 볼 수 있겠습니다! 1. 데이터 바인딩 Vue.j..

드디어 저의 스터디 최종 목표인 Vue.js 써보기의 도입부입니다!! 본 내용은 스마트인재개발원 랩실에서 4주 차 발표에 진행했던 Vue.js 주제를 가지고 포스팅했습니다. Vue.js란 무엇인가! 이것을 알아보기 위해 다음과 같은 순서로 설명해 볼까 합니다. SPA 프레임워크 Vue.js - Vue의 탄생 Vue의 장점 Vue의 특징 1. SPA 프레임워크 예전에는 PC용 웹사이트 하나만 만들면 되었지만 모바일 시대가 열리고, 앱이나 스마트폰 브라우저로 서비스들이 이용되기 시작하면서 이제는 어느 정도 갖춰진 사업을 하는 회사에서는 개발자들이 PC용 웹, 모바일용 웹 그리고 iOS와 안드로이드 앱과 서버까지 개발해야 하게 되었습니다. 먼저 PC용 사이트의 경우에는 접속이 들어오면 데이터베이스에서 정보들을..

AJAX 그것이 알고싶다!(1) https://jaws-coding.tistory.com/14 AJAX 그것이 알고싶다! (1) [스마트인재개발원] 본 내용은 스마트인재개발원 랩실에서 07/01 3주차 발표에 진행했던 AJAX 주제를 포스팅 해보려고 합니다. AJAX는, AJAX는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 간단히 말해서, jaws-coding.tistory.com 그러면 지난번에 이어서 이번에는 AJAX의 필요성과 흐름 그리고 장단점에 대해 포스팅 해보겠습니다! 앞서 설명했던 동기와 비동기 처리방식을 선으로 나타낸 그림입니다. 동기와 비동기 처리방식을 한눈에 볼 수 있으니 차이점을 공부하실 때 참고하시면 되겠습니다. 웹이 동작하는 흐름은 AJAX가 등장한 이전과 이후로 나누..

안녕하세요! 7월 중순을 향해 가면서 날이 많이 무더워지고 있네요.. 3월에 들어올 때만 해도 언제 8월이 되나 했는데.. 벌써 수료까지 한 달 밖에 남지 않았습니다!!!! 이번에는 '스마트인재개발원'을 다니면서 느낀 점을 공유해보려고 해요! 먼저 저에 대해 말해보자면, 저는 미술학과 조소를 전공한 컴퓨터와는 관련이 없던.. 비전공자입니다. 올해 초 IT에 관심을 갖게 되면서 내가 좋아하는 일에 IT 기술을 접목시킬 수 있으면 더 좋은 강점이 되지 않을까? 하는 생각에서 공부를 시작하게 되었어요. JAVA의 J도...Javascript가 뭔지도 모르고 시작한 코딩 부트캠프에서, 정말 컴퓨터 언어 관련 지식 0이었던 저에게 100% 온라인 수업은 한 달 여 만에 눈물을 머금고 내려놓아야 했던 쓰라린 기억이..

본 내용은 스마트인재개발원 랩실에서 07/01 3주차 발표에 진행했던 AJAX 주제를 포스팅 해보려고 합니다. AJAX는, AJAX는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 간단히 말해서, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. AJAX 용어에 XML이 포함되어 있기 때문에 XML만 통신 가능한 것이 아닐까 생각이 들 수도 있겠지만 XML 뿐만 아니라 저번주에 다뤘던 JSON이나 HTML, 텍스트 등을 포함한 다양한 포맷을 주고받을 수 있습니다. 무엇보다도 AJAX의 강력한 특징은 페이지 전체를 새로고침 하지 않고서도 수행이 되는 “비동기성”입니다. AJAX는 무엇을 통해 통신할까요? 웹은 문서 공유 목적으로 만들어졌기 때문에 초창기 브라우저는 동..