728x90

프론트엔드 8

[Node.js] #9 익스프레스로 SNS 서비스 만들기

익스프레스로 SNS 같은 공유 네트워크 만들때 주의해야할 점 1) 서버는 요청에 응답하는 것이 핵심 임무이므로 요청을 수락하든 거절하든 상관없이 반드시 응답해야함. 이때 한 번만 응답해야 에러가 발생하지 않음. 2) 개발 시 서버를 매번 수동으로 재시작하지 않으려면 nodemon을 사용하는 것이 좋다. 3) dotenv 패키지와 .env 파일로 유출되면 안 되는 비밀키를 관리해야한다. 4) 라우터는 routes 폴더에, 데이터베이스는 models 폴더에, html 파일은 views 폴더에 구분하여 저장하면 프로젝트 규모가 커져도 관리하기 쉽다. 5) 데이터베이스를 구성하기 전에 데이터 간 1:1, 1:N, N:M 관계를 잘 파악하자 6) routes/middlewares.js처럼 라우터 내에 미들웨어를 ..

node.js 2021.11.19

[Vue.js] #5 뷰 템플릿(template)이란?

뷰 템플릿(Template)란? : HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 템플릿에서 사용하는 뷰의 속성과 문법 1) 데이터 바인딩(Data Binding) : HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는것을 의미. {{ }} - 콧수염 괄호 : 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식. v-bind : 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결 할 때 사용하는 데이터 연결 방식 2) 자바스크립트 표현식 3) 디렉티브(Directive) : HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미. ex) 두잇..

vue.js 2021.11.11

[Vue.js] #4 뷰 라우터(Router)란?

라우팅이란? 웹 페이지 간의 이동 방법을 말함. 라이팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용. 화면 간의 전환을 매끄럽게 진행 시킬 수 있음. 서버에서 응답을 받아 웹 페이지 처리하면 화면상에 깜빡거림이 있을수있는데, 라우팅을 사용 할 경우 깜빡거림 없이 매끄럽게 사용 할 수 있다. 뷰 라우터란? 뷰에서 라우팅 기능을 구현 할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동이 가능하다 [뷰 라우터 구현할 때 필요한 특수 태그와 기능] 태 그 설 명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해..

vue.js 2021.11.10

[책 리뷰] Do it! Vue.js 입문

최근 학습에 대한 욕구(?) 샘 솟아서 다른 공부를 시작했다. 매번 Java와 Database만 주로 만지다보니 조금 지루함과 답답함이 있었고, (아, 물론 Java 하나만 잘하기에도 벅차지만...) 약간의 머리 식힐겸(?) 프론트분야를 조금 공부해보기로 했다. 리액트 같은 경우에는 어렵기도 하고 입문하는데 꽤 시간이 걸린다고해서, 알아보던 중 가장 이해하기 쉽다는 vue.js를 한 번 공부해 보기로 했다. 지금 쓰는 이 포스팅은 내가 해당 책을 모두 읽고난후에 작성하는 것이기 때문에 vue.js가 뭔지 궁금하다면 지난 포스팅을 하나씩 천천히 읽어보는것도 좋을것 같다. 뭐 예를들어 vue.js란? 이라고 했을때, vue.js가 무엇인지 간단히 알기위하여... https://itkjspo56.tistory..

Book Review 2021.11.10

[Vue.js] #3 뷰 컴포넌트란?

컴포넌트(Component)란? 조합하여 화면을 구성 할 수 있는 블록(화면의 특정 영역)을 의미. 컴포넌트를 활용하면 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하다. → 화면의 영역을 컴포넌트로 쪼개서 활용하다보니 나중에 관리하기도 편함. 또한 정해진 방식대로 컴포넌트를 사용하기때문에 다른 사람이 보기에도 직관적이다. 이렇게보니깐 컴포넌트의 관계도는 자료구조 트리(Tree)와 비슷한거 같다. ※ 트리 구조란? 자료구조 중 하나로, 노드끼리의 연결이 부모 - 자식의 구조를 따름. 트리는 윈도우 파일 시스템 체계를 비롯하여 각종 데이터베이스에 활용되고 있고 뷰에서도 컴포넌트를 이해할 때 필요한 개념이다. 컴포넌트를 등록하는 방법 1) 전역(Local) 컴포넌트 특정 인스턴스에서만 유효범위를 가짐. →..

vue.js 2021.11.09

[Vue.js] #2 뷰 인스턴스란?

뷰 인스턴스(instance) 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위. new Vue({ el : '#app', data : { message: 'Hello Vue.js!' } }); new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 부름. 생성자를 사용하는 이유는 뷰로 개발 할때 필요한 기능을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함. ※ 생성자란? : 객체를 새로 생성 할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성 할때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를..

vue.js 2021.11.08

[Vue.js] #1 Vue.js 란? 뷰제이에스

Vue.js 첫 시작하기..! Vue.js란?(보통 '뷰'로 약칭) : 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크. 뷰는 화면단 라이브러리이자 프레임워크라고 볼 수 있다. ※ 프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 ※ 라이브러리 : 자주 사용되는 기능들을 모아 재활용 할 수 있도록 정리한 기술 모음집 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합 할 수 있는 형태로도 제공. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미. 뷰의 장점 1) 배우기 쉽다. 2) 리액트와 앵귤러에 비해 성능이 우수하고 빠름..

vue.js 2021.11.08

[JavaScript] checked Box Array 활용

자바스크립트 체크박스 Array 활용하기 //전체 Array에 넣기 var arr = []; $('input[name="test"]').each(function(index) { var bChecked = $(this).prop('checked'); var id = $(this).attr('id'); var value = $(this).val(); arr.push('[' + index + ']('+ bChecked + ')' + id + ':' + value); console.log(arr); }); //전체 Checked Array에 넣기 var arr = []; $('input[name="chckbxColors"]:checked').each(function(index) { var bChecked = $..

JavaScript 2021.07.29
728x90