웹 개발/Web Development (9) 썸네일형 리스트형 Biome) zero-dependency tool chain | Formatter, Linter https://biomejs.dev/ Biome Format, lint, and more in a fraction of a second. biomejs.dev eslint 설정하기도 어렵고 prettier랑 충돌하는 부분도 어려웠는데 얼마전 기술 공유 시간이 Biome이라는 것을 알게 돼서 써봤다. 특별히 추구하는 컨벤션이 없어서 직접 eslint rule을 정의하고자 하는 욕심도 없어서 제로 디펜던시라는 이것을 linter, formatter로 사용해보기로 했다. 아쉽게도 vue, astro 등등은 지원하지 않아서 nextjs 프로젝트에 적용해보려고 한다. 설치 bun add --dev --exact @biomejs/biome bunx @biomejs/biome init 이렇게 하면 이런 json 파일.. 디자인 패턴) Proxy Pattern 이 글을 공부하며 번역하고 정리한 글입니다. 타겟 객체에 대한 인터렉션을 가로채서 제어하는 패턴 프록시 객체를 사용하면 특정 객체와의 인터렉션에 대한 더 많은 제어권을 얻을 수 있습니다. 프록시 객체는 값을 가져오거나 설정할 때와 같이 객체와의 인터렉션 할 때의 동작을 결정할 수 있습니다. 일반적으로, 프록시는 '대리인'을 의미합니다. 누군가에게 직접 말하기보다는 그 누군가를 대표할만한 사람에게 대신 말하는 것이죠. Javascript에도 같은 상황이 있는 것입니다. 타겟 객체와 직접 상호작용하기보다는 대리인 객체 즉, 프록시 객체를 통해 타겟과 상호작용하는 것입니다. 'John Doe'라는 인물을 표현하는 person 객체를 만들어봅시다. const person = { name: "John Doe", .. 디자인 패턴) Singleton Pattern 이 글을 공부하기 위해 번역 및 정리한 글입니다. 어플리케이션 전체에서 하나의 전역 인스턴스를 공유하는 패턴 싱글톤은 한 번만 인스턴스화될 수 있고, 전역으로 접근할 수 있는 클래스입니다. 그렇게 만들어진 하나의 인스턴스는 어플리케이션 전역에서 공유될 수 있어서 어플리케이션의 전역 상태를 관리하기 좋습니다. 우선, ES2015 클래스를 사용해서 싱글톤이 어떻게 사용되는지 확인해봅시다. 다음 예시에서 Counter 클래스를 만들어봅시다. 다음과 같이 클래스를 만들면 우리는 여러 개의 Counter 인스턴스를 만들 수 있기 때문에 싱글톤 패턴의 기준에 맞지 않는 방식입니다. let counter = 0; class Counter { getInstance() { // 인스턴스 반환하는 메소드 return th.. 테스트툴) Playwright 란 프론트 프로젝트 규모가 커질수록 기능을 추가할 때마다 사이드 이펙트가 생기는 일이 빈번해진다. 버그들을 자동으로 잡을 수 있는 테스트 툴을 알아보다가 사수님이 Playwright라는 것을 알려주셔서 새로 도전하는 사이드 프로젝트에 이것을 도입하려 보려고 한다. Playwright에 대해 공부하면서 내용을 정리해본다. E2E Test E2E(End to End) Test는 애플리케이션이 예상대로 동작하는지 확인하는 테스트를 말한다. 사용자 사용 시나리오을 시뮬레이션하며 제품의 동작을 테스트 하는 것! 위에서 언급했듯이 프로젝트 규모가 작을 때는 테스트 할 범위가 좁아서 버그들이 눈에 띄지만 그 규모가 커질수록 기능 추가 및 수정으로 발생하는 사이드 이펙트를 발견하기 어려워진다. 또한 운영체제나 브라우저 등.. Vuepress란 무엇인가 1. SSG (Static Site Generator)이란? JAM stack Javascript + APIs + Markup 자바스크립트: 클라이언트 요청 처리관리 APIs: 데이터베이스, 서버 관련 기능 처리 마크업: SSG 등으로 마크업을 미리 만들어내는 것 장점 백엔드 기술을 API로 분리하여 보안 취약점을 줄일 수 있다. CDN을 통해 웹 성능이나 속도를 높일 수 있다. 잼스택 생태계가 커져가면서 정적 사이트 생성기 즉, SSG도 함께 성장하였다. SSG의 개념 정적 페이지 기반 웹사이트를 만들어주는 도구 콘텐츠와 파일을 읽어 이를 HTML로 적절히 변환해주는 기술 마크다운으로 작성 → html로 만들어줌 → 서버로 올림 → 서버에서 전달 빠르다! Static page vs Dynamic pag.. /etc/hosts 로컬에서 ip 주소 호스트네임 등록해 두고 사용하기 터미널에서 $cat /etc/hosts 를 해보면 이런 파일이 보인다. ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1localhost 255.255.255.255broadcasthost ::1 localhost .. 이 파일에 호스트네임이 등록돼 있기 때문에 개발할 때 localhost라는 이름으로 127.0.0.1로 접근이 가능한 것! 그러니까 여기에 다른 ip 주소를 입력하고 옆에 호스트 이름을 등록해 두면 앞으로 그 호스트 이름으로 접근할 수 있다. 대신 /etc/hosts 이 파일을 가.. 웹 개발) 브라우저 저장소 Web Storage Web Storage key-value로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴 웹 데이터를 클라이언트에 저장할 수 있는 자료구조 데이터의 지속성에 따른 구분 cookie와 달리 저장된 데이터가 클라이언트에만 존재하고 서버로 전송되지 않는다. 용량 제한이 없다. 만료기간 설정이 따로 없고, 한번 저장한 데이터는 영구적으로 존재한다. Local Storage 지정한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관할 수 있다. 도메인마다 별도의 로컬 스토리지가 생성된다. 브라우저를 종료해도 데이터가 보관되어 다음 번 접속에도 그 데이터를 사용할 수 있다. 도메인만 같으면 전역적으로 공유할 수 있다. Session Storage 데이터의 지속성과 접근 범위에 특수한 제한이 있다. 현재.. 웹 개발) Reatful API REST란? REpresentational State Transfer 웹 상의 모든 자원에 대한 고유한 URI를 부여하여 활용하는 것 REST API란? HTTP 통신에서 어떤 자원에 대해 CRUD (create, read, update, delete) 연산을 수행하기 위해 URI (resource) 요청을 보내는 방식 1. REST API의 구성요소 Resource 고유한 ID를 가지는 자원 서버가 가지고 있는 자원에 대하여 클라이언트가 요청을 보낸다. URI Method PUT : 서버에게 자원 업데이트를 요청하는 것, 자원이 없다면 새로운 자원 생성을 요청 (update)DELETE : 서버에게 자원 삭제를 요청 (delete)처리를 위한 연산에 맞는 메소드를 사용하여 서버에 요청을 보낸다. PAT.. 이전 1 2 다음
