유령이 나오는 젤리하우스

웹/일반

CSR와 SSR의 차이

이번 게시글은 삼성 SW 아카데미 계절학기 수업을 작성자가 재구성하여 포스트 한 글입니다. 포스트에 사용된 예제들은 삼성 SW 아카데미 측에서 준비한 것이며, 작성자 본인이 준비한 것이 아닙니다. 들어가는 말 웹 어플리케이션의 View의 디자인 패턴은 두 가지가 있다. 한개의 페이지를 가진 SPA(Single Page Application)과 여러개의 페이지를 가진 MPA(Multi Page Application)이 그것들이다. SPA는 클라이언트 측에서 View를 만드는 CSR (Client Side Rendering) 방식을 주로 사용하는 한편, MPA는 서버 측에서 View를 가져오는 SSR(Server Side Rendering) 방식을 주로 사용한다. SPA 대표 주자로는 Vue와 React등의..

웹/React

[React 기초] Todo list 만들기 :: 3)InputForm,TODOS

InputForm.js import React, {useState} from 'react' import {v4 as uuidv4} from 'uuid' function InputForm(props){ const [textInput, setInput] = useState('') //Submit 이벤트 발생시 실행 /현재 상태 저장 , localStorage에 상태 전달 function onSubmit(e){ e.preventDefault() if(textInput.length { if(Item.id === updatedItem.id){ Item = {...updatedItem} } return Item }) localStorage.setItem('TODOS',JSON.stringify(result)) } ..

웹/React

[React 기초] Todo list 만들기 :: 2) App, Container, Titlebar

개발 환경 설정 npm create-react-app TODO npm install sass --save npm install uuid create-react-app 을 사용해서 React를 준비해준다. 추가로 나는 css 대신에 scss를 사용할 것이기 때문에, sass도 준비해두자. Vue와 달리 React에서 sass를 사용할 때 sass-loader 같은 패키지를 준비하지 않아도 된다는 점이 좋았다. 추가로 uuid 라이브러리를 가져오자. uuid는 Universal Unique Identifier (범용 단일 식별자)의 약어로, 호출한다면 랜덤으로 생성된 문자열을 반환해준다. 컴포넌트에 key값이 필요할 때 고유한 값으로 설정하기에 딱 좋다. uuid를 안 쓴다면, id가 필요할 때 max_in..

웹/React

[React 기초] Todo list 만들기 :: 1) Intro

들어가는 말 Angular, React , Vue 대표적인 프론트엔드 프레임워크 3개만 꼽아보라고 하면 백이면 백 위 3가지를 말할 것이다. 나는 프론트엔드를 Vue로 시작했는데, Vue를 배우면서 이건 정말 간단하고 편한 만능 프레임워크라는 생각을 했다. 그런데 왜 아직까지 Vue보다는 React를 요구하는 기업이 많은걸까?? Vue가 React보다 늦게 나왔기에 이미 React를 쓰고 있는 기업들은 다른 프레임워크를 쉽사리 사용하기 어려운 점도 있겠지만, 분명 React 그 자체만의 장점도 분명 있을 것이다. 그 물음에 답하기 위해 내가 직접 React를 사용해보기로 했다. 공식문서에서 제공하는 튜토리얼과, 인터넷 강의 ( 큰 맘 먹고 유료로 결재함 ) 에서 주어지는 실습 과제들을 진행해봤는데, 하다..