Fresh life: 신선한 인생

아래 이미지처럼 동일한 폴더에 있는 파일을 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과 같이 상품의 이름과 가격을 하드코딩하여 출력합니다. 이 방식은 상품 리스트가 변경되거나..