본문 바로가기 메뉴 바로가기

망고

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

망고

검색하기 폼
  • 분류 전체보기 (93)
    • 회고 (9)
    • CS (13)
      • OS (2)
      • Network (8)
    • 알고리즘 (10)
      • 개념정리 (5)
      • 프로그래머스 (5)
    • 스터디 (13)
      • 면접 스터디 (2)
      • 자바스크립트딥다이브 (11)
    • WEB (37)
      • HTML&CSS (3)
      • Vue.js (12)
      • Javascript (12)
      • Nuxt.js (3)
      • React.js (7)
    • APP (2)
      • React Native (2)
    • 기타 (8)
    • 취미 (1)
  • 방명록

분류 전체보기 (93)
(3) nuxt의 비동기 데이터 호출 방식

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

WEB/Nuxt.js 2022. 5. 24. 12:59
(2) 서버사이드 렌더링이란?

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 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)웹 페이지를 로딩하는 시간 웹 페이지 로..

WEB/Nuxt.js 2022. 5. 23. 15:53
(1) Nuxt.js 소개

📌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로 개발했을 때의 장점은 다..

WEB/Nuxt.js 2022. 5. 23. 15:30
프로세스와 스레드의 차이

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

CS/OS 2022. 3. 29. 22:32
프로세스와 스레드의 차이

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

CS/OS 2022. 3. 29. 00:09
깃허브 웹호스팅으로 포트폴리오 링크 연결하기

포트폴리오 제작을 완료한 후 실제 볼 수 있는 사이트를 만들기 위해 여러 방법들을 알아보았다. 그 중에서 포트폴리오 같은 정적파일을 깃허브에 올리고 자체적으로 사이트를 만들 수 있는 방법이 있어 까먹지 않기 위해 글을 쓴다. 1. 우선 깃허브에 포트폴리오 레포지토리를 올려놓아야한다. (레포지토리 생성 방법은 생략) 2. 해당 repository-settings- github pages - source 나는 이미 설정을 해두었지만 source에 있는 branch를 main으로 설정해준 후 save해준다. 그러면 아래 이미지 처럼 초록색 메세지창? 에 링크가 뜬다. 3. 다시 레포지토리로 돌아와서 우측에 enviroment 클릭 4. view deployment하면 해당 페이지가 나온다. 이렇게만 해도 거의..

WEB/HTML&CSS 2022. 3. 15. 16:39
이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
  • 👻 github
  • ✏️ 공부 기록
TAG
  • vite
  • 개발자
  • 이벤트리스너
  • 레포지토리패턴
  • props
  • 시스템설계
  • 더미데이터
  • 항해플러스후기
  • JWT토큰
  • 항해플러스프론트엔드
  • store.js
  • vue.js3
  • 항해솔직후기
  • 구름톤
  • 결제기능
  • 회고
  • 그림으로 이해하는 시스템 설계
  • focus와blur
  • eventListner
  • 디자인시스템
  • 알고리즘
  • vue3
  • Vue.js
  • http
  • 프로덕트설계
  • event종류
  • React18v
  • Repository pattern
  • 로그인 인증
  • react
more
«   2025/09   »
일 월 화 수 목 금 토
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
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바