You will get there

아이디,비밀번호 입력창에 스크립트가 들어가면 그 스크립트를 로그인되는 과정중에 읽어들인뒤 실행을 할 수 있다. 해킹 방법 중 하나인데, 이걸 방지하기 위한 XSS 방지 를 적용해보려고 한다. https://cdnjs.com/libraries/dompurify dompurify - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersDOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browser..

화살표 함수란 무엇일까? 기존 함수 선언 방식인 function 키워드를 비교적 간결하게 만든 선언방식이다.js_popup.js 에서 예를들면 기존에 이렇게 함수 선언을 했다면,위와 같은 이미지로 하는게 화살표 함수이다. 화살표 함수의 장점은 간결하고 명확한 표현이다.단점은 new연산자 사용 불가능이다.(객체 생성 X) 다음은 로그인 창 구현이다. 먼저 기존의 메인html에서 검색하기 버튼 옆에 로그인 버튼 하나를 만들겠다.검색하기 아래에 다음과 같이 코드를 해주면위의 이미지처럼 상단에 로그인 버튼이 표시되는걸 볼 수 있다. 로그인 버튼을 눌렀을때, 새로운 창이 떠야하므로 popup.html을 만든것처럼 로그인폴더와 login.html을 생성해준다. 생성이 완료되었다면 부트스트랩에서 디자인을 가져올 것..

데이터 타입의 종류를 설명하자면 원시 , 참조 타입이 있다. 원시 타입은 쉽게 말해 하나의 정보를 저장하는 것이다.  let number =5;let str = "안녕" 이런 것처럼 말이다. 참조 타입은 두개 이상의 정보를 저장하는 것이다. 이제 실제로 작성해보겠다. 먼저 js_data.js 파일을 만들어준다.추가로 다음과 같은 코드를 짜고 메인 html에 스크립트를 불러주고 홈페이지 로딩후 개발자 모드로 콘솔에서 확인한다. 이렇게 콘솔에 보이는걸 볼 수 있다. 여기서 undefined 와 null의 차이가 있는데 undefined는 스크립트에서 자동으로 생성한 비어있는 값인데null은 직접 값을 부여한 것이다. 즉, 빈 칸을 그냥 빈 칸으로 둔 것과 빈 칸에 "없음"표시를 해둔 것이다. 다음은 참조 타..

팝업창에 시간을 보여주는 기능을 추가하겠다.js_popup.js 에 다음과 같은 코드를 작성한다. 시간을 보여주는 함수를 정의하고 여기서 Date()는 스크립트 안에 있는 시간을 확인할 수 있는 함수이다,아래 함수는 ID가 divClock인걸 divClock에 저장하는 것이다. 시간에 관한 함수들도 전부 스크립크에 내장되어있는 함수이다. 간단하게 해석하면 12시가 넘어가면 오후를 출력후 12시가 넘어간 시간에 -12를 해서 오후OO시로 출력하게하고 그게 아니면 오전으로 출력하게 만든다.  그리고 divClock.innerText = msg; 는 위의 결과값들을 divClock에 저장하는 것이다. setTimeout은 내장함수로 1000을 붙여 1초마다 갱신한다는 표시이다.   그리고 popup.html에..

몇가지 기능들을 구현할건데 이런 기능 처리는 대부분 .js파일로 구현해준다. 쉽게 말하면 핵심 로직을 구현하는 것이다.  어떤식으로 적용되는지 테스트를 해보겠다.그럼 js 폴더 - js_test.js 를 만들어보겠다.이렇게 만들었다면이렇게 코딩을 작성한다. 위의 코드를 설명하면 var는 변수 선언할때 사용하는 것이다. 이렇게 코드작성을 완료했어도 사이트에 바로 적용되는게 아니다. 메인 html에서 스크립트 파일을 불러줘야한다.  이걸 head 태그에 작성해준다. 그리고 사이트를 실행하고 F12를 눌러준다.그럼 위의 이미지처럼 개발자 창이 나올텐데 여기서 Sources를 들어가준다 그럼 이렇게 나오는데 이상하게 내가 작성한 js폴더와 파일이 보이지않는다. 왜그럴까? js파일의 이름이 잘못되었다. 이걸 다시..

네비게이션 바를 알아보기전에. 우리는 부트스트랩이란걸 알아볼 필요가있다. 부트스트랩이란 뭘까?부트스트랩은 프론트엔드를 꾸밀 수 있는 툴킷 웹사이트이다.https://getbootstrap.kr/ Bootstrap강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기getbootstrap.kr각종 여러가지 html 코드들이 적혀져있는 사이트라 사이트를 만든다면 참고할만한 사이트이다. 네비게이션 바그럼 네비게이션 바는 뭘까? 요즘 사이트를 보면 네비게이션 바가 없는 사이트는 찾아볼 수 없다.롤 화면을 예시로들면 맨 상단에 있는 창이다. 즉, 웹사이트에선 메뉴얼을 ..

테이블이란 무엇일까?? 테이블은 표이다. 우리가 쉽게 접하는 예시는 캘린더(달력)이 있다테이블이란 무엇일까??테이블은 표이다. 우리가 쉽게 접하는 예시는 캘린더(달력)이 있다. 그럼 우리의 웹사이트에서 테이블을 만들어보자. 테이블 만들기일단 기본적으로 사용하는 태그들을 알려주겠다.  : 표를 담는 컨테이너 : 표 제목 : 데이터 셀 그룹 : 헤딩 셀 그룹 : 바닥 셀 그룹 : 행 여러, 포함열 제목(헤딩) 셀, : 데이터 셀 기본적인 태그들을 알았다면 이제 코드를 작성해보자 먼저 에 다음과 같은 코드를 작성한다.이 코드는 테이블 텍스트의 폰트사이즈와 색깔을 정한다 그리고 에 다음과 같은 코드를 작성한다.위의 코딩과같이 코딩을했다면이렇게 표가 나온다. 코드를 만약에이렇게 수정한다면,tr - 행 이니까 행..

오늘은 이미지를 웹페이지에 넣어볼 것이다. 먼저 프론트가 뭔지부터 설명해주겠다. 웹 개발은 크게 프론트엔드,백엔드로 나뉜다. 쉽게 말하자면프론트엔드 - 이용자가 직접 보는것. 쉽게 말해서 화면백엔드 - 각종 기능들(로그인,회원가입,좋아요, 주문 등)이다. 오늘은 이미지를 넣을거기때문에 프론트에 관한 개발이다. 하지만, 무슨 이미지를 넣을지, 어떤 구조로 만들어야할지 막막하다.  그럴때, 여러분들이 좋아하는 웹사이트를 따라만들어봐도 좋다. 나는 게임 디자이너가 꿈이기때문에 게임 사이트를 만들어 볼 것이다. 내가 개인적으로 생각하기에 레이아웃이 깔끔한 사이트는 리그오브레전드 사이트이다. 근데 들어가서 확인해보면 보통 사이트들이 다 구조가 비슷한걸 볼 수 있다. 상단중단하단 이런 구조로 되어있다. 참고로 사이..

먼저 자바웹프로그래밍이란. 우리가 흔히 보는 웹사이트를 만드는 일이다. 쇼핑몰,게임사이트 등등 모든 것 말이다. 배우고있는 내용을 여기에 정리할 예정이다. 일단 첫 번째로 해야할 일은 Visual Studio Code(클릭)를 다운해야한다. 다운을 완료했다면 실행 후 로그인을 한다면좌측에 이런칸이 보일 것이다. 여기서이 빨간박스인 마켓플레이스를 클릭하면 된다. 여기선 자바언어 외에도 파이썬 등등 각종 언어를 다운해 실행시킬 수 있다. 우리가 다운할걸 검색하면 된다. 우리는소스 코드 정렬,태그 자동 닫기, 이미지 Prettier, image Preview 브라우저 실행 Live server 언어팩 Korean language pack 이것들을 다운해주면 된다. 그럼이렇게 설치된 모습을 볼 수 있다.  그..