Fresh life: 신선한 인생

설치 시스템 요구 사항: Node.js 16.8 or 이후 macOS, Windows(WSL 포함) 및 Linux가 지원됩니다. 자동 설치 모든 것을 자동으로 설정하는 [create-next-app]를 사용하여 새 Next.js 앱을 만드는 것이 좋습니다 . 프로젝트를 만들려면 다음을 실행합니다. npx create-next-app@latest 설치 시 다음 프롬프트가 표시됩니다. What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `sr..

아래 이미지처럼 동일한 폴더에 있는 파일을 import 할 때는 ./를 입력하고 파일명.js를 해주면 됩니다. import age from './data.js' 만약에 같은 폴더가 아닌 상위 폴더 즉 cart의 상위 폴더인 app폴더에 있는 파일을 import 하려면 어떻게 해야 할까요? ../ 를 입력하고 파일명.js를 해주면 됩니다. import age from '../data.js' 아주 쉽죠?! 아래처럼 같은 폴더에 data.js 파일을 생성하고 let age = 20; export default age 변수를 지정해주고, 내보내줍니다. 그리고 기존 page.js 파일에서 import age from './data.js' age 변수를 임포트 한 뒤에 변수를 {}에 넣어주면 끝입니다. 그러면 아래..

component에 앞서 우선 기존 프로젝트에 [cart]폴더를 새로 생성해줍니다. 그리고 page.js라는 이름의 파일을 생성 합니다. 더보기 /cart 페이지 레이아웃 export default function Cart() { return ( Cart 상품명 $40 1개 상품명 $40 1개 ) } 더보기 global.css .cart-item { padding: 10px; display: flex; justify-content: space-around; border-bottom: 1px solid grey; line-height: 0px; } 그리고 위 두 코드를 추가해줍니다. 다시 한 번 설명하자면 첫번째는 페이지를 생성하는 코드이고, global.css코드는 페이지를 꾸미는 코드입니다. css코드..

Next.js와 Node.js는 모두 JavaScript로 만들어진 웹 개발 프레임워크와 런타임입니다. 하지만 둘은 목적과 사용 방법이 다릅니다. Node.js: JavaScript 런타임 환경입니다. 브라우저 밖에서 JavaScript 코드를 실행할 수 있도록 합니다. 서버사이드 렌더링(SSR)을 구현할 수 있도록 해주며, 데이터베이스, 파일 시스템 등의 I/O 작업을 처리할 수 있는 기능이 있습니다. 주로 서버 사이드 애플리케이션 개발에 사용됩니다. node js 기초 문법 강의 node js 기초 문법 강의&필수 모듈(ex:express) 이용 방법 안녕하세요! 조신선입니다. 오늘은 Node.js에 대해서 알아보도록 하겠습니다. node.js의 기초 개념과 문법 그리고 이를 사용하기 위해 대부분 사..

nextjs 포스팅 프로젝트는 처음부터 계속 동일할 예정입니다. 이미지는 링크를 넣을 수도 있지만, 링크의 이미지는 해당 링크에서 제공하는 이미지가 삭제되면 내 페이지의 이미지도 삭제되기 때문에, 따로 이미지를 받아서 넣는 방법을 채택했습니다. 1. public 폴더안에 내가 원하는 이미지를 추가합니다. 이미지 파일은 반복문으로 사용할 수 있게 동일한 파일명 + 숫자로 저장해 줍니다. ex) food0.jpg food1.jpg 무료 이미지는 아래 페이지에서 다운받을 수 있습니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니..

export default function List() { let 상품 = ['tomatoes','pasta','coconut'] return ( 상품목록 {상품[0]} $40 {상품[1]} $50 {상품[2]} $50 ) } 위 코드는 List 컴포넌트를 정의하고, 해당 컴포넌트 내부에서 let 상품 = ['tomatoes','pasta','coconut'] 문장을 통해 상품 리스트를 배열로 선언합니다. 이후 JSX 코드 내부에서 상품 리스트를 출력하기 위해 map 함수를 사용하는 대신, 각각의 상품을 배열의 인덱스를 이용하여 출력합니다. 이 때, {상품[0]} $40, {상품[1]} $50, {상품[2]} $50과 같이 상품의 이름과 가격을 하드코딩하여 출력합니다. 이 방식은 상품 리스트가 변경되거나..

웹페이지에는 메인 URL이 있고, 해당 웹페이지에서 다른 항목을 클릭하면 위 이미지와 같이 "/58"이라는 문자가 추가되면서 다른 페이지로 넘어갑니다. 한 번 더 예를 들자면, programming 카테고리를 클릭하니 위와 같이 메인 URL 뒤에 "/category/programming"라는 문자가 생기면서 해당 페이지로 이동을 하게 됩니다. 이처럼 웹페이지를 만들 때 필수적으로 알아야 하는 기능입니다. Next.js에서 다른 페이지를 만드는 방법은 다음과 같습니다. 1. pages 디렉토리에 새로운 페이지 파일을 생성합니다. 예를 들어, list 파일을 생성하면 http://localhost:3000/list경로로 접근할 수 있는 페이지가 생성됩니다. 저는 list라는 파일을 생성했습니다. 이렇게 파일..

Next.js는 React.js 기반의 서버사이드 렌더링을 지원하는 프레임워크입니다. 기존의 React.js에서는 SPA(Single Page Application)를 만드는 것이 일반적이었습니다. 하지만 SPA의 단점 중 하나는 초기 로딩속도가 느리다는 것입니다. 이러한 단점을 보완하기 위해 SSR(Server Side Rendering)을 사용하면 페이지 로딩 속도가 빨라지고 SEO(Search Engine Optimization)에 좋은 효과를 가져옵니다. 또한, Next.js는 정적 사이트 생성 기능도 제공하며, TypeScript와 같은 다른 언어와 함께 사용이 가능합니다. 이러한 다양한 기능과 편의성이 있는 Next.js는 최근 웹 프론트엔드 개발에서 매우 인기 있는 프레임워크 중 하나입니다...

안녕하세요! 조신선입니다. 오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 백엔드 코드 공유를 드리도록 하겠습니다. https://chatdoge-jofresh.pages.dev/ 오늘의 운세 - 챗신선🪐. 운세에 대해서 물어봐 주세요. 사랑, 건강, 일 무엇이든 대답해드릴께요. chatdoge-jofresh.pages.dev chat gpt를 사용해보신 분들은 아시겠지만, 기본적으로 대화형입니다. 내가 질문을 하면, gpt가 답변을 해주는 식이죠. 제가 만든 웹페이지도 마찬가지입니다. 우선, chatgpt는 가스라이팅이 필요하기 때문에 아래 부분에서 가스라이팅을 해주었습니다. 가스라이팅을 하지 않고, 운세를 보면 나는 그런 능력이 없다느니,, 뭐 그런식의 답변을 내놓기 때문에 적절한 가스라이..

안녕하세요! 조신선입니다. 오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 코드 공유를 드리도록 하겠습니다. 유투버 조코딩님 교육자료를 보고 배워서 따라 만든 코드인데, 제가 css를 조금 더 변경했습니다. 초보자분들은 사실 이 코드만 보면 바로 이해가 안 되시겠지만, 저도 보고 배운거라 교육자료를 따로 올리기 보다는 코드만 공유하는 쪽으로 방향을 정했습니다. 아직 광고 승인은 안 났지만, 구글애드센스 신청을 해놓은 상태입니다. 완성코드에 보면 위와 같은 광고 애드센스 코드가 추가되어 있습니다. 우선 프론트엔드 코드 먼저 공유드릴께요. 코드 실행 화면 HTML 삽입 미리보기할 수 없는 소스 아래 코드를 실행하면 첫번째 페이지에 아래 이미지와 같은 웹페이지가 노출됩니다. 그리고 생년월일과 태어난..