유령이 나오는 젤리하우스

STO 번역

해쉬 라우터와 브라우저 라우터의 차이점은 뭔가요?

원문 https://stackoverflow.com/questions/51974369/what-is-the-difference-between-hashrouter-and-browserrouter-in-react What is the difference between HashRouter and BrowserRouter in React? I am new to programming which makes things slightly difficult for me to understand if I read the official docs. I was reading about React Router 4 from here In this article, the author was talking ... stackoverf..

웹/일반

도와줘요!! Antd DatePicker에서 한글이 안나와요!!

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄 import 'moment/dist/locale/ko'🦄 🦄 import 'moment/locale/ko' 아님!!!🦄 🦄아주 황당한 일이 생겼으니 재미로 봐주세요🦄 본문 Dependency antd: ^4.19.5 moment: ^2.29.2 아시다시피, antd는 moment를 사용합니다. 모멘트가 사망선고가 내려진지 엉겁의 시간이 흘렀지만, 모멘트가 감히 사망할것이라 추측하지 못한 탓인지, 아니면 그간 정이 너무 들었던지는 몰라도 antd는 계속해서 moment를 사용하고 있습니다. API도 moment 객체를 기준으로 설명하고 있고요. 물론, 모멘트 사후 moment.js를 쓰는 Component를 Day.js로 바꾸는 방법도 소개하고 있는데, 이..

TIL

(21.07.27) material-ui 스타일 && react-router-dom with TS

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서 react-router를 사용할때, match / history / location 객체를 사용하기 위해서는 RouteComponentProps를 import 해야한다.🦄 🦄만약, match의 params에 넣어서 전달해줄 props가 있다면, 그 props의 interface도 설정해줘야한다 🦄 🦄material-ui 적용환경에서 css를 먹이는 방법은 1.inline style 적용 2. makeStyles hook 사용, 3.styled component 라이브러리 사용🦄 RouteComponentProps React를 TS로 짜면서 제일 거지 같은 점은 역시 타입 지정을 안해주면 에러를 가차없이 뱉는다는 점이다. 타입체크를 통..

토이 프로젝트/With React

[토이 프로젝트] 셜록 : 보드게임 탐정 -完-

앱 이름을 솔로몬에서 셜록으로 바꿨습니다. 솔로몬이라는 이름은 찾아준다는 느낌보다는 판결하고 결론 내리는 느낌이 강해 앱 목적을 잘 전달하지 못했습니다. 최적의 보드게임을 "찾아"준다는 느낌을 더 살리고 싶었기에, 탐정 "셜록 홈즈"의 이름을 따와, 현 상황에 딱 맞는 보드게임을 "찾아준다" 라는 느낌이 사용자에게 전달되도록 하였습니다. 시험해보기 : https://seongnam-citizen-developers.github.io/scaling-journey/ 셜록 : 보드게임 탐정 seongnam-citizen-developers.github.io 깃허브: https://github.com/Seongnam-Citizen-Developers/scaling-journey 후기 계속 미루고 미루고 미루고 ..

토이 프로젝트/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)) } ..