IT12 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. 2. Next.js 개발환경 세팅 1. node.js 설치 18버전 이상2. VSCode설치3. next.js 사용할 폴더 생성후 에디터로 생성 #프로젝트생성npx create-next-app@latest --experimental-app 이렇게되면 project name이 my-app으로 생성되었기 때문에 폴더 안에 my-app으로 VSCode 에디터에서 다시 my-app 폴더로 열어주시면 됩니다. 요놈이 메인페이지 되겠구여, 이놈을 웹에서 보고싶다 하면 터미널에서 다음과 같이 적어주시구여 npm run dev위 처럼 터미널에 작성하면 미리보기가 나오게 될겁니다~ 잘 나오구여 프로젝트 파일들 설명 app 폴더 : 님들이 코드짤 폴더 page.js : 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지 .. 2024. 5. 30. 1. Next.js를 쓰는 이유 Client-side Rendering 시대는 갔고요Server-side Rendering 시대가 온 겁니다.Html 같은 걸 서버에서 만드는 짓거리를 Server-side Rendering라고 합니다.서버에서 웹페이지를 다 만들어서 사용자에게 바로 보여주는 것이기 때문에 유저한테 자바스크립트 코드를 보낼 필요가 없어서페이지 로딩 속도가 가볍고 빠르고요 구글 검색 노출도 빠르구여원하는 곳에서는 Client-side Rendering이 가능합니다.Next.js는 풀스택 프레임 워크구여 프런트 백엔드 한 번에 개발 가능하구여파일과 폴더만 만들면 알아서 페이지 하나 뚝딱 만들어 지구여 회원인증이라던지 DB라던지 만들기 쉬워진 편이에요 2024. 5. 30. 이전 1 2 3 다음
