728x90
반응형
SMALL

분류 전체보기 39

[글또] 글또 10기를 지원하며 (삶의 지도)

목차1. 다채로운 시작, 빠른 포기 (학령기)2. 변화의 시작, 운동을 통한 자신감 회복 (청소년기)3. 웹 개발의 입문하게 된 계기(성인기)4. 현재의 나5, 마무리 글또 삶의 지도를 통해 나의 유년기 부터 성인기까지의 지난 날들을 적어보도록 하겠습니다.1. 다채로운 시작, 빠른 포기 (학령기)어릴 적 나는 흥미로운 것들을 보면 무작정 도전하는 아이였습니다. 그림 그리기, 피아노, 요리, 태권도, 축구, 수영 등 다양한 활동을 시도했지만, 그 열정은 오래가지 못했습니다. 한 가지를 꾸준히 해본 적이 없어 부모님의 잔소리를 듣기 일쑤였고, 이로 인해 점차 자신감이 떨어졌습니다. 이 시기의 나는 다른 사람의 시선을 의식하고, 남들 앞에 나서는 것을 두려워하던 아이였습니다.2. 변화의 시작, 운동(헬스)을 ..

일상생활 2024.09.14

[트러블 슈팅&최적화] 프로필 이미지 업로드 문제

목차1. 문제 발생2. 문제에 대한 정보 수집&원인 추론3. 문제 해결1. 문제 발생 프로필 이미지 업로드 시 크기가 큰 이미지를 업로드할 경우 API 요청 실패 및 인증 토큰 만료 문제가 발생하여 로그인된 유저가 로그아웃되는 현상이 발생하였다.// apiConfig.tsx/** * 응답 인터셉터 설정 * 로그인 토큰이 만료되었을 때, 로그인 페이지로 이동 */client.interceptors.response.use( (response) => { return response; }, (error) => { if (error.response && error.response.status === 401) { // 토큰 만료 시 로그인 페이지로 이동 window.location..

카테고리 없음 2024.07.26

[최적화] suspense, lazy로 초기로딩 개선

1. Suspense와 React lazy의 개념 2. Suspense와 React lazy 프로젝트에 적용1. Suspense와 React lazy의 개념SuspenseSuspense는 컴포넌트의 렌더링을 일시 중지하고, 데이터 로딩을 기다릴 수 있게 해주는 React의 기능이다. React 16.6부터 도입된 기능으로 컴포넌트가 렌더링 되기 전에 데이터 로딩을 기다릴 수 있게 해줌으로써 데이터 로딩 중에도 자연스러운 사용자 경험(UX)를 유도한다. 또한 코드 스플리팅(Code Splitting)과 함께 사용하면 초기 로딩 속도를 개선하는 데에도 도움이 된다.React lazy를 통해 지연 로딩 된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다. 이는 지연 로딩 ..

FE 2024.07.23

단위, 통합 테스트와 테스트 도구: 이론

목차1. 단위 테스트와 통합 테스트2. 테스트 도구3. 왜?1. 단위 테스트와 통합 테스트:소프트웨어 개발 과정에서 테스트는 매우 중요하다. 테스트를 통해 개발된 소프트웨어가 요구사항을 만족하는지, 버그 없이 잘 동작하는지 확인할 수 있다. 테스트 없이는 소프트웨어의 품질을 보장할 수 없으며, 사용자의 신뢰도를 떨어뜨릴 수 있다.테스트는 크게 단위 테스트(Unit Test)와 통합 테스트(Integration Test)로 나눌 수 있다. 각각의 테스트는 소프트웨어 품질을 보장하기 위한 중요한 역할을 하며, 개발 과정에서 서로 다른 목적으로 사용된다. 단위 테스트는 소프트웨어의 가장 작은 단위를 테스트하는 반면, 통합 테스트는 여러 단위가 함께 잘 작동하는지 확인한다.단위 테스트(Unit Test)란?단위..

FE 2024.07.13

CORS 훑어보기

목차1. 문제 발생2. 문제에 대한 정보 수집3. 원인 추론4. 문제 해결1. 문제 발생BE와 FE 프로젝트를 진행하는 과정에서 백엔드분들 배포해주신 숙박 전체 조회 API를 axios Get 요청을 했는데 밑에 처럼 CORS 문제가 발생하였다. Access to fetch at 'http://ec2-xx-xxx-xx-xx.ap-northeast-2.compute.amazonaws.com/open-api/accommodation' from origin 'http://localhost:5173/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an o..

FE 2024.06.27

"tsconfig.json: 설정 정보"

목차1. tsconfig.json의 설정 정보2. 컴파일러(compilerOptions) 옵션1. tsconfig.json의 설정 정보tsconfig.json 파일은 해당 타입스크립트 프로젝트가 어떻게 컴파일될지 세부적인 옵션을 정의하는 파일이다. 타입스크립트 프로젝트는 기본적으로 최상위 폴더 아래에 타입스크립트 설정 파일이 있다. 이 설정 파일에는 “**타입스크립트 컴파일을 돌릴 파일 목록과 배제할 목록, 그리고 컴파일러를 구체적으로 어떻게 동작시킬지 등 다양한 옵션을 지정”**할 수 있다.{ // TypeScript 컴파일러의 옵션들을 지정하는 속성 "compilerOptions": { "target": "es5", "module": "commonjs", ..

FE 2024.05.28

"Docker 한눈에 보기: 개념, 구성, 장점 및 이유"

팀 프로젝트를 하다가 “도커로 배포를 고려해보라는" 말을 듣고 도커가 무엇이고, 왜 도커를 사용해야 할까? 사용 목적이 궁금하여 이와같이 블로그에 도커 개념을 먼저 정리해보았다.목차1. Docker란 무엇인가?2. 도커의 구성3. 도커 컨테이너의 장점 4. 도커를 사용하는 이유 1. Docker란 무엇인가?공식 문서에서는 Docker를 이렇게 소개하고 있다.“애플리케이션 빌드, 공유 및 실행 방식 가속화”Docker는 개발자가 번거로운 환경 구성이나 관리 없이 어디서나 애플리케이션을 빌드, 공유, 실행 및 검증할 수 있도록 지원한다.즉, 도커는 애플리케이션 실행 환경을 컨테이너화 하여 쉽게 배포하고 이식할 수 있게 해주는 오픈소스 플랫폼이다.도커의 주요 개념을 알아보자.1) 버전 관리와 공유: 도커 이미..

FE 2024.05.14

webpack-> Vite의 인기가 급증하는 이유

번들러에 대한 개념 없이 무작정 사용하고 있어 본문에서는 번들러에 대해 알고보고자 한다.먼저, webpack무엇인지 알기전에 컴파일러와 번들러에 대해 살펴보자.컴파일러는 번들러를 사용하여 브라우저에서 사용할 수 있도록 여러 JavaScript 파일을 하나의 실행 파일로 결합한다. 번들러에는 앱을 실행하는 데 필요한 전체 소스 코드와 모든 종속성이 포함되어 있다.이 글에서는 두 가지 번들러에 대해 살펴보겠다.목차1. 번들러란 무엇인가?2. Webpack이란? 3. Vite란? 4. Vite vs Webpack5. 결론 1. 번들러란 무엇인가?번들러는 브라우저가 기본적으로 지원하지 않는 타입스크립트나 SCSS 같은 언어로 작성된 코드를 원활하게 통합하여 개발 및 프로덕션 workflow 를 개선하는 도구이다..

FE 2024.03.31

"Redux 입문: 상태 관리 데이터 흐름"

최근 "리액트를 다루는 기술" 책을 보다가 리액트의 상태관리의 중요성을 알게되어 상태 관리 도구인 Redux에 대해 알아보고자 정리해보았다.목차1. Redux란?2. redux의 필요성 & 사용하는 이유3. 리덕스의 등장 배경4. redux 용어5. Redux 애플리케이션 데이터 흐름6. 리덕스의 장점7. 결론1. Redux란?Redux는 전역 상태관리를 위한 도구이다. 어플리케이션 전체에 대한 중앙 저장소 역할을 한다.2. redux의 필요성 & 사용하는 이유상태(state)란?React에서 State는 component 안에서 관리되는 것이다.자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.그런..

FE 2024.03.26

yarn, npm 차이 도대체 뭘까?

평소에 npm를 사용하다가 기술 블로그 보던 중에 yarn을 설치, 사용하고 있는 글들을 봐왔다. npm이랑 별반 다른게 없다고 생각하고 npm만 써왔지만 리액트 도서를 보는 중 패키지 설치를 yarn으로 설치하길래 왜 yarn을 선택했는지 궁금하여 둘의 차이점을 알아보자.목차 1. 개념 정의 2. npm과 yarn의 비교 3. Yarn과 npm 어느 쪽을 선택해야 할까? 4. 결론 npm과 yarn은 자바스크립트 런타임 환경인 Node.js의 패키지 관리자이다. 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 온라인 데이터베이스 (opens new window)에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다.1. 개념 정의npm이란?npm(Node Packag..

FE 2024.03.21
728x90
반응형
LIST