프로젝트 썸네일형 리스트형 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR) 클라이언트 사이드 렌더링(CSR, client-side rendering) 서버에서 JSON 파일만 보내주고 html을 그리는 역할은 클라이언트가 담당, SPA에서 주로 사용 사용자의 행동에 따라 필요한 부분만 다시 읽어들여 서버측 랜더링 보다 빠른 인터랙션을 기대할 수 있음(페이지를 이동하면 새로운 페이지 요청) 초기 구동 속도가 느림 SEO 문제, CSR 되는 페이지를 빈 페이지로 인식 보안문제, SSR에서는 사용자 정보를 세션으로 관리, 클라이언트 쪽에서는 쿠키 말고는 마땅한 저장공간이 없음 서버 사이드 렌더링(SSR, server-side rendering) 전통적인 방식 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 모든 데이터가 매핑된 서비스 페이지를 클라.. [JS]웹팩(webpack)이란? 프로젝트를 진행하다보니 웹팩에 대한 내용이 나와 간단히 정리해본다. Next.js에 기본 내장되어 있다고 하는데 정확한 사용법까지는 몰라도 왜 쓰는지와 기능 정도는 알아두려한다. 간략하게 요약하면 여러개 나뉘어 있는 파일을 하나로 모아주고 압축해주는데 이 과정에서 에러처리, 압축처리 등 기존에 번거로운 작업을 자동화 시켜주는 도구로 보인다. 웹팩(webpack) 오픈소스 자바스크립트 모듈 번들러 모듈 번들러 : html, css, 자바스크립트 등의 파일을 하나의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구(빌드, 번들링, 변환 비슷한 뜻) 모듈 : 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 필요이유 파일 단위 자바스크립트 모듈 관리: 변수 유효 범위 등으로 큰 단위 작업시 오류 발생.. [HTML]HTML란? 기본 내용 정리 HTML(Hypertext Markup Language)이란? 웹페이지를 만드는데 사용하는 Hypertext(링크)를 중요 특징으로 하는 마크업 형식을 가지는 프로그래밍 언어 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지 태그와 속성 (도널드 커누스) (도널드 커누스) a 태그 : 링크가 있음을 알려줌 href = "주소" 속성 이름 값으로 url을 주면 링크가 걸림 target = "_blank" 속성, 새로운 창으로 열림 속성의 순서는 상관 없음 a 태그는 자동으로 underline 이 생김 리스트 태그를 통한 목록화 태그, list : 각각의 항목이 구분되어 리스트화됨 태그, unordered list: li 태그 들을 성격에 따라 그룹핑할 때 사용하는 태그 태.. [JS] 프로젝트 시작 프로젝트 시작 배경 C언어로 프로그래밍을 시작하고... 퉤퉤 소리 나올만큼 지쳐갈때 쯤 코테준비를 한다는 핑계로 파이썬으로 도망쳐 나오고 알고리즘 문제를 풀며 나름 재미를 붙였다. 파이썬 하는 김에 주식 관련 간단한 프로그램도 만들며(=복붙 후 일부 수정 ㅎ) 재미를 느끼고 Django 프레임워크를 사용해보기도 했다. 그러다 백엔드인지, 프런트엔드인지 뭐가 더 맞는지 결정해야겠다는 생각을 하고 풀스택 프로젝트를 경험해보기로 결정한다. 결정 백엔드는 Django로 하고 프런트를 JS로 하려고 할까 하다가 JS 풀스택으로 변경한다. 이유는 Javascript로 풀스택 프로젝트가 가능하기도 하고 한 언어가 각기 다른 환경에서 어떻게 작용하는지 궁금하기도 했다. 물론 자바스크립트 풀스택이라 해도 바닐라 자바스크.. 이전 1 다음