React

React 18Django(Wagtail)Django Ninja프론트 엔드는 React를 사용했고 백엔드는 Django와 Django Ninja를 사용해서 구현했다.구글 클라우드 플랫폼에서 클라이언트 ID와 Secret Key를 생성한다.FrontEnd에서 Google

1) tailwind 처럼 클래스 방식2) Styled Component3) Style props4) className이벤트 핸들러 ex) onMouseOver, onClick등을 설정할 때, 함수명을 handler + 이름 형식으로 짓는다. (리액트의 관례)key값을

간단하게 리액트로 만든 토이프로젝트를 GitHub Page에 배포하는 방법에 대해서 정리한다.CRA (Create React App)로 만든 프로젝트를 배포한다.

강의App.tsxuseState를 사용하여 todo값을 설정을 통해서 todo 값은 string으로 타입 설정InputField.tsx

App.tsxmodel.tsinterface Todo 형식으로 배열을 받는다. 배열 각 요소는 Todo 형식으로 정의된다.

참고강의1) react cra를 생성2) 필요 모듈 설치3) 설정.prettierrc4) 스타일App.css -> App.scss로 변경

참고 문서

Nuxt.js에서는 css를 scoped를 통해서 지역 적용할 수 있었는데 React.js에서는 css in js를 사용하거나 module로 적용해야해서 불편했다. 그러던 도중에 react-scoped-css를 알게 되었고 내가 원하던 기능을 제공해서 설치방법을 간단하

Nuxt.js를 사용할 때, vuex를 통해서 상태관리를 진행하여 axios로 호출한 api 데이터들을 관리했다. React에서도 axios를 통한 api를 호출을 사용하려고 page에 데이터를 가져왔는데 페이지가 나올때마다 api를 호출해야하고 통신을 위한 코드로 함

단시간 아이돌봄 서비스 잠시맘의 mvp를 만들어 봤다. 서버는 아직 구현하지 못했고 React의 기능을 공부하면서 서비스를 만드는데 집중했다. 2022.09.05까지 구현하면서 배운 내용을 정리해본다.잠시맘컴포넌트나 모듈을 import 할 때, {}(중괄호)를 사용하는

참고문서

참고 강의Memoization을 뜻한다. 동일한 함수를 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음에 호출된 함수를 메모리에 저장해놓고 필요할 때마다 메모리에서 꺼내서 재사용한다. (맨처음 값을 캐쉬에 저장해서 꺼내쓴다.)함수형은 실행될 때마다 모든 변수가 초기

어떤 폴더에서 index.js 파일을 생성하게 되면 폴더의 default 파일로 설정이 된다.예를 들어서 components라는 폴더를 만들고 components/index.js를 만들게 되면 위와 같이 작성해주고이렇게 가져오면 된다.

컴포넌트가 아닌 전역적으로 상태를 관리하고 싶을 때, 사용한다. 위와 같이 createContext를 사용해서 전역으로 사용하고 싶은 변수나 함수를 저장한다.Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를