frontend
-
[styled-component] ThemeProvider로 다크모드 구현해보기!Front-end/React 2022. 4. 13. 19:08
안녕하세요! 오늘은 styled-components의 ThemeProvider를 통해 간단하게 다크모드를 구현해보도록 하겠습니다! 중간에 recoil이 잠깐 등장하는데! recoil이 궁금하신 분은! 🧐 https://sangjuntech.tistory.com/27 [상태관리, Recoil] Recoil을 사용해보자! 안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개 sangjuntech.tistory.com 여기에서 recoil에 대해 알아보면 좋을 것 같습니다 ㅎㅎ 👀 자 그럼 같이 ThemeProvider를 알아볼까요! 우선 ThemeProvider..
-
[Typescript, Array] interface Array type 지정해보자!Front-end 2022. 4. 10. 18:06
안녕하세요! 오늘은 프로젝트 도중 Array 타입지정을 하는 방법을 알아보겠습니다! 🥷 우선 기본적으로 interface는 object를 다룹니다. interface IFood { name: string; leftTime: string; } 이런 식으로 말이죠! 그렇다면 이 인터페이스를 배열에 사용하고 싶으면 어떡해야할까요? 우리는 이 오브젝트를 가진 배열을 타입으로 지정해줘야 한다면 우리는 어떠한 행위를 해야할까요?! 🤔 그 것은 바로 IFood를 가지는 Array를 새로 만들어주어야 합니다! 한 번 코드로 확인해봅시다! interface IFood { name: string; leftTime: string; } interface IFoods extends Array {} 자 우린 IFood objec..
-
[상태관리, Recoil] Recoil을 사용해보자!Front-end/State management 2022. 4. 8. 18:46
안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개인적으로 리덕스의 작동 방식이 너무 복잡하다고 느껴서 Recoil을 상태관리에 이용해볼려고 하고 있습니다! 물론, 대형 프로젝트에서 Redux는 그 힘을 충분히 발휘할 수 있겠지만, 소규모 프로젝트와 토이 프로젝트를 할 때에는 오히려 걸리적거리더라고요! 하지만 Recoil은 react hooks와 비슷한 재질(?) 이라는 느낌이 들어서 사용하는데 어색하지도 않고 직관적이라 개인적으로 좋은 것 같습니다! 저는 recoil을 연습하기 위해, 다크모드가 있는 간단한 투두 앱을 구현해보았습니다 😀 https://6..
-
[Prettier, ESLint] Prettier을 세팅해보자!git,협업 2022. 4. 8. 16:21
안녕하세요! 오늘은 Prettier를 초기 세팅해보고, ESLint와 함께 사용하는 법을 알아보도록 하겠습니다. 🥳 우선 Prettier란 무엇일까요? Prettier는 우리가 작성한 코드를 아름답게(?) 만들어 주는 확장 프로그램 입니다! 우리가 미처 신경쓰지 못한 들여쓰기, 쿼트 등을 정의한 스타일로 Prettier가 만들어 줄 것 입니다. 우선 Prettier를 다운로드 받아 보도록 합니다! npm install -D prettier eslint-config-prettier eslint-plugin-prettier 우리는 Prettier를 eslint와 함께 사용할 것이기 때문에 관련 플러그인도 같이 다운로드 받아주도록 합니다! (editer.formatOnSave는 빼주세요!) 다운로드를 완료 했..
-
[this, 화살표 함수] Javascript this 완전정복!javascript 2022. 3. 31. 16:43
안녕하세요! 오늘은 좀 개념적인 부분인 자바스크립트의 this에 대해서 알아보도록 하겠습니다. 우선 this는 생성자 혹은 메소드에서 객체를 가리킬때 쓰입니다. this 때에 따라 다른 값을 가리킵니다. 어디에서 선언되냐에 따라서 그 값이 바뀝니다. global scope 에서 사용될 때 this 는 전역 객체를 가리킵니다.(window 객체) 함수에서 사용될 때에도 this 는 전역 객체를 가리킵니다. 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킵니다. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 전역 객체를 가리킵니다. 생성자에서 사용될 때 this 는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다. 글로써 보는 것보다 코드와 함께 설명하면 훨씬 이해하기 ..