
📌SPA 와 다른 점 클라이언트 사이드 렌더링(CSR)인 vue SPA에서의 데이터 호출 방식은 아래와 같다. {{ user }} created( ) 라이프사이클 훅을 이용하여 컴포넌트가 생성되자마자 서버에 데이터를 요청해 받아온 값을 화면에 표시하는 코드입니다. 이때 서버에 데이터를 요청하는 시점은 브라우저에서 Vue.js 코드가 화면의 DOM을 구성하고 스크립트를 실행하는 시점이다. CSR과 SSR의 차이점에서도 볼 수있지만 CSR은 빈 화면을 브라우저가 받아 화면에 뿌릴 요소와 데이터를 모두 브라우저에서 구성하기 때문에 위와 같은 코드가 가능하다. 하지만, nuxt는 서버에서 페이지의 내용을 모두 그려서 브라우저로 가져가야 한다. 그럼 어떻게 해야할까? 📌NUXT의 REST API 호출 방식 SPA..

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. vue SPA을 SSR의 반대인 CSR방식입니다. 이 글에서는 CSR과 SSR 방식의 차이점을 살펴보고 SSR의 장단점을 분석해보도록 하자 📌CSR 예를 들어 vue.js 를 처음 환경설정한 후 npm run server를 해보면 서버에서 넘겨받은 HTML 코드에 body 태그 본문에 밖에 없지만 화면에는 welcome To Your Vue.js App 텍스트와 이미지가 있다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한 vue.js 라이브러리가 그려준 것이다. 즉 브라우저에서 화면의 결과를 그려낸 것이다. 📌SSR과 CSR의 차이점 1)웹 페이지를 로딩하는 시간 웹 페이지 로..

📌Nuxt란? nuxt.js는 SSR프레임워크으로 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크입니다. 웹 애플리케이션을 제작할 때 필요한 Vuex, router, Axios와 같은 라이브러리들을 미리 구성하여 SPA(Single Page Application), SSR(Server Side Rendering),정적 웹 사이트(Static Cenerated Website)를 쉽게 제작할 수 있습니다. SPA : "서버"에서 브라우저로 빈 HTML을 던진다. 이벤트를 잡아서 화면을 바꿔준다 서버로 가지않고 이벤트로 화면을 바꿔준다. SSR : 페이지를 뒤쪽에서 서버에서 url로 요청을 했을때 페이지를 다 그려서 원본파일 그대로 보내준다. 📌Nuxt의 장점 nuxt로 개발했을 때의 장점은 다..

1)프로세스 프로세스는 메모리에 올라갈 때 운영체제로부터 시스템 자원을 할당받는다고 언급했었다. 이 때 운영체제는 프로세스마다 각각 독립된 메모리 영역을, Code/Data/Stack/Heap형식으로 할당해 준다. 각각 독립된 메모리 영역을 할당해 주기 떄문에 프로세스는 다른 프로세스의 변수나 자료에 접근할 수 없다. 이와 다르게 스레드는 메모리를 서로 공유할 수 있다. 이에 대해 더 자세히 설명하자면, 프로세스가 할당받은 메모리 영역 내에서 stack 형식으로 할당된메모리 영역은 따로 할당받고, 나머지 Code/Data/Heap 형식으로 할당된 메모리 영역을 공유한다. 따라서 각각의 스레드는 별도의 스택을 가지고 있지만 힙, 메모리는 서로 읽고 쓸 수 있게 된다. (스레드들이 프로세스의 Code/Dat..

📌프로세스와 스레드의 차이 👉프로세스와 스레드에 대한 정의 프로세스: 운영체제로부터 자원을 할당받은 작업의 단위 스레드 : 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위 우선 운영체제에 대해 기본 배경지식이 없다면 정의만 들었을 때 무슨 소리인지 쉽게 이해가 잘 안된다...^^ 프로세스의 정의에서 작업이라는 단어와 스레드의 정의에서 실행흐름이라는 단어를 기억해두고 공부해보자! 프로그램 -> 프로세스 -> 스레드 1) 프로그램 -> 프로세스 먼저 프로세스와 스레드에 대해 본격적으로 설명하기 전에 프로그램에 대해서 설명하고 가야 한다. 프로그램: 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태를 말한다. 이게 무슨말이냐 하면 아직 실행되지 않은 파일 그 자체를 가리키는 말..

포트폴리오 제작을 완료한 후 실제 볼 수 있는 사이트를 만들기 위해 여러 방법들을 알아보았다. 그 중에서 포트폴리오 같은 정적파일을 깃허브에 올리고 자체적으로 사이트를 만들 수 있는 방법이 있어 까먹지 않기 위해 글을 쓴다. 1. 우선 깃허브에 포트폴리오 레포지토리를 올려놓아야한다. (레포지토리 생성 방법은 생략) 2. 해당 repository-settings- github pages - source 나는 이미 설정을 해두었지만 source에 있는 branch를 main으로 설정해준 후 save해준다. 그러면 아래 이미지 처럼 초록색 메세지창? 에 링크가 뜬다. 3. 다시 레포지토리로 돌아와서 우측에 enviroment 클릭 4. view deployment하면 해당 페이지가 나온다. 이렇게만 해도 거의..
- Total
- Today
- Yesterday
- vite
- 개발자
- 이벤트리스너
- 레포지토리패턴
- props
- 시스템설계
- 더미데이터
- 항해플러스후기
- JWT토큰
- 항해플러스프론트엔드
- store.js
- vue.js3
- 항해솔직후기
- 구름톤
- 결제기능
- 회고
- 그림으로 이해하는 시스템 설계
- focus와blur
- eventListner
- 디자인시스템
- 알고리즘
- vue3
- Vue.js
- http
- 프로덕트설계
- event종류
- React18v
- Repository pattern
- 로그인 인증
- react
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |