스프링으로 웹을 개발하는 세 가지 방법 정적 컨텐츠 MVC, template API 1. 정적 컨텐츠 방식 html 파일을 그대로 웹브라우저로 내려주는 방식 static 경로에 저장하여 사용 => 예) resource/static/파일이름.html 실행 시 파일 이름을 그대로 붙여서 실행 => 예) http://localhost:8080/파일이름.html 웹브라우저 주소 호출 -> 내장 톰캣 서버(스프링 부트) -> 스프링 컨테이너(어? 관련 컨트롤러가 없네?라고 인식) -> static 폴더로 가서 해당하는 파일을 찾음 -> 그대로 실행 2. MVC, template(템플릿) 가장 많이 쓰는 방식 html을 동적으로 바꿔서 주는 방식 동적으로 바꾸는 방식을 model, view, controller로 ..

✍ 지금까지의 공부 안녕하세요! 요즘에 계속 글을 올리다가 5일 넘도록 안 올리는 건 오랜만인 거 같은데 그동안도 계속 공부를 했었습니다 ㅎㅎ. 공부를 하다 보니 이제 어느 정도 습관도 잡히고 어떻게 공부해야 될지 처음보다 틀이 잡히고 길이 조금은 보이는 거 같습니다! 지금까지 html, css, javascript를 간단하게 복습하고 헷갈리는 것들을 정리하며 공부를 했었고 spring 공부를 하며 지금은 react를 써보고자 react 공부를 하고 있는 중입니다. 또 정보처리기사 자격증 시험을 준비하는 중에 있어서 최근에 정보처리기사 자격증 공부도 시작을 했습니다. 쭉 나열하고 보니까 이래저래 다양하게 하고 있네요 ^^;; ✍ 처음보다 조금 넓어진 시야, 새로운 다짐 처음에는 아무것도 모르는 상태에서 ..

*22.04.01 추가* - 합격 후기 및 공부법 https://nack1400.tistory.com/69?category=1242744 2022 정보처리기사 날짜, 필기 합격 후기 및 공부 방법(+ 실기 공부, 책 선택, 시험 일정, 합격 기준 1. 2022 정보처리기사 시험 일정 *정보 출처 및 원서접수 사이트* http://www.q-net.or.kr/rcv001.do?id=rcv00103&gSite=Q&gId= 원서접수안내 | Q-net 원서접수 안내 접수확인 및 수험표 출력기간 접수당일부터.. nack1400.tistory.com 이제 그동안 하지 않았던 정보처리기사 공부를 시작해보려 합니다! 작년에 하려 했으나 계속 일정이 맞지 않아서 하지 못했는데 이제야 한다는 게 조금 늦은 감이 있기는 하..

이번에는 자바스크립트 코드로 간단하게 웹페이지에 시간을 출력하는 방법을 알아보겠습니다 1. 사용할 객체와 메서드 Date() : 시간을 표현할 때 쓰는 객체 Date().getHours() : 시를 출력 Date().getMinutes() : 분을 출력 Date().getSeconds() : 초를 출력 "String". padStart(문자열 길이, 추가할 문자열) : 문자열의 기본 길이를 설정하고 기본 길이보다 짧으면 맨 앞에 지정한 문자를 추가해줌 예) "1".padStart(3,"0") => "001"을 리턴 getInterval(함수, ms단위초) : 함수를 입력한 시간 주기에 한 번씩 실행 2. 사용 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on..

이벤트 리스너와 몇 가지 예시, html 클래스 변경 방법에 대해서 정리해보겠습니다. 1. 이벤트 리스너(EventListener)란? - 특정 이벤트가 발생할 시 자바스크립트 객체에서 이를 감지하는 것 - 이러한 감지한 이벤트에 따라 특정 함수를 호출하거나 값을 변경하는 것을 이벤트 처리라고 한다. 2. 이벤트 리스너 및 처리 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen. h1.addEventListener("처리할 이벤트", 실행할 함수); click : 클릭시, mouseenter : 마우스가 들어올 시, mouseleave : 마우스가 나갈 시 기타 여러 이벤트들이 있음. 아래 링크 참조 https://developer.mozill..

자바스크립트로 html 태그를 변경하고 텍스트를 넣는 innerText와 innerHTML에 대해서 정리해보겠습니다! 1. innerText vs innerHTML innerText : 태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 텍스트만 바뀜) innerHTML : 태그 자체를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 전체 다 바뀜) 2. innerText 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen. - tmp.innerText = '텍스트'를 사용하면 텍스트 자체가 바뀐다. - 위의 예는 tmp.innerText += '텍스트'를 이용하여 계속해서 텍스트를 추가해준 예시 3. inner..

JSON에 대해서 정리해보겠습니다! 1. JSON이란? - JSON(javascript Object Notation)라는 의미의 축약어 - Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷 중요 특징 - 생긴 게 JavaScript 같음, JavaScript 객체 표기와 유사 - 그냥 데이터 포맷이지 문법이 아니다. - 그래서 다른 프로그래밍 환경(다른 언어 등)에도 사용할 수 있다. - key: value의 형태를 가지고 있다. 2. 사용법(JSON.stringify(object)) - 기본 JSON 선언 방법 let json = JSON.stringify(true); console.log(json); //출력 //true - 배열을 넣었을 때 json = JSON.stringify(['..

이번에는 자바스크립트에서 사용되는 객체에 대해서 알아보겠습니다. 저는 자바를 위주로 해서 클래스와 객체에 대해서 익숙한 편인데 자바스크립트에서는 조금 달라서 헷갈리는 부분이 있더라고요. 그 부분 위주로 정리해보겠습니다! 1. 객체 생성 방법 //기본적인 세가지 생성 방법 let obj1 ={}; let obj2 = new Object(); let obj3 = {key1: value1, key2: value2}; 2. 객체에 property(프로퍼티)를 추가 또는 제거 - *추천하지 않음* let obj1 ={}; obj1.key = value; console.log(obj1.key); //출력됨 delete obj1.key; console.log(obj1.key); //출력안됨 - 이미 선언된 객체를 바..

자바스크립트의 함수에 대해서 정리해보겠습니다! 1. 기본 사용법 //함수를 선언 function A(str){ console.log(str); } //함수를 호출 A('Hello'); 2. 객체(주소)를 매개변수로 //함수를 선언 function B(object){ object.name = 'abc'; } //함수를 호출 let object1 = {name: 'qwe'}; B(object1); console.log(object1); // name: 'abc'로 바뀜 - 객체(주소)를 매개변수로 사용가능 3. default 디폴트 값 추가하기 //함수를 선언 function C(a,b ='default 값'){ console.log{`${a}, ${b}`}; } //함수를 호출 C('str'); //a에만..

이번에는 제가 개인적으로 자주 헷갈려하는 = 연산자 대해서 정리해보겠습니다! ==, === 연산자 == : 데이터 타입에 상관없이 비교한다. === : 데이터 타입까지 고려해서 비교한다. let a = '1'; let b = 1; //데이터타입에 상관없이 내용이 같으면 같다! console.log(a == b); //true console.log(a != b); //false //데이터타입까지 검사해서 같아야 같다! console.log(a === b); //false console.log(a !== b); //true object에 주의! let a = {name: 'a'}; let b = {name: 'a'}; let c = a; //1번 console.log{a == b}; //false //2번 ..