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

didSet을 어쩌다 만나게 됐냐면, 내가 참여하고 있는 iOS 스터디에서 맡은 파트를 구현하다 만나게 되었다. 내가 개발해야 하는 부분은 다음과 같다. 1. 화살표 버튼을 눌러 날짜를 바꾼다. 2. 날짜가 바뀔 때마다 data filter의 기준 날짜를 선택된 날짜로 바꿔준다. 3. 바뀐 filter의 날짜에 따라 이에 맞게 filtering 된 데이터들을 보여준다. 이때 데이터를 넘기고, 화면을 다시 그리는 과정에서 생각난 것은 delegate 밖에 없었다. 하지만 데이터를 넘겨도, 화면이 다시 그려지지는 않았다. 그러다 알게 된 것이 didSet이다. didSet이란 간단하게 이야기하면, 프로퍼티의 값이 새로 설정된 후 호출되는 코드이다. 즉, 값이 바뀌고 이에 대해 화면을 다시 그려줘야 하는 나에..

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

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