유령이 나오는 젤리하우스

토이 프로젝트/With React

[토이 프로젝트] 솔로몬Day 1

들어가는 말 지난 주말, 친구 A에게 연락이 왔다. 같이 프로젝트 하나 하자고 한다. 나는 포트폴리오도 채워야했고, React도 좀 더 연습해보고 싶어서 안 그래도 뭔가 해볼까 하고 있던 참인데, 이게 왠 떡이냐?? 거기다가 이 친구, 경력도 빵빵하다. 오히려 내가 부탁하고 싶은 입장이였는데, 잘되었다. 냉큼 ㅇㅋㅡ 를 때리고 바로 아이디어 회의에 돌입했다. 처음에는 우리 개발팸 ( a.k.a 대학교때부터 질기게 이어온 못난 놈들 ) 들이 운영하는 기술 블로그를 만드려고 했는데, 구현하고 싶은 기능을 이것저것 붙이다보니 규모가 너무 커져서 노선을 바꾸기로 하였다. 물론 나도 좀 빡세더라도 으리으리한걸 만들고 싶었지만, 생각해보면 너와 나. 개발자로서는 처음 아니던가?? 한 입에 삼키려다가 입 찢어지는 모..

웹/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를 사용해보기로 했다. 공식문서에서 제공하는 튜토리얼과, 인터넷 강의 ( 큰 맘 먹고 유료로 결재함 ) 에서 주어지는 실습 과제들을 진행해봤는데, 하다..