'Web' 카테고리의 글 목록

Web/Spring

Maven Lifecycle

2023.02.04

Maven POM을 바탕으로 Java 프로젝트의 전체적인 라이프사이클을 관리하는 도구(의존성 관리, 라이브러리 관리, 프로젝트 라이프사이클 관리, 빌드 등) Maven은 settings.xml 과 pom.xml을 참조한다. settings.xml: maven 자체에 대한 설정 pom.xml: POM(Project Object Model)을 설정, 프로젝트 정보/의존성 라이브러리 정보/빌드 정보 Maven Lifecycle 1. basic 라이프사이클 compile ➡ test ➡ package ➡ install ➡ deploy compile: src/java 하위 모든 Java 소스를 컴파일해 target/classes로 복사 test: 테스트케이스의 단위테스트 진행(테스트 실패시 빌드 실패로 처리됨) ..

Web/React

ReactDOM.render is no longer supported in React 18

2022.08.20

CRA 없이 리액트 환경을 구성해 개발하던 중 콘솔창에 다음과 같은 warning 메시지를 보게되었다. 현재 프로젝트의 React 버전 : 18.0.7 현재 프로젝트의 index.tsx 코드 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); warning 메시지의 링크를 들어가 확인해보니 React 18 버전에서는 더이상 ReactDOM.render 를 지원하지 않는다는 내용이 있었다. 설명하는대로 새로운 API를 적용하여 index 코드를 재구성했다...

Web/JavaScript

[JavaScript] this

2022.08.13

this 키워드 객체 : 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 한다. → 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. this 바인딩 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. (this와 this가 가리킬 객체를 바인딩) 전역에서 this는 전역 객체 window를 가리킨다. (기본값) 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. 메서드 내부에서 this는 메서드..

Web/JavaScript

[JavaScript] 모듈 시스템

2022.08.12

JavaScript 모듈 시스템 애플리케이션의 규모가 커지면서 파일을 여러개로 분리하게 되는데 이런 하나하나의 파일을 “모듈”이라고 한다. → 위와 같이 작성하면 전역 스코프를 공유하게 되는 문제 발생(하나의 파일안에 있는 코드처럼 동작) 모듈이란? 개발하는 애플리케이션의 규모가 커지면 파일을 여러개로 분리해야 하는 시점이 생긴다. 이때 분리된 하나의 파일을 모듈이라고 부르는데, _모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수를 포함하는 라이브러리_로 구성되어 있다. 장점 유지보수 용이 → 기능들이 모듈화된 경우 의존성을 줄일 수 있어 기능 개선이나 수정이 용이 네임스페이스화 → 코드 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재한다. 이때 모듈로 분리하면 모듈만의 ..

Web/JavaScript

[JavaScript] 변수 호이스팅

2022.07.29

Hoisting(호이스팅)? 스코프 내부에서 변수 선언이 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특징 변수의 종류 var ➡️ 함수 레벨 스코프 let(ES6) ➡️ 블록 레벨 스코프 const(ES6) ➡️ 블록 레벨 스코프 함수 레벨 스코프 : 변수의 유효범위가 함수 내로 제한 블록 레벨 스코프 : 변수의 유효범위가 블록(함수, if, for, while, try/catch 등) 내로 제한 변수의 생성 과정 자바스크립트의 변수는 다음 3단계의 과정을 통해 생성된다. 선언 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비(변수 이름 등록) 변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점(런타임)이 아닌 ..

Web/JavaScript

[JavaScript] HTML 파일에서 JavaScript 파일 효과적으로 로드하기

2022.07.29

브라우저의 렌더링 엔진은 HTML 문서를 파싱할 때 순차적으로 읽어들인다. 예를 들어, 아래와 같은 HTML 문서를 파싱한다하면 버튼 위에서 아래로 파싱을 진행하는데 중간에 script 태그를 만나면 파싱을 멈추고 script 파일을 로드하고 실행시킨다. script 파일이 다음과 같다면, 아직 button 요소를 파싱하기 전에 button DOM 요소에 접근하게 되어 문제가 발생한다. console.log("Hello World"); let btn = document.querySelector("#btn"); btn.addEventListener("click", function () { alert("Hello Wolrd"); }); 전체 흐름을 정리하면 다음과 같다. HTML parsing script ..

Web/Node.js

[NVM] Node 버전 관리하기

2022.07.28

MDN 문서 번역 기여를 위해 가이드라인을 따라가던 중 다음과 같은 에러 메시지를 보게 되었다. content 레포지토리에서 yarn install 을 하던 중 만난 에러 메시지 content on  main via ⬢ v12.18.3 ➜ yarn install yarn install v1.22.10 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... [3/5] 🚚 Fetching packages... error @mdn/yari@1.12.2: The engine "node" is incompatible with this module. Expected version ">=16.0.0". Got "12.18.3" error Found inc..

Web/CSS

[CSS] What is CSS?

2022.07.28

CSS(Cascading Style Sheets) HTML이나 XML과 같은 구조화된 문서(Document)의 각 요소(Element)를 화면에 어떻게 렌더링(style-스타일, 레이아웃 등) 할 것인지 정의하기 위한 언어 CSS 구문 규칙 기반 언어 → 아래와 같이 규칙을 지정할 때 스타일을 지정할 HTML 요소를 선택 h1 { color: blue; font-size: 4em; } 1. Selector HTML 요소의 style을 정의하기 위해서 스타일을 적용할 HTML 요소를 선택해야 한다. Rule Set(Rule)위 CSS Rule set은 HTML 문서에서 body 요소를 선택한 후 선택된 body 요소의 스타일을 선언 블록에서 정의하고 있다. → Rule Set의 집합을 스타일 시트(Styl..

Web/HTML

[HTML] HTML table advanced features and accessibility

2022.07.27

HTML table advanced features and accessibility HTML table의 추가 속성 및 접근성 table에 추가하기 요소 안에 요소를 정의하여 table에 대한 설명을 지정할 수 있다. 요소는 여는 태그 바로 뒤에 위치한다. Dinosaurs in the Jurassic period ... table에 대한 설명을 제공해주기도 하지만 시각장애인 사용자들에게 매우 유용하다. → 스크린 리더가 caption을 읽어 table에 대한 내용을 얻는다. table 요소의 summary 속성도 사용할 수 있지만 HTML5에서 더 이상 사용되지 않으므로요소를 사용하는 것이 좋다. Active learning: Adding a caption School timetable This is ..

Web/HTML

[HTML] HTML table basics

2022.07.27

Table은 무엇인가? table은 행과 열로 구성된 구조화된 데이터 집합이다. 태그 설명 table 테이블을 감싸는 태그 tr 표 내부 행(table row) th 행 내부 제목 셀(table heading) td 행 내부 일반 셀(table data) 이름 나이 정수연 25 김수연 30 HTML table을 사용하지 말아야 할때는? 레이아웃을 위해 사용하는 경우 레이아웃을 위한 table은 시각장애사용자의 접근성을 저하시킨다. 시각장애인이 사용하는 스크린리더는 HTML 페이지의 태그를 해석해 사용자에게 내용을 읽어준다. table이 tag soup을 만든다. 레이아웃을 위한 table은 일반적으로 레이아웃 태그들보다 더 복잡한 마크업 구조를 가진다. 이로 인해 코드 작성, 유지 관리 및 디버깅이 어려..

Web/HTML

[HTML] Adding vector graphics to the web

2022.07.22

벡터 그래픽은 파일 크기가 작고 확장성이 뛰어나서 확대하더라도 픽셀화되지 않는다. 벡터 그래픽이란 무엇인가? 웹에서는 raster image, vector image 로 2가지 유형의 이미지로 작업할 수 있다. Raster image 픽셀 그리드로 정의 raster image 파일에는 각 픽셀이 배치될 위치와 정확히 어떤 색이어야 하는지 보여주는 정보가 포함되어 있다. 예시 - .bmp, .png, .jpg, .gif Vector image 알고리즘을 사용하여 정의된다. vector image 파일에는 컴퓨터가 화면에 렌더링할 때 이미지가 어떻게 보여야 하는지 계산하기 위해 사용할 수 있는 모양과 경로에 대한 정의가 포함되어 있다. SVG 형식은 웹에서 사용할 수 있는 강력한 벡터 그래픽을 만들게 해준다..

Web/HTML

[HTML] From object to iframe - other embedding technologies

2022.07.21

웹페이지에 다양한 콘텐츠 유형을 포함시키는 , , 지원하지 않는 리소스에 대한 fallback content 지원 안함 PDF의 경우 웹페이지에 포함시키기보다 다운로드하거나 다른 페이지에서 읽을 수 있도록 링크하는 것이 훨씬 낫다. 확인하기 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding Test your skills: Multimedia and embedding - Learn web development | MDN The aim of this skill test is to assess whethe..

티스토리툴바