신비한 개발사전

완성하는 프로젝트보다 새로 시작하는 프로젝트가 몇 배는 더 많지만... 그럼에도 불구하고 매번 고민되는 부분 중 하나가 파일 디렉토리를 어떻게 구성할까다. 개발 생태계에는 디렉토리 구조마저 효율적으로 가져가기 위한 다양한 아키텍쳐가 존재하는데, 우연히 다른 프론트엔드 개발자와 대화하다가 Feature-Sliced Design(FSD) 패턴에 대해 알게 됐다. FSD는 기능 단위로 파일을 나눠 모듈화해서 코드의 유지 보수성과 확장성을 높이는 데에 중점을 둔다. 피쳐를 기준으로 코드를 수평적으로 분리해 구조 파악의 어려움을 해소한다. FSD 패턴에서는 코드를 레이어화해서 상위층에서 하위층으로 흐르는 방향을 따른다. 각 레이어별로 명확한 책임을 갖고있으며 레이어는 소분류 역할을 하는 슬라이스(slice)로 구..

프론트엔드 개발을 할 때 접근성에 대한 얘기를 많이 접하게 된다. 접근성은 신체적으로 불편한 사용자도 우리의 웹 프로덕트를 사용할 수 있을지를 나타낸다. 그리고 ARIA(Accessible Rich Internet Applications)는 이에 대한 표준을 제시한다. HTML에는 사용자 접근성을 높이기 위해 사용되는 스크린리더 등의 기기와도 상호작용할 수 있도록 앞에 aria- 키워드가 붙는 속성이 따로 있다. 이해하기 쉬운 대표적인 속성으로는 role과 aria-label이 있다.저장하기 위처럼 ARIA 관련 속성을 갖고 있으면 스크린리더를 사용하고 있는 사용자가 해당 엘리먼트를 탭했을 때 스크린리더가 aria-label과 role의 값을 읽어준다. [저장 버튼]이라는 것을 사용자에게 알려주는 것이다..

zod는 자바스크립트에서 사용할 수 있는 데이터 스키마 검증 라이브러리다. 데이터의 유효성을 확인해주는 것뿐만 아니라, 유효하지 않을 경우 스키마와 일치하지 않는 부분에 대해 내가 지정한 오류 메세지가 담긴 객체를 알아서 반환해주기도 한다. 폼 데이터 검증 등의 상황에서 검증 로직을 간편하게 구현할 수 있도록 도와준다. zod를 사용하면 크게 스키마 정의 → 정의한 스키마를 토대로 데이터 검증 → 검증 성공/실패 여부에 따라 처리 플로우로 로직을 구현할 수 있다. 스키마 정의하기데이터가 올바른 형식으로 들어왔는지 확인하려면 일단 비교할 스키마가 필요하다. 스키마는 라이브러리에서 z를 import한 다음 정의하고 싶은 데이터 타입을 선언해 만들 수 있다. 이때 다양한 조건을 덧붙여서 내가 원하는 데이터가 ..

HTTP(HyperText Transfer Protocol)는 컴퓨터와 컴퓨터가 서로 대화할 때 사용하는 프로토콜 중 하나다. 네트워크로 연결된 컴퓨터끼리 데이터도 주고 받을 수 있는데, 우리가 인터넷(웹)에서 웹사이트에 접속하는 것도 이 과정을 거쳐 이루어진다. 웹에 연결해 데이터를 요청하는 쪽이 클라이언트, 요청 받은 데이터를 보내주는 쪽이 서버다. HTTP 프로토콜을 통해 클라이언트와 서버간에 전송되는 데이터는 암호화되지 않은 순수 텍스트의 형태를 하고 있다. 만약 통신 중간에 난입하는 공격자가 있다면 통신되고 있는 내용을 읽을 수 있을 뿐만 아니라 가로채거나 조작할 수도 있다. 로그인 같은 중요한 통신을 하는 경우에는 사용자의 로그인 정보가 공격자에게 넘어갈 수 있다. 때문에 이런 보안성 문제를 ..

고차 함수(higher-order function)는 함수를 인자로 받거나 함수를 리턴값으로 주는 함수를 말한다. 함수를 인자로 받는 경우는 많이 보고 써봤는데, 함수를 리턴하는 함수는 실전에서 써 본 적이 없어서 확실히 알아보려고 한다. Closure함수가 함수를 리턴할 경우, 그 리턴된 함수를 어떻게든 사용하려면 일단 변수에 저장해야 한다. 변수에 저장한 뒤에 해당 변수를 함수로 호출하면 고차 함수가 리턴한 함수가 실행된다.function greet() { return function () { console.log("hello, world"); };}const sayHello = greet(); // sayHello 변수에 저장sayHello(); // "hello, world" 출력 이렇게..

웹앱을 구현하다 보면 사용자의 액션에 따라 각종 이벤트를 발생시킬 때가 있다. 대표적으로 의 change 이벤트나 스크롤 이벤트가 있는데, 이런 이벤트들은 보통 구현하려는 기능 특성상 초 간격으로 수십번씩 발생할 수 있어 그만큼의 함수를 실행시킨다. 이벤트가 많이 발생하게 되면 웹앱의 성능을 저하시켜 사용자 경험에 악영향을 주거나 불필요한 API 요청을 지속적으로 보내 서버 부하를 일으킨다. 이처럼 실행되는 함수가 많을 때, 그 빈도수를 컨트롤해 성능을 끌어올리는 기법이 있다. 쓰로틀링 (Throttling)쓰로틀링은 일정 시간마다 그 시간 내에 발생하는 모든 이벤트들을 무시하고 제일 마지막으로 감지된 함수만 실행시키는 기법이다. 쓰로틀 React 훅 구현:import { useEffect, useRef..

Nuxt는 Vue 프레임워크에서 SSR 컴포넌트를 쓸 수 있게 해주는 풀스택 프레임워크다. Vue의 Next.js인 셈이다. 디렉토리 구조(root)/ components └ 컴포넌트.vue layouts └ default.vue pages └ index.vue └ page1.vue └ page2.vue app.vue Nuxt는 root 디렉토리에 있는 app.vue나 pages 폴더의 index.vue 파일을 기준으로 기본 주소인 "/"의 메인 페이지를 생성한다. app.vue 파일과 pages 폴더를 함께 쓰려면 app.vue 안에 컴포넌트를 추가하고 /pages/index.vue 파일을 메인으로 써야 하지만, app.vue 파일을 삭제하고 /pages/index...

자바스크립트에는 프록시라는 객체가 있다. 어떤 객체를 생성할 때, 그 객체가 만들어지는 과정 도중에 난입해서 객체의 요소들에 영향을 줄 수 있는게 프록시다. 프록시 객체는 변형할 타겟 객체와 변형 액션을 수행할 핸들러를 인자로 받아 생성한다:const proxyObject = new Proxy(target, handler); 핸들러 함수는 트랩(trap)이라고도 부르며, 여러가지 함수가 담긴 객체로 전달한다. 우리는 트랩을 통해 타겟 객체의 값이나 메소드를 바꿔 프록시 객체를 만들게 된다. 몇가지 주요 트랩 함수들을 알아보자. handler.get()타겟 객체의 요소에 접근할 수 있는 함수로, 타겟 객체가 가진 요소의 값을 바꿀 때 쓴다. 타겟 객체(target), 타겟 객체의 요소(property), ..