사용 목적프로젝트를 진행하며 점점 테스트 코드의 필요성을 느끼게 되었습니다.한 부분에서 오류 나서 수정하면 기존에 잘 동작하던 부분에서 오류가 발생하고 수정하면 또 오류 발생하고... 무한반복...지금 프로젝트가 이 상태....오류를 수정하고 다른 곳에 문제가 없는지 직접 테스트해보는 건 정확도도 떨어지고 시간 낭비라 생각되었습니다. 그렇기 때문에 관심은 많았지만 미뤄뒀던 테스트 코드 적용을 해야겠다고 마음먹었습니다!테스트 코드를 작성해야하는 이유1. 사업의 신뢰성버그가 포함된 채로 배포된 코드는 서비스의 이미지를 추락시킵니다. 그리고 이 이미지를 회복하려면 많은 시간과 비용이 필요합니다. 테스트 코드는 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을 합니다. 2. 높은 유지보수성개발..
이전에 서버 주소를 숨기고자 .env파일에 넣어놨는데 네... 다 보이고 있습니다. 네트워크 요청 주소를 숨길 수 있는 방법이 여러 개 존재하는데 Vercel Serverless 사용하기AWS API Gateway 사용하기SSR 사용하기등 여러가지가 있는데 그중 Vercel Serverless를 적용해 보겠습니다. Vercel CLI 설치일단 Vercel Serverless를 이용하게 되면 기존의 vite 명령어로 로컬에서 동작하는 걸 볼 수 없기 때문에 Vercel CLI를 설치해 줍니다.npm install -g vercel 개발 서버 실행 명령어는 다음과 같습니다.vercel dev root/api/index.js 파일 만들고 기존의 api 변경하기클라이언트에서 서버로 바로 요청하던 것을 Verce..
중앙 집중식 상태관리란?우리가 react나 vue를 사용할 때 전역으로 가져와 사용해야 하는 데이터를 관리해야 할 필요성을 느껴 사용하는 Redux, Vuex, zustand, recoil 등이 이에 해당됩니다. state, setState와 무엇이 다를까?컴포넌트 안의 상태를 관리하는 state, setState는 컴포넌트 내에서만 상태를 관리하고, 변경될 때마다 해당 컴포넌트를 다시 렌더링 하도록 되어있습니다. 상태가 해당 컴포넌트에만 영항을 미치며, 상태 변경은 이 컴포넌트 내에서만 추적되므로 다른 컴포넌트에서 특정 컴포넌트에서 사용하는 상태를 이용하기 어렵습니다. 반면, 중앙 집중식 상태관리는 전역적인 상태 관리가 가능하며, 여러 컴포넌트에서 동일한 상태를 공유하고 이를 관찰할 수 있습니다. 여..
오늘은 개발을 할 때 사용하는 코드 작성 도우미 Copilot을 사용해보고 싶지만, 자주 사용하지 않기 때문에 한달에 4만원을 내기는 부담될 때 사용할 수 있는 방법을 알려드리려합니다. 바로 오픈소스 Continue를 이용하는 방법인데요, 다만 이 방법은 chat GPT를 사용하기 때문에 무료는 아니고 상대적으로 저렴한 방법입니다. 만약 이용량이 많다면 Copilot을 사용하는 것을 추천드립니다. (gpt는 사용하는 만큼 비용이 청구됩니다. 반면에 Copilot은 많이 사용하든 적게 사용하든 항상 같은 가격입니다!) 시작하기먼저 VSCode extention에서 continue를 검색해 다운받습니다. 맨 위의 항목을 설치해줍니다. 이후 선택사항이지만 제작자는 Continue를 sidebar 오른쪽에 ..
FOIT, FOUT이란?Flash Of Invisible Text, Flash Of Unstyled Text로 페이지에 진입했을 때 폰트 적용이 늦게되어 깜빡이거나 갑자기 글자가 나타나는 현상을 발견했던 경험이 있을 것입니다.이는 사용자 경험에 부정적인 영향을 주게됩니다. 이 현상은 왜 일어나는 것일까요?발생 원인 : 브라우저 동작브라우저에 진입할 때 동작을 설명하면1. 브라우저가 HTML 문서를 요청한다.2. DOM 구성 & CSS,JS 및 기타 리소스 요청3. CSSOM 구성 & 렌더트리 구축, 폰트 리소스 요청4. Reflow, Repaint -> 폰트를 사용할 수 없는 단계면 브라우저는 글자를 렌더링하지 않을 수 있음주목해야할 부분은 CSSOM을 생성하는 과정인데, 이 과정에서 폰트 리소스를 다운..
이 글은 GraphQL API를 이미 도입한 상태에서 사용하는 방법을 설명하는 글 입니다.만약 GraphQL에 대한 정보가 더 궁금하시거나 도입에 관한 고민을 하고 계시다면 이곳을 봐주세요.GraphQL의 쿼리우리는 지정한 모양의 특정 필드를 반환하는 API를 요청할 수 있습니다.쿼리문은 직관적으로 구성되어있는데, me 스키마 중{ me { name }}요청을 받은 GraphQL API는 다음과 같은 결과를 JSON 형식으로 반환합니다.{ "me": { "name": "Hyesu" }}쿼리 결과가 정확히 동일한 형태임을 알 수 있는데, 이것이 GraphQL의 핵심입니다.쿼리 용어Fields이곳에서 field는 person.{ person { #field name }}{ "da..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.