despiteallthat의 등록된 링크

키자드에 등록된 총 260개의 포스트를 확인하실 수 있습니다.

Tistory

[CSS] 벤더 프리픽스란?

오늘은 벤더 프리픽스에 대해 알아보자 CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다. Can I use? 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com * { -webkit-user-select: none; /*..

원문보기 내부링크
Tistory

지역 검색 구현하기

오늘은 지역 검색을 할 수 있는 code를 만들어보자 조건 지역명의 첫 번째 글자만 받아서 검색한다. (한글, 영어) 검색된 지역명과 data에 있는 지역명이 일치하는 지역만 보여준다. 일치하지 않는 지역은 보여주지 않는다. ( display: none; 속성 이용 ) [ searchName.html ] 지역명의 첫번째 글자를 입력해주세요. 속초 부산 포항 상주 서울 제주 김해 대구 울산 창원 마산 인천 평택 의정부 고양 성남 용인 부천 안산 남양주 시흥 파주 김포 광명 군포 이천 하남 과천 전주 군산 목포 나주 광양 춘천 원주 사천 광주 구리 삼척 당진 공주 천안 부천 수원 세종 대전 충주 [ search.js ] const numberMaxLength = function (e) { const MAX_..

원문보기 내부링크
Tistory

[JavaScript] 이벤트와 각종 이벤트 처리기

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자 [ 이벤트 ] 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다. 하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. [ 마우스 이벤트 ] 마우스 이벤..

원문보기 내부링크
Tistory

[JavaScript] JSON / XML

JSON에 대해 알아보자 [ JSON 이란? ] JSON은 JavaScript Object Notation의 약자로 name - value 한쌍으로 이루어진 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 특히 용량이 적어서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다. ※ XML이란? XML은 EXtensible Markup Language의 약자이다. 이런 XML은 HTML과 매우 비슷한 문자 기반의 마크..

원문보기 내부링크
Tistory

[JSP] JSTL (JavaServer Pages Standard Tag Library)

JSTL에 대해 알아보자 [ JSTL 이란? ] JSTL이란 자바서버 페이지 표준 태그 라이브러리를 뜻한다. 자바서버 페이지 표준 태그 라이브러리(JavaServer Pages Standard Tag Library, 약칭 JSTL)은 Java EE 기반의 웹 애플리케이션 개발 플랫폼을 위한 컴포넌트 모음이다. JSTL은 XML 데이터 처리와 조건문, 반복문,국제화와 지역화 같은 일 을 처리하기 위한 JSP 태그 라이브러리를 추가하여 JSP 사양을 확장했다. 즉, JSTL은 JSP 페이지 내에서 자바 코드를 바로 사용하지 않고 로직을 내장하는 효율적인 방법을 제공한다. HTML 코드 내의 Java 코드인 스크립틀릿 를 ${people}, 문을 , 문을 로 대체하여 사용한다. 예전에는 스크립틀릿을 많이 사용..

원문보기 내부링크
Tistory

URI / URL / URN 이란 무엇인가

오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. 이들의 각 뜻은 다음과 같이 정의할 수 있다. URI (Uniform Resource Identifier) : 자원의 식별자 URL (Uniform Resource Locator) : 자원의 위치 URN (Uniform Resource Name) : 이름 [ URI ] 통합 자원 식별자 (Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닌다..

원문보기 내부링크
Tistory

[Visual Studio Code] 가로 / 세로 메뉴바 만들기

가로 / 세로 메뉴바를 만들어보자 [ 가로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 가로 상단 메뉴바 (모든 메뉴 나오게) ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 세로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Visual Studio Code] 여러가지 shadow 이용해보기

여러 가지 shadow를 이용해보자 HTML HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Responsive web] break point / 반응형 페이지 만들기

오늘은 브레이크 포인트를 이용하여 반응형 페이지를 만들어보자 웹을 만들 때는 웹을 이용하는 기기의 사이즈에 맞춰서 웹사이트를 배치해야 한다. 장비( 스크린: 모니터, 프린트, 빔프로젝트,. 스크린리더기)등의 가로 사이즈에 맞춰서 웹사이트를 배치해야한다. 즉, 브레이크 포인트를 사용하여 모니터 가로 너비 기준을 잡아야 한다. [ 브레이크 포인트 사용 방법 ] HTML 삽입 미리보기할 수 없는 소스 @media screen and (max-width:1200px){ } 위와 같이 사용하면 되는데 max-width의 부분이 사이트의 크기를 나타내며 min-width와 같이 최소에 초점을 맞춰 사용할 수 있다. 혹은, @media screen and (min-width:760px) and (max-width:1..

원문보기 내부링크
Tistory

[JavaScript] 컴파일러 언어 vs 인터프리터 언어

오늘은 컴파일러 언어와 인터프리터 언어의 차이를 알아보자 우선, 컴파일러 언어와 인터프리터 언어의 이해를 돕기 위해 프로그래밍이란 무엇이며, 프로그래밍 언어가 무엇인지 짚고 넘어가자 [ 프로그래밍 ] 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 즉, 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드이다. [ 프로그래밍 언어 ] 사람의 문제 해결 능력을 바탕으로 정의된 문제 해결 방안은 컴퓨터에게 전달되어야 한다. 이때 명령을 수행할 주체는 컴퓨터다. 따라서 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어(machine code)로 명령을 전달해야 한다. 하지만..

원문보기 내부링크
Tistory

[JavaScript] 변수란 무엇인가?

오늘은 JavaScript의 변수에 대해 알아보자. [ 변수란 무엇인가? ] 애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력(input) 받아 처리하고, 그 결과를 출력(output)하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수란 무엇인지 그리고 왜 필요한지 살펴보자. 10 + 20 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다. 먼저 사람은 위 식을 어떻게 계산하는지 생각해보자. [ 사람 ] 사람이 위 식을 계산하려면 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10 + 20이라는 식의 의미도 해석할 수 있어야 한다. 사람이 10 + 20이라는 식의 의미를 해석하면 + 기호의 의미대로 덧셈을 ..

원문보기 내부링크
Tistory

[JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당

오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언에 의해 확보된 메모리 공간은 확보가 해제(release)되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다. 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되기 이전까지 var 키워드는 자바스크립트에서 변수를 ..

원문보기 내부링크
Tistory

[Visual Studio Code] table 만들기

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

원문보기 내부링크
Tistory

[JavaScript] 표현식과 문

오늘은 표현식과 문에 대해 알아보자 어떻게 보면 당연할 수도 있다고 생각해 간과할 수 있는 내용이지만, 굉장히 중요하다고 생각한다. [ 값 ] 값(value)은 식(표현식 expression)이 평가(evaluation)되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 다음 예제를 살펴보자. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 달리 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자로 해석하면 'A'이다. 변수는 하나의 값을 저장하기 위해 확보한..

원문보기 내부링크
Tistory

[JavaScript] 데이터 타입

오늘은 데이터 타입에 대해 알아보자 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 구분 데이터 타입 설명 원시타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에 추가된 ..

원문보기 내부링크
Tistory

[HTML] form 태그 / input 태그 타입 정리

자주 사용하는 form 태그와 input 태그의 타입을 정리해보자 [ form에서 사용하는 태그 ] 종류 설명 폼의 시작과 끝을 만든다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. [ input 태그의 유형 ] 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 password 비밀번호를 입력할 수 있는 필드 생성 search 검색할 때 입력하는 필드 생성 url URL 주소를 입력할 수 있는 필드 생성 email 이메일 주소를 입력할 수 있는 필드 생성 tel 전화번호를 입력할 수 있는 필드 생성 checkbox 주어..

원문보기 내부링크
Tistory

[CSS] 캐스케이딩 / 스타일 우선순위

오늘은 캐스케이딩과 스타일 우선순위에 대해 알아보자 [ 캐스케이딩 ] CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다. 스타일이 충돌되지 않게 하는 방법으로는 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속: 태그의 포함 관계에 따라 부모 요소..

원문보기 내부링크
Tistory

day / night mode 구현하기

day/ night mode를 만들어보자 [ 조건 ] 1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자 2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 3. 해당 모드에 맞는 버튼의 value를 변경하자 HTML 삽입 미리보기할 수 없는 소스 code day mode / night mode 핵심 [ element.setAttribute() ] Syntax : element.setAttribute(name, value) Parameters Parameter 설명 name 필수요건 속성의 이름 value 필수요건 새로운 속성의 값 ※ 주의사항 요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 ..

원문보기 내부링크
Tistory

[CSS] linear-gradient / radial-gradient / border gradient

오늘은 그러데이션 효과에 대해 알아보자 [ 그러데이션 효과 ] 웹 문서의 배경을 꾸밀 때 배경색이나 이미지를 사용하는 것 외에 그러데이션 효과로 색 다른 느낌을 줄 수 있다. [ 선형 그러데이션 ] 선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 함수 : linear-gradient linear-gradient( to 방향 / 각도, 색상 중지점, [색상 중지점.....]); [ 방향 ] 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 여기서 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. ex) 1..

원문보기 내부링크
Tistory

[JavaScript] 단축 평가

오늘은 단축 평가에 대해 알아보자 [ 논리 연산자를 사용한 단축 평가 ] 논리 합 (| |) 또는 논리 곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 다음 예제를 살펴보자 'Orange' && 'Grape' // -> "Grape" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Orange'는 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다. 논리곱(&&) 연산자에서는 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 ..

원문보기 내부링크
Tistory

day / night mode ver_2

기존의 day / night mode의 코드를 업그레이드해보자 기존 코드 day mode / night mode 기존 코드는 기능 수행을 하는 데 있어 문제는 없지만 아쉬운 점이 있다. 바로 아래와 같은 문장이 반복된다는 것이다. // body.style.backgroundColor // body.style.color 지금은 코드가 짧아 간단하지만, 만약 엄청나게 긴 문장을 갖고 있었다면 유지 보수하기 어렵다. 그래서 객체를 만들고, 객체 안 메서드로 배경색과 글자 색을 바꿀 수 있게 만들기로 했다. 그리고 기존의 방식처럼 setAttrubute 메서드를 사용하지 않고, button을 onclick 했을 때 toggle 메서드 안에 this를 넣었다. 그 후 script구문 안 toggle메서드에 파라미..

원문보기 내부링크
Tistory

[CSS] 여러가지 선택자

오늘은 여러 가지 선택자에 대해 알아보자 [ 연결 선택자 ] 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. [ 하위 선택자 ] 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택 자라고도한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 [ 자식 선택자 ] 자식 선택자(child selector)는 하위 선택자와 ..

원문보기 내부링크
Tistory

[HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag)

오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다. [ HTML5에서의 시맨틱 웹 ] HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었다. 예를 들어 기존에는 내용 로만 나타낼 수 있던 머리 부분을 내용 로 쉽게 더 의미론 적으로 나타낼 수 있게 되었다. 이는 div와 id = h..

원문보기 내부링크
Tistory

[Visual Studio Code] overflow 사용하기

div와 같은 태그에 width: 200px / height: 200px과 같이 지정해놓고 안에 긴 글을 적어놓았다고 해보자. Test Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat ..

원문보기 내부링크
Tistory

[Visual Studio Code] scroll-behavior: smooth

a태그를 사용하여 html내에서 이동하다 보면 뚝뚝 끊기는 것과 같은 이동을 보인다. 이럴 때 scroll-behavior: smooth;를 사용하면 부드럽게 이동할 수 있다. 사용 1Lorem 2Lorem 3Lorem 4Lorem 1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem. 맨위로 가기 2Lorem ipsum dolor sit amet consectetur adipisicin..

원문보기 내부링크
Tistory

[Visual Studio Code] justify-content

CSS 속성 중에 justify-content를 사용해보자 Code justify-content:flex-start item1 item2 item3 item4 item5 justify-content:flex-end item1 item2 item3 item4 item5 justify-content:center item1 item2 item3 item4 item5 justify-content:space-between item1 item2 item3 item4 item5 justify-content:space-evenly item1 item2 item3 item4 item5 justify-content:space-around item1 item2 item3 item4 item5 현재. container css..

원문보기 내부링크
Tistory

[Visual Studio Code] flex-direction

CSS에서 flex-direction 기능을 사용해보자. flex-direction: row item1 item2 item3 item4 item5 flex-direction: row-reverse item1 item2 item3 item4 item5 flex-direction: column item1 item2 item3 item4 item5 flex-direction:column-reverse item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-start item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-end item1 item2 item3 item4 item5 flex-dire..

원문보기 내부링크
Tistory

[Visual Studio Code] opacity / transition-duration 이용해보기

css에서 opacity와 transition-duration 속성을 이용해보자 code inner opacity는 투명도를 의미한다. 0: 보이지 않음 1: 보임 위의 코드에서는 inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. .box:hover .inner.box { opacity: 1; } . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다. transition-duration: 1s;: 에니메이션이 실행되는 시간을 1초로 지정한다.

원문보기 내부링크
Tistory

[Visual Studio Code] 여러가지 transition 사용해보기

여러 가지 transition을 사용해보자 code box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box01 : 기존 width 200px의 두배인 400px만큼 채워짐 box02 : span의 지정색인 pink가 빠지고 darkcyan 색이 보임 box03 : box color -> black / font color -> white로 변경 box04 : height 10px만큼 채워짐 box05 : width 60px만큼 채워짐 box06 : 애니메이션 지연시간 2초 줌 box07 : 좌측 상단부터 우측 하단까지 채워짐 box08 : width 100%를 기준으로 채워짐 box09 : he..

원문보기 내부링크
Tistory

[Servlet] Servlet이란 무엇일까?

서블릿이란? 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술이다. 자세히 말하자면, 클라이언트가 어떤 요청을 하면 그 결과를 다시 전송해주는 역할을 하는 것이다. 서블릿은 웹 서버 측에서 실행되므로 CGI 방식을 따라야 하며, 웹 서버에 존재하는 수많은 자원에 접근할 수 있어야 하며, 자바 프로그램이므로 자바 문법을 따라야 하며, 자바 서블릿이 실행될 수 있도록 자바 실행 기능을 지원해 주어야 한다. [ Servlet 특징 ] 클라이언트의 요청에 대해 동적으로 작동하는 웹 애플리케이션 컴포넌트이다. html을 사용하여 요청에 응답한다. Java Thread를 이용하여 동작한다. (서블릿이 자바 기술을 사용하여 자바의 특성을 갖고 있기 때..

원문보기 내부링크
Tistory

[Servlet] @WebServlet() / web.xml 이용해보기

본격적으로 Servlet을 이용하여 코딩하고자 한다. 우선 보다좋은 이해를 위해 아래 내용을 참고해보자 https://despiteallthat.tistory.com/25 [Servlet] Servlet이란 무엇일까? 서블릿이란? 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술이다. 자세히 말하자면, 클라이언트가 어떤 요청을 하면 그 결과를 despiteallthat.tistory.com html 파일과 java 파일을 이용하여 HttpServlet를 구현해볼것이다. hello.html "안녕하세요"를 몇 번 듣고 싶으세요? 여기서 중요한 점은 form 태그의 action 값이 hello로 지정되어 있다는 것이다. 출력 버튼을 누르면 h..

원문보기 내부링크
Tistory

[Servlet] get / post 사용하기

html상에서 get과 post를 사용하여 출력에 미치는 영향을 알아보자. get을 이용한 출력 방식은 https://despiteallthat.tistory.com/26 [Servlet] @WebServlet() / web.xml 이용해보기 본격적으로 Servlet을 이용하여 코딩하고자 한다. 우선 보다좋은 이해를 위해 아래 내용을 참고해보자 https://despiteallthat.tistory.com/25 [Servlet] Servlet이란 무엇일까? 서블릿이란? 클라이언트의 요청을 despiteallthat.tistory.com 이 글에 사용된 예제를 확인해보자. 간단하게 요약하자면, 입력 값으로 7을 받으면, 안녕하세요가 7번 출력되게 만들었다. 하지만, 입력할 내용이 많을 경우 get의 경우 ..

원문보기 내부링크
Tistory

[Servlet] 한글깨짐 해결 / Servlet Filter

게시글을 입력받을 수 있는 html 파일이 있다. post.html 제목 내용: post.java package com.zenghyun.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/notice-reg") public class post e..

원문보기 내부링크
Tistory

[Servlet/JSP] 내장 객체

오늘은 내장 객체에 대해 알아보자 [ 내장 객체란? ] "JSP 내에서 선언하지 않고 사용할 수 있는 객체" JSP가 서블릿 형태로 자동 변환된 코드 내에 자동으로 포함되어 있는 멤버 변수, 메서드 매게 변수 등의 각종 참조 변수들을 말한다. 보통 스크립트 내부에서 사용하며 내장객체를 사용하면 클라이언트(사용자)의 요청을 컨트롤하거나 페이지 간의 데이터를 손쉽게 공유할 수 있다. 내장 객체들은 특정 클래스에 대한 인스턴스 형태로서, 컨테이너를 통해서 초기화되고 다양한 기능과 정보 등을 제공한다. [ 선언하지 않고 사용할 수 있는 이유 ] HTML 삽입 미리보기할 수 없는 소스 [ 내장 객체의 종류와 기능 ] 내장 객체의 대표적인 것들을 알아보자 request reponse out session appli..

원문보기 내부링크
Tistory

[Servlet] service / doGet / doPost

service/ doGet / doPost에 대해 알아보자 우선, service와 doGet, doPost를 사용하지 않고 두 개의 java을 이용하여 계산기를 만들어보자. calcPage.java package com.zenghyun.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax..

원문보기 내부링크
Tistory

[Servlet/JSP] EL (Expression Language)

EL에 대해 알아보자 [ EL : Expression Language) ] View를 위한 데이터 추출 표현식 우선, EL을 사용하기 전에 java file과 jsp file로 값을 출력해보자 spag.java package com.zenghyun.web; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.ser..

원문보기 내부링크
Tistory

[Visual Studio Code] 여러가지 transform 이용해보기

여러가지 transform을 이용해보자 test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 결과 HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Visual Studio Code] transform-origin

transform-origin을 사용해보자 transform-origin이란? 왜곡의 중심점을 의미한다. 어떤 애니메이션을 주었을 때 그 애니메이션의 중심을 잡아주는 역할을 한다. ※ transform-origin 위치 보는 기준 left / top center / top right / top left / center center / center right / center left / bottom center / bottom right / bottom test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 결과 HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Visual Studio Code] 이미지 위에 글 띄우기

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..

원문보기 내부링크
Tistory

[Visual Studio Code] 애니메이션 반복하기

애니메이션을 반복하는 코드를 짜 보자 test.html bgcolor: red -> blue -> orange -> pink tofrom: orange -> green 결과 HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Visual Studio Code] mask 이용한 로고 만들기

mask를 이용하여 로고를 만들어보자 test.html WE MAKE YOUR MORE ATTRACTIVE .mask { width: 1000px; height: 500px; background-color: pink; font-size: 100px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; position: relative; left: 50px; top: 50px; } ＊ mask라는 이름을 가진 div 클래스의 기본설정 .mask > p { position: absolute; left: 10px; bottom: 0; overflow: hidden; height: 0px; width: 1000px; animation:..

원문보기 내부링크
Tistory

[JavaScript] Ajax (Asynchronous JavaScript and XML)

Ajax에 대해 알아보자 [ Ajax란? ] Ajax란 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자이다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. Ajax는 JavaScript 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법이다. = Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다. 이때 서버와는 다음과 같은 다양한 형태의 데이터..

원문보기 내부링크
Tistory

변수란 무엇인가

변수란 무엇인가? 변수(Variable)는 프로그램의 처리 과정에서 데이터를 담아둘 수 있는 메모리의 공간을 의미한다. 하나의 변수에는 하나의 값만 저장할 수 있고, 이 값을 변경할 수 있기 때문에 변할 수 있는 값, 즉 변수(Variable)라고 한다. 1. 변수의 선언과 초기화 변수의 선언 형식은 다음과 같다. int a; int a = 1; int: 데이터 타입을 말하며 변수에 기억시킬 데이터의 형태를 의미한다. a: 변수명을 말하며 기억 장소 주소를 대신하여 사용할 이름을 말한다. 1: 초기 값: 변수를 선언한 후 기억시킬 값을 말한다. 변수 : 특정 값을 저장하기 위한 공간 변수 이름짓기의 규칙 1. 숫자로 시작할 수 없다. 2. 소문자로 시작한다. 3. '_'를 제외하고 특수문자를 사용할 수 ..

원문보기 내부링크
Tistory

데이터 타입이란?

데이터 타입이란? 데이터에는 정수, 실수, 문자, 논리(참 또는 거짓) 등이 있는데 각각의 데이터를 담을 수 있는 변수의 종류가 다르다. 그래서 데이터 타입으로 어떤 데이터를 담는 변수인지 표시한다. 데이터 타입 형식 자료형 바이트 예시 정수형 int, long, short 4, 8, 2 1, 0, -1, 2, 100 실수형 float, double 4, 8 3.14f, 3.14 문자형 char 2 'a', 'A' 문자열 String ? (알파벳 개수에 따라 다름) "hello", "A" 논리형 boolean 1 true, false 또한, 데이터마다 저장 가능한 값의 범위가 다르다. 데이터 타입 저장 가능한 값의 범위 byte -128 ~ 127 short -32768 ~ 32767 int -대략 21..

원문보기 내부링크
Tistory

형변환이란 무엇인가?

형 변환이란 말 그대로 변수나 상수의 데이터 타입을 다른 타입으로 바꾸는 것을 말한다. 형 변환에는 자동 형변환(Promotion Casting)과 명시적 형 변환 (Demotion Casting)이 있다. 자동 형변환(Promotion Casting) 자동 형변환이란, 프로그램 작성자가 별도의 작업을 하지 않아도 자바가 알아서 알맞은 타입으로 변환해주는 형 변환이다. 자동 형변환이 이루어지기 위해서는 조건이 있다. 큰 자료형에 작은 자료형이 대입돼야 한다는 것이다. 데이터 타입이 double로 지정된 변수 d 에는 100.5라는 값이 들어있다. 데이터 타입이 int로 지정된 변수 n에는 200이라는 값이 들어있다. 여기서 double로 지정된 d라는 변수는 8byte의 메모리 저장공간을 갖고 있으며, ..

원문보기 내부링크
Tistory

삼항연산자란 무엇인가?

삼항 연산자 삼항 연산자란 항이 세 개인 연산자를 말한다. 조건식의 참/거짓 여부에 따라서 각각 다른 결과를 반환한다. 예시 조건 ? 항목1 : 항목2 조건: 참과 거짓으로 구분할 수 있는 비교 연산, 논리 연산 등을 말한다. 항목 1: 조건이 참인 경우 실행할 연산이나 함수를 말한다. 항목 2: 조건이 거짓인 경우 실행할 연산이나 함수를 말한다. 만약, 조건식의 결과가 true라면 문장 1이 실행되고, 조건식의 결과가 false라면 문장 2를 실행하는 것이다. 예제 문제 1 a에 10이 들어있고, b에 5가 들어있을 때 boolean 타입의 c라는 변수를 만들고 비교한다. ++a > b? true : false; 1. a의 값에 10이 저장되어 있다. 2. a에 전위형 증감 연산자 ++로 인해 값이 1..

원문보기 내부링크
Tistory

[CodeUp] 코드업 6077번 짝수 합 구하기

코드 업이라는 사이트에 들어가면 기초 100제를 풀 수 있다. c언어 기초 100제와 파이썬 기초 100제가 있는데 파이썬 기초 100제를 자바로 풀어볼 것이다. https://codeup.kr/problemsetsol.php?psid=33 문제집 / Python 기초 100제 codeup.kr 여기서 6077번부터 6098번까지의 문제를 풀어서 리뷰할 예정이다. 6077번 정수(1 ~ 100) 1개를 입력받아 1부터 그 수까지 짝수의 합을 구해보자. 체감 난이도 : Scanner로 값을 입력받는다. 입력받은 값은 num라는 변수에 저장된다. 첫 번째 조건문에서 num이 1보다 작고 100보다 크다면 "잘못 입력하셨습니다."를 출력하고 다시 입력을 받는다. 첫 번째 조건문이 거짓일 경우 for..

원문보기 내부링크
Tistory

[CodeUP] 코드업 6078번 소문자 입력받기

6078번 영문 소문자 'q'가 입력될 때까지 입력한 문자를 계속 출력하는 프로그램을 작성해보자. 체감 난이도 : Scanner로 값을 입력받는다. 입력받은 값은 answer 변수에 저장한다. while문을 통해 반복하고 특정 조건을 만족할 때 if문 안에 있는 break로 반복문을 빠져나온다. if(answer.equals("q")) { break; } answer.equals("q") 입력받은 answer값이 'q'와 같으면 반복문을 빠져나온다.

원문보기 내부링크
Tistory

[CodeUp] 코드업 6079번 입력값과 같거나 작을 때까지만 정수합 구하기

6079번 체감 난이도: 1, 2, 3... 을 계속 더해 나갈 때, 그 합이 입력한 정수(0 ~ 1000) 보다 같거나 작을 때까지만 계속 더하는 프로그램을 작성해보자. 즉, 1부터 n까지 정수를 계속 더해 나간다고 할 때, 어디까지 더해야 입력한 수보다 같거나 커지는 지를 알아보고자 하는 문제이다. 입력 정수 1개가 입력된다. 출력 1, 2, 3, 4, 5 ... 를 순서대로 계속 더해 합을 만들어가다가, 입력된 정수와 같거나 커졌을 때, 마지막에 더한 정수를 출력한다. 입력 예시 55 출력 예시 10 Scanner로 값을 입력받아 num이라는 변수에 저장한다. while을 통해 반복하고 조건문을 만족시키면 종료된다. if (num 1000) { System.out.println("잘못된 ..

원문보기 내부링크
Tistory

[CodeUP] 코드업 6080번 주사위 경우의 수 구하기

6080번 1부터 n까지, 1부터 m까지 숫자가 적힌 서로 다른 주사위 2개를 던졌을 때, 나올 수 있는 모든 경우를 출력해보자. 예시 ... for i in range(1, n+1) : for j in range(1, m+1) : print(i, j) ... 참고 위 코드는 바깥쪽의 i 값이 1부터 n까지 순서대로 바뀌는 각각의 동안에 안쪽의 j 값이 다시 1부터 m까지 변하며 출력되는 코드이다. 조건 선택 실행구조 안에 다른 조건 선택 실행구조를 넣어 처리할 수 있는 것과 마찬가지로 반복 실행구조 안에 다른 반복 실행구조를 넣어 처리할 수 있다. 원하는 형태로 실행 구조를 결합하거나 중첩시킬 수 있다. 입력 서로 다른 주사위 2개의 면의 개수 n, m이 공백을 두고 입력된다. 단, n, m은 10이하..

원문보기 내부링크
Tistory

[CodeUP] 코드업 6081번 16진수 곱셈

6081번 16진수(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)를 배운 영일이는 16진수끼리 곱하는 16진수 구구단? 에 대해서 궁금해졌다. A, B, C, D, E, F 중 하나가 입력될 때, 1부터 F까지 곱한 16진수 구구단의 내용을 출력해보자. (단, A ~ F 까지만 입력된다.) 예시 ... print('%X'%n, '*%X'% i, '=%X'%(n*i), sep='') ... 참고 print('%X'%n) #n에 저장되어있는 값을 16진수(hexadecimal) 형태로 출력 작은따옴표 2개를 사용해서 print(..., sep='')으로 출력하면, 공백 없이 모두 붙여 출력된다. 작은따옴표 2개 '' 또는 큰 따옴표 2개 ""는 아무 문자도 없는 빈 문..

원문보기 내부링크
Tistory

[HTML] 문자 꾸미기, 여러가지 태그들

html을 사용하면서 문자를 꾸밀 수 있는 여러 가지 태그들이 있다. 처음 사용해본 태그들을 기록해 볼 것이다. 문자꾸미기 Lorem ipsum dolor sit amet consectetur adipisicing elit2. Porro animi tempora, quibusdam libero voluptatem veritatis provident illum velit, maxime, quos amet perspiciatis cupiditate. Similique tempore ducimus quaerat, aut sunt asperiores? HTML 李貞賢 이정현 같으며, 반짝이는 미묘한 우리 싶이 만천하의 이상은 품에2 끝까지 아름다우냐? 덧말 이성은 불러 꾸며 꽃 뼈 인생에 싸인 생생ººº하며, ..

원문보기 내부링크
Tistory

[HTML] 인라인 속성, 블록 속성, 태그의 관계

태그에는 인라인 속성의 태그와 블록 속성의 태그가 있다. 인라인 속성의 태그의 중첩 inline속성의 태그는 inline 태그 또는 block 속성의 태그 안에 중첩시킬 수 있다. 꼬임 현상 없이 나중에 열린 태그를 먼저 닫아줘야 한다. html태그상 실행이 잘 되므로 오류를 인식하지 못하는데 오류다. 청춘의 평화스러운 광야에서 모래2뿐일 뿐이다. 곳이 못할 청춘은 보이는 아니다. 곳이 거친 힘차게 사막이다. 품었기 그들은 그들은 사라지지 이것이다. 풀이 튼튼하며, 하는 대중을 넣는 그들의 위하여서 칼이다. 옷을 피고 이상을 생명을 군영과 이것이다. 새가 동산에는 넣는 그것은 쓸쓸한 불어 있는가? 없는 귀는 황금시대를 찬미를 대고, 산야에 어디 가진 것이다. 피고, 창공에 품었기 작고 이상이 갑 것이다...

원문보기 내부링크
Tistory

[Visual Studio Code]img태그 / a태그 사용하기

HTML에서는 태그를 사용하여 이미지를 넣을 수 있다. 이미지 삽입 그림을 다운로드 하여 사이트 만들 준비 img : inline 속성을 가지고 있고, block 속성도 가지고 있다. inline-block : 줄 바꾸지 않고 너비, 높이, 정렬이 가능하도록 한다. 너비의 비율에 맞추어 높이도 자동 설정 너비, 높이 지정시 단위 px는 생략 ( % 단위도 쓸 수 있음 -> 부모 너비, 높이의 단위 기준 px를 제외한 나머지는 생략 불가 -> css로 지정하여 디자인 ) 웹에서 사용할 수 있는 이미지 확장자 : png, jpg(배경 투명 지정 불가), gif, webp png 16bit, 24bit로 처리 자동으로 줄바꿈 가능 너비, 높이, 정렬 가능 블록 > 인라인 img 태그는 와 같이 작성하고 사용하..

원문보기 내부링크
Tistory

[Visual Studio Code] ol/ul/dl 태그 사용하기

html에서는 목록을 작성하고 싶을 때 사용할 수 있는 태그가 있다. ol: ordered list ul: unordered list dl: definition list 순서가 있는 목록 html css javascript react 순서가 없는 목록 유튜브 운동 프로그래밍 정의형 목록 html Hyper Text Markup Language Html 요소는 정의 목록 요소()에서 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다. css Cascading Style Sheet ol은 순서가 있어서 li태그에 작성된 내용이 차례대로 숫자가 붙어서 나온다. ul 태그는 순서가 없기 때문에 li태그에 작성된 내용에 번호가 붙어서 나오지 않는다. dl 태그는 정의하고 싶은 내용을 dt태그에 작성하고 그 ..

원문보기 내부링크
Tistory

[Visual Studio Code] css 사용하기 / nth-child / nth-of-type

css란? cascading style sheet로 html 문서를 꾸미기 위해 사용한다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. STRIKE DELETE css를 이용하기 위해서는 title 태그 바로 아래에 와 같이 적고 사용하면 된다. 내가 사용하고 싶은 태그의 이름을 적거나 id class와 같이 이름을 지정해서 사용할 수 있다. h1 { 내용 } : h1 태그 전체에 내용을 적용시킨다. h1:nth-chid {?} { 내용 } : h1중 부모(여기서는 body)를 기준으로 ? 번째 h1태그만 내용을 적용시킨다. h1:nth..

원문보기 내부링크
Tistory

String Class

자바에서 가장 대표적인 클래스인 String 클래스를 얘기해보려고 한다. String 클래스는 두 가지의 특징을 가지고 있다. 1. 객체 생성법이 두 가지이다. (암시적, 명시적) 2. 한번 생성된 문자열의 내용은 변하지 않는다. (불변의 법칙) //String 클래스 만이 new 없이 heap에서 메모리를 할당받을 수 있다. String s1 = "abc"; String s2 = "abc"; // "abc" 라는 값을 s1과 s2가 주소를 공유하는 것 (암시적 방법) 여기서 s1과 s2를 boolean a = (s1 == s2);라고 묻는다면 결과는 True가 나온다. "abc"라는 값을 s1과 s2가 주소를 공유하기 때문이다. "=="는 클래스간의 비교 시 값이 아닌 주소 값을 비교한다. String..

원문보기 내부링크
Tistory

String 클래스의 여러가지 메서드

String 클래스에는 여러가지 메서드가 있다. 이 중에서 자주 쓰이는 메서드에 대해서 적어보려고 한다. 메서드란? : 특정한 작업을 수행하기 위한 명령문들의 집합 .length() String str = "Hong Gil Dong"; int index = str.length(); // 많이 씀~! System.out.println("str의 길이: " + index); .length()는 해당 문자의 길이를 알려준다. (띄어쓰기 포함) length는 1부터 시작한다. 즉, str의 길이는 13이다. .indexOf() String str = "Hong Gil Dong"; int index = str.indexOf('o'); System.out.println("맨 앞 소문자 'o'의 위치: "..

원문보기 내부링크
Tistory

[React with TS] SyntheticEvent를 통한 React 이벤트 적용 (with TypeScript)

SyntheticEvent를 통한 React 이벤트 적용에 대해 알아보겠습니다. [ Event Argument ] 리액트 이벤트 핸들러 함수에서의 이벤트 아규먼트는 브라우저의 종류와 관계없이 이벤트를 처리할 수 있도록 SyntheticEvent 타입으로 추상화합니다. SyntheticEvent를 기반으로 확장된 다양한 Event 타입은 다음과 같습니다. 각 Event Argument 타입에서 사용할 수 있는 속성은 다음 문서의 타입 정보를 확인하세요. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts GitHub - DefinitelyTyped/DefinitelyTyped: The reposit..

원문보기 내부링크
Tistory

[Webpack] 내 프로젝트에 적용시킨 webpack.config.js 공부

시작! webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트리로 ..

원문보기 내부링크
1 2 3