본문 바로가기

분류 전체보기100

포트폴리오 회고 & 도메인 연결 기존 포트폴리오는 이런 모습이었다.지금 보면 정말 못만들었지만 당시엔 이만큼이 내 최대였다.돌아보면 지금 새로 만드는 포트폴리오도 그럴 거 같다.항상 그럴 것이다.전에 있던 것이 이상해보이고 왜 이렇게 짰냐 생각하겠지.그런데 위와 같은 생각을 할 수 있는 건 그만큼 내가 성장했다는 거라 생각한다.오히려 코드가 이상해 보이지 않으면 불안할 거 같다.성장이 멈췄다는 뜻이기도 하니까. 이번 포트폴리오는 배포가 정말 어려웠던 거 같다.가비아에서 도메인을 구매했더니 https를 사용할 수 없었다. 기존 절차는 이렇다.1.버셀로 배포 (.vercel.app) (생략)2.가비아에서 산 도메인을 vercel과 연결vercel에 가서 도메인 추가 그리고 ssl인증을 받아야한다고 한다.3.AWS Certificate M.. 2024. 10. 5.
FlawDetector 회고 프로젝트가 끝나고 한참 뒤에야 적는다.정말 남는 게 많았고 경험해서 감사한 프로젝트였다.유데미에서 진행한 기업프로젝트였고내가 작성한 코드가 보안적으로 문제 없는지 검사해주는 프로젝트였다.기업에서 제공한 llama3가 검사해주는 것이다. 팀원분들 중 대부분이 나보다 개발경력이 오래 되었고 현업을 하셨던 백엔드 분도 계셔서어려운 문제도 크게 걱정 안했던 유일한 프로젝트다. 나는 웹크롤링과 검색을 주로 맡고 다른 분들의 코딩을 좀 더 도와드리는 느낌이었다. 기업쪽에서 기획변경이 플젝종료 2주전까지 계속 변경 되어서 좀 힘든 플젝이긴 했으나 얻어 간 것이 많아서 정말 좋은 프로젝트라고 생각한다.프로젝트 기간2024.08.05 - 20204.10.28     Keep , problem , TryNode.js에 .. 2024. 10. 2.
StoryBook이란? UI 컴포넌트를 독립적으로 분리해 개별 관리,테스트를 도와주는 도구다. 장점으론 아래와 같다.1.개별 정돈 편리2.재사용성을 고려한 디자인 & 개발가능3.테스트가 용이 작성하는 게 좀 번거로울 수 있으나 웹디자이너분과 소통하기에 정말 편리할 거 같다.즉, 기획과 업무 진행에서 이점을 가진다.npx storybook@latest init해당 명령어로 설치하면 된다. 만약 chips라는 컴포넌트가 있다고 가정해보자.이런 chips라는 컴포넌트를 이쁘게 띄워주는 "npm run dev" 같은 거다.실행 명령도 비슷하다.npm run storybook해당 명령어로 실행하면 스토리북에 대한 페이지가 열린다.   방법은 내가 만든 컴포넌트를 불러오고 스토리북에서 쓰라는 대로 쓰면 된다.import { Meta,.. 2024. 9. 5.
캐싱(caching) 캐싱 - 자주 사용되거나 시간이 많이 소요되는 데이터를 임시 저장소에 저장한다.이때 저장 된 데이터를 캐시라고 부른다. 캐싱의 유형은 크게 4가지가 있다. 브라우저 캐싱웹 브라우저가 웹페이지 리소스를 로컬에 저장페이지 로딩 속도를 향상 시키는 방법이다. CDN 캐싱콘텐츠 배포 네트워크(CDN)을 사용하여 전 세계 여러 서버에 데이터를 분산 저장.CDN 제공업체: Cloudflare, Akamai, AWS CloudFront 등.정적 파일(이미지,동영상,css,JS)를 각 지역의 CDN서버에 저장해 로드 시간 단축 서버사이드 캐싱서버에서 자주 사용되거나 시간이 많이 소요되는 데이터를 임시저장, 이후 요청시 빠르게 응답메모리 캐싱: 데이터를 서버의 메모리에 저장하여 빠르게 접근.ex)Redis, Memcac.. 2024. 7. 31.
병렬 패칭 , Suspense 예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.그냥 그렇다고 하자.이런 경우엔 시간 단축을 할 수 있다.병렬로 데이터를 받는 것이다. Promise.all을 사용하면 된다. Promise.all: 만약 하나라도 거부되면 전체가 거부된다. try , catch문 사용하면 문제 없음.// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수async function fetchParallel() { // 첫 번째 API와 두 번째 API 엔드포인트 const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; .. 2024. 7. 30.
404 ,error , loading 각각 페이지 만드는 방법에 대해 알아보겠다. 404설정을 안하면 버셀에서 제공해주는 404페이지를 그대로 따라간다. 만드는 방법은 src/app 하위에 "not-found.tsx"를 만드는 것이다.컴포넌트채로 보여준다고 보면 된다. Error이것 역시 404와 방식은 똑같다.error.tsx 만들면 된다.에러는 'use client' 붙혀줘야 함! Loading로딩도 똑같다. 같은 경로에 Loading.tsx를 만들어주면 된다.로딩 컴포넌트 만드는 거 굉장히 중요하다.이것도 레이아웃.tsx처럼 , 가장 가까운 놈의 경로 공유를 한다.같은 폴더에 있는 놈을 쓰게 된다. 2024. 7. 30.

티스토리툴바