스펜서 개발블로그

1. 프로젝트 생성하기 npm init react-app . 터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성합니다. 만약 위 방법을 사용할 때 에러가 난다면 아래 방법으로 빌드한다. npx create-react-app my-app 2. 개발 모드 실행하기 npm run start 터미널에서 npm run start를 입력하면 개발 모드 서버가 실행됩니다. 3. 실행 중인 서버 종료하기 ctrl + c (맥북은 cmd + c) 서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료됩니다. 4. 개발된 프로젝트 빌드하기 npm run build 터미널에서 npm run build를 입력하면 빌드를 시작합니다. 5. 빌..

안녕하세요. 오늘은 Vuejs에서 타입스크립트(TypeScript)를 적용하는 방법에 대해 알아보겠습니다. Vue.js 프로젝트에 타입스크립트를 적용하는 방법은 두 가지가 있습니다. 첫번째로 프로젝트를 생성할 때 타입스크립트를 선택할 수 있습니다. 해당 옵션을 선택하여 진행할 경우, Vue.js 프로젝트가 생성되면서 환경설정 및 구조를 자동으로 생성하기 때문에 굉장히 편리하지만 필요한 특정 플러그인, 혹은 라이브러리의 버전을 수정하거나 구조를 수동으로 변경해야하는 번거로움이 있습니다. 두번째로 이미 존재하는 프로젝트에 타입스크립트를 적용하는 방법이 있습니다. 이미 기존에 Vue.js와 자바스크립트로 진행했던 프로젝트가 있는 분들이 많이 선택하시는 방법으로 점진적으로 타입스크립트를 적용할 수 있습니다. n..

조건문 Vue.js에서 조건문은 명시한 조건에 충족할 때 해당 태그를 포함한 하위 태그를 모두 보여주고 실행할 함수나 데이터 바인딩이 있다면 이를 수행한다. 종류 v-if v-if의 경우, if문의 결과가 true일 때 해당 태그를 화면에 보여주고 혹시 함수가 있다면 함수를 호출하여 실행한다. 사용자의 분류 코드에 따라 화면을 다르게 구성하거나 모달(modal)창을 띄울 때 사용하기도 한다. v-if를 사용하면 뒤에 v-else-if와 v-else도 함께 사용한다. v-if는 조건에 충족하지 않을 경우, 랜더링을 하지 않기 때문에 DOM에 남아있지 않으며, 주로 자주 바뀌지 않는 부분에 사용된다. 프로모션 링크 관리 링크 export default { name: 'App', data() { return ..

Ajax란? AJAX는 대화형 웹 응용프로그램을 만들기 위한 웹 개발 기술이다. 기존 웹 애플리케이션은 폼 양식을 작성하고 버튼을 눌러 내용을 제출하여 동기 요청을 사용하고 서버와 정보를 전송한다. 하지만 AJAX를 사용하면 자바스크립트가 서버에 요청하여 결과를 해석하여 현재 화면을 업데이트 하게 된다. 클라이언트는 이러한 화면 갱신 없이 데이터가 서버로 전송되었다는 사실을 알지 못해도 서버 데이터를 수신할 수 있게 된다. AJAX는 서버 소프트웨어와는 별개의 독립적인 웹 브라우저 기술이며 기술 자체로는 프론트엔드로 분류가 된다. 하지만 서버 전송 이후 back-end와 연동되기 때문에 back-end와 혼동할 수 있다. 자바스크립트는 서버와 비동기 상호작용을 수행하기 위한 XMLHttpRequest 객..

JQuery(제이쿼리) 존 레식에 의해 개발된 경량 javascript 라이브러리로 javascript를 손쉽게 구현하기 위해 개발되었다. 장점 DOM 관련 처리를 손쉽게 한다. Ajax 통신, 이벤트 처리 등을 폭넓게 지원한다. 별도의 플로그인을 통해 차트, 슬라이드쇼, 테이블 등을 간단히 구현할 수 있다. 사용 방법 페이지 상단에 script 태그 내 src를 이용하여 추가할 수 있으며, 총 두 가지 방법이 있다. 1. 페이지 로드 인터넷이 연결된 상태라면 페이지 주소를 입력하여 연동할 수 있다. 아래 예시는 압축타입(min)을 로딩하였다. 2. 파일 저장 홈페이지에서 js 파일을 저장하여 경로를 지정한 뒤 사용할 수 있다. (jquery.com/)