아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.Access Token과 Refresh Token은 어디에 저장해야할까?브라우저에서 변수는 네 가지 공간에 저장이 가능하다.쿠키로컬스토리지세션스토리지메모리이 때 메모리에 값을 저장하려면 웹앱의 로컬변수를 사용해서 값을 저장해야→ 이 방식을 사용하면 자바스크립트 코드로 접근이 불가능→ 또 하나 기억해야 할 특징은 새로고침을 하면 내부 변수가 초기화됨 자바스크립트 코드로 접근이 가능한 쿠키, 로컬스토리지, 세션스토리지→ XSS 공격에 취약(다만 쿠키의 경우 HttpOnly 속성을 추가하면, 자바스크립트로 접근할 수 없는 쿠키 생성 가능) 출처: https://velog.io/@iamtaehoon/sagah Refresh Token → HttpOnly..
아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.API endpoint의 뜻은?→ 요청을 보내고자하는 URLAxios와 Fetch의 차이1. 에러 처리axios와 fetch는 둘 다 Promise를 이용해 비동기 요청을 처리 axios: 네트워크 오류가 발생하거나, HTTP 상태코드가 200~299가 아니면 Promise를 reject 시fetch: 네트워크 오류가 발생했을 때만 Promise를 reject-> axios처럼 상태 코드가 200~299 사이가 아닐 때도 에러 처리를 하고 싶다면, Response.ok를 활용해야 2. 헤더axios는 요청 헤더에 ‘Content-Type: application/json을 자동으로 추가(fetch는 직접 추가해야) 브라우저 환경에서 Content..
상태관리에 대한 접근 방식은 크게 3개로 나눌 수 있다.Flux (Redux, Zustand)Proxy (Mobx, Valtio)Atomic (Jotai, Recoil)(출처: https://velog.io/@ggong/상태-관리를-위한-라이브러리-jotai) 1. FLUX 방식(이미지 출처: https://velog.io/@alskt0419/FLUX-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80) FLUX는 Facebook에서 개발한 애플리케이션 아키텍처이 패턴은 클라이언트-사이드 웹 애플리케이션을 구축하는 데 사용되며, 특히 단일 페이지 애플리케이션에서 유용하다.FLUX는 다음 네 가지 주요 구성 요소로 구성:Dispatcher: 모든 데이터 흐름을 관리하는 중앙 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.1. Link와 useNavigatea 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜준다.a 태그와 Link 차이a : 외부 프로젝트로 이동하는 경우Link : 프로젝트 내에서 페이지 전환하는 경우가. Link클릭 시 바로 이동하는 로직 구현 시에 사용ex) 상품 리스트에서 상세 페이지 이동 시Link를 사용한 경우에는 렌더링 된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있음to라는 속성을 통해 이동할 경로를 지정한다는 점은 a 태그와 비슷하지만 실제로 해당 링크로 이동하는 대신 에 지정된 컴포넌트를 렌더링v6부터는 Link로 props를 전달하지 못함나. useNavigate페이지 전환 시 추가로 처리해야 하는 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.1. React Hook이란?함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리 규칙1. 최상위에서만 Hook을 호출해야한다.→ 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 규칙2. 리액트 함수 내에서만 Hook을 호출해야 한다.→ Hook은 일반적인 js 함수에서는 호출하면 안된다. 출처: https://choijying21.tistory.com/60 React Hooks = 독립적인 state 데이터 조작 API useState = 독립적으로 데이터를 관리할거야useEffect = 독립적으로 side-effect를 관리할거야useMemo = 독립적으로 데이터 캐싱을 관리할거야useCallback = ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.6주차 영상을 올리고 나서, OOO 파트장님이 제가 올린 코드들을 리팩토링해주셨습니다 XD그리고 파트장님이 어떤 부분이 리팩토링해주셨는지 전부 비교 분석해서 알려주셨습니다!! 그러면 코드가 어떻게 바뀌었는지, 전후 코드들을 비교해보면서 같이 살펴볼까요? 1. InputBar 컴포넌트에 product props를 내려주는 이유?비어있는 product 객체를 생성하고 이를 사용해서 값을 채워주려고 만든 것 같은데, 이렇게 하면 확장에 유연하지 못하다.구현체가 아니라 인터페이스를 기반으로 구현하는 것이 바람직하다(객체지향 기본 원칙) 그리고 이 구현체를 FilterableProductTable에서 생성해서 내려줄 이유가 없어보인다. 응집도 측면에서 In..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 1. 클래스형 컴포넌트가 함수형 컴포넌트로 대체된 이유class ProfilePage extends React.Component { showMessage = () => { alert(`${this.props.user} 를 팔로우 했습니다`); } handleClick = () => { // const {user} = this.props; 이렇게 미리 할당해둬서 해결은 가능 // setTimeout(() => this.showMessage(user), 3000); setTimeout(this.showMessage, 5000); // this.showMessage 대신 user 넣으면 해결 가능 } render() { return Fol..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.DefinitelyTypedDefinitelyTyped 프로젝트는 일종의 자원봉사 프로젝트→ 여러 개발자들이 자발적으로 자바스크립트 모듈의 타입을 추가해주고 있다.→ 이렇게 추가된 타입은 npm 을 통해 다운받을 수 있다.→ IDE 에서 자바스크립트 모듈에 대한 타입 지원이 가능해진다. 출처: https://jake-seo-dev.tistory.com/209@types 라이브러리@types 라이브러리는 TypeScript를 사용하여 JavaScript 라이브러리를 사용할 때 필요한 타입 정의를 제공하는 라이브러리→ JavaScript 라이브러리의 API에 대한 타입 정보를 TypeScript에 제공하여, TypeScript 컴파일러가 타입 검사를 ..
(※ 이 내용은 아직 정확하게 구현되는지 검증되지 않았습니다! 백엔드와 소통없이 프론트에서 독단적으로 작성한 것이니 참고만 해주세요!!!) 로그인을 구현할 때, 1. 단순히 백엔드한테 구글로부터 받은 인가코드를 보내면 2. 받은 토큰을 localStorage에 저장하는 방식으로 구현했었다. 하지만 이 방식은 보안을 고려했을 때 좋은 방법이 아니다. localStorage에 토큰을 저장하는 것은 권장되는 방법이 아니다. 따라서 아래와 같은 방법으로 수정하려 한다. 로그인을 하면 서버는 클라이언트한테 Access Token과 Refresh Token을 받음 Access Token은 전역 변수로 관리(Zustand 활용), RefreshToken은 httpOnly 쿠키로 서버로 부터 받음(이 때 서버와 클라이..
오늘 GDSC에서 주최한 'kprintf'라는 행사를 다녀왔다. 디스코드에서 kprintf라는 행사가 열린다는 것을 확인하고 무슨 주제에 대한 강의가 열리는지 살펴봤다. 다양한 주제들이 있었는데 그 중에 React에 대한, 정확히는 React 버전이 19로 업데이트되면서 어떻게 바뀌는지 알려주는 강의가 있길래 바로 신청했다. React를 사용해본 적은 꽤 있지만 버전이 몇인지, 또 최신 기능은 무엇인지에 대한 관심은 갖지 않았었다. 이번 세션을 통해 React에 대하여 더 깊은 이해도를 가질 수 있기를 기대했다. 이번 학기에(사실 저번학기도) 신공학관에서 수업을 듣지 않기에 정말 오랜만에 신공학관을 방문한 것 같다. 입장권 QR코드를 체크하고 학번과 이름을 작성했다. 그리고 위 사진과 같이 경품을 받았다..
