Frontend (29) 썸네일형 리스트형 [Next.js] URL에 상태 저장하기 (useSearchParams, URLSearchParams) 개요“URL 링크를 공유했을 때 같은 화면을 볼 수 있도록 해주세요.”검색 폼이 있고 결과가 출력되는 화면에서 위와 같은 요구사항을 받았다. 처음에는 그냥 직접 검색하면 되는 거 아닌가..? 싶었는데 검색 조건이 매우 X2 많은 기획서를 보고 꼭 필요한 기능이라는 것을 깨달았다. 10개가 넘는 필터링 조건들을 보고 바로 납득했다. 😮 요구사항을 다시 보면,URL 링크를 공유했을 때 같은 화면을 볼 수 있어야 한다.= URL에 검색 조건(상태 정보)을 저장해야 한다.= URL의 쿼리 스트링을 조작할 수 있어야 한다.→ URL 쿼리스트링에 상태 정보를 넣고 뺄 수 있어야 한다는 결론이 나온다. 어찌 보면 당연한 기능인데, 왜인지 이전까지 생각해보지 못한 기능이었다. 아마도 리액트에 너무 익숙해져 있기 때문.. [도서] UX/UI의 10가지 심리학 법칙 2 https://www.yes24.com/Product/Goods/92426632?pid=123487&cosemkid=go16268543581269579&gad_source=1&gclid=CjwKCAiA8YyuBhBSEiwA5R3-EwSUMqd0_vWn1bFFl058OZ-u_-SkS4ru4Hh3EkYB5kG0avESvvZcNBoCuRYQAvD_BwE UX/UI의 10가지 심리학 법칙 - 예스24 심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특 www.yes24.com 6. 피크엔드 법칙 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 .. [도서] UX/UI의 10가지 심리학 법칙 1 https://www.yes24.com/Product/Goods/92426632?pid=123487&cosemkid=go16268543581269579&gad_source=1&gclid=CjwKCAiA8YyuBhBSEiwA5R3-EwSUMqd0_vWn1bFFl058OZ-u_-SkS4ru4Hh3EkYB5kG0avESvvZcNBoCuRYQAvD_BwE UX/UI의 10가지 심리학 법칙 - 예스24 심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특 www.yes24.com 오랜만에 돌아온 블로그..! 최근에 읽은 책 내용을 정리해 보며 죽어있던 블로그를 살려보자! .. [Next.js] pages에서 app 라우터으로 마이그레이션 (feat. fetch, generateStaticParams) 개요 지난 글과 이어지는 포스팅으로, pages 라우터로 구현했던 마크다운 블로그를 app 라우터로 마이그레이션하는 과정을 남겨두려고 한다. 전체 흐름보다는 변화 포인트에 집중해 보자! 레이아웃 컴포넌트 pages에 있던 _app.tsx와 _document.tsx는 app의 layout.tsx으로 대체한다. _document.tsx에서 설정했던 styled-components도 app/layout.tsx로 이동시킨다. (참고. lib/registry 코드 ) 컴포넌트로 만들어 두었던 레이아웃도 가져오고, 글로벌 스타일도 추가한다. app/layout.tsx import Layout from '../components/Layout'; import StyledComponentsRegistry from '.... [Next.js] 마크다운 블로그 만들기 (feat. getStaticProps, getStaticPaths) 개요 이번 달 초, Next.js 원티드 프리온보딩에 참여하며 진행했던 과제를 정리해보고자 한다. 우선 next.js 12기준으로 pages 라우팅으로 마크다운 블로그를 만들어보고, 이를 13버전의 app 라우팅으로 마이그레이션하는 과정을 정리한 글이 될 것이다. 1. 프로젝트 생성 간단하게 CNA를 사용했다. npx create-next-app --typescript 2. styled-components 설정 Next.js에서 styled-components을 사용하려면, 추가 설정이 필요하다. CSS-in-JS 라이브러리는 자바스크립트 런타임 시 적용이 되기 때문에, SSR에서 스타일 적용이 즉시 되지 않기 때문이다. 자바스크립트가 적용되기 전의 HTML 파일이 먼저 렌더링 되면서 스타일이 먹히지 않.. [바닐라 자바스크립트로 SPA 만들기] 3. 라우팅 사실상 SPA 구현의 핵심이라 할 수 있는 라우팅을 추가해 보자. 라우팅 구현하기 라우팅을 위한 주요 기능은 "프레임워크 없는 프론트엔드 개발" 도서의 라우팅 부분을 참고했으며, 전반적인 틀은 앞서 구현한 컴포넌트 기반 폴더 구조에 맞추었다. 폴더 구조 페이지 간 이동을 위해 파일을 추가했다. - HomePage.js: 초기 접근 페이지 - index.js: pages 컴포넌트의 export 모음 src/pages/HomePage.js 초기 접근 시 렌더링 되는 페이지로, 기존 App 컴포넌트의 역할을 대신하는 페이지 컴포넌트이다. 일단은 페이지 구분 용도이기 때문에 별 내용은 없다. import Component from '../core/Component.js'; export default class .. [바닐라 자바스크립트로 SPA 만들기] 2. 비동기 처리 지난 글에서는 카운터 컴포넌트를 통해 기본적인 SPA의 구조를 잡았다. 이번에는 조금 더 나아가서, API 통신을 위한 비동기 처리 컴포넌트를 만들어 보자. 비동기 컴포넌트 만들기 이 부분의 구조는 "프레임워크 없는 프론트엔드 개발" 도서의 HTTP요청 부분을 참고했으며, 더미 API를 통해 패치 컴포넌트를 만들어 볼 것이다. 폴더 구조 새롭게 추가된 부분은 다음과 같다. - api/http.js: HTTP 통신 메서드 모음 - components/List.js: API 결과를 출력할 리스트 컴포넌트 - pages/FetchPage.js: API 패치를 위한 페이지 컴포넌트 src/api/http.js Fetch API를 기반으로 HTTP 통신 메서드를 추상화한 파일이다. (참고 링크) 최대한 외부 라.. [바닐라 자바스크립트로 SPA 만들기] 1. 컴포넌트 만들기 개요 프레임워크 없이 바닐라 자바스크립트로 웹 애플리케이션을 만들 수 있는가? 뭐 만들 수야 있지만 굳이..?라는 생각을 가지며 지내온 시간이 꽤 흘렀다. 그리고 사실 웹 개발 입문 당시 DOM 하나하나를 조작하며 노가다스럽게 만들어본 경험만 있을 뿐, 효율적으로 바닐라 자바스크립트를 활용하는 방법은 몰랐기 때문에 뭐부터 시작해야 할지 잘 몰랐다. 하지만 취업을 준비하면서 바닐라 자바스크립트만을 활용한 과제를 해결해야 하는 순간이 있었기에, 바닐라 자바스크립트를 리액트스럽게 활용하는 방법을 알긴 알아야겠다는 생각이 들었다. 게다가 최근 "프레임워크 없는 프론트엔드 개발"이라는 책을 읽게 되면서 실습 겸, 간단하게 바닐라 자바스크립트로 SPA를 만들어 보았다. 컴포넌트 만들기 SPA의 구조를 잡기 위한 가.. 이전 1 2 3 4 다음
