Next.js 는 기본적으로 파일 시스템 기반 라우팅으로 파일의 경로가 주소에 매칭되는 방식이다. HTML 처럼 파일의 이름이 그대로 주소가 된다. 페이지 나누기프로젝트를 생성하면 기본적으로 pages 폴더가 생성되는데, 해당 파일에 js 파일을 작성하면 그대로 페이지가 된다. index.js 가 메인 페이지가 되며, export default 로 내보기를 할 수 있다. [id].js 처럼 작성하면 대괄호 안 값은 변수처럼 사용가능하고, 이를 다이나믹 라우팅이라고 한다. 위와 같은 경우 주소는 products/1 products/2 와 같이 매칭된다. Link 컴포넌트 페이지 전체를 리로드하지 않고 필요한 부분만 불러와서 속도가 더 빠르다. 첫 번째 상품useRouter useRouter 훅을 통해 사이..
전체 글
·회고
동아리 코드잇 부스트에서 토이 프로젝트를 진행했다.프론트 1명, 백엔드 1명으로 구성되었고 총 3주동안 이루어졌다. 시간이 촉박할 것 같다 라는 생각이 들어서 제공된 기능들 중 중요한 부분들과 무리가 되지 않는 선에서 볼륨을 설정하였다. 기술 스택 선정혼자서 단기간에 개발해야했기 때문에 그냥 내가 사용하기 편한 기술들을 선정했다. 기본 세팅리액트를 기반으로 하였고 번들러로는 vite, 언어는 타입스크립트를 사용하였다. 타입 안정성 + 명시적 프로그래밍으로 널리 사용되는 타입스크립트이번 기회에 간단히 써보았다. 스타일styled-components첫 프로젝트에서 용이하게 사용하였고 마음에 들어서 채택. 일단 스타일 코드를 분리할 수 있으며 컴포넌트 단위로 스타일을 관리할 수 있어서 tsx 코드가 깔끔하고 ..
Input 태그 file typeinput 태그의 type을 file로 설정해주면 이미지를 포함하여 로컬에 있는 파일들을 입력받을 수 있다. 보통 사진을 업로드하는 용도로 많이 사용한다. 그러나 기본 스타일의 경우다음과 같이 마구 커스텀해주고 싶게 생겼다. .....다양하게 커스텀해보자 ! 파일 선택 버튼만 변경file-selector-button 선택자를 사용하여 css 속성을 설정해주면 파일 선택 버튼의 스타일을 변경할 수 있다. &::file-selector-button{ background-color: #F8F9FC; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.06); width: 10rem; height: 5rem;};label 태..
tsconfig.json 파일tsconfig.json 은 타입스크립트 프로젝트 컴파일에 필요한 루트 파일과 컴파일러 옵션을 지정해주는 역할을 한다. 해당 파일은 루트 디렉토리에 위치하여 vscode 는 현재 프로젝트가 타입스크립트를 기반으로 진행되고 있음을 인식할 수 있다. 최상위 속성파일 내 가장 상위에 위치한 속성이다. compilerOptions컴파일에 관련된 설정을 할 수 있다. 옵션이 정말 많이 존재하기에... https://typescript-kr.github.io/pages/compiler-options.html TypeScript 한글 문서TypeScript 한글 번역 문서입니다typescript-kr.github.io해당 사이트에 정리가 잘 되어있다. 중요한 옵션들만 몇가지 살펴보면t..
https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.comNext.js 개발사에서 만든 클라우드 플랫폼으로 웹 애플리케이션의 구축과 배포를 도와준다. Vercel의 장점1. 간편하다 ! 소스 코드, 레포지토리를 연결하고 클릭만 하면 쉽게 배포를 할 수 있다. 2. 자동화된 배포 Github 브랜치에 push를 해줄 때마다, Vercel에..
홈페이지에서 많이 볼 수 있는 상단에 위치한 메뉴바이다. 이를 구현하기 위해 필요한 것들은 각 요소의 컴포넌트와 버튼 클릭 이벤트이다. function MenuHeader() { const navigate = useNavigate(); const handleSearch = () => { alert('삐용'); //라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 ! //navigate('/search'); }; const handleCalendar = () => { navigate('/calendar'); }; const handleMyPage = () => { navigate('/myPage'); }; const handleMain = () => { ..
https://www.youtube.com/watch?v=NwLWX2RNVcw 프로젝트에서 온보딩 화면을 구현하게 되었는데, 같은 팀원이 퍼널 구조를 도입해보자며 보내준 동영상이다. 퍼널(Funnel) 이란사용자가 목표 지점까지 도달하는 일련의 과정이라 할 수 있다. 회원가입 시 사용자 정보를 묻는 과정, 설문조사의 질문 페이지 등을 예시로 들 수 있다. MBTI 검사 역시 일종의 퍼널이라 할 수 있다. 일련의 단계들을 거쳐 최종 결과를 도출해내는 구조이다. 이 과정 속에서 여러가지 컴포넌트들과 데이터가 필요하고, 이 중 반복되는 요소들도 존재할 것이다. 토스에서는 이러한 퍼널을 관리하기 위하여 useFunnel 이라는 훅을 제작하였다고 한다. useFunnel 구현해보기 const steps =..
처음 리액트 + TS 를 사용했을 떄 곤란했던 부분 중 하나였다. props의 타입 설정해주기.....하나하나 설정해주어야 하나? 라는 생각도 들었는데, 결론부터 말하자면 하위 컴포넌트에서 props의 타입을 정의하는 interface를 생성해 주면 된다. props 타입 지정해주기//App.tsxconst age = 25;const name = 'p1su';return( )부모 컴포넌트에서 age 와 name을 props로 넘겨주고 있다. 자식 컴포넌트에서는 props의 요소들에 대한 타입을 지정해주어야 한다. props는 객체 형식으로 전달되기 때문에, interface를 활용하여 정의하면 되겠다 ! //Child.tsxinterface ChildProps { age: number; name:..