You will get there

프로필 구현을 해보겠다. 먼저 index_login.html을 수정해준다. 네비게이션에서 프로필칸을 만들어주고 profile.html을 주소로 넣어주고 만들어준다. index_login.html의 구조를 가져와 바디쪽에 https://mdbootstrap.com/docs/standard/extended/profiles/ Bootstrap Profile - free examples, templates & tutorialResponsive profile pages and cards built with Bootstrap 5. User profile card, profile picture, followers, avatars, comments, social stats, edit profile form.mdboot..

모듈화는다음과 같이 스크립트 파일을 하나씩 연동해줘야하는걸 스크립트 파일 하나로만 모든 스크립트를 불러올 수 있게하는 기능이다.먼저 js_login.js 를 제외한 나머지를 주석처리한다. (!! 스크립트 타입을 module로 바꿔줘야한다.) 그리고 js_login.js 최상단에 다음과 같이 추가해준다.{}안에 있는 것들은 각 js파일에 있는 함수이다. 사용할 함수만 적어주면된다.이렇게 스크립트 파일 하나로만 다 불러오는걸 볼 수 있다. 근데 이런 오류가 생긴다. onload보다 먼저 실행되기때문에 이러한 오류가 발생한다. 기존 바디태그에 있는 onload를 삭제한다.init() 함수 아래에 다음과 같은 코드를 추가한다. DOMContentLoaded는 DOMTree에서 먼저 실행한다. !!!여기서 주의..

안전한 데이터 저장을 위해 암호화 구현을 해보겠다. https://cdnjs.com/libraries/crypto-js crypto-js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersJavaScript library of crypto standards. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, ..

지난 글에 popup에 대한 쿠키를 했다면 이번엔 로그인 폼에서 ID저장을 해보겠다. 먼저 로그인 폼에 아이디 저장 체크박스를 만들어줄 것이다.비밀번호를 잊으셨나요? 아래에 다음과 같은 아이디 기억 코드를 작성한다.그럼 이렇게 기능이 없는 빈 체크박스가 만들어진다. 그럼 id가 저장되는 기능을 구현해보겠다. js_login.js으로 넘어가 check_Input 함수 최상단에 다음과 같은 변수를 넣어준다. ( html에 구현한 체크박스를 가져옴. ) 그리고 최하단 submit()이전에 다음과 같은 코드를 넣어준다. 저번에 만들었던 setCookie 함수를 통해 쿠키를 저장하는 과정이다. 이제 기존에 만들었던 js_popup.js에서 set,get 쿠키 함수들을 가져와서 적용한다. 여기서 주의해야할점은 기존..

아이디,비밀번호 입력창에 스크립트가 들어가면 그 스크립트를 로그인되는 과정중에 읽어들인뒤 실행을 할 수 있다. 해킹 방법 중 하나인데, 이걸 방지하기 위한 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..

원형 식탁을 만들며 설명하겠다.Cylinder을이렇게 세팅하겠다.  Shift + 이동으로 복사해주고 아래 먼저 수정하겠다. 윗면의 Polygon을 잡고 Shift + 크기조정 Shift + 이동으로 다음과 같은 모양을 만들어준다. 두께도 조절해준다. 이제 다리를 만들거다. Symmtry를 적용해준다.이미지에 보이는 곳을 Radial로 바꿔준다.그리고 Count를 4로 바꾼다.그럼 이렇게 기즈모가 접혀있는 형태처럼 보이는데,이 기즈모의 크기를 피자모양으로 나눠서 미러링한다고 생각하면 편하다. 그리고 Edge 하나를 잡고 Chamfer을 준다. !!!참고로 기즈모를 기준으로 잡아야 모두 적용된다 가운데 엣지는 Remove해주고 폴리곤을 잡아준다. 그리고 숨겨져있는 객체를 드러내고 Shift + 이동으로 크..

Symmetry를 이용한 식탁을 만들거다. 직접만들면서 설명해보겠다. 먼저 다음과 같은 Box를 만든다. 그리고 Edit poly로 밑변을 Polygon으로 잡고 작게 조절해준다. 여기서 각 모서리를 둥글게 만들건데 네 귀퉁이에 다 적용하려면 번거로울 수 있는데 이때 사용하는게 바로 Symmetry이다. Symmetry는 대칭으로 거울에 반사되듯이 생성및작업을 해준다. Symmetry를 적용하고 네 귀퉁이중 하나만 작업해도 모두 적용된다는 소리이다. 먼저 modifier List 에서 Symmetry를 찾아준다. 그리고 Y축까지 버튼을 눌러 키면 미러 기즈모가 보이며 어느쪽으로 대칭이 되는지 알 수 있다.  Edge를 통해 한 곳을잡으면 이렇게 저동으로 네 귀퉁이가 다 잡히는 걸 볼 수 있다.  여기서 ..

이번 과제는 본인이 원하는 걸 만드는 과제였다. 원래는 하나의 오브젝트정도만 만들면 됐지만 여러 오브젝트들을 만들어보고 싶었고 3D라는 장점을 최대한 살려서 만들고 싶은 마음에 위의 결과물을 만들었다. 간단하게 구역 별로 설명하겠다. 첫 번째 - 핸드폰  멕스를 처음 만져본 나는 여기서 애를 좀 먹었었다. 바로 핸드폰이였다. 모서리를 둥글게 만드는건 에딧 폴리에서 Edge - Chamfer 을 하면 돼서 쉬웠는데 문제는 뒤의 영역이였다. 카메라가 촬영하는 느낌을 내고싶은 나에겐 세그먼트로 나누고 그 영역을 Polygon - Bevel 을 하고 반대 부분은 Delet로 없앴다. 그리고 통해 Align을 통해 밑변도 평평하게 만들었었다. 근데 핸드폰 쪽에 폴리곤을 삭제해서 어떻게 채우지 하고 고민을 계속하다..

데이터 타입의 종류를 설명하자면 원시 , 참조 타입이 있다. 원시 타입은 쉽게 말해 하나의 정보를 저장하는 것이다.  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에..