React 관련/프로젝트7 [React] figma 디자인 적용하기 피그마 디자인 적용로그인 페이지를 만드는데, 피그마로 디자인된 페이지를 리액트로 적용해야 할 일이 생겼다. 다음과 같은 디자인을 리액트에 적용해야하는데, 문제는 피그마 디자인이 제대로 되어있지 않고, 애니마를 통해서 리액트로 import 할 수는 있으나 결제를 해야한다... 그래서 CSS를 보고 디자인을 적용시켜야 하지만, 디자이너가 만든 것이 코드로 바로 적용이 될 수가 없지... 단순 적용만 하면 다음과 같이 괴작이 탄생한다... 다음과 같이 픽셀단위로 분석하고 알잘딱하게 코드를 짠다. 결과 완성!!참 쉽죠? 2024. 9. 11. [React] 우리집 고양이도 할 수 있는 카카오 로그인 구현(with firebase OAuth 2.0 소셜 로그인) React Firebase Kakao Authentification with OAuth 지난 글에서 구글 소셜 로그인을 해보았는데, 이어서 이번에는 카카오 소셜 로그인을 구현해보자. [React] 구글 로그인 기능 구현(with firebase 소셜 로그인 인증)React Firebase Google Authentification리액트로 구현할 때, 파이어베이스를 이용하면 구글과 같은 소셜 로그인 기능을 쉽게 구현할 수 있다고 해서 적용해보았다. 구현은 쉬우나, 정보가 별로 없어서 글ash9river.tistory.com 구글 소셜 로그인과는 다르게, 리다이렉션을 사용해서 만들 건데, REST API 방식을 활용한다. REST API 방식을 활용하기 때문에 스크립트 태그를 추가할 필요가 없다. 하지만.. 2024. 8. 12. [React] 구글 로그인 기능 구현(with firebase 소셜 로그인 인증) React Firebase Google Authentification리액트로 구현할 때, 파이어베이스를 이용하면 구글과 같은 소셜 로그인 기능을 쉽게 구현할 수 있다고 해서 적용해보았다. 구현은 쉬우나, 정보가 별로 없어서 글로 작성해보았다. 이번 글은 구글 로그인을 다루고, 다음 글에서 카카오톡 로그인을 다루겠다. 1. 파이어베이스 프로젝트 생성가장 처음에 할 일은 파이어베이스 콘솔로 가서 파이어베이스 프로젝트를 생성한다. 다음과 같은 이미지에서 프로젝트 만들기를 클릭한다. 프로젝트 이름을 입력하고, 구글 애널리틱스 설정을 사용할거냐 묻는데, 나는 연습 프로젝트이기에 사용을 안한다고 체크했다. 프로젝트 만들기를 클릭했으면 다음과 같이 홈이 나온다. 여기서 빌드>Authentification을 들어간다.. 2024. 8. 7. [React-Redux] 실제 프로젝트에 적용하고, thunk로 비동기 통신 구현 서론props drilling기본적으로 local state를 이용하는 useState나 기타 훅은, props를 다른 컴포넌트로 넘겨줄 수 있는데, 이때 props를 필요로 하지 않는 컴포넌트에서 props를 넘겨줘야 하거나 아니면 props를 너무 깊게(depth 관련) 전달하면 추적이 어려워진다.global state이에 따라서, 프로젝트에서 local state와 global state(App-Wide State)의 구분이 필요해지고, redux를 이용해야하는 상황이 발생하였다.global state를 구분하고, 그에 따라서, 상태 관리 라이브러리 중 하나인 redux를 활용하게 되었다.https://github.com/ash9river/React-Learned/tree/main/section19.. 2024. 5. 8. React 구글맵(googleMap) 최적화(with typescript) 지난 포스팅에서 useEffect 안에 ref.current를 업데이트 하는 방식으로 구글맵을 렌더링하였다.https://ash9river.tistory.com/36 React로 간단히 만들어보는 구글맵(with Typescript)구글 맵을 프로젝트에 이용하려고 했는데, 진짜 진짜 정보가 적어서 어떻게든 완성하였다.나는 @googlemaps/react-wrapper를 이용하였고, 기본적인 세팅은 다른 글에서 보았다. https://leirbag.tistory.com/158ash9river.tistory.com 그러나 이는 commit phase에서 React가 refs를 업데이트한 이후, componentDidMount의 시기에서 ref.current의 값을 변경하기에 비효율적이다. 이러한 문제를 타파.. 2024. 4. 26. React의 Typescript와 함께 data fetching(axios로 API 호출) Typescripttypescript를 사용함에 따라 기존의 코드에서 사용하던 axios가 어려워져버렸다... 기존의 자바스크립트를 이용한 axios는 간단하고 데이터를 쉽게 받아올 수 있었으나, Dynamically Typed Language라는 말에 걸맞게, 불러오는 데이터의 형식을 전혀 알 수 없었다. 다음과 같은 js 코드를 보자, 내 취향껏 짠 코드이다. 엄청 간단하고 명확하지만, 어떤 데이터를 주고 받는지 알 수 없다.import axios from 'axios';export async function getItems() { return new Promise((resolve, reject) => { (async () => { try { const res = awai.. 2024. 4. 21. 이전 1 2 다음
