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

* 미니프로젝트는 순수 HTML, CSS, 간단한 JS 로 제작하였습니다. * 항해99_3기 본 과정에 앞서 사전스터디 그룹에서 미니프로젝트를 시작하게 되었습니다. 미니프로젝트의 내용은 사전강의를 통해 배운 내용으로 간단한 커피리뷰 사이트를 제작해서 배포까지가 목표입니다. 제가 맡은 부분은 커피에 대한 상세 페이지 부분입니다. 1. 홈 화면 홈 화면은 다른분이 작업 해주셨습니다. 최종컨셉때 헤더의 해당 체인점을 클릭하면 그 체인점의 인기메뉴 / 추천메뉴를 출력하는게 목표였습니다. 본 과정을 앞둔 시점에서 시간적 여유도 없고, 무엇보다 저희 실력이 아직은 너무 부족해서 여기서 마무리하게 되었습니다. 홈 화면의 상품들은 크롤링해서 만든 API 를 사용하지 않았더라구요.... 그냥 다 하나하나 img와 nam..

* 미니프로젝트는 순수 HTML, CSS, 간단한 JS 로 제작하였습니다. * 항해99_3기 본 과정에 앞서 사전스터디 그룹에서 미니프로젝트를 시작하게 되었습니다. 미니프로젝트의 내용은 사전강의를 통해 배운 내용으로 간단한 커피리뷰 사이트를 제작해서 배포까지가 목표입니다. 제가 맡은 부분은 커피에 대한 상세 페이지 부분입니다. 1. 객체(데이터)만들기 지난 번의 코드에서 수정을 조금 했습니다. 더보기 수정사항 db에 저장하기 위해서 아래 사진과 같이 객체 데이터를 만들었습니다. 핵심내용은 for 문안에서 배열을 순회하면서 true 인 값의 id 값을 반환 하는 건데요, id 값이 사진을 보시면 detail-form-radio-bad 입니다. 좀 이상하죠,, 이런 id값을 을 반환 하는 이유는 아래 사진과..

* 미니프로젝트는 순수 HTML, CSS, 간단한 JS 로 제작하였습니다. * 항해99_3기 본 과정에 앞서 사전스터디 그룹에서 미니프로젝트를 시작하게 되었습니다. 미니프로젝트의 내용은 사전강의를 통해 배운 내용으로 간단한 커피리뷰 사이트를 제작해서 배포까지가 목표입니다. 제가 맡은 부분은 커피에 대한 상세 페이지 부분입니다. 1. 댓글기능 만들기 HTML, CSS로 간단하게 댓글 작성을 해야할 것 같은 분위기로.... 꾸며봤습니다. (실제 XD 디자인) HTML, CSS는 다른 부분에서 다루겠습니다. 2. 코드 function reviewSubmit() { const reviewInput = document.getElementById("detail-review-content") const reviewV..

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로 변환하는 데 주로 사용되는 도구 체인입니..