JavaScript30 [AJAX] AJAX란? Ajax(Asynchronous Javascript And Xml) 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있다. Ajax의 장점 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다 웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거나 받을 수 있다 다양한 UI 구현(동적인 페이지 구현)이 가능해 진다 Ajax의 단점 페이지의 이동이 없기 때문에 히스토리 관리가 안된다 반복적인 데.. 2022. 1. 29. [Vue.js] 인스턴스 & 라이프사이클 Vue.js를 사용하기 위해 간단한 인스턴스를 만들고 라이프사이클에 대한 이해가 필요하다. var vm = new Vue({ el: '#app', data(){ return { msg:'hello world!' } } }) script 내부에 위와 같은 Vue 인스턴스를 만든다. element를 app이라는 클래스로 지정해주고, data는 함수형태로 적어준다. (객체로 지정해줘도 된다) {{ msg }} 그리고 템플릿 내부에서 app이라는 이름의 클래스를 div로 나타내고, scipt에서 정해준 데이터 내부 msg를 {{ }} 템플릿 문법을 이용하여 내부에 {{ msg }} 로 적어준다. 브라우저를 열어서 확인해보면 Hello world! 라고 찍히는 것을 확인할 수 있다. 라이프사이클 Vue.js에서 .. 2021. 3. 8. Vue.js 시작하기 자바스크립트를 이용하여 사용자 인터페이스 제작을 위해 사용하는 3대 라이브러리/프레임워크로 React / Vue / Angular 가 있다. React를 이때까지 주로 사용해 왔으나, Vue.js를 사용하는 기업들도 많아 Vue.js에 대해서 알아보고자 한다. Vue.js 란 더보기 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. - 출처 : Vue.js 공식문서 kr.v.. 2021. 3. 6. [Typescript] 타입스크립트 시작하기 타입스크립트란 자바스크립트의 ES6 문법과 새로운 버전으로 나오는 ES Next에 타입(Type)기능을 추가한 것이다. 타입스크립트는 마이크로소프트에서 오픈소스 프로그래밍언어로 개발되었다. 타입 기능이 필요한 이유는 여러 사람이나 팀이 협력할 때 코드를 서로 만들다가 오류가 발생할때, 어떤 부분이 오류가 났는지 찾는 것이 어렵다. 타입기능을 구현하면 문제의 원인이 어디있는지 수월하게 찾아서 오류를 수정할 수 있다. 이번 포스팅에서는 간단한 타입스크립트 문법에 대해 설명할 것이다. 타입스크립트 고유문법 1) 타입 주석과 타입 추론 타입주석은 변수 n뒤에 콜로(:)과 타입을 적는 것이다. let n : number = 1 let m = 2 그리고 두번째에 적힌 부분을 보면, 타입 주석 없이 변수의 타입 부분.. 2020. 12. 23. [4주 Project] 1일차 TIL 드디어 마지막 프로젝트를 시작하게 되었다. 이번 프로젝트는 4주간 진행되어서 조금더 완성도 높은 프로젝트를 완성하는 것을 목표로 했다. 이번에도 프론트엔드를 맡게 되어 프로젠트를 진행하게 되었다. 2주프로젝트때와 다르게 이번 4주 프로젝트에서는 웹이 아닌 안드로이드 앱 제작을 하는 것을 목표로 하였다. 어떤 프로젝트를 진행할지 아이디어 회의를 하였다. 기본적으로 오픈마켓이나 쇼핑몰 형태의 서비스를 제공하는 아이디어로 진행하게 되었고, 화훼 산업과 관련되어 판매자와 소비자가 오픈마켓 형태로 서비스를 제공하는 안드로이드 앱으로 만들기로 했다. 처음 , 기능에 대한 flow를 만들어서 어떤 페이지에서 어떻게 작동되어야 하는지에 대한 그림을 그려나갔다. Home 화면(Main page)를 기준으로 Header와.. 2020. 7. 15. [2주 Project] 8일차 TIL [목표로 한 기능들을 구현] 2주라는 시간이지만 사실상 8일차라고 볼 수 있는 프로젝트 마무리 기간이 다가왔다. 짧은 시간동안 원했던 기능을 구현하는 것은 쉽지 않았다. 그래도 기본적으로 프론트엔드 에서 구현하고자 했던 로그인, 로그아웃, 홈 데이터 불러오기, 해당 데이터 별 페이지 이동 등 어느 정도 구현할 수 있었다. 전체적으로는 bootstrap을 이용하여 사용 하였고, 회원가입과 로그인은 modal 기능을 사용하였다. 회원가입과 로그인은 데이터를 받기 위해서 React의 useState함수를 이용하였으며, const [userInfo, setUserInfo] = useState({ email: "", memberId: "", password: "", }); 데이터를 서버로 연결해주기 위해 axio.. 2020. 7. 8. [Material-ui] 시작하기 Material-ui는 UI framwork로 디자인에 도움을 주는 기능을 가지고 있다. 이번 2주 프로젝트를 하는 데 있어서 디자인 적인 측면을 보강하기 위해 Material-ui를 사용하기로 하였다. 그로인해 이번 포스트에서는 간단한 Material-ui 사용법에 대해 적으려고 한다. 전반적인 내용은 material-ui.com/를 참조하였으며, 홈페이지에서 예제를 적용하여 사용할 수 있다. 설치 npm이나 yarn을 통해서 설치할 수 있다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core SVG 아이콘 기능을 사용 하고 싶으면 다음과 같이 설치하면 된다. // with npm npm install @m.. 2020. 7. 6. IM 29일차 TIL(promise) Promise 프로미스(Promise)란 자바스크립트 비동기 처리에 사용되는 객체로 어떤 코드를 실행이 완료되기 전에 다음 코드를 수행되는 특성이다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시하기 위해 사용된다. 프로미스는 3가지 특징을 가진다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 pending(대기)는 new Promise() 를 호출하게 되면 대기 상태가 된다. new Promise(function(res, rej){ }); 콜백 함수로는 resolve, reject를 받는다. fulfilled(이행.. 2020. 6. 9. [node.js]서버 구축하기 Express Express 는 Node.js의 프레임워크의 일종으로 간편하게 웹서버를 구축할 수 있다. 우선 Express를 설치해보자. $ npm install express --save Express로 서버생성을 하기 위해서 다음과 같이 구성하면 된다. const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`)) 그리고 Router로 request를 처리해주면 http://localhost:.. 2020. 5. 22. 이전 1 2 3 4 다음
