분류 전체보기 (501) 썸네일형 리스트형 [Nextjs] 공통 컴포넌트(헤더, 네비게이션 바) 적용 및 동적 라우팅 오늘은 헤더와 네비게이션 바를 공통 컴포넌트로 만들고, 심리테스트 목록에서 각 아이템을 클릭하면 아이템의 id에 따른 동적 라우팅이 될 수 있도록 구현하였다. 먼저 헤더와 네비게이션 바를 공통 컴포넌트로 만들기 위해 Components라는 폴더에 layout.js라는 새로운 파일을 추가해주었다. import Header from "./header"; import NavBar from "./navbar"; export default function Layout(props) { return ( {props.children} ); } 그런 다음 index.js 파일과 testId의 index.js 파일에서 보여주고 싶은 컴포넌트를 Layout 컴포넌트로 감싸주었다. export default function .. [Tailwind CSS] 전체 화면 스크롤 바 없애기(Header 고정) 전체 화면의 스크롤 바를 없애고 싶었다. 스크롤 바가 보이면 영 별로인 것 같아 예전부터 스크롤바는 무조건 hidden 시켰다. 참고로, Styled-Components를 사용할 때는 다음의 코드를 사용했었다. overflow-y: scroll; &::-webkit-scrollbar { display: none; } Tailwind을 사용할 때는 스크롤 기능을 어떻게 만져줘야하는지, 스크롤바는 어떻게 없애는지 살펴보자. 헤더 위치는 고정시켜줄 것이다. 먼저 전체 화면이 아닌 특정 컴포넌트에서 스크롤 바를 없애는 방법은 아래와 같다. 가장 먼저, 추가적인 Tailwind의 플러그인 설치를 해야한다. npm import tailwind-scrollbar-hide 이를 통해 tailwind-scrollbar-.. [Tailwind CSS] nextjs is missing required "width" property & Error: Invalid src prop "" on `next/image` 오늘은 Tailwind CSS를 사용해 이미지를 삽입하며 만난 두 가지 에러와 해결 방법을 살펴보자. 심리 테스트 item에 썸네일 이미지를 넣었고, 이미지는 외부에서 가져온 것을 사용하였다. Tailwind의 image를 삽입할 때 태그가 아닌 nextjs에서 제공하는 'Image'를 사용한다. 처음에는 Styled-Componenents를 사용했던 때와 같이 태그를 사용하여 코드를 짰더니, VSCode에서 nextjs에서 제공하는 'Image'를 사용하라고 warning이 떴다. 참고) Image 컴포넌트는 사용자 경험을 향상 시켜주고 이미지 형식 최적화, 외부에 저장되어 있는 이미지 리사이징까지 다양한 장점을 가지고 있다고 한다. 그래서 오키 알겠다~ 하고 바꿔주었더니, 이런 에러를 만나게 되었다... [NextJS & Tailwind CSS] 헤더 & 네비게이션 바 만들기 오늘은 오심테의 헤더와 네비게이션 바를 만들었다. NextJS도 처음~ Tailwind도 처음~ 뚝딱이 대잔치였다. NextJs는 리액트와 구조가 거의 비슷하다. pages라는 폴더 안에 파일 기반 라우팅을 적용시키기 위한 페이지들을 넣어주면 되는데, 오늘은 일단 헤더만 만들어보았다. CSS는 Tailwind CSS를 선택하였다. 아래의 공식 홈페이지에서 원하는 속성을 검색해 사용하면 된다. Styled-Components에 익숙하다보니 처음에는 뚝딱거리면서 헤맸는데, 몇 번 해보니 그래도 좀 익숙해진 것 같다. 평소 쓰던 속성을 검색해서 적용시켜야해 시간은 오래걸리지만 사용법이 까다롭지 않아서 적응하면 쓰기 편할 것 같다. https://tailwindcss.com/docs/installation In.. [구현] 프로그래머스 '줄 서는 방법' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12936 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 function solution (n, k) { const answer = []; const arr = new Array(n).fill(1); // n까지의 값이 든 배열 for(let i = 1; i < n; i++) arr[i] = arr[i-1] + 1; // 배열은 0부터 시작하므로 let nth = k-1; // 순번. 우리가 찾는건 고정 값이 될 배열 내의 인덱스... Nextjs 12버전으로 프로젝트 시작하기(feat. npm run dev 에러) 기획도 대략적으로 마쳤으니 이제 Nextjs를 사용해 프로젝트를 만들어보자. 타입스크립트를 사용할까 했지만, Nextjs를 배우는 것이 목표이기 때문에 타입스크립트는 나중에 확실히 공부하기로 하고 이번 토이프로젝트는 자바스크립트로 진행하기로 하였다. https://velog.io/@arenacast/Next.JS-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Next.js + TypeScript 시작하기 본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본 velog.io 현재 1.. [토이 프로젝트] 오심테(오늘의 심리테스트) 기획기 6월에 본격적인 프로젝트를 시작하기 전, 손 풀기 겸 새로운 스택 공부 겸 토이 프로젝트를 하기로 결심했다. 내가 선정한 토이 프로젝트 주제는 심리 테스트 모음집 애플리케이션이다! 평소 동생과 심리 테스트를 매우 즐겨했었고, 매번 네이버에 심리 테스트를 검색하고 원하는 심리테스트가 있는 블로그에 들어갔다 나왔다하며 심리테스트를 하는 것이 불편해서 재밌는 심리테스트 들을 모아놓은 사이트가 있으면 좋겠다는 생각에 선정하게 되었다. 특히 이번 프로젝트의 꽃은 Nextjs와 Vercel인데, 한 번도 사용해보지 않은 스택을 공부해보고 사용해보고자 한다! 아직 결정하지는 못했지만 Nextjs와 TailwindCSS가 함께 쓰이는 경우가 많고, TailwindCSS가 꽤 간단하다고 하니, TailwindCSS도 가.. [DFS] 프로그래머스 '무인도 여행' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/154540#qna 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 구현 처음 푼 코드) 부분 정답 2차원 배열을 만들어주고 값이 X가 아니면 1을 넣어준 뒤, 상하좌우 요소 중 값이 1인게 하나라도 있으면 기존 값에 더해주고 없으면 이전 합을 더하고 temp에 새로운 값을 넣어주는 식으로 짰는데 부분 정답이 나왔다 ㅠㅠ 반례라도 있으면 문제를 파악하기 더 쉬울텐데, 어떤 부분이 틀렸는지 이해가 안된다 ㅠㅠ 복기하다 보니 내 풀이가 왜 틀.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 63 다음
