Frontend Study (67) 썸네일형 리스트형 [유데미x스나이퍼팩토리] Next.js 3기 - 스와이프 기능 추가 프로젝트 진행 중 랜딩 페이지에 쓰일 Splash 이미지를 만들었는데, 단순히 닫기 버튼으로 닫는 것 보다는 새로운 방법을 써보고 싶다는 생각이 들었다.모바일 화면을 개발하고 있기 때문에, 모바일 앱에 많이 쓰이는 스와이프 기능을 사용해 보면 어떨까 하여 스와이프 기능을 개발해 보게 되었따.1. Touch Event요소를 클릭 했을 때, PC 화면에서는 onClick 이벤트 또는 onMouseDown 이벤트가 발생하지만 모바일 화면에서는 onTouch 이벤트가 발생한다onTouchStart : 맨 처음 화면을 터치할 때 발생하는 이벤트onTouchMove : 화면을 터치 한 채로 움직일 때 발생하는 이벤트onTouchEnd : 화면에서 손가락을 뗼 때 발생하는 이벤트위 세가지 이벤트를 이용해서 스와이프 .. [유데미x스나이퍼팩토리] Next.js 3기 - 프로젝트 폴더 구조 설계 폴더 구조 설계FSD 방식을 이용하여 새로운 폴더 구조를 설계현재 폴더 구조srcapp : 앱 라우팅assets : 이미지, 스타일 파일components : 컴포넌트constants : 상수 관리hooks : 커스텀 훅services : api 호출 및 비즈니스 로직store : 전역 상태 관리types : 타입 관리utils : 공용 함수 및 기능 관리screens : page 관리폴더 구조 변경 계획srcapp: 라우팅, 엔트리 포인트, 글로벌 스타일 및 프로바이더를 포함.기존의 appviews: 전체 페이지나 큰 페이지 부분을 포함.기존의 pageswidgets: 독립적인 기능이나 UI 요소.기존의 componentsfeatures: 제품 기능을 구현한 모듈.services: 프로젝트에서 다루는 .. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 7일차 스타일 적용 방법CSS 파일 임포트모듈테일윈드CSS in JS폰트next/font/googlenext/font/local@font-face라우팅앱 라우팅라우팅은 app 폴더 아래에 폴더를 생성하면, 해당 폴더의 이름이 경로로 지정됨폴더 안에는 page 컴포넌트를 넣어 페이지를 렌더링app 폴더 아래에는 라우팅을 담당하는 컴포넌트 및 폴더들만 넣어야 함app 폴더 바로 아래의 page가 메인 페이지 담당Next.js는 다양한 시스템 파일을 이용해서 라우팅 및 에러를 제어한다page라우팅 결과를 보여주는 페이지layouthtml 구조를 잡아줌→ 하나의 레이아웃을 여러 페이지에서 사용 가능not fountnot-found.tsx 파일을 통해 잘못된 라우팅 경로 핸들링최상단에 작성되어야 함loadingloadi.. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 6일차 Next.jsCSR과 SSR의 차이CSR - Client Side RenderHTML / CSS / JS 파일을 클라이언트에서 받아 렌더링초기 로딩이 늦지만, 한번 다운로드 받으면 이후 접속은 매우 빠름SSR - Server Side RenderHTML을 서버에서 렌더링 한 뒤 브라우저에 표시만 해줌 → 기능 없이 보여지는 페이지만 먼저 렌더링이후 서버로부터 받은 HTML에 JS를 적용하는 것을 ‘Hydration’이라고 함페이지 이동시마다 서버에 HTML을 요청해야 하기 때문에 화면 깜빡임이 자주 발생Next.js로 제작한 페이지에서 JS를 비활성화 해도 페이지는 정상적으로 렌더링 됨→ JS가 없기 때문에 동적인 기능은 아무것도 작동 하지 않음ex) a 태그로 이동은 가능하지만, onClick은 작동하.. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 5일차 고차 컴포넌트컴포넌트를 반환하는 컴포넌트React Memoization리액트는 상태가 변경 될 때 마다 컴포넌트를 리렌더링함 → 컴포넌트가 많거나 복잡한 로직을 가진 함수가 있으면 성능 저하의 우려가 있음⇒ 로직의 계산값을 기억해 동일한 계산을 하지 않도록 해주는 기법React MemoReact.memo로 감싼 컴포넌트와 하위 컴포넌트는 메모이제이션 됨Memoization이 해제되는 조건컴포넌트 내의 상태가 변경 되는 경우컴포넌트로 전달되는 props가 변경되는 경우props로 함수가 전달되는 경우 → 컴포넌트가 렌더링 될 때 마다 함수가 재정의 되기 때문memoization이 해제되면 하위 컴포넌트 역시 렌더링 됨// A.tsximport { useState } from "react";import Re.. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 4일차 재사용성이 높은 컴포넌트 만들기props로 tailwind의 className과 HTML 속성들을 전달해 쉽게 스타일 및 속성을 변경 할 수 있음ComponentPropsWithoutRef → React에서 특정 HTML 요소나 React 컴포넌트에 대한 props 타입을 유추할 때 사용하는 유틸리티 타입쉽게 말해, 태그 내에 쓰이는 props들의 타입들을 자동으로 추론해서 전달해 줌전달받은 props들은 구조 분해 할당을 통해 필요한 것들만 사용//App.tsxexport default function App() { return ( );}//Input.tsximport { twMerge } from "tailwind-merge";type InputProps = React.ComponentPr.. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 3일차 컴포넌트 CSS 스타일링인라인 스타일HTML의 style 속성을 이용해 스타일을 지정하는 방법style 속성은 객체 형식으로 전달되어야 함camel-case로 작성 Hello World;외부 css 파일 사용css 파일을 import하여 className으로 스타일 지정외부 css 파일을 import한 컴포넌트가 렌더링 되어있기만 하면, 모든 컴포넌트는 해당 컴포넌트에서 import한 css의 영향을 받음 → global하게 적용ex) App.tsx 아래에 Second.tsx와 Third.tsx라는 컴포넌트가 존재Second.tsx에 style.css가 import 되어있어도, Second.tsx가 렌더링 되어있다면 App.tsx에서도 스타일 사용 가능그렇기 때문에, 최상위 컴포넌트 (Main.tsx).. [유데미x스나이퍼팩토리] Next.js 3기 - 사전직무교육 2일차 타입 오퍼레이터타입스크립트에서는 인터섹션 연산자, 유니온 연산자 등을 사용 할 수 있음인터섹션 연산자 ⇒ &자바스크립트의 && (and)와 같음여러개의 타입 정의를 하나로 합칠 때 사용유니온 연산자 ⇒ |자바스크립트의 || (or)과 같음여러개의 타입을 매개변수로 받을 수 있게 함유니온 연산자를 사용하는 매개변수간의 연산은 에러가 발생 할 수 있음//인터섹션 연산자interface name { name: string}interface age { age: number}const inter = (obj: name & age) => console.log(obj)inter({name: 'john', age: 20}) //name: john, age: 20inter({name: 'song'}) //에러 발생 ->.. 이전 1 2 3 4 ··· 9 다음
