본문 바로가기

분류 전체보기

(74)
html5 시멘틱(semantic) 요소 시멘틱(sementic) 요소 시멘틱 요소란? semantic - "의미 있는", "의미의" 표현 중심이 아닌 의미 있는 구조 문서 작성을 위한 요소. HTML 문서에 의미를 부여하려는 취지 사람이 이해하는데 용이 프로그램(검색 엔진, 문서 해석기)등의 문서 처리와 해석 헤더 영역 메뉴 영역 콘텐츠 영역 사이드 영역 푸터 영역 포털 웹 사이트 화면의 구성을 예로 보면 영역을 나눠서 볼 수 있다. 헤더 영역, 메뉴 영역, 콘텐츠 영역, 사이드 영역, 푸터 영역 등. HTML5이전에는 div 요소에 id를 줘서 화면을 구성했다. 이 id는 사람 by 사람으로 지을 수도 있어서, 요소가 무엇을 의미하는지 알고 싶으면 직접 개발자에게 물어보거나... 추론을 해서 나름의 결론을 내려야 했다. 이를 보완하기 위해..
JavaScript 객체 타입(Object) 객체 타입(Object) 객체란 뭘까? -객체는 0개 이상의 프로퍼티로 구성된 집합이다. -여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이라고 할 수 있다. var person = { name: 'Lee', age: 20 } 위의 코드에서 name: 'Lee'와 age: 20을 각각 프로퍼티라고 볼 수 있으며 name과 age를 프로퍼티 키, 'Lee'와 20을 프로퍼티 값으로 볼 수 있다. 자바스크립트는 객체 기반의 프로그래밍 언어이다. 자바스크립트에서 원시 값(숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, symbol 타입)을 제외한 나머지 값은 모두 객체라고 본다. 원시 타입은 변경 불가능 한 값immu..
JavaScript 옵셔널 체이닝 연산자와 null 병합 연산자 옵셔널 체이닝 연산자와 null 병합 연산자 단축 평가와 관련하여 ES11(ECMAScript2020)에서 추가 된 연산자가 있다. 단축 연산을 좀 더 꼼꼼하게 사용할 수 있도록 해준다. 만약 실제 코드에 쓴다면 무척이나 유용하긴 할 듯. 실제로 써본적도 없고, 사실 있는 줄도 몰랐다;; 다른 사람이 짠 코드를 이해해야 하는 경우가 생길 수도 있으니 학습해둔다. 손에 익게 자주 써봐야겠지만 아직까지 이 코드로 다른 개발자와 얼마나 잘 소통될진 확신할 수 없다(...) 옵셔널 체이닝 연산자 옵셔널 체이닝 연산자 연산자 ?.로 사용한다. ?.는 좌항의 피연산자가 null 또는 undefined인 경우, undefined를 반환하고 그렇지 않으면 우항의 프로퍼티를 참조한다. 어렵지 않다. 예시를 보자. let..
JavaScript 단축 평가 단축 평가 단축평가란, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. let a = 4; let b = 2; if( a > 3 || b > 5 || c > 5 || d > 2 || ...) { console.log('hi'); }다음과 같은 조건식이 있다고 해보자. 논리합(||)은 둘 중 하나만 맞으면 true를 반환한다. 자바스크립트 엔진은 조건을 먼저 본다. 먼저 (a > 3) 봤더니 true를 반환하고 조건이 성립된다. 그러면 뒤에 나오는 (b > 5)가 true이든 false이든 log를 찍는다. 그렇기에 자바스크립트 엔진은 뒤의 조건을 true인지 false인지 아예 검증해보지도 않는다. 검증 과정이 단축되었다. 논리 연산자를 사용한 단축 평가 논리곱(&&, and..
JavaScript 암묵적 타입 변환과 명시적 타입 변환 javascript 타입 변환 javascript의 모든 값엔 타입이 있는데 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 하고, 자바스크립트 엔진이 필요에 의해 타입을 변환하는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다. 암묵적 타입 변환 자바스크립트 엔진이 표현식을 평가할 때 코드의 문맥을 보고 암묵적으로 타입을 강제 변환시켜준다. 문자열 타입 문자열에서 +는 문자열 연결 연산자로 이용된다. 문자열 연결 시 피연산자 중 문자열 타입이 아닌 경우 문자열로 바꿔서 연결시켜준다. //숫자 타입 0 + '1' // '01' -0 + '' // '0' NaN + '' // "NaN" // 불..
JavaScript 값, 리터럴, 표현식, 문 값, 리터럴, 표현식, 문 값 값value은 식(표현식expression)이 평가evaluate되어 생성된 결과를 말한다. 이게 무슨 말인고 하니.. 우리가 javascript에서 변수를 선언하고 데이터를 할당하면 메모리에 저장된다. 이렇게 할당 된 값은 메모리에 2진수(문자 'A'는 0100 0001)로 저장된다. 이렇게 메모리에 저장된 것을 값이라고 부를 수 있다. var expressionValue = 10 + 20; var literalValue = 30;여기서 변수 expressionValue에 할당 된 값, 즉 메모리에 저장 된 값은 10+20이 아닌 10+20을 평가(≒계산)한 30이다. expressionValue와 literalValue 둘 다 값 30이 할당된다. expr..
인텔리J 인코딩 설정 및 테스트 코드 한글 깨짐 방지 설정 프로젝트 인코딩 설정Settings - File Encodings 탭으로 들어가서, Project Encoding: UTF-8,Properties Files(*.properties)의 Default encoding for properties files : UTF-8로 변경해주고Transparent native-to-ascii conversion 또한 체크해주도록 한다. 테스트 코드에 한글 깨짐 방지인텔리J에서 소스 파일을 읽고, 바이트 코드를 만드는 과정에서 한글 문자열 깨짐Help → Edit Custom VM Options..에서-Dfile.encoding=UTF-8문구를 추가 하도록 한다. Uploaded by Notion2Tistory v1.1.0
spring-boot API 방식 웹을 개발한다는 건 크게 세 가지 방법이 있다.-정적 컨텐츠 -MVC와 템플릿 엔진(가장 많이 씀-jsp, php 등) -API API 방식정적 콘텐츠 방식 제외하고. MVC방식이냐 API방식이냐만 알고 있으면 됨.@GetMapping("hello-string") @ResponseBody public String helloString(@RequestParam("name") String name) { return "hello" + name; //hello spring }@ResponseBody HTTP 통신 프로토콜(그 중 POST)에... header부분과 body부분이 있다. HTML header/body말고 HTTP 통신 과정에 body부분에 이 내용을 직접 넣어주겠다.반응을 HTTP BODY에 넣어..

반응형