Base64 Base64는 바이너리 데이터를 ASCII 문자열로 변환하는 인코딩 방식입니다. 이 방식은 바이너리 데이터를 텍스트 형식으로 안전하게 전송하거나 저장할 수 있게 해줍니다. Base64는 주로 이메일 메시지의 첨부파일, 웹에서 이미지 데이터를 전송하거나, 복잡한 정보를 URL 안에 인코딩하는 데 사용됩니다. Base64 인코딩은 바이너리 데이터를 6비트 단위로 잘라서 64개의 인코딩된 문자 중 하나를 대응시킵니다. 만약 입력 데이터의 길이가 6비트가 안되어 공백을 채워야 한다면, 패딩 문자 '='가 추가됩니다. 예제 : Base64를 HTML 소스로 바로 입력해보자 Base64 Encoded Image An image from Base64 data: img 태그의 src 속성에서 "data:i..
DEV/Frontend
Intro. 무슨 문제가 있었는가 Login을 하지 않고, 바로 회원 등록 페이지인 register로 리다이렉팅 되는 것을 구현하던 중 발생한 문제 해결 방법이다. if (googleAuth == null || googleAuth?.status == "REGISTER") { navigate("/"); } Hook을 써서 유저를 판단하고 페이지 접근을 제어하는 모듈이 따로 존재하기에, 위의 코드처럼 register 페이지에 navigate(“/”)를 붙였더니 에러가 발생 했다. Can’t perform a React state update on a component that hasn’t mounted yet 에러인데, 요약하면, 렌더링하는 동안 state에 접근하면 안된다는 것이다. 내가 작성한 코드 흐름..
문제 상황 회원 가입 폼을 만들던 중 발생한 문제이다. 로컬 스토리지에 값이 저장 되지 않는다 SSO 로그인을 해서 구글에서 유저 정보를 가져오면, 로컬 스토리지에 저장한다 그 후, 회원 정보를 등록 할 때, 저장된 정보를 가져오는 단순한 로직이다 로그인 페이지 setStorage("#user", JSON.stringify(data)); getStorage/setStorage // Function to store a string value in local storage using AES encryption export function setStorage(key: string, value: string) { const storage = new LocalStorage(); // Create a new ins..
Intro. 왜 쿠키가 저장 되지 않는가? 개발자 도구의 애플리케이션에 서버에서 보낸 쿠키가 저장되지 않는 문제가 발생했다 처음에는 쿠키를 서버에서 보내지 않는건가 싶어 개발자 도구의 네트워크를 켜서 쿠키가 같이 오는 것을 확인했다. 서버에서는 쿠키를 잘 보내주고 있었다 나의 경우 fastify 백엔드 서버와 react가 별도로 구동 되고 있었다. 두 애플리케이션 간의 연결은 axios를 사용하였다. 이번 게시물에서는 무엇이 문제였는지 해결하는 과정을 기록한다 SameSite=None 및 Secure 속성 설정 개발자 도구의 네트워크 부분을 보는데 노란색 경고가 뜨고 있었다. cookie의 SameSite 속성을 default 값인 lax로 설정했다는 것이다 SameSite는 웹 애플리케이션에서 CSRF..
Intro. State 상태란 무엇인가 리액트에서는 변수를 사용하는 방법이 다양하다. 구글에 검색해보면, state를 설명 할 때에 변수 즉 데이터를 저장하는 공간으로 자주 설명하는 것을 볼 수 있다. React docs에서는 State: A Component’s Memory라 소개하고 있다. 구성 요소들의 저장 공간이란거다 화면을 구성하 고 있는 요소들은 유저와 상호작용 할 때에 표시 되는 값이 바뀌는 경우가 있다. 리액트에서는 이러한 변화하는 요소들의 값을 저장한다는 개념에서 state를 사용한다 굳이 State를 써야하는가? 우리에겐 변수가 있는걸 React docs에서 좋은 예시가 있어 들고 왔다 import { sculptureList } from './data.js'; export defaul..
Uncaught Error: Rendered More Hooks Than During the Previous Render. 해당 에러는 회원 가입 처리를 할 때 데이터 list를 select option으로 뿌리려고 할 때 발생한 에러이다. 에러를 직역하면 이전 렌더링 보다 많은 hook을 렌더링했다는 것이다. 에러 해결 const { isLoading, isError, data, error } = getCampusListQuery(); useEffect(() => { campusListFunc(); }, []); const userListFunc = () => { if (isLoading) { // console.log("isLoading"); return ; } if (isError) { consol..
Google Cloud Platform에서 OAuth 설정 먼저하자 구글 클라우드 콘솔에서는 OAuth 동의화면과 사용자 인증 정보를 등록해야 한다. OAuth 동의화면 먼저 OAuth 동의화면에서는 앱 이름, 사용자 지원 이메일과 로고 등을 설정한다. 다음은 범위(scope)를 설정해야 한다. OAuth2를 사용하여 유저 정보에 접근 할텐데 어떤 정보에 접근 할지 알아야 한다. 추후 쿼리 날릴 때 파라미터로 날려야하므로 기억하자 마지막으로, 테스트 사용자에 자신이 사용할 email을 미리 등록한다. 팀원들이 있다면 팀원들도 등록해주자. 사용자 인증 정보 구글 클라우드 콘솔의 API 및 서비스 - 사용자 인증 정보 - OAuth2.0 클라이언트 ID에서 계정을 하나 생성해주자. 사용자 인증 정보에 등록하..
문제 상황 Box 컴포넌트 출력은 되는데 Each child in a list should hava a unique “key” prop. 에러가 발생 했다 해결 방안 해결 방안은 단순하다. li 컴포너트에서 unique한 키 값을 원하는데 아래 코드로 생성할 경우 unique한 키 값이 없다. 아래와 같이 들어오는 데이터의 index 등으로 key 값을 만들면 문제 해결! {products.map((value, index) => { return {value.brand}; })}
React(리액트)란 2011년 페이스 북에 의해 만들어졌다. 2013년들어 페이스북이 리액트가 오픈 소스화 되고, 시간이 흐르면 리액트 네이티브도 오픈소스가 되었다 또한 componecnt-centric approach에 개발자들이 열광하기 시작하며 요즘은 모르는 사람을 찾기 어렵다 왜 리액트를 사용해야 하나 리액트는 유연하다! 리액트 하나 배우면 여러 플랫폼에 걸쳐서 인터페이스를 개발 할 수 있다. 또한 리액트는 컴포넌트 기반 웹 개발을 목적으로 만들어 졌기 때문에 리액트 컴포넌트는 무엇이든 될 수 있다. 리액트가 유명해지며 생태계가 넓어진 것도 한 몫하였다! 뜨거운 커뮤니티 커뮤니티가 활성화 되어 있고, 많은 사람들이 쓰다보니까 레퍼런스나 관련 라이브러리 등이 많다 레퍼런스 freeCodeCamp
Recoil은 뭘까 Recoil은 리액트 전용 상태 관리 라이브러리이다. 2020년 5월에 페이스북에서 출시된 나름 최신 툴이다 이전의 전역 상태관리 라이브러리들이 문제가 있었던 것은 아닌데 리액트 전용이 아닌점에서 Recoil에 밀린 듯하다 그 예시를 들자면 아래와 같다 복잡합 Boiler Plate 초기 세팅이 요구된다 비동기 데이터에 추가 리소스가 요구 된다. Recoil은 왜 쓸까? 전역 상태의 설정/정의가 매우 쉽다 Recoil이 지원하는 hooks로 get/set 하기 때문에 리액트 문법과 매우 유사하다 Boiler Plate 양이 현저히 적다 yarn add recoil 실습 일단 recoil 디렉터리를 만들고, state.jsx를 만들고 아래 코드를 입력한다. // atom, selecto..
