Just Do It

기초부터 시작! 리액트 App 설치와 실행 과정 정리React로 만든 웹 서비스들은 보통 React App, React Application 이라고 한다. 단순한 웹페이지의 기능을 넘어서 브라우저 위에서 동작하는 애플리케이션 같다고 하여 그렇게 부른다.react 또한 npm에 등록된 자바스크립트의 라이브러리다.react의 기타 도구 설치 및 설정은 입문자가 하기에는 어려움이 있어, Vite라는 차세대 프론트엔드 개발 툴로 기본 설정이 적용된 React App을 생성하자.Vite 툴로 리액트 app 생성 방법터미널에서 npm create vite@latest 입력하고 사용할 언어 등을 선택하여 프로젝트를 생성한다.생성된 프로젝트 폴더를 열고, 터미널에서 npm i 를 입력하여 라이브러리를 설치한다.생성된 ..

React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.컴포넌트를 기반으로 UI를 표현한다.컴포넌트 (Component) : 화면을 구성하는 요소, UI를 구성하는 요소예로 Header.js, Main.js, Footer.js 등 여러 개의 컴포넌트로 나뉘어서 구성할 수 있다. 레고처럼.화면 업데이트 구현이 쉽다.업데이트 : 사용자의 행동(클릭, 드래그 등)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것렌더링(Rendering) : UI 요소를 화면에 그려내는 것리액트는 ‘선언형 프로그래밍’ 이다. 이는 과정을 생략하고 목적만 간결히 명시하는 방법이다. 반대는 ‘명령형 프로그래밍’으로 목적을 이루기 위한 모든 일련의 과정을 설명하..

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.Node.js 란?JavaScript 실행 환경 (Run Time), 즉 구동기이다.JavaScript는 웹 페이지 내부에 필요한 아주 단순한 기능만을 개발하기 위해 만들어졌다. 문법 자체가 매우 유연하고 작성하기가 쉽게 (생산성이 높게) 개발 되었다. 개발자들은 이렇게 쉬운 자바스크립트를 웹 브라우저 밖에서도 사용하고 싶어했다. 그래서 2009년에 탄생한 것이 node.js 이다.Node.js에서 사용하는 프로그램의 단위는 ‘패키지’ 라고 한다. (= 프로젝트)패키지의 root 폴더를 로컬 원하는 곳에 만든다.VSCode에서 루트 폴더를 열고 터미널( ctrl+j )을 연다.npm init을 실행한다. (초기화한 정보로 package.json ..

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.동기여러 개의 작업을 순서대로, 하나씩 처리하는 방식이다.JavaScript는 기본적으로 “동기적”으로 코드를 실행한다.동기 방식에는 치명적인 단점이 존재한다.자바 등 다른 언어에서는 ‘멀티쓰레드’ 방식으로 오래 걸리는 작업이 중간에 포함되어 있더라도 해당 작업이 프로그램 전체 성능에 큰 영향을 주지 않도록 동기 방식의 단점을 어느정도 보완한다.그러나 자바스크립트 엔진에는 쓰레드가 1개 밖에 없다. 그래서 ‘비동기’ 방식으로 해결한다.비동기작업을 순서대로 처리하지 않는 방식이다.여러 개의 작업이 주어졌을 때 앞선 작업이 끝나지 않았어도 다음 작업을 동시에 실행시킨다.비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행 된다.Web A..

할인 배너를 2초 후에 자동으로 사라지게 하는 기능을 만들어보자.이때 알아야 하는 개념이 Lifecycle 컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거친다. 그 step을 라이프사이클이라고 한다.create 단계 -> mount 단계 -> 컴포넌트 생성 -> update 단계 -> unmount 단계Lifecycle Hook을 걸어서 중간에 원하는 코드를 실행 가능하다. 1. 컴포넌트를 보여줄 때 create -> mount 이 단계로 생성됩니다.      create는 데이터생성, mount는 index.html 파일에 장착 이렇게 생각하시면 됩니다. 2. 데이터가 바뀌어서 컴포넌트가 재렌더링될 때는 update 단계를 거치며3. 다른 페이지로 이동하거나, 컴포넌트가 삭제될 때는 unmoun..

원룸의 가격순대로 데이터를 정렬해보자.button>가격순정렬button>--> 먼저 클릭하면 가격순으로 정렬되는 버튼을 하나 만들어보자.button @click="priceSort">가격순정렬button>--> 그리고 정렬하는 함수를 생성한다.     priceSort() {      var array = [3,5,2];      array.sort(function(a,b){        return a-b      });    }--> 정렬을 하기 앞서 잠깐 sort() 문법을 정리해보자. sort()는 말 그대로 정렬해주는 함수이다.그런데 여기서 3,5,2는 숫자가 아닌 문자로 인식이 되기 때문에 숫자로 정렬을 하려면 위와 같이 function을 사용해야한다.sort 안에서 위 코드는 'a-b가 음수..

모달창이 열릴 때 애니메이션 효과를 줘보자기존 css로 만드는 법style>.start {  opacity: 0;  Transition: all 1s;}.end {  opacity: 1;}--> style을 주고  div class="start" :class="{ end : modalOpen }">    Modal @closeModal="modalOpen=false;" :원룸들="원룸들" :누름="누름" :modalOpen="modalOpen" />  div>--> class명 넣어주면 끝!      class명을 조건부로 넣으려면 { 클래스명 : 조건 } 으로 사용하면 된다.    :class="{ end : modalOpen }"은  modalOpen이 true 면 end를 클래스명에 넣어라. 라는 ..

지난 시간에 만들었던 input에 사용자가 숫자가 아닌 문자를 입력할 경우 제재를 가하는 코드를 짜보자.input에 문자를 입력하면 경고문을 띄우고 싶다 -> watcher를 사용하면 된다. (데이터를 감시하는 친구)script>export default {    data() {        return {            month : 1,        }    },    watch : {        month() {                    }    },}script>--> watch : { 감시할데이터(){} } / 감시할데이터가 변할 때 마다 안에 있는 코드가 계속 실행된다.     함수 이름은 위에 있는 데이터 이름으로 만들어야 한다.     watch : {        mont..

모달창 안에 사용자가 살고자 하는 개월 수를 입력하는 칸을 만들어보자. (Model.vue에서 진행)input @change="">input @input="">--> @change는 입력하고 커서를 다른 곳에 찍으면 실행해주세요. 라는 의미이고,     @input은 입력할 때마다 실행해주세요. 라는 의미이다.사용자가 input 에 입력한 값을 데이터로 저장하려면 먼저 저장할 공간을 만들어준다.export default {    name: 'Modal_',    data() {        return {            month : 1,        }    },    props: {        원룸들 : Array,        누름 : Number,        modalOpen : Bool..

지난 시간에 props로 받아온 데이터를 자식 컴포넌트에서 수정할 수 없어서 모달창을 열 수가 없었다. 이것을 해결해보자!가장 쉬운 해결 방법은? 그냥 컴포넌트에 이벤트를 주는 것이다.Card @click="modalOpen=true; 누름=i" :원룸="원룸들[i]" v-for="(원룸,i) in 원룸들" :key="원룸" />--> 그런데 이렇게 하면 제목을 누르든, 이미지를 누르든, 가격을 누르든 모두 모달창이 열리게 된다. (이벤트 버블링 현상에 의해) 나는 제목을 클릭했을 경우에만 모달창이 열리게 하고 싶다. 그렇다면?custom event 를 사용한다.부모 컴포넌트에게 몇 가지 정보와 함께 데이터를 수정해달라는 메세지를 보낸다고 생각하면 된다. template>    div>    img :s..