Front_End

React로 무작정 개발하기 - 1

React로 무작정 개발하기 - 1 컴포넌트 생성 개발을 하기에 앞서서, React도 Vue와 마찬가지로 UI를 컴포넌트 단위로 나눠서 개발을 한다. 그러므로 컴포넌트를 만드는 것부터 알아보자(매우 쉬움) 먼저, src 폴더에 Components라는 폴더를 만들고, HelloWorld.js 라는 파일을 만들자. import React, { Component } from 'react'; class HelloWorld extends Component { render() { return ( Hello World! ); } } export default HelloWorld;매우 심플하다. render() 함수의 몸체가 구현체가 된다. 여기서 주의해야할 점은, return()안에는 반드시 하나의 t..

React로 무작정 개발하기 - 0 (준비)

React 시작하기 React를 어떻게 쓰기에 앞서 react가 무엇인지. vue에 비해 뭐가 좋고 뭐가 나쁜지 알아보도록 하자(작성자는 react보다는 vue를 선호한다. template 방식이 너무 쉽고 편하다고 생각) React란 무엇인가? React repo를 들어가보면 React is a JavaScript library for building user interfaces. 이와 같이 시작한다. 유저 인터페이스(UI)를 위한 JS 라이브러리 임을 알 수 있다. 개인적으로는 js에서 html을 매핑해서 html처럼 렌더링 될 수 있게끔 하는 것으로 보인다. Vue.js와 마찬가지로, react 역시 webpack과 같이 사용할 경우 프레임워크 처럼 구조를 잡고 개발을 할 수있는걸로 보인다. (갓 ..

05. Vue.js Dynamic CSS 적용하기

Vue js dynamic class 적용 사용자의 입력에따라 css class를 다르게(동적으로) 적용하는 방법을 공유해봅니다. :class를 이용하기 class 동적으로 적용하기! Class Toggle :class는 v-bind:class의 줄임표현입니다. 대부분의 속성(태그)앞에 :을 붙이면 해당 Component내에 있는 변수 혹은 함수를 바인딩시킬 수 있습니다. :class="{'option-first': this.flag, 'option-second': !this.flag}" 이부분이 동적으로 클래스를 적용하는 핵심인데 아주 간단합니다. {'작성한 클래스명' : boolean type} 으로 작성해주시면 됩니다. 음 추가적으로 작성한 클래스명이 - ..

01. Cookie & Session

Cookie & Session 쿠키, 세션을 공부하겠다고 한지도 너무 오래된 것 같기도하고... 너무 많이 듣게 되는 단어기도해서 이번에 확실하게 정리하고자 한다. 1. Stateless 프로토콜 영어사전에 저 단어를 검색해보면 상태가없는으로 나온다. 그럼 쿠키,세션 이야기를하다가 왜 뜬금없이 Stateless protocol이냐? 쿠키와 세션의 등장이유에 대해서 알아보기 위해서다. 그 이유는 생각보다 간단하다. 웹개발자라면 많이볼수 밖에 없는 http 프로토콜은 기본적으로 stateless 프로토콜이다. 즉 서버가 클라이언트에 대한 상태를 저장하지 않는다는 말이다. 첫번째 request와 두번째 request는 클라이언트의 상태와 전혀 독립적인 상태가 된다는 뜻이다. 근데 실제로 웹을 개발하다보면 st..

04. Vue.js 스타일 적용 방법

Vue js 스타일 적용 일반적으로 .css파일을 작성해서 style을 적용시키는 방법말고도 Vue에서는 여러가지 방법으로 적용이 가능해요. 오늘은 Vue에서 style을 적용시키는 방법을 알아보도록 할게요. Vue 인스턴스 data로 style을 처리하는 방법 test Vue 인스턴스의 data 부분에 스타일과 관련된 속성을 추가하고 v-bind:style="속성명"으로 style을 bind해주면 되요. 다만 주의 해야할 점은 스타일이 기존에 알고있는 표기법이랑 달라요... 그래서 아마 이건 자주 안쓰일 것 같아요. Vue 인스턴스 data로 여러개의 style을 처리하는 방법 test 여러 개의 스타일을 추가할 땐 위와 마찬가지의 방법을 사용한되 속성명을 []로 묶어 주시면 되요. Vue 인스턴스 d..

03. Vue.js 초간단 Event Handling

이벤트 핸들링 이번 포스팅에서는 v-on 디렉티브를 이용하여 간단한 키보드 이벤트 핸들링과 마우스 이벤트 핸들링을 다뤄볼게요. javascript를 해보셨던 분은 아시겠지만 이벤트가 엄청 많아서 이벤트와 관련된 자세한 부분은 구글링을 해보시고 저는 어떤 식으로 vue에서 event handling을 구현하는가에 초점을 둘게요. v-on 디렉티브 피깎기 피회복시키기 남은 피 : {{ hp }} 공격과 힐을 통해서 hp를 올리고 줄이는 아주 허접한 예제에요. 0인 경우에는 더 이상 피를 깎을 수 없게 예외처리 해주었구요. 기본적으로는 Angular에서 사용하는 (click)="메소드" 가 Vue에서는 v-on:click="메소드"로 바뀌었네요. 사용하는 방법 자체는 매우 간단해요. v-on:click="메소..