🖥️ ThemeProvider ? 지정된 디자인 시스템을 모든 코드에서 사용하기 위해서는 어떻게 해야할까 !? 그때 사용하는 것이 ThemeProvider이다. React 컴포넌트에서 테마에 대한 정보를 제공하는 역할이라고 한다. 이를 사용하면 하위 컴포넌트에서 공통 theme을 사용할 수 있다. 색상값은 props를 통해 전달한다. 🖥️ 어떻게 사용할까? 1. theme 파일을 만들고, 해당 파일에 색상을 지정한다. 다음은 내가 지정한 theme 색상이다. // styles/theme.js const theme = { colors: { background: "#121212", text: "#ececec", primary: "#63e6be", primary2: "#62E6BE", white1: "#F1F..

이전에 react에서 제공하는 dropdown 라이브러리를 사용하여 커스텀 한 적이 있다. 하지만 내가 이번에 만들어야 하는 드롭다운은 해당 라이브러리를 커스텀해서는 할 수 없었다. 약 20분정도 해보고 안되니 다른 방법을 찾아보기 시작했다. 내가 하고 싶은 건, 아이콘을 눌렀을 때 드롭박스가 나오는 것이었는데 이러한 라이브러리를 찾아봤으나, 구독을 하거나 돈을 내야 사용할 수 있는 부분이었다. 고민 끝에 그냥 만들기로 했다. 대략적인 생각은 다음과 같다. 1. 아이콘 버튼을 생성한다. 2. 버튼을 클릭 했을 때 dropdown을 보여준다. 3. dropdown 컨테이너 안에 각 list에 라우터를 연결해 원하는 페이지로 이동시킨다. 1. 아이콘 버튼 생성하기 이부분은 완전한 ui 영역이기에 그냥 내가 ..

react에서 드롭박스 버튼 만들기 어쩌다 하게 되었냐면, 최근 학교에서 방학 중 진행하는 웹 서비스 캠프에 참여하고 있다. 개발 언어, 툴 등을 자유롭게 선택할 수 있기에 나는 프론트는 리액트로 개발하겠다 결정하였다. 현재 직접 프로젝트를 기획하여 새로운 서비스를 만들 수 있고, 실제 있는 서비스를 클론할 수도 있다. 동아리를 통해 기획의 과정이 얼마나 어렵고 힘든지를 알고 있었기에 나는 클론코딩을 선택하였다. 이번 캠프에서의 목표는 다음과 같다. 웹 서비스가 만들어지는 전체적인 과정을 익히는 것. (프론트부터 서버까지) 이를 위해 Velog를 클론코딩하기로 결정하였다. 서론이 길었는데, 클론코딩을 하다보니 드롭박스를 사용해야 할 일이 있었다. 사용하기만 하면 되는 것이 아니라, 디자인도 커스텀하는 과..

리엑트.. js, html, css 이 중 그 어느 것도 배운 적, 접한 적 없었지만... 굉장히 짧은 시간에 리엑트를 공부해야만 했다. 주어진 시간에 js부터 배우고, 차근차근 강의를 들으며 공부했다. 하지만.... 제대로 이해하고, 실전에 사용하기에는 자신감과 지식이 턱없이 부족했다. 이번 프로젝트를 돌아보면 거의 실전에 부딪히며 배웠던 것 같다. 그 중 리엑트로 마크다운 에디터와 뷰어 구현하는 부분을 정리해보려고 한다. 너무나 다행히 많은 사람들이 포스팅을 해두었고, 너무나 편리한 패키지가 있었기에 아주 쉽고 간단하게 사용할 수 있었다. 물론 뷰어를 하는 것에 있어 아주 오랜 시간 삽질을 했다는 것...은 잊지 못할 것 같다...하하 1. install npm i @uiw/react-md-edito..

state props . . 특정 코드들이 첫 번째 component render에서만 실행되게 하자. 처음 한 번만..!! 나중에는 상태가 변해도 실행되지 않도록. 우리가 state를 변경할 때 모든 code가 다시 실행된다. 하지만 그럴 필요가 없을 경우!! 어떻게 해야할까? useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다. ex) useEffect(function1, []) 두번째는 ... 마법같다....? 결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 한 번만 실행해도 되는 것들을 다루는 함수이다. 두 번째 argument는.. 이럴 때 사용한다. 특정한 부분이 변..