목록분류 전체보기 (85)
개발자 박가나
MBTI 테스트 결과 데이터 저장을 위해서 json-server를 사용하였다. 테스트 결과 저장/* src/api/TestResult.js */import axios from 'axios';const BASE_URL = 'http://localhost:5000/testResults';export const createTestResult = async (data) => { try { await axios.post(BASE_URL, data); } catch (e) { return { error: e }; }};/* src/pages/Test.jsx */import { useForm } from '../hooks/useForm';import { calculateMBT..
인증/인가 기능 구현을 위해서 테스트 전용 API(https://moneyfulpublicpolicy.co.kr)를 사용하였다. 회원가입https://moneyfulpublicpolicy.co.kr/register로 post 요청을 보내는 방법으로 회원가입 기능을 구현하였다. /* src/api/Auth.js */import axios from 'axios';const BASE_URL = 'https://moneyfulpublicpolicy.co.kr';export const runSignUp = async (data) => { try { const response = await axios.post(`${BASE_URL}/register`, data); return { da..
Fetch네트워크 요청을 보내는데 사용되는 브라우저 내장 함수로서, Promise 기반으로 동작을 하며 브라우저가 제공하는 표준 API이다.내장 API이기 때문에 추가 설치 불필요Promise 기반이기 때문에 비동기 처리를 지원응답 데이터를 response.json( ) 또는 response.text( )로 한 번 더 변환해야 함헤더, 바디, 메서드 등을 쉽게 설정 가능 HTTP 응답 상태 확인네트워크 요청의 성공 여부만을 기준으로 Promise를 resolve 또는 reject한다.요청이 네트워크적으로 성공한 경우, 404나 500 등의 에러가 발생을 했더라도 resolve 처리네트워크 장애 또는 요청 자체가 실패한 경우 reject 처리 응답 본문 처리본문 데이터는 비동기 스트림 형태로 제공된다.JS..
쿠키사용자가 어떠한 동작을 수행할 때마다 브라우저는 서버에 요청을 보내고 서버는 요청에 대한 응답을 해주는데, 이 때 브라우저에 저장하고자 하는 데이터를 쿠키에 담아서 보내게 되고 이 후 브라우저가 새로운 요청을 보낼 따마다 쿠키가 함께 전송된다. 쿠키가 존재하기 때문에 우리는 이전 검색 기록을 다시 보거나 장바구니에 물건을 담아두는 등의 동작을 할 수 있다. 쿠키는 브라우저에 저장되는 작은 텍스트 조각이고 브라우저는 사용자의 컴퓨터에 설치된 소프트웨어이기 때문에, 결론적으로 쿠키는 사용자가 가지고 있는 정보라고 할 수 있다. 하지만 쿠키는 사용자가 아니라 브라우저에 종속되는 개념이기 때문에, 해당 브라우저가 설치되어 있는 컴퓨터에 접근할 수 있는 모든 사람들에 의해서 조회가 가능하다. 특징브라우저에 저..
오늘은 하루종일 팀원들과 코드 디버깅을 진행하느라 정신이 없었어서 TIL에 적을 내용이 떠오르지 않는다. 그래서 오늘은 공부한 내용 대신 협업을 진행하면서 느낀 점들에 대해서 간략하게 적고자 한다. 코드 이해의 중요성협업을 하게 되면 내가 담당하지 않은 부분은 다른 사람이 코드를 작성하게 되고, 코드가 이해가 되지 않으면 그 코드를 작성한 사람에게 설명을 요구하게 되곤 한다. 바꾸어서 말하면 누군가가 내 코드를 이해하지 못해서 나한테 설명을 요구하는 상황 또한 발생할 수 있다. 협업은 각자 담당하기로 한 부분만큼은 확실히 책임을 지고 구현을 해낼 것이라는 믿음을 가지고 진행되는 것이기 때문에 질문을 받았을 때 제대로 설명하지 못하면 안되겠다는 생각이 들었고, 단순히 구현할 수 있는 정도가 아니라 명확하게..
웹사이트를 개발하다보면 사용자가 아무런 동작을 하지 않아도, 즉 화면이 렌더링 됨과 동시에 어떠한 데이터를 불러와서 화면에 보여줘야 할 때가 종종 있는데 이럴 때 많은 사람들이 useEffect 내에 데이터를 불러오는 로직을 작성한다. 하지만 이러한 방식으로 구현할 경우, 아래와 같은 과정을 거치지 때문에 불필요한 렌더링이 발생한다. 1. 초기 렌더링2. useEffect + useState로 인해 state 업데이트3. state가 업데이트 됨에 따라 리렌더링 react-router-dom에서 제공하는 loader를 사용하면 데이터를 불러온 뒤에 렌더링이 발생하게 함으로써 불필요한 렌더링을 줄일 수 있다. 코드loader를 사용하지 않았을 때는 BrowserRouter를 사용해서 라우팅을 구현했다.ex..
데이터베이스란?데이터를 체계적으로 저장하고 관리하는 시스템으로, 단순 파일 저장 방식과 달리 대량의 데이터를 효과적으로 관리하고 처리할 수 있는 기능을 제공한다.데이터를 안전하게 보관빠르고 정확하게 데이터 검색 및 수정여러 사용자가 데이터를 동시에 사용할 수 있도록 지원데이터의 무결성과 보안 유지 관계형 데이터베이스 (RDB)데이터를 테이블 구조로 저장하고, 테이블 간의 관계를 정의한다.데이터를 행과 열로 구조화Primary Key와 Foreign Key를 이용해서 데이터 간의 관계를 정의 및 유지ACID 특성 준수SQL 언어를 사용해서 데이터 CRUD 장점데이터의 무결성 및 일관성 보장표준화된 SQL 언어 사용복잡한 데이터 관계 처리 가능 단점유연성 부족확장성 제한 ACID 특성관계형 데이터베이스의 ..
Clean Code란?코드도 결국엔 글이고 메시지이므로 계속해서 코드를 읽기 쉬운 방향으로 변경하도록 노력해야 한다. 그렇기 때문에 단순히 동작하게만 작성하는 것이 아니라 남이 봐도 이해할 수 있도록 작성하는 것이 중요하다. 즉, 의도를 잘 담고 있고 그 의도를 다른 사람이 최소한의 노력으로 이해하고 납득할 수 있는 코드가 Clean Code일 것이다. Clean Code를 위한 가이드라인의미있는 변수명 짓기camelCase : 변수 및 함수kebab-case : 페이지, pathname, 폴더, css의 classNamesnake_case : 상수 (주로 대문자로 생성)PascalCase : 컴포넌트 및 페이지 파일 구조 분해 할당 및 스프레드 연산자 적절히 사용하기 명확한 조건 선택하기긍정 조건 사..
CORS (Cross Origin Resource Sharing)한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호작용하는 클라이언트 웹 애플리케이션에 대한 방법을 정의한다.브라우저를 사용하여 동영상 플랫폼 API에서 동영상 가져오기공용 글꼴 라이브러리 사용하기국가 날씨 데이터베이스의 날씨 데이터 사용하기CORS를 사용하면 클라이언트 브라우저에서 데이터를 전송하기 전에 서드 파티 서버를 확인해서 요청 승인 여부를 확인할 수 있다. CORS가 중요한 이유과거에는 CSRF(크로스 사이트 요청 위조) 문제로 인해 사용자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 경우가 많았다. 이를 방지하기 위해서 모든 브라우저에서는 동일 Origin 정책을 구현한다. 동일 Origin 정책클라..