본문 바로가기

Programing371

[내배캠] TypeScript의 등장 배경 자바스크립트의 태동자바스크립트는 정적인 웹 페이지에 동적인 효과를 주기 위해 탄생한 스크립트 언어이다.자바스크립트 성능 향상에 대한 니즈 -> 구글 V8 엔진 등장 (크롬 내장) -> V8 엔진 기반 Node.js 등장하여 자바스크립트로 백엔드까지 작성할 수 있게 됨 -> 그러나 자바스크립트는 '동적 언어 타입'이어서 한계가 있었음. 동적 언어 타입에서 생기는 문제점프론트엔드 단의 에러는 화면의 일관성을 깨지게 할 순 있어도 큰 피해는 없다.다만 백엔드에서의 오류는 서버의 다운으로 이어지게 된다. 자바스크립트의 약점자바스크립트는 변수의 타입이 실행하는 타이밍에 결정됨.개발자의 휴먼 에러로 인한 에러가 잦음.그렇게 에러가 발생해도 찾기가 까다로움.변수에 잘못된 타입의 값이 할당되어 발생한 오류는 실행 시간.. Programing/TypeScript 2024. 6. 24.
React 에서 자주 쓰이는 if문 패턴 1. 컴포넌트 안에서 쓰는 if/else// 위 아래는 같은 것function App() { if ( true ) { return 참일 때 보여줄 HTML} else { return null; }}// 위 아래는 같은 것function App() { return 참일 때 보여줄 HTML} return null; }} else를 생략해도 같은 뜻임을 이해할 수 있다. 2. JSX 안에서 쓰는 삼항 연산자 (ternary operator)function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } )} 중첩 사용도 가능하다.function Component() {.. Programing/React 2024. 6. 24.
TanStack Query 기본 사용법 TanStack Query란?TanStack Query(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리정도로 설명되지만 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태를 쉽게 가져오기, 캐싱, 동기화 및 업데이트를 할 수 있게 도와주는 라이브러리이다. TanStack Query의 필요성리액트와 같은 라이브러리 등은 데이터를 전반적으로 가져 오거나 업데이트를 하는 방법에 대해서는 명확한 가이드를 제공해주지 않고 있다. 그래서 데이터를 가져오는 방법을 담은 메타 프레임워크를 만들 거나 자신만의 방법을 만들어서 사용하기도 한다. 기존 상태 관리 라이브러리는 클라이언트 상태 관리에는 적합하지만 서버 상태를 관리하기에는 적합하지 않다. 일반적으로 서버의 특성은 다음과 .. Programing/React 2024. 6. 24.
Supabase 회원가입 + 별도 데이터 테이블에 동시 기록하기 상황Supabase에서 기본으로 제공하는 이메일 회원가입을 하면 Supabase의 authentication에 유저의 메타데이터가 저장된다.그런데 데이터테이블의 관점으로 봤을 때 이 메타 데이터는 한 셀이 json 형태의 객체로 저장되어 있어 데이터를 가공하기가 복잡하다. 코드가 복잡해질 수 있다.따라서 사용자에게 닉네임, 집 주소 등 받아야 하는 데이터가 많으면 많아질 수록 이 기본 기능만으로는 부족함을 느낄 수 있고, 찜하기, 댓글 기능 등 다른 데이터들과 관계형 데이터베이스 기반으로 외래 키를 설정하는 데 있어서도 부족함이 있다.따라서 이런 경우 별도로 user 데이터를 만들어 관리하는 것이 더 편리하다.전체 코드import React, { useEffect, useState } from 'reac.. Programing/Server 2024. 6. 23.
2024-06-21 Supabase를 통한 회원 인증/인가 관리 기능 구현 회고 파일구조src components SignUp.jsx Login.jsx Introduction.jsx signInWithKakako.js checkSignIn.js api api.js supabaseClient.js hooks usePlaces.js useLogout.js store store.js구현모습 상단 헤더에서 회원 인증/인가 상태에 따라 조건부 렌더링서버로부터 인증된 사용자는 로그인 버튼 X, 찜목록과 로그아웃 버튼이 렌더링 되도록 설정로컬에서 토큰을 활용한 인증 방식은 보안 취약 요소가 있을 것으로 생각되어 JWT 세션을 서버로부터 인증받아 사이트에서 서비스 사용을 조건부로 사용 가능하도록 모든 컴포넌트에서 일부 서비스 보호마우스 .. Programing/TIL 2024. 6. 22.

티스토리툴바