본문 바로가기

분류 전체보기62

6. Next.js html을 반복문으로 줄이고 싶으면 map export default function List() { let menu = ['Tomatoes', 'Pasta', 'Coconut'] let a = [10, 20, 30] return ( 상품목록 {menu[0]} $40 {menu[1]} $40 {menu[2]} $40 ) } array 자료형  변수를 사용하면 문자, 숫자 등을 잠깐 보관해둘 수 있다.변수 하나에 여러개 문자나 숫자를 보관하고 싶은 경우에는 array 자료형을 사용하면 된다. let a = [10, 20, 30];let b = ['김', '이'.. 2024. 5. 31.
5. Next.js 여러 페이지 만들기 (라우팅) 페이지를 나누는걸 전문용어로 라우팅이라고 합니다. url로 페이지를 나누는것을 라우팅이라고 하며 라우팅하려면 일반적인 웹서버들은누가 /list로 접속하면 상품목록 html을 보여달라는 코드를 서버에 짜놔야 하는데Next.js를 사용하면 그런 코드를 짤 필요가 없이 폴더와 파일 하나만 만들면 자동으로 됩니다. Next.js는 라우팅을 할때 다음과 같이 라우팅 합니다.1. app 폴더 안에 폴더를 생성하고 이름을 정합니다.2. 폴더에 page.js파일을 만들고 안에 html을 작성하면 자동으로 url과 페이지가 완성됩니다. 위 처럼 코드를 작성하고 url에 /list 라고 붙여서 검색하면 만들어놓은 페이지가 생성됩니다.  layout.js 사용하기헤더같이 반복적으로 사용해야할 기능들이 있지요  그래서 lay.. 2024. 5. 30.
4. Next.js JSX문법_HTML안에 변수 { } JSX 문법 특징인데 변수를 html 중간에 바로 넣어서 보여줄수 있구여쌩javascript 사용하려면 HTML 찾아서 이 글자 다른걸로 바꿔주세요 라고 길게 써야 할텐데리액트는 그딴거 필요 없구여 변수를 HTML에 넣고 싶으면 { } 중괄호 열어서 변수명만 넣으면 되구여 className, id, href 이런 속성도 변수를 넣을 수 있는데 거기에도 { } 중괄호만 열면 됩니다. 이런식으로도 디자인을 줄 수 있습니다~ 2024. 5. 30.
3. Next.js 페이지 레이아웃 만들기 이전글에 만들었던 탬플릿에 h4테그를 활용해서 "안녕"이라는 문구를 넣어서 웹페이지에 띄워 봤습니다.웹사이트 레이아웃은 리액트 버전 HTML과 CSS로 작성됩니다.크게 차이점은 없습니다. 리액트버전 HTML의 4가지 규칙이 있는데 다음과 같습니다. 1. 리액트버전 HTML을 JSX라고 부르는데 중요한건 아니구여 2. HTML을 작성할때 return( ) 안에 작성하게 됩니다. 3.테그들을 평행해서 사용이 불가능 합니다. 아래처럼 div의 같은줄에 div를 생성하게 되면 아래처럼 빨간줄이 나오게 되구여return () 안의 HTML을 넣을때 1개의 로 시작해서 끝내야 하구여이런 룰이 있기 때문에 위 코드 처럼 div안에 작성을 해야 하구여 4. HTML에 스타일을 집어넣고 싶으시다구여 그럼 아래처럼 cla.. 2024. 5. 30.

티스토리툴바