Next.js는 React 기반 프론트엔드 프레임워크로 성능, SEO 및 애플리케이션 개발의 효율적이다.
또한 Routing Server Side Rendering(SSR), Static Site Generator(SSG), Image에 관한 기능이 미리 내장되어 있어 React와 같이 이러한 기능을 개별적으로 설치, 설정할 필요없이 설치 직후부터 사용할 수 있다. 현재도 계속해서 진화를 거듭하고 있다.
버전이 올라갈 때마다 기능이 확장되고 있다.
2. Next.js 프로젝트 설치
설치 명령어
밑에는 자바스크립트
npx create-next-app@latest ( @latest <- 최신버전 설치 )
# or
yarn create next-app
여기는 타입 스크립트 !
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
패키지 관리 도구로 정식 명칭은 Node Pacackage Manager이다. npm은 일종의 거대한 소프트웨어 등록소로, 프로그래머들이 만든 여러 유용한 모듈들을 보유하고 있다. (전세계 게임의 배급과 관리를 담당하는 플랫폼인 steam과 비슷한 개념이라고 생각하면 된다.) 이렇게 npm에 업로드되어 있는 노드 모듈을 패키지라고 하는데, 우리는 필요에 따라 이 패키지들을 다운로드하여 사용할 수 있다.
2. 설치가 완료되면 cmd(터미널)에 아래와 같은 메시지가 표시되며 디렉터리에는 프로젝트명의 폴더가 생성된다.
3. 메시지에서 제안하는 바와 같이 생성된 프로젝트로 이동하여 npm start를 실행한다. 그러면 다음과 같은 초기 화면이 나타난다.
📁 CRA 디렉터리 구조
create-react-app을 통해 만들어진 폴더는 node_modules, public, src, .gitignore, package-lock.json, package.json, README.md, 그리고 숨겨져 있어서 당장은 보이지 않는 폴더인 .git으로 이루어져 있다.
node_modules
npm을 이용하여 설치한 모듈들이 저장되는 곳이다. 어떤 모듈들이 설치되었는지는 package.json의 dependencies에서 확인할 수 있다.
package.json
이 프로젝트에서 사용된 모듈과 모듈의 버전을 명시하는 파일이다. node_modules 폴더는 크기가 상당하기 때문에 github과 같은 저장소에 프로젝트를 저장할 때 제외된다. 이렇게 해도 되는 건, package.json 파일에 내가 사용한 모듈들에 대한 정보가 있어 npm install 시 이 모듈들이 자동으로 설치되기 때문이다.
package-lock.json
좀 더 명확한 버전을 표시하기 위한 파일이다. package.json에 명시된 모듈의 버전이 범위로 표기되어 있다면, 이 파일에 표기된 버전은 좀 더 명확하게 명시되어 있다.
public
HTML, img 등 정적 파일을 담는 디렉터리이다.
.git
commit 등 git 활동 기록이 저장되는 곳이다. 별도로 설치하지 않아도 commit이 가능한 것은 CRA 앱이 git 파일을 기본적으로 제공하기 때문이다. 숨김 파일이기에 숨김 파일 보기를 설정하기 전까지는 눈으로 확인할 수 없다.
src
우리가 작업하는 대부분의 코드는 이 디렉터리 내부에 위치하게 된다. 아래에서 좀 더 자세히 살펴보겠다.
src 디렉터리
App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>안뇽, 일단 테스트 한번 해볼게 이거 재밌네</p>
</header>
</div>
);
}
export default App;
이 프로젝트의 메인이 되는 최상위 컴포넌트이다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
ReactDOM.render 컴포넌트를 페이지에 렌더링하는 함수이다. 첫 번째 인자로 페이지에 렌더링할 내용(JSX 형태)을, 두 번째 인자로 그 내용을 렌더링할 document 요소를 받는다. 이 코드에서 선택된 root 요소는 public/index.html 파일에서 확인할 수 있다.
React.StrictMode 추후 사라지게 될 오래된 기능을 사용했을 때 경고를 출력하는 역할을 한다.
#반지름, 높이 값 할당
rad = input("반지름의 값을 입력하세요 : ")
#높이 사용자 입력
hei = input("높이 값을 입력하세요 : ")
#부피 출력
vol = 1/3 * 3.14 * rad ** 2 * hei
print(vol)
# 입력 대기 후 입력값 반환
5) 프로그래밍 에러
👉 설계 미숙, 결함 또는 문법 오류로 프로그램이 의도한 대로 결과를 생성하지 못하는 문제
-> 구문 오류(syntax error) : 문법 체계에 적합하지 않는 명령문 입력 시 발생
-> 실행 오류(runtime error) : 논리적으로 실행 불가능한 명령문 작성 시 발생
-> 의미 오류(semantic error) : 의미적으로 잘못 해석되는 명령문 작성 시 발생
6) 데이터 타입 변환
input type : 사용자가 입력하는 모든 데이터를 문자로 변환 하는 input 함수
예) input 함수를 통해 정수 30 입력 -> rad에 들어가는 변수값은(숫자가 아닌) 문자 형태 30 ->
# 4강 1절
# 01)
"Hello World ! "
# 출력 : 'Hello world ! '
# 02)
12 ** 10 * 5
# 출력 : 5120
# 03)
"computer" + "science"
# 출력 : 'computerscience'
# 04)
print( 2 * 7 )
# 출력 : 14
# 05)
print("Hello World!")
print("Python is Fun")
# 출력 : Hello World! Python is Fun
# 06)
print((4.5 * 2 + 4.0 * 3) / 2 )
# 출력 : 10.5
02. 데이터 저장
1) 원뿔의 부피 & 겉넓이 계산 프로그램
👉 원뿔의 부피&겉넓이 계산 알고리즘
2) 변수
👉 명령어 패러다임 언어의 특징
-> 처리할 데이터와 처리된 결과를 임시적 저장
-> 변수의 값을 변경하는 할당연산자(=)를 이요
3) 식별자
어떤 저장 공간을 어떤 명칭으로 부르기 위한 목적
👉 프로그램 내부에 정의된 객체(변수, 함수 등)의 이름
-> 문자, 숫자, 밑줄로 구성
-> 문자 또는 밑줄로만 시작 가능
-> 예약어와 동일할 수 없음
-> 길이 제한이 없음
# 변수로 사용불가
volume, Surface, _50, x , y, _name
$d$ , 1-a 2023y , else, class, r+h , 77#R
4) 예약어
👉 파이썬 인터프리터에 의해 이미 문법적인 용도로 사용되어 식별자로 사용이 불가능한 단어
False
await
else
import
pass
None
break
except
in
True
class
finally
is
return
and
continue
for
lambda
try
as
def
global
not
with
async
elif
if
yield
raise
or
4) 변수의 사용
변수의 이름만 호출하면 된다.
#반지름, 높이 값 할당
red = 20
hei = 30
#부피 출력
print( 1/ 3 * 3.14 * rad * rad * hei )
#겉넓이 출력
print(3.14 * rad * rad + 3.14 * rad * hei)
# lvalue 값 할당
# rvalue 값 호출
⭐️실습 목표
변수 사용하기
# 4강 2절 원뿔의 부피와 겉넓이 계산하는 프로그램
#반지름, 높이 값 할당
rad = 20
hei = 30
# 부피출력
print(1 /3 * 3.14 * rad ** 2 * hei)
# 겉넓이 출력
print(3.14 * rad ** 2 + 3.14 * rad * hei)
# ㄴ 출력 : 12559.9999999999998 / 3140.0
