IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

TailwindCSS 4

Next.js 기본 개발 환경을 위한 설치법

이번 노마드코더 챌린지중 차후에 Next를 사용하게 되면 비슷한 환경을 구현하기 위해 설치 중 사용했던 명령어 방법등을 정리한다. 시작하기에 앞서 설치하는 프로그램은 설치 후 npx next dev // next.js 실행 npx prisma init // 프리즈마 환경변수 파일 생성 등 npx "설치스택" 명령어 를 사용하게 된다. (이부분은 나도 잘 몰라서 차후에 찾아볼 예정 평소에 npm run dev로 썻는데 npx next dev도 같은 명령어로 작동된다.) 1. Next.js + Typescript + Tailwindcss 기본적으로 사용되는 next의 경우 Next + 타입스크립트 혹은 Next + 테일윈드 이런식으로 묶여저 있는 베이스 템플릿 설치가 가능하다. 두가지 방법 다 사용해 본 결..

노마드코더 Next.JS 챌린지 - TailwindCSS 마크업

https://play.tailwindcss.com/NsM6CsdqFl Tailwind Play An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser. play.tailwindcss.com 사용 스택 TailwindCss 이번주차 첫 캐럿마켓 챌린지는 템플릿을 가지고 Tailwindcss만 사용하여 최대한 유사하게 만드는 과제였다. 다른건 사용하지 않고 순수 html + tailwind와 svg만 가지고 만드는 과제였다.

Next.js 프로젝트 (애니 마켓) 제작 시작

기존에 배웠던 지식을 활용하여 내가 만들고 싶은 사이트를 하나 처음부터 제작하기로 했다. 이전부터 고민하던 이미 한번 써본 Create react app이냐 아예 SSR까지 고려가능한 Next.js를 처음 사용해보느냐 고민하다가 마침 노마드코더 챌린지가 시작되어 같이 Next.js를 배워보며 제작할 예정이다. 애니메이션을 좋아해서 서코같이 애니관련 물품을 사고 파는 사이트를 구현할 예정이다. 1. 프로젝트 디자인 및 Html 마크업 이번 제로베이스 Html / Css 과제 5편과 Js과제 5편을 하면서 정말 큰 도움을 얻었다. 2주간 모든 과제를 완료하고 리펙토링 중이며 완료되면 느꼇던 점은 블로그에 적을 예정이다. 먼저 Figma 시안과 더불어 과제 요구서를 보고 과제를 만드는데 정말 많은것을 느낄 수..