본문 바로가기

분류 전체보기62

[02NOV, 2021] TIL 벌써 11월이라니! 연말이 와버렸다..! 남은 2021년도 빠샤빠샤(*•̀ᴗ•́*)و ̑̑ 오늘의 TIL은 간단히만 작성하고 canvas는 다음에 따로 작성해보려 한다! ✔️ Canvas Canvas를 저번주에 처음 사용해보았다. 노마드 코더에서 그림판 만들기를 Canvas를 활용해서 만들었고, 어제와 오늘 좀 더 찾아보면서 여러 도형들을 만들어 보았다. 신기하고 재미있었고, 아직은 기초적인 것만 해보아서 좀 더 다양한 것도 canvas를 활용해 만들어보고 싶다. ✔️ 위에서 말한 그림판 만들기를 하면서 range 타입을 처음 사용해보았다. 속성은 최솟값, 최댓값을 나타내는 min, max와 간격을 나타내는 step을 사용하였다. ✔️ redux-saga 오늘 리액트 다루는 기술을 다시 보면서 redux.. 2021. 11. 2.
Random background Image 페이지에 백그라운드 이미지가 랜덤으로 보이게 해 보았다. 대화를 하다 아이디어를 얻었고 좋은 것 같아서 만들어보았다. 새로고침 할 때마다 이미지가 바뀌며, 시간이 지나면 안내 메세지는 사라진다. (아래의 gif는 블로그 포스팅을 위해 용량을 줄여 화질이 낮다.) 그럼 오늘은 간단히 어떻게 만들었나 정리해보겠다 🎵 ✔️ Math 메서드를 이용해 랜덤 숫자 반환 우선 이미지 소스들을 배열로 모아 놓았기에 이 중에서 랜덤으로 이미지들을 선택해야했다. 그렇기에 먼저 랜덤 숫자를 구하기 위해 Math.random과 Math.floor를 사용했다. * Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사 난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. *.. 2021. 10. 9.
[29SEP, 2021] TIL TIL은 쓸 때마다 오랜만인 것 같다..🤭 가끔씩이라도 꼭 쓰려고 노력해야겠다..! ✔️ SCSS 파일 분할 그동안 CSS Module을 사용해서 해당 클래스 이름들이 고유하게 만들어 사용했는데 다른 방법도 있지 않을까 하고 찾아보다 @import해주는 방법도 알게 되었다. CSS Module은 scss파일 확장자를. module.scss로 해주고 스타일을 줄 해당 컴포넌트에서 import styles from"./이름.module.css"; import를 해주면 되었다. @import 방법은 스타일 파일 이름 앞에 _를 붙여(_button.scss와 같이) @import로 가져오면 된다. 그래서 나는 다른 파일들을 App.scss에 @import해주었고 스타일이 모두 잘 적용되었다. 이 방법은 clas.. 2021. 9. 29.
React i18n-next를 이용한 다국어 처리 국제화할 수 있는 react i18n-next (i18next is a very popular internationalization framework for browser or any other javascript environment)를 다국어 처리를 위해 사용해보았다. 공식문서가 잘 되어 있어서 큰 어려움 없이 사용할 수 있었다. 그래서 오늘은 i18n-next에서 내가 기억하고 싶었던 부분을 정리해보겠다. ✔️ 폴더 분리 가장 먼저 폴더를 분리해줘야 한다. 언어는 locales폴더명을 사용하기에 src -> locales -> en, kr로 폴더를 분리해 해당 언어에 맞는 json 파일을 만들었다. ✔️ init options 각 언어의 json 파일이 준비되고 init을 해주면 된다. init 옵.. 2021. 9. 16.

티스토리툴바