윤민상 블로그

웹폰트는 무조건 사용하기 때문에 한번쯤 정리하고 싶었다. css 파일에서 @font-face로 옵션을 지정하고 font-familly에 지정한 웹폰트를 넣으면 끝이다. 예를 들면 아래와 같다. body { font-family: 'Noto Sans KR'; } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url('../assets/fonts/noto-sans/noto-sans-kr-v21-korean-regular.woff2') format('woff2') } 조금더 상세히 말해보면 font-style, weight를 각각 적어줘야 한다. 그래서 사용하는 font-weight에 따라 필요한 파일의 ..

바벨 웹개발자라면 최신 기술을 사용하고 싶다. 그런데 최신 기술을 지원하지 않는 브라우저(ie라던가... ie라던가... ie...)가 존재한다. 엄청난 최신 기술이 아니라 나온지 오~~래된 기술도 사용할 수 없는 브라우저들이 있다. 이런 경우에 어떻게 해야할까?? 옛날 기술을 사용한다... 라는 방법밖에 없었다. 없었다.. 라는 것은 지금은 아니라는 것인데 그 이유가 바로 바벨이다. 바벨은 자바스크립트 컴파일러인데 ECMAScript 2015+코드를 이전의 버전으로 바꿔주는 역할을 한다. 이 때문에 지금은 최신 문법을 간편하게 사용할 수 있는 것이다. 물론 우리가 설정을 해줘야 한다. 리액트 cra같은 경우는 이미 설정이 되어있어서 적용이 되는 것이고 바닐라 자바스크립트로 최신 문법을 사용하려면 설정을..

리액트란 리액트는 쉽게 말해서 사용자 인터페이스를 만들기 위한 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에서만) 시간여행이나 변화된 상태를 보는 것을 할수 있습니다...

redux는 react와 독립적인 라이브러리입니다. redux는 상태관리 라이브러리인데 react와 함께 쓰이기도 합니다. 리액트에서 리덕스를 쓰는 이유는 간단합니다. 리액트에서는 하위컴포넌트로 props를 전달할 수 있는데 이게 A부모에서 E부모까지 전달할려면 일일히 중간과정을 거쳐야합니다. 이를 막기 위해서 리덕스를 사용하는 것입니다. 리덕스는 상태를 관리해서 바로 E로 보낼수있습니다. 아래는 이고잉님의 생활코딩 강좌중 나온 그림입니다. 이를 토대로 다음글에 리덕스 사용법을 설명하겠습니다.