본문 바로가기

분류 전체보기100

최적화 작업(삽질) (1/2) 일단 나는 프론트엔드 성능 최적화가이드라는 책을 먼저 읽고 해당 작업을 시작했다.(필요할 때마다 반복해서 읽을 것이다)14일 동안 고민한 거 같은데 당장 성능지표는 이렇다.왼쪽이 개발환경,오른쪽이 배포환경이다. 나름 나쁘지 않은 점수라고 생각하지만 나는 끝까지 올려보고 싶어 Perfomence에 대해 2주동안 고민 했다.문제는 LCP였다.**LCP (Largest Contentful Paint)**는 화면에서 가장 큰 콘텐츠가 렌더링되는 시점을 측정하는 지표로, 2.5초 이하가 "좋음" 기준이다. 개발 환경에서는 LCP가 더 낮게 측정되었다.(코드 압축,Tree-shaking,브라우저 캐싱 등이 이유다.) 이미지가 너무 크다. 이미지가 너무 커서 화면에 그리는데 느리다는 문제다.이것을 해결 해보기 위해.. 2025. 1. 13.
다시 시작하는 Node.js, 새로 시작하는 CS 책으로만 읽는 것에 한계를 느껴서 제로초 강의를 통해 다시 공부한다.https://www.inflearn.com/course/%EB%85%B8%EB%93%9C-js-%EA%B5%90%EA%B3%BC%EC%84%9C [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지 강의 | 제로초(조현영) - 인프런제로초(조현영) | 노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서www.inflearn.com해당 강의를 택했고 MySql과 aws도 사용하기에(람다,S3) 나에게 적합한 강의라고 생각해서 결제했다.(근데 대부분 유튜브에 무료강의로 올라와서 사기 당한 느낌 ㅠ).. 2025. 1. 11.
Meal&Mate 프로젝트 회고 이 프로젝트는 코드잇 단기심화과정(국비 심화)에서 진행한 프로젝트다.굳이 부캠을 3개 듣는 이유는 아직은 혼자서 하는 공부보다 다같이 하는 공부가 나에게 도움이 될 것이라 생각했기 때문이다.(당시 테스트코드 작성에 대해 어려움을 느꼈기 때문) 이 프로젝트는 Meal&Mate혼자 사는 게 당연시 되는 현대 사회에서 같이 왁자지껄하게 밥을 한끼 먹을 친구를 구하는 사이트다. 6주정도에 시간에 기획과 구현을 해야했기에 정말 시간이 부족했던 프로젝트였다.후에 리팩토링 하자고 얘기가 되어서 아직 좀 더 해볼 생각이다. 팀원분들도 정말 열심히 해주셨기에 스트레스도 초반에 많이 받았지만 정말 좋았던 프로젝트였다고 생각한다. 그리고 나름 나도 코드를 작성함에 있어서 성장했구나라고 느끼게 되는 계기가 되었다.(반년전보.. 2025. 1. 6.
Jest의 한계점과 Cypress(UI) 일단 테스트의 종류가 뭐가 있는지 알아보자. 유닛 테스트코드의 개별 단위가 올바른지 확인함수, 메서드, 컴포넌트가장 빠름Jest, Mocha 등통합 테스트여러 유닛의 결합이 잘 되는지 확인API, 모듈 간 연동중간Jest, Supertest 등E2E 테스트전체 애플리케이션 흐름이 문제없는지 확인사용자 관점, 전체 시스템가장 느림Cypress, Playwright 등  Jest는 주로 **유닛 테스트(Unit Test)**와 **통합 테스트(Integration Test)**에 많이 쓰이긴 하지만,기본적으로 E2E 테스트(End-to-End Test)도 가능하다.하지만 E2E 테스트에 특화된 도구인 Playwright나 Cypress 같은 툴에 비해 좀 번거로운 점이 있을 수 있는데 Jest는 기본적으로 .. 2025. 1. 3.
React-hook-form & Zod를 사용해보자 유저는 회원가입/로그인 할 때 항상 값을 제대로 입력해주지 않는다.고의고 아니고를 떠나서 그렇다. 숫자칸에 "숫자만 넣으세요" 라고 해도 실수로 글자를 넣을 수 있는 법이니까. React-hook-form 이란? 그래서 프론트 개발자가 막아주는 게 좋다. 틀리면"여기는 숫자만 들어가야 해요" , "여기선 문자만 쓸 수 있어요" 이 역할을 해주는 게 React-hook-form이다.서버에 전송하기 전에 한번 걸러주는 필터 같은 친구다. import React from "react";import { useForm } from "react-hook-form";const MyForm = () => { const { register, handleSubmit, formState: { errors .. 2025. 1. 3.
백엔드와 API 통신 시 헤더 오류 평일은 플젝,주말엔 알바를 하다보니 블로그를 쓸 시간이 없었는데억울해서 좀 써야할 거 같아 남긴다. (백엔드분 잘못은 절대 아니다!)우리 플젝은 음식모임을 생성->만남을 위한 플젝이다.그럼 모임생성이 빨리 되어야하고 내가 그 역할을 맡게 되었다. 스웨거에서 제공 된 형식과 맞췄고 multipart/form-data으로 보냈다.그런데 자꾸 500에러가 뜨는 걸까? headers 부분에 쿠키도 따로 넣어보고credentials 값도 계속 변경해보고 했다.- omit (기본,쿠키 미전송) , include(쿠키 항상전송) , same-origin 쿠키를 동일출처 요청에만 전송왜냐면 콘솔로 찍혔을 땐 쿠키가 값이 잘들어왔다.(accessToken=쿠키값)이라고 한다면, 쿠키값만 정확히 콘솔에 찍혔기 때문이.. 2024. 12. 12.

티스토리툴바