웹 접근성 (정보통신 접근성) '지능화정보화기본법'에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항임 웹 접근성 준수 고려사항시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애이동성 : 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태청각 : 영상, 음성 콘텐츠에 자막, 원고, 수화등의 대체수단 부제로 인한 인식이 불가능한 상태인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등) 웹 브라우징에 쓰이는 보조과학기..
Fe
값 10 + 20; // 10 + 20 은 평가되어 숫자 값 30을 생성 식(표현식)이 평가되어 생성된 결과 모든 값은 데이터 타입을 가지며 메모리에 2진수 비트의 나열로 저장됨 변수에 할당되는 것은 값 리터럴 //1. 리터럴 표현식 10 'hello' //2. 식별자 표현식(선언이 이미 존재한다고 가정) sum arr[1] //3. 연산자 표현식 10 + 20 sum = 10 //4. 함수, 메서드 호출 표현식(선언이 이미 존재한다고 가정) sol() 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 자바스크립트 엔진은 코드가 실행되는 런타임에 리터럴을 평가해 값을 생성 표현식 값으로 평가될 수 있는 문(리터럴, 식별자, 연산자, 함수 호출 등) 표현식이 평가되면 새로운 값을..
1. 꼭 써봐야 하는 10가지 리액트 커뮤니티 훅들 react-hook-form 라이브러리의 useForm : 간단한 코드로 입력값 검증하고 에러처리 가능 react-use 라이브러리의 useUpdateEffect : 특정 상태가 업데이트 될 때 함수 호출 가능 import { useUpdateEffect } from "react-use" const Home = () => { useUpdateEffect(() => { // 이 함수는 첫 렌더링에 실행되지 않습니다 console.log("Runs only if the state updates") }, [fName]) return ( ...) } react-use 라이브러리의 useCopyToClipboard : 상태(사용자가 클립보드에 복사하는 문자열 값..
렌더링이란? 렌더링이란 현재 props 및 상태를 기반으로 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정 이때, DOM이란 웹 사이트를 열 때 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현하는 것 렌더링 발생 조건 컴포넌트의 상태 변경 (setState 함수 실행할 때 React 트리거 업데이트 됨) props가 변경되어도 업데이트 되지 않는 이유? props를 setState로 올바르게 업데이트하지 않았거나, props의 참조가 동일할 경우 혹은 props자체는 부모 컴포넌트가 렌더링 될 때 가져오기 때문에 부모의 렌더링이 일어나지 않으면 props가 교체되지 않음 부모 컴포넌트 랜더링 ⇒ 부모 컴포넌트가 렌더링 될 시 하위 컴포넌트는 모두 렌더링됨(리액트는 기본적으로 컴포넌트를..
안녕하세요 오늘은 Next.JS(v.13) + TypeScript 환경에서 무한스크롤 구현하는 방법에 대해 알아보겠습니다 배경.. 프로젝트에서 숙박 아이템을 확인할 수 있는 리스트를 구현하는데 모든 아이템을 한번에 가져와서 보여줄 수도 있지만 그렇게 하면 초기 렌더링 속도가 늘어나는 단점이 있어 무한스크롤로 구현하였습니다! 무한스크롤 구현하기! 1. 서버로 부터 받는 데이터 정의 처음 무한스크롤을 구현한다고 백엔드 분께 얘기했을 때 백엔드 분들께서 그럼 데이터를 어떤 형식으로 보내줘야 하냐고 여쭤보셨습니다 무한스크롤에 필요한 데이터는 다음과 같습니다 실제 아이템 리스트 데이터 현재 페이지 넘버 다음 페이지가 존재하는지 boolean 값 2. 무한스크롤 구현 저는 React Query에서 useInfini..
서론.. 본격적으로 API를 호출하면서 useQuery, useMutaion 등 React Query를 사용하게 되었다 React Query가 무엇인지 정확하게 알고가야 동작 원리를 제대로 파악할 수 있을 것 같아 알아보고자 한다 React Query이란 데이터 fetching, caching, 동기화, 서버 데이터 업데이트 과정 등을 간소화하여 개발자가 서버 상태 관리에 드는 복잡성과 시간을 줄일 수 있도록 설계된 라이브러리 공식 문서에 사용법이 잘 설명되어 있다! https://tanstack.com/query/latest/docs/framework/react/reference/useQuery useQuery | TanStack Query Docs tanstack.com 왜 사용하는데? 서버 상태 관..
패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 파이널 프로젝트 회고 파이널 프로젝트는 3가지 주제가 있었다 나는 그중에 가장 흥미롭다고 생각했던 중고 숙박 거래 C2C 거래 플랫폼 프로젝트를 선택했고 다행히 내가 원했던 프로젝트를 도전해볼 수 있었다 약 한달 반의 시간동안 정말 길게도 짧게도 느껴젔던 파이널 프로젝트 회고 겸 후기를 쓰려고 한다! 1. 구현 기능 나는 메인페이지와 판매권 등록 페이지를 맡았다 메인페이지에서는 간단하게 아이템들을 보여주었고 전체보기를 클릭하면 상세 페이지로 넘어가며 무한스크롤로 아이템의 리스트를 볼 수 있게 구현해주었다 판매 페이지는 야놀자와 연동된 숙박권 데이터(실제로 연동 X)를 가져와 판매할 숙박권을 선택하여 판매 시 필요한 정보들을 입력받고 선택할 수 있게 구현해주었다...
사용법 기본적인 사용법은 먼저 Zod에서 z를 불러와 z.object()를 통해 객체인 스키마를 정의한다! export const loginSchema = z.object({ email: z .string() .min(1, '이메일을 입력해주세요.') .regex( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, '이메일 형식을 확인해주세요.', ), password: z.string().min(1, { message: '비밀번호를 입력해주세요.' }), }); z.string()으로 여러 validation을 추가할 수 있다! 잘 설명되어있는 아래 링크를 참고해 볼 수 있겠다! https://velog.io/@tmdgp0212/Zod String 형 말고도 num..
