본문 바로가기

🔑Code/React6

React | REST API를 이용한 Kakao 소셜 로그인 기능 구현 2차 프로젝트 '뮤즈'에서는 빠르고 간편한 서비스를 제공하려는 목적도 있었고 다른 웹에서 많이 쓰이는 외부 API를 써보고 싶기도 해서 카카오 소셜 로그인 API를 연동하는 방식을 선택해서 진행했다. 카카오 API 로그인 Flow 1. 카카오 로그인 창을 클라이언트에게 보여준다. 2. 클라이언트는 로그인 3. 동의항목 체크하고 카카오 API 서버에 로그인 정보를 넘긴다. 4. 카카오 API 서버는 전달 받은 정보를 확인하고 서비스 서버의 Redirect URI로 인가코드를 발급해준다. 5. 인가코드를 통해 카카오 API 서버가 로그인 유지할 수 있는 토큰을 발급한다. 우리 팀은 어디까지 프론트가 하고 백엔드가 어디서부터 맡아 할지 정했다. 📌 여기서 주의할 점은 토큰을 카카오 서버로부터 받지만, 토큰을 .. 2023. 5. 14.

React | useEffect() 를 써보자 리액트의 함수 컴포넌트에서는 side effect를 발생시키고자 했을 때 아래 코드처럼 함수를 return문 위에 만들어 호출하면 어떨까? 렌더링 순서는 sideEffect가 함수가 실행되고 리턴할 값이 나온다. const Component = () => { const sideEffect = () => { 사이드리팩트 실행 내용; }; sideEffect(); return ( 리턴할 값 ); } 여기엔 두 가지 문제점이 생긴다.1.side effect 가 렌더링을 Blocking 한다. 코드는 위에서 아래방향으로 실행된다. sideEffect라는 함수가 시간이 오래 걸리는 함수라면 side effect가 끝나기 전까지 브라우저 상에서는 UI가 렌더링 되지 못하고 멈추게 될 것이다. 사용자가 화면에 UI가.. 2023. 3. 28.

React | UseEffect() 를 쓰는 이유 state, props 를 활용해 원하는 UI 화면을 렌더링할 수 있지만 원하는 화면을 완전히 구현하기에 부족함이 있다. 📌useEffect 가 필요한 이유는 ?화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나 이벤트 리스너를 등록하고 해제하는 등 동작을 해야되기 때문이다. useEffect를 쓰면 원하는 타이밍에 Side Effect를 일으킬 수 있다. 📌그럼 Side Effect는 뭘까?부작용이라는 뜻을 갖고 있지만 좀 더 풀어 말하면 부수적인 효과라고 할 수 있다. 코드에서 주요한 효과에 따라서 발생하는 추가적인 효과라고 한다. 함수에서 자주 사용되는데 Input 을 받아 Output 을 산출하는 것 이외의 모든 동작을 말한다. 순수 함수 :.. 2023. 3. 28.

React | 댓글 숨기기 기능 구현 React의 State와 props 파트가 너무 어려워서 주어진 과제 하나하나 해나가는데 애먹었다. 연습을 위해 이번주에 받은 과제 중 가장 어렵다고 느껴졌던 댓글 숨기기 기능 구현에 대해 다시 보려고 한다. 📌최종 화면 댓글 숨기기 기능 구현 완성 화면 1.처음 구현하기 전 코드 디폴트 화면에 대한 코드는 이렇다. 이제 여기서 state를 주고 숨기기 기능을 구현해야 한다. import React, {useState} from "react"; import "./Review.scss" const Review = () => { return ( jiyeoun 골프공, white 색상 구매 배송도 빠르고 정말 좋아요. 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같.. 2023. 3. 26.

이전 1 2 다음

티스토리툴바