유령이 나오는 젤리하우스

TIL

(21.07.19) CRA로 만든 react의 webpack 수정하기 (with CRACO)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄create-react-app으로 만든 프로젝트는 쉽고 간편하지만, webpack 설정을 건드리지 못한다.🦄 🦄webpack 설정을 건드리고 싶으면 CRACO 라이브러리를 이용해서 바꿀 수 있다!🦄 CRACO가 뭐에요? CRACO는 Create React App Config Override의 준말로, eject 없이 cra의 설정을 바꿀수 있게 해준다. 나는 항상 프로젝트에서 뭔갈 import 할 때 상대경로를 사용해왔다. 이유인즉, 내가 처음 웹을 배운 "head first HTML&CSS" 교재에서 절대경로로 파일을 불러오면 다른 사람의 PC에서 제대로 불러오지 못한다는 경우가 있다는 말을 보고 맹목적으로 상대경로만을 사용하게 되었다. 그렇게 철썩 같이..

토이 프로젝트/With React

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

들어가는 말 이때까지 열심히 달려온 결과, 기능 구현뿐만 아니라 배포까지 완료했다. 따로 서버를 돌리는 프로젝트가 아니였기에, 배포는 간단히 깃허브 페이지로 뿌려주는 것으로 완료했다. 오히려 배포하는 것보다 이걸 자동배포로 바꾸는게 더 어려웠다... 아무튼, 이제 ui만 꾸며주면 정말로 프로젝트가 끝나게 된다. 주말에 빡세게 달려서 끝매듭을 짓고 싶은 마음이 굴뚝 같은데, 나랑 A 둘 다 이번 주말에 코테가 있어서.... 마무리 짓는 건 조금 나중으로 미뤄둬야할 것 같다. 현재 프로젝트은 이런 모습이다. TIL 1. 프로그램을 미리 예상하지 마라. 추천 페이지의 댓글 시스템을 짜고 있을 때였다. 나는 문득 "나중에 이 앱에 사용자들이 많이 몰리게 되면, 댓글도 많이 달릴텐데, 모든 댓글이 한 페이지 주르..

토이 프로젝트/With React

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

들어가는 말 A가 사용자에게 질문하는 페이지를 그리고, 내가 추천 결과에 맞는 페이지를 그리기로 했는데, 각고의 노력을 기울인 끝에, 드디어 내가 담당한 페이지의 스케치를 끝냈다. 내 파트 중에서 가장 어려웠던 부분은 동기/비동기 함수의 타이밍이였다. 동기/비동기 개념은 과거에 실습하면서 대충 감을 잡았다고 생각했으나, 비동기적으로 동작하는 함수가 많아지니 이 타이밍을 잡는게 어려웠다. 아무튼, 이제 끝이 보이는것 같다. 배포하는 그 날 까지 화이팅. P.S) 지난 글에서 말하는걸 까먹었는데, 시리즈의 제목인 "솔로몬"란 우리 프로젝트의 이름이다. TIL 1. 함수 컴포넌트에 쓸 수 있는 useEffect Hook은 componentDidMount, componentDidUpdate, componentW..

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