- SSR, CSR이란 무엇인가? - Next.js란 무엇인가? - Next.js 설치 후 사용해보기 - Next 가 버전이 두개가 있다 - /pages - /app - git이 무엇인지? - commit - add - push - pull - github에 Next.js 내코드 올릴 저장소 만들어보기
# 코딩과제
- 레이아웃을 만들어보기 - 가능한 부분은 컴포넌트화 시키기
웹페이지 작동 방식 시기별
static tites -서버가 html파일들을 가지고 있다 클라이언트가 서버 접속하면 html파일을 보내는 방식 -페이지 내에서 다른링크를 클릭하면 다시 서버에서 해당페이지의 html을 받아와서 페이지 전체가 업데이트가 되어야 한다
iframe -문서내에서 또 다른 문서를 담을 수 있는 iframe 태그 도입 -페이지 내에서 부분적으로 받아와서 업데이트
XMLHttpRequest -html문서 전체가 아닌 json가 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아 옴 -그 데이터를 자바스크립트를 이용하여 동적으로 html요소를 생성해서 페이지에 업데이트 하는 방식
ajax -위 방식을 이용하여 공식적 이름을 가짐 ->SPA -사용자가 한페이지에서 이동하며 부분적으로 필요한 데이터만 받아와 업데이트 함 -하나의 앱을 사용하듯 웹사이트에서도 사용성이 조금씩 좋아짐
이런 spa트랜드+ 컴퓨터성능이 좋아져서->여러가지 일을 무리없이 처리 가능+자바스크립트도 표준화가 되어 ->프레임워크가 나와
*CSR시대 -클라이언트쪽에서 알아서 다 하는 것 -서버에서 인덱스라는 html파일을 보내주면 csr에서 사용되는 심플한 html안에 어플리케이션에 필요한 자바스크립트 링크만 들어져있다 -그래서 처음 접속 시 빈화면만 보이고 다시 링크된 어플 자바스크립트를 서버로 다운을 받게 되는데 여기 자바스크립트에는 필요한 로직 뿐 아니라 어플리케이션을 구동하는 프레임워크와 라이브러리에 소스코드들도 다 포함되어 있다. -그렇기에 사이즈가 커 다운 받는데 시간이 소요된다 -추가로 필요한 데이터가 필요하면 서버에 요청해 받아온 후 이것들을 기반으로 해서 동적으로 html을 생성해서 드디어 사용자에게 최종적인 어플리케이션을 보여준다
단점 -문제점으로는 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다 -SEO가 좋지 않다-검색엔진이 웹사이트를 돌아다니며 html을 분석하는데 csr을 사용하면 html이 비어져있기에 검색엔진들이 csr로 작성된 웹페이지를 분석하는데 어려움이 있다
위의 SEO 단점을 보호해주기 위해 *SSR -클라이언트가 모든 것을 처리하는 방식과 다르게 웹사이트에 접속하면 서버에서 필요한 데이터를 가져와서 html파일을 만들게 되고 이렇게 잘만들어진 html파일을 동적으로 만들 수 있는 소스코드와 함꼐 클라이언트에게 보내진다 -클라이언트는 받아온 html문서를 받아와서 사용자에게 보여준다 -csr을 사용했을때보다 첫번째 페이지 로딩이 빨라진다 -모든 컨텐츠가 html에 담겨져있기에 조금 더 효율적인 seo를 할 수 있다
단점 -static에서 있던 깜빡임 이슈가 존재(페이지 클릭으로 이동하면 전체적인 웹사이트를 다시 서버에게 받아 오는 것과 동일하기에) -서버에 과부화 걸리기가 쉽다(특히 사용자가 많은 제품일수록 클릭을 할 때마다 서버에 요청해서 서버에서 필요한 데이터를 가지고와서html을 만들어야 하므로) -(치명적)사용자가 빠르게 웹사잍트를 확인할 수는 있지만 동적으로 제어하는 자바스크립트를 다운받지 못해서 여기저기 클릭했는데도 반응이 없는 경우가 발생할 수 있다
TTV(time to view) TTI(time to interaction)
csr은 ttv(사용자가 웹사이트를 볼 수 있음)과 동시에 tti (클릭을 하거나 인터랙션)이 가능하다 ssr은 사용자가 사이트를 볼 수 있는 시간과 실제로 인터렉션이 할 수 있는 시간이 길다
tip csr:잘제 잘 쪼개서 첫 화면에 사용자가 꼭 필요한 데이터만 먼저 보여지는게 먼지 고민하는게 필요 ssr:사용자가 보고 인터렉션한 시간의 단차를줄이기 위해 어떤 노력을 할수있을지, 어떤UI와 UX를 제공할수있을지
*ssg(static site generation) -리액트 같은 경우 csr에 특화되어 있지만 개츠비라는 라이브러리와 함께 사용하면 리액트로 만든 웹어플리케이션을 정적으로 웹페이지를 생성을 미리 해두어서 서버에 배포해 놓을 수가 있다 그리고 이렇게 만든 웹사이트들을 우리가 추가적으로 데이터를 서버에서 받아 오거나 또는 동적으로 처리해야 되는 로직이 있다면 자바스크립트 파일을 함께 가지고 있을 수 있기에 동적인 요소도 충분히 추가 할 수가 있다
*next.js는 강력한 ssr(서버 사이드 렌더링)을 지원하는 라이브러리에서 요즘은 ssg도 지원을 하고 csr과 ssr을 잘 섞어 유연하게 목적에 맞게 사용되게 도와주고 있다
라우팅 -노드(컴퓨터 네트워크)간 연결되어 통신하는 다양한 경로를 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스 -네트워크 통신의 효율성을 높여준다 정적 라우팅 -수동으로 경로를 구성하고 선택 동적 라우팅 -실제 네트워크 조건에 따라 런타임에 라우팅 테이블을 만들고 업데이트
*next 버전 -pages -pages 폴더를 루트 폴더로 사용 -각 페이지는 pages 폴더 내에 index.js 파일로 구성 -url 경로는 pages 폴더의 구조에 따라 결정됩니다. -파일 시스템 기반 라우팅으로 직관적이고 이해하기 쉽다 -정적 페이지 생성에 적합 -파일 시스템 기반 라우팅을 선호하는프로젝트에 어울린다
-app -버전이 업그래이드 되면서 최근에 새롭게 도입된 라우틴 컨벤션 -컴포넌트 기반 라우팅 사용 -app 폴더를 로투 폴더로 사용 -각페이지는 app/폴더명 폴더에 위치한 컴포넌트로 구성 -컴포넌트 기반 라우팅으로 코드 조직 및 관리가 용이 -레이아웃 구성 및 재사용이 간편 -서버 액션, 파일 시스템 기반 라우팅 등을 지원 -서버 액션을 사용하는 프로젝트
동기:순차적으로 작업을 수행 하여 소스를 1줄 보고 이해하고 또 다시 1줄 보고 이해하는 직렬적으로 일 처리를한다. 단점:소스 하나 보고 실행하고를 반복하니 두개의 소스를 동시에 실행이 안된다.
*비동기:소스가 두개 이상이 동시에 실행, 즉 병렬적으로 일 처리를 한다
jquery란? 구글링을 하면 $가 붙어 있는 자바스크립트 코드들을 볼 수 있는데
-넷스케이프 ->크롬,인익,파이어폭스,사파리....등으로 유행의 이동 -클라이언트가 다 달라 2000년대 중반에 화면 보이는게 달랐다 -jquery가 호환되게 해줌 -시간이 지난 후 클라이언트끼리 웹표준 약속을 함(mozilla에서 표준을 정함)->jquery가 필요없어짐->공부 할 필요가 줄어드는 추세
-cofficient, 각 변수별 계수의 유의확률 -회귀 모델의 R2 값은 0.7528로, 모델이 설명하는 데이터의 분산의 약 75.28%를 설명한다는 것을 의미합니다 -F-통계량(anova)은 91.38이고, 자유도는 1 및 30입니다 -F-통계량(모델의 적합)은 회귀 분석에서 SSR(회귀제곱합)을 SSE(잔차제곱합)으로 나눈 값
------------>이 결과값에서 나온 R과 f통계량이 무엇인지 더 자세히 알아보자
*R^2의 결정계수
sst(평균과 점들간의 차이)=ssr(내가 만든 모델과 평균의 차이)+sse(잔차) ->회귀모델의 적합도를 판단할 수 있는 수치
-r^2은 상관계수 제곱-ssr/sst=1-sse/sst-0~1 사이에 존재 -사용하고 있는 예측과 반응변수의 분산을 얼마나 줄였는지 -y를 예측했을 대 대비 x 정보를 사용했을 때 성능향상 정도
> install.packages("matlib")
> library(matlib)
> xlim=c(0,6)
> ylim=c(0,6)
#x축과 y축의 범위를 설정하는 변수들입니다. 여기서는 (0, 6) 범위를 설정하여 그래프의 크기를 결정합니다.
> plot(xlim, ylim, type="n", xlab = "X1", ylab = "X2", asp=1)
> plot(): #그래프를 그리는 함수입니다. 여기서는 아무것도 표시하지 않고,
#x축과 y축의 범위만 설정한 후, 비어있는 그래프를 생성합니다.
> grid() #그래프에 격자를 추가하는 함수입니다.
>
> a=c(4,2)
> b=c(1,3)
>
> vectors(b,labels="b", pos.lab=4, frac.lab=.5, col="green")
> vectors(a,labels="a", pos.lab=4, frac.lab=.5)
> vectors(a+b,labels="a+b", pos.lab=4, frac.lab=.5, col="red")
-plot() 함수를 사용하여 그래프를 생성하는 부분입니다. 여기서 사용된 매개변수들의 의미는 다음과 같습니다:
xlim, ylim: x축과 y축의 범위를 설정합니다. 여기서는 xlim 변수에 (0, 6) 범위를, ylim 변수에도 (0, 6) 범위를 설정하였습니다. 이는 그래프의 x축과 y축이 0부터 6까지의 범위를 가지도록 설정하는 것을 의미합니다.
type="n": 이 매개변수는 그래프의 유형을 지정하는 것입니다. 여기서 "n"은 "none"을 의미하며, 데이터를 포함하지 않고 비어있는 그래프를 생성합니다. 이는 실제 데이터가 아니라 그래프의 구조를 설정하기 위한 것입니다.
xlab, ylab: x축과 y축에 라벨을 추가하는 것을 지정합니다. 여기서는 "X1"과 "X2"라벨이 x축과 y축에 각각 추가됩니다.
asp=1: 이 매개변수는 그래프의 종횡비(Aspect Ratio)를 설정합니다. 여기서는 1로 설정되어 있으므로, x축과 y축의 길이의 비율이 1:1이 되도록 그래프가 생성됩니다. 즉, 그래프가 정사각형 모양으로 보이도록 설정하는 것입니다.\
-pos.lab 및 frac.lab는 vectors() 함수의 옵션 중 일부입니다.
pos.lab: "라벨"의 위치를 지정하는 매개변수입니다. 여기서는 숫자 4가 사용되었으며, 이것은 라벨이 벡터 끝에서부터 어느 정도 떨어진 위치에 표시되는지를 나타냅니다. 일반적으로 1은 벡터 시작점에 가깝고 2는 벡터 끝점에 가까운 위치를 의미합니다. 여기서 4는 끝점에서 시작점 쪽으로 이동하며, 끝점으로부터의 거리를 조절하는 역할을 합니다.
frac.lab: "라벨"의 위치를 벡터의 어느 부분에 표시할지를 결정하는 상대적인 비율을 지정하는 매개변수입니다. 여기서는 0.5가 사용되었으며, 이것은 라벨이 벡터의 중간에 표시되도록 설정합니다. 예를 들어, 0은 벡터의 시작점에, 1은 벡터의 끝점에 라벨이 위치하도록 합니다. 따라서 0.5는 벡터의 중간에 라벨이 표시됩니다.
=t(x)%*%x=단위행렬/1이된다/ 4.510281e-17이나 2.775...e..는 0에 가까운 매우 작은 숫자다 -고유벡터와 전치한 고유벡터의 곱은 단위행렬에 근접한 값으로 나온다 -그 의미는 고유벡터들이 서로 직교한다는 의미이다
- det(mat)=prod(eanalysis$value) 이건 무슨 의미?
행렬의 determinant(det): 행렬의 determinant는 부피 변화율을 나타내며, 행렬이 벡터를 변환할 때 부피의 변화를 결정합니다. 따라서 determinant는 해당 행렬의 크기와 구조에 대한 정보를 제공합니다.
고유값들의 곱(eigenvalues): 고유값들의 곱은 해당 행렬의 고유벡터들이 변환에서 어떻게 동작하는지를 나타냅니다. 고유값들은 행렬이 벡터를 변환할 때 벡터의 크기만을 변화시키고 방향을 유지하는데, 이 때 고유값들은 크기 변화율을 나타내며, 이 값들의 곱은 전체 변환의 크기 변화율을 나타냅니다.
따라서 행렬의 determinant(det)와 고유값들의 곱은 행렬의 변환 특성과 크기에 대한 중요한 정보를 제공합니다. 만약 행렬의 determinant가 0이 아니라면, 고유값들의 곱과 determinant는 서로 관련이 있습니다. 하지만 determinant가 0인 경우에는 추가적인 분석이 필요합니다.
> fx = expression(-x^2 + 6*x - 6)
> dfx = D(fx, 'x')
> dfx
6 - 2 * x
> f = function(x) eval(c(dfx)[[1]])
> f(3)
[1] 0
-expression은 함수를 만든거고 -D함수는 미분 - eval() 함수는 표현식을 평가하여 그 값을 계산합니다. 따라서 c(dfx)는 미분한 결과를 담은 벡터를 반환하고, eval(c(dfx))는 이를 평가하여 결과를 반환합니다. 여기서 [[1]]은 결과 벡터에서 첫 번째 값을 선택하는 것입니다.(chat gpt에서 가져옴)
> fx=function(x){
+ return(x^4-10*x^3+15*x^2-6*x+10)
+ }
> curve(fx)
>
> integr_by_you=function(a,b,n){
+ sum=0#처음에는 0으로
+
+ h=(b-a)/n#전체구간(1-0)을 n개로 나누면 직사각형 밑변의 길이 산출
+
+ for (i in 1:n) {sum = sum+h*fx(a+i*h)#오른쪽 직사각형으로 가면서 높이(f(x))와 h를 곱해가며 더함함
+
+ }
+ return(sum)
+ }
>
> integr_by_you(0,1,10)
[1] 9.70333
> integrate(fx,0,1)#윗 값가 거의 비슷하다다
9.7 with absolute error < 1.1e-13
curve(fx)
시뮬레이션을 활용한 수치 적분 소개
> fx=function(x) x^2
> integrate(fx,-2,2)
5.333333 with absolute error < 5.9e-14
> #위와 같은 방식으로
> set.seed(132) #이 함수를 호출하면 이후에 생성되는 난수는 132에서부터 시작하여 동일한 순서로 생성됩니다.
> a=-2
> b=2
> c=0
> d=4
> n=10^5
>
> x= runif(n,a,b)
#"x = runif(n, a, b)는 n개의 난수를 생성하고,
#이를 [a, b] 범위의 균일 분포에서 생성하여 x에 할당하는 것을 의미합니다.
> y= runif(n,c,d)
>
> temp= sum(y<fx(x))
> 16*temp
[1] 532832
#temp는 y < fx(x)를 만족하는 경우의 수를 합산한 것입니다.
#즉, fx(x)의 값보다 y 값이 작은 경우의 수를 셉니다.
#그런 다음 16 * temp는 해당 영역의 근사치를 계산합니다.
#이 경우 16은 x의 범위가 -2에서 2까지이기 때문에 해당 영역의 넓이를 계산하기 위해 사용됩니다.
#temp는 이 영역에 속하는 균일한 무작위 점의 비율을 나타내므로,
#이를 영역의 넓이에 곱하여 전체 영역에 대한 근사치를 계산합니다//
메트릭스와 데이터프레임의 차이점 -데이터프레임은 열마다 다른 유형의 데이터를 가질 수 있다. -메트릭스는 각 열은 같은 데이터 타입을 가지고 있다. ->데이터프레임은 데이터를 정리하고 조작하는데 유용(데이터 분석, 시각화, 전처리) ->메트릭스는 통계분석(숫자형 데이터에 적합)에 유용/수학적 연산을 빠르게(특히 선형대수학)
> class(mat)
[1] "matrix" "array"
> typeof(mat)
[1] "character"
> as.matrix(mat)
[,1] [,2]
[1,] "a" "f"
[2,] "b" "g"
[3,] "c" "h"
[4,] "d" "i"
[5,] "e" "j"
> as.data.frame(mat)
V1 V2
1 a f
2 b g
3 c h
4 d i
5 e j
