Jaeilit

SPA(Single Page Application) 한개의 페이지 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운한다. 이후 새로운 페이지의 요청이 있는 경우, 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신함. 모든 페이지가 새로고침 되는게 아니라 요청이 있는 부분만 리렌더링 되는 방식 SPA 를 CSR(Client Side Rendering) 방식이라고 한다. 클라이언트가 서버에게 최초 요청을 하면 HTML을 받아온다. 추가적인 요청에 대해서는 AJAX 을 통해 JSON 데이터를 받아서 업데이트만 해준다. SPA 장점 요청 받는 부분만 렌더링하면 되기 때문에 빠르다. (성능과 연결) 새로고침에 대한 페이지 깜빡임이 없다. 페이지의 일부만 바뀌는 것이기 때문에 application..

1. JWT JWT(JSON WEB TOKEN) 란? JSON 웹 토큰(JWT) 정보를 JSON 객체로 안전하게 전송하기 위한 간결하고 자체 포함된 방법을 정의 하는 개방형 표준( RFC 7519 )입니다. JWT는 크기가 비교적 작기 때문에 URL과 POST 매개변수를 통해 HTTP 헤더 내부에서 보낼 수 있으며 비교적 빠르게 전송됩니다. 모든 Auth0 발급 JWT에는 JSON 웹 서명(JWS)이 있습니다 . 즉, 암호화되지 않고 서명됩니다. 인용글 https://auth0.com/docs/security/tokens/json-web-tokens 항해99 미니프로젝트 사용예제 POST 요청으로 url 담아서 쿠키(token)를 전송 서버측에서 token_receive로 받아옴 받아온 token_rec..

웹 저장소 데이터를 저장을 할 때 서버 DB을 통해서 저장을 하는데, 굳이 서버에서 가지고 있지 않아도 되는 데이터들을 저장해야 할 때가 있을 겁니다. 별로 중요하지 않거나, 지워져도 되거나, 같은 말이지만 유실되도 되거나 등등 그럴때 사용 하는것이 웹 저장소입니다. 중요한 정보는 절대 저장하지 않는다! 1. Local Storage JavaScript 로 조작 도메인, 프로토콜, 포트로 묶여있기 때문에 같으면 같은 스토리지를 공유 브라우저가 달라도 도메인만 같다면 동일한 로컬 스토리지를 사용 서버에 전송하지 않음(쿠키보다 더 많은 자료를 보관 가능) 로컬 스토리지 5mb 쿠키 4kb 사용자가 지우지 않는 이상 브라우저에 계속 남아 있음 클라이언트 저장 자동로그인과 같이 지속적으로 필요한 데이터를 저장 ..

프로젝트 기획 정리 https://jaeilit.tistory.com/20 베포 도메인 http://gmkim.shop 감수성 영화관 | 로그인 닉네임은 2-8자의 한글만 입력 가능합니다. gmkim.shop 뿌듯하다 좋다,,,,

감수성 영화관 설명 영화 리뷰 작성시 영화를 보고 느낀 감정에 대해 태그를 달아놓는 형식으로 하여 나중에 태그에 달린 감수성에 따라서 영화를 분류해서 볼 수 있는 사이트 와이어프레임 1. 첫 화면(로그인) 2. 회원가입 3. 메인화면 4. 영화 상세페이지 & 리뷰 작성하기 기능 필수 포함 기능 JWT 인증 방식 로그인 구현 / jinja2 템플릿 엔진 사용 git 주소 : https://github.com/jaeilnet/hh99-3-_32_miniproject.git

1. Spread 전개 2. Rest 나머지 매개변수 3. Object.assign() 1. Spread 전개구문 인용글(MDN) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 코드 예시(배열) var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] 더보기 전개구문이 없을 때에는 배열에 요소를 추가/수정 하려면 splice(수정) 또는 push(추가), concat(붙이기) 를 사용해야 했지만 전개구문을 사용 하면 배..

1. npm과 dependencies, devdependencies 의 이해 -> dependencies 는 프로젝트를 위한 패키지들의 모임 -> devDependencies 는 개발자의 편의를 위한 패키지들의 모임 2. express 프레임워크 사용 -> 서버단을 만드는 것을 도와주는 프레임워크 3. babel의 이해와 babel 패키지 설치 및 babel.config.json 설정 + nodemon 설치 3.1 bable 이란 -> 최신코드를 Node.js 가 이해 할 수 있게 하고 complie을 도와주는 패키지 -> 공식 홈페이지 번역본 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니..

웹 크롤링과 파이썬, mongoDB 에 대해서 간단하게 학습하기 웹 크롤링 기본 툴 import requests from bs4 import BeautifulSoup # 타겟 URL을 읽어서 HTML를 받아오고, headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers) # HTML을 BeautifulSoup이라는 ..

HTML + CSS + 부트스트랩(UI) 를 이용한 간단한 페이지 제작 1. 이미지를 이미지 태그가 아닌 div 태그와 class 지정으로 하여 더 이미지를 효과적으로 제어해줄 수 있었다. ex) background-image : url(이미지경로), background-size : cover, background-position : center .wrap .img { background-image:url("http://bondo.kr/bondo/images/insence/candle/daban/t-light_candle_set/daban_incense_t-light_candle_burner_005.jpg"); width: 500px; height: 300px; background-size: cover;..

클라이언트와 서버 웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다: 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI에 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 파이어폭스 또는 크롬 과 같은 웹 브라우저) 입니다. 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다. 도구 상자의 다른 부분들 위에서 설명한 클라이언트와..