윤민상 블로그

배경 요즘 모노레포에서 이것저것 작업을 하고 있다. 그러다보니 자연스럽게 공통 디자인 컴포넌트들이 필요해서 하나씩 만들고 있다. 지금까지 버튼, 스피너를 만들었고 그 다음으로 인풋을 만들려고 하다가 갑자기 툴팁에 관심이 생겨서 이것부터 만들어보기로 했다. 인풋의 우선순위가 높은 것은 사실이지만 지금 나는 정해진 시간동안 프로젝트를 완성해야하는 상황이 아니다. 그냥 관심가는게 생기면 다른걸 제쳐두고 하는 편이다. 툴팁이 뭔데? 툴팁은 조금 생소할수도 있어서 간단하게 먼저 설명을 하고 넘어가겠다. 우리가 버튼을 호버했을 때 설명을 도와주는 ui가 나타나는 경우가 있다. 이게 바로 툴팁이다. 깃허브에서 사진을 하나 가져와봤다. 어떤 방법으로 구현할까? 들어가기 전에 정말 중요한 것 하나만 생각해보자. 일반적으..

svg를 string으로 불러오기 ~~.d.ts에 아래와 같이 string으로 불러오고 이미지 태그안에 src로 넣으면 svg를 사용할 수 있다. declare module '*.svg' { const value: string; export = value; // } 그런데 svg태그 자체가 필요한 경우가 있다. 예를 들어 fill을 한다던가... 그럴때는 조금 설정이 필요하다. svg 자체 태그를 불러오기 먼저 웹팩 간단한 웹팩 설정이 필요하다. yarn add -D @svgr/webpack { test: /\.svg$/, use: ['@svgr/webpack'], }, 그리고 d.ts를 아래와 같이 변경해야 한다. ~~.d.ts declare module '*.svg'; 마지막으로 불러올 때 다음과 같..

배경 테스트에 최근에 관심이 생겨서 백엔드는 해봤는데 프론트 개발자가 프론트 테스트를 제대로 해보지 않았다. 그래서 차근차근 조금씩 학습할 예정이다. 프론트엔드에서 테스트가 필요한 이유 백엔드는 당연히 테스트가 필요하다. db에 접근하기 때문에 실수가 나오면 안되고 ui를 보고 직접 테스트하는게 불가능하기 때문에 어차피 수동으로 테스트를 해볼려면 일일히 postman을 이용해서 하나하나 테스트해봐야 한다. 그리고 많은 쿼리가 들어오면 서버가 터지기도 하기 때문에 진짜 필수다. 그런데 프론트에서도 필요할까??? 사실 간단한 프로젝트에서는 필요하지 않다. 그냥 버튼 몇 번 클릭해보면 눈으로 확인 가능하니 말이다. 하지만 프로젝트 규모가 커지고 실제로 배포해서 사용자가 있는 서비스에서는 사소한 오류라도 나와서..

리액트란 리액트는 쉽게 말해서 사용자 인터페이스를 만들기 위한 Javascript 라이브러리다. 그런데 리액트는 사용자 인터페이스를 만드는 여러 라이브러리 중에 하나일 뿐인데 왜 모두 리액트에 열광하는 것일까? 먼저 리액트는 대표적인 SPA(SinglePageApplication)이다. SPA를 처음 접한다면 충격적일 것이다. SPA는 말 그대로 하나의 페이지로 된 어플리케이션이라는 말이다. 즉 HTML 파일이 하나인 어플리케이션이다. 그렇기 때문에 새로고침 현상 즉 깜빡거리는 현상이 없어진다. SPA라는 조건 한가지 때문에 리액트를 사용하지는 않는다. 바닐라자바스크립트로 간단한 프로젝트를 만들고 리액트로 프로젝트를 만들어본 사람은 리액트의 편리성과 이점들을 알게된다. 리액트의 특징 1. Virtual ..

jsconfig.json ctl + space { "compilerOptions": { "target": "es6" } } 뒤로가기 막아버려 componentDidMount() { //이것을 설정하고 나면 페이지에 변화가 생기려고 할 때마다 정말 나갈 것인지를 질문함 this.unblock = this.props.history.block("정말 떠나실 건가요?"); } componentWillUnmount() { //컴포넌트가 언마운트되면 질문을 멈춤 if (this.unblock) { this.unblock(); } } useEffect(() => { console.log(history); const unblock = history.block('정말 떠나실건가요?'); return () => { unb..

보통 react에서 서버에 axios로 요청을 한다. 그때 react와 서버에 각각 작업을 해줘야 한다. 이 글은 같은 컴퓨터의 다른포트로 사용하는 법을 적었다. 먼저 react에서 서버에 연결하기 위해서는(CRA사용 기준) package.json에 "proxy": "http://localhost:3001", 이렇게만 입력해주면 된다. proxy에 대해서는 다른 글에서 올리겠다. express에는 const corsOptions = { origin: "http://localhost:3000", }; app.use(cors(corsOptions)); 이렇게만 입력하면 된다.

이 글은 리액트와 리덕스를 모르면 이해하기 힘듭니다. 리덕스를 모른다면 아래글을 읽고 와주세요 https://ms3864.tistory.com/60 리덕스(redux) 사용법1 먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for J.. ms3864.tistory.com 기본 틀을 먼저 설명하겠습니다. react와 redux모두 state를 가지고 있습니다. 그래서 헷갈리면 안됩니다. react는 하위컴포넌트로 state를 props로 넘겨서 상태관리를 하는데 redux는 store에서 모든 state를 관..

먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Get Started를 누르면 시작하는 법이 나와있습니다. 오늘은 간단히 html로 할것이기 때문에 npm install은 사용하지 않고 위에 코드만 붙여넣기 하시면 됩니다. 그리고 redux devtools를 검색하셔서 깔면(chrome에서만) 시간여행이나 변화된 상태를 보는 것을 할수 있습니다...