ram2 🚗

react로 만든 프론트를 배포하기 위해 netlify를 가입하고, 깃허브로 프로젝트를 연동하였다. 하지만, 자꾸 알 수 없는 에러들이 뜨는 것이었다. 나는 react를 잘 알지 못하기 때문에, 뭘 해야하는지 알지 못했다. 그래서 내가 겪었던 시행착오들을 정리해보려 한다. 🐻 build 폴더 생성하기 npm run build 해당 코드를 실행하면 자동으로 build 파일이 생성된다. 🐻 Failed during stage "Reading and parsing configuration files": When resolving config: Base directory does not exist: /opt/build/repo/velog_front 에러 해결하기 해당 에러는 나의 실수로 발생한 에러였다. 깃허브..

🖥️ 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..