욕심도 참 많아

Vite란?? Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다. 경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다. (기존 webpack, rollup, parcel 과 같은 bundler 이다) 기존의 Webpack Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다. 반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다. Why Use Vite?? CRA대신 Vite를 쓰는 이유는 다음과 같다. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modul..

import axios from "axios"; const api = axios.create({ baseURL: "어쩌구저쩌구백엔드url", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 기존 코드이다. Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!! /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/api", destination: "어쩌구저쩌구백엔드url", ..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..

짧지만 기억에 오래 남을 것 같은, 나의 2번째 인턴이 끝났다. 방학을 그냥 허투루 보내기는 싫었고, 이런 저런 방학동안 할 수 있는 인턴 프로그램을 찾던 도중 '그룹바이' 라는 단체에서 스타트업과 대학생 개발자들을 연결하여주는 프로그램에 지원하여 붙게 되었다!! 우선 회사 서비스의 어드민 페이지만 작업하기로 되었었지만 운이 좋게도 회사의 주 서비스도 작업할 수 있게 되었다!!! 어드민 페이지도 쫄렸지만,,,, 주요 서비스에 직접 작업하는것은 더 떨렸다 처음 어드민 페이지 작업은 서비스의 데이터를 쉽게 추출하고, 수정하는 등의 CRUD 작업 위주로만 이루어졌다. 진짜 정말 퍼블리싱 제외하고 파이어베이스 스토리지에서 데이터만 주고 받고 수정하고 지우고 가지고 놀다보니 Promise 와 async/await..

MUI 에서 지원하는 styled을 사용한다. 원래 사용하던 Styled-Component 처럼 많은 이점이 있는데, 1. 컴포넌트의 이름을 새로 지정할 수 있고 , Style Override를 지원 해준다. 2. 편한 조건부 스타일링이 가능해진다. (Ex: createTheme) 우선 @mui/system 혹은 @mui/material 에서 import 해온다. import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); ..

외부 API POST 호출시에 The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is not equal to the supplied origin. 라는 오류를 마주하고, CORS에러라는 것에 대하여 알게 되었다. CORS정책이란? CORS란 교차 출처 리소스 공유(Cross Origin Resource Sharing)의 줄임말로, 서로다른 출처간의 리소스를 전달하는 방식을 제어하는 체제 이다. 나 같은 경우에서는 localhost3000인 프론트엔드에서 localhost8000인 백엔드로 리소스를 전달하는데에 있어 CORS정책으로 인해 차단된 것이다. 우선 출처(Origin)이란, Protocol(http,..

브라우저 주소 창에 tistory.com 을 입력했을때의 과정 브라우저란 사용자의 자원(html / pdf / 이미지 등)을 서버에 요청하고 표시하는것이 주 기능이다. 자원의 주소는 URI에 의해 정해진다. 브라우저의 구성요소 - 사용자 인터 페이스: 요청 페이지 창 제외 나머지 모든 부분 -브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 제어 -렌더링 엔진 : 요청한 콘텐츠를 표시 -통신 : 네트워크 호출에 사용 - UI 백엔드 : 창 기본적인 장치를 그림 -JS 엔진 : JS를 해석하고 실행함 -자료 저장소 : 쿠키 등의 자원을 저장함 렌더링 엔진의 기본적인 동작 과정 1. 서버에서 HTML, CSS를 Parser을 사용하여 DOM, CSSOM으로 만든다 이때 tree들이 만들어진다 2. DOM..

방학 동안 계절학기는 듣기 싫고, 학점은 채워야 했던 언럭키 4학년(3학년1학기까지 한뒤 군복무를 하러 갔지만, 갔다와 보니 학적상 4학년이 되어 있었다)은 6학점을 받으며 실무 경험을 채울 수 있는, 현장실습을 택하게 되었다. 성격상 연구원 같은곳에서 공부는 못할것 같았고,,,, 본래 관심있던 웹개발쪽의 실무경험을 쌓고 싶어 관련 회사쪽에 지원하게 되었다. 하지만 현장실습 지원은 한번에 한개 밖에 하지 못하였고, 1개를 넣고 떨어져서 아예 현장실습 못하면 어쩌지,,, 그냥 계절 아무거나 들을껄,,, 하는 걱정에 시달리게 되었다. 결과적으로는 1개의 기업에서 떨어지고, 2번째로 지원하게 되었던 스타트업에 합격했다! 회사 위치도 집에서 가까웠고, 출근도 8~10시 사이에 유동적으로 할 수 있어서 잠이 많은..