PWA란 ?PWA(Progressive Web App)이란 '웹 기술로 만드는 앱 같은 경험' 으로 핵심은 서비스 워커(Service Worker)와 웹 앱 매니페스트(Manifest)를 이용해 오프라인 동작, 설치(홈 화면 추가), 푸시 알림 등 실제 동작하는 기반은 웹이지만 네이티브스러운 기능을 제공한다는 것. PWA의 핵심 구성HTTPS : 보안 컨텍스트 필수 (서비스 워커 구동 조건)Service Worker : 네트워크 프록시처럼 동작. 캐싱/오프라인/백그라운드 처리 담당Web App Manifest : 앱 이름, 아이콘, 시작 URL, 화면 모드 등 설치 메타데이터 PWA의 장점배포 / 릴리즈가 빠름구글플레이 스토어나 앱스토어 심사없이 웹 배포로 가능함으로써 즉시 업데이트 반영 (CI/CD..
Web
Node.js 자바스크립트는 브라우저의 인터프리터로 작동(스크립트를 해석) -> 브라우저 자체에서 실행이 가능 백엔드에서 실행하긴 위해서 Node.js를 설치해야 한다. Node.js를 설치하면 브라우저가 없이도 자바스크립트가 돌아가는 환경을 만들어 줄 수 있다. npm이란 ? Node Package Manager의 약자로 프레임워크나 자바스크립트로 구현된 다양한 모듈들을 만들어 놓은 곳. 프로그램을 설치하는 것처럼 모듈을 다운받아 사용한다. npm 터미널 명령어 npm init - npm 시작하는 초기화 설정 npm install (패키지이름) - 해당 npm 모듈 설치 (뒤에 -g를 붙이면 global 뜻으로 해당 프로젝트뿐만 아니라 내 컴퓨터 전체에 적용) npm uninstall (패키지이름) -..
Ajax 의 주요 구성 요소 1. XMLHttpRequest : 웹서버와 통신을 담당하는 것으로서 사용자의 요청을 웹서버에 전송해주고, 웹서버로 부터 받은 결과를 사용자의 웹브라우저에 전달해줌. 2. DOM (Document Object Model) : DOM은 HTML과 XML문서에 대하여, 이들 문서의 구조적인 표현방법을 제공하며, 어떻게 하면 스크립트를 이용하여 이러한 구조에 접근할 수 있는지를 정의하는 API 이다. DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다. 3. CSS : 글자색, 배경색, 위치 등 UI 관련 부분을 담당. 4. JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttprequest 객체를 통해 웹서버에 ..
쌍용 강북 교육센터 국비학원 Day 78일차 파일을 첨부해서 보내는 폼태그가 enctype="multipart/form-data" 으로 되어있으면 HttpServletRequest request 을 사용해서는 데이터값을 받아올 수 없다. 이때는 cos.jar 라이브러리를 다운받아 사용하도록 한 후 아래의 객체를 사용해서 데이터 값 및 첨부되어진 파일까지 받아올 수 있다. MultipartRequest mtrequest 은 HttpServletRequest request 가 하던일을 그대로 승계받아서 일처리를 해주고 동시에 파일을 받아서 업로드, 다운로드까지 해주는 기능이 있다. =첨부되어진 파일을 디스크의 어느 경로에 업로드 할 것인지 그 경로를 설정해야 한다. ServletContext svlCtx =..
쌍용 강북 교육센터 국비학원 Day 77일차 ※ 선택자를 잡을때 선택자가 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 (함수, jQuery로) 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우는 이벤트 처리는 아래와 같이 해야한다. $(document).on( "이벤트종류", "선택자", function ( ) { } ); 으로 한다. 다음은 이미지를 업로드 하기 위해 input 태그에 이미지를 선택하면 해당 이미지의 미리보기를 띄워주는 예제이다. $(document).on("change", "input.img_file", function(e) { const input_file = $(e.target).get(0); jQuery선택자.get(0) 은 jQuery 선..
쌍용 강북 교육센터 국비학원 Day 73일차 ※ method GET 방식을 사용할때는 항상 사용자가 URL에 임의의 값을 넣을 수 있기 때문에 경우의 수를 생각해 입력하는 값을 막아주어야 한다. Paging (페이징) 처리 sizePerPage - 한 페이지당 화면상에 보여줄 행의 개수 blockSize - 보통 1개 블럭당 10개씩 잘라서 페이지 만든다.1개 페이지당 sizePerPage 를 보여주는 것 TotalPage - DB에서 불러올 총 행의 개수를 반올림 한것 (남는 것까지 페이지는 구현이 되야하기 때문에 반올림) currentShowPageNo - 현재 가르키고 있는 페이지 1블럭 1 2 3 4 5 6 7 8 9 10 [다음] 2블럭 [이전] 11 12 13 14 15 16 17 18 19 ..
쌍용 강북 교육센터 국비학원 Day 70일차 라디오중에서 한개를 선택했을 경우 같은 index의 이벤트 발생 예제 위와 같이 하나의 라디오를 선택했을때 point가 적혀있는 span 태그의 addClass를 하는 예시이다. 팝업창에서 부모창 함수 호출 방법 3가지 결제로직과 같이 팝업창과 페이지창이 번갈아가면서 로직을 구현해야할 때 함수를 이용하는데 이 때 부모창 (페이지창)의 함수를 호출하는 방법이다. 일반적인 방법 - 1 opener.location.href = "javascript:부모창스크립트 함수명();"; 일반적인 방법 - 2 window.opener.부모창스크립트 함수명(); (window.opener는 부모창을 뜻한다) jQuery를 이용한 방법 $(opener.location).attr(..
쌍용 강북 교육센터 국비학원 Day 69일차 Modal 창의 값을 초기화 하는 방법 위는 대상 아이프레임을 선택해서 모달창 내부 jsp 에서 함수를 이용해 값을 초기화 시킨 것으로 페이지 구현이 많지 않을 때 사용하기 용이하다. iframe 요소에 접근하는 contentWindow 와 contentDocument 의 차이점은 다음과 같다. contentWindow 와 contentDocument 모두 iframe 하위 요소에 접근 할 수 있는 방법으로 contentWindow 는 iframe의 window (전체, 전역)을 의미하는 것이고 contentWindow.document 은 contentDocument 와 같은 것이다. contentWindow 가 contentDocument 의 상위 요소이다...
쌍용 강북 교육센터 국비학원 Day 67일차 session (세션) session이란 WAS 컴퓨터의 메모리(RAM) 의 일부분을 사용하는 것으로 접속한 클라이언트 컴퓨터에서 보내온 정보를 저장하는 용도로 쓰인다. (즉, 웹 컨테이너에 클라이언트의 상태 정보를 보관할 때 사용한다) 클라이언트 컴퓨터가 WAS 컴퓨터에 웹으로 접속을 하기만 하면 무조건 자동적으로 WAS 컴퓨터의 메모리(RAM)의 일부분에 session 이 생성되어진다. session 은 클라이언트 컴퓨터 웹브라우저당 1개씩 생성되어진다. 예를 들면 클라이언트 컴퓨터가 크롬 웹브라우저로 WAS 컴퓨터에 웹으로 연결하면 session이 하나 생성되어지고, 또 이어서 동일한 클라이언트 컴퓨터가 엣지 웹브라우저로 WAS 컴퓨터에 웹으로 연결하면 ..
쌍용 강북 교육센터 국비학원 Day 66일차 암호화 / 복호화 ※ 관련용어 ※ 암호 (Cryptography) : 해독 불가능한 형태로 변환하거나 또는 암호화된 메시지를 해독 가능한 형태로 변환하는 기술 평문 (Plain text) : 해독 가능한 형태의 메시지 암호문 (Ciphertext) : 해독 불가능한 형태의 메시지 암호화 (Encryption) : 평문을 암호문으로 변환하는 과정 복호화 (Decryption) : 암호문을 평문으로 변환하는 과정 대칭키 암호 (또는 비밀키 암호) : 암호화키와 복호화키가 같은 암호 비대칭키 암호 (또는 공개키 암호) : 암호화키와 복호화키가 다른 암호 단방향 (일방향) 암호화 알고리즘 (SHA-256 Secure Hash Algorithm) 단방향 암호화는 평문을..
