전체 글 39

flexbox

display: flex모든 요소를 가로로 둠justify-content : 가로로 요소들을 배치할 것이다.display: flex;justify-content: center; /* 요소들 배치를 이렇게 할 거다. */justify-content: space-between;justify-content: space-around;etcalign-items: 모든 요소들을 가로로 두지만 세로로 요소들을 배치할 것이다.space-between 같은 space는 못쓴다. 아니 없다.display: flex;align-items: center; /* 요소들 배치를 이렇게 할 거다. */모든 요소를 화면 정중앙에 위치시키려면?display: flex;justify-content: center;align-items: ..

Position

position: relative;'현재 있는 위치' 기준초기.locate {  position: relative;  left: 30px;  top: 30px;}.parent {  margin-left: 100px;}position: static;웹사이트의 기본으로 돌아가겠다. left나 top 위치 속성 무시.locate {  position: static;  left: 30px;  top: 30px;}.parent {  margin-left: 100px;}.parent {  position: static;  margin-left: 100px;}position: absolute;'부모 절대값' 기준만약 부모 태그가 relative / absolute / fixed 중 하나가 아니라면 태그를 부모로 삼..

let 과 var의 차이

var와 let은 자바스크립트에서 변수를 선언할 때 사용하는 키워드로, 몇 가지 중요한 차이점이 있습니다. 1. 스코프(Scope)var: 함수 스코프를 가집니다. 함수 내에서 선언된 var 변수는 함수 전체에서 유효하며, 블록 스코프(예: if 문, for 문 등)를 무시합니다.let: 블록 스코프를 가집니다. let 변수는 블록(중괄호 {}) 내에서만 유효합니다.예제:function testVar() { if (true) { var x = 1; } console.log(x); // 1 (블록 밖에서도 접근 가능)}function testLet() { if (true) { let y = 1; } console.log(y); // Reference..

호이스팅(Hoisting)

호이스팅(Hoisting)은 자바스크립트에서 변수가 선언된 위치와 상관없이 해당 변수 선언이 코드의 최상단으로 끌어올려지는 동작을 의미합니다. 호이스팅은 변수 선언뿐만 아니라 함수 선언에도 적용됩니다. 다만, 변수의 초기화는 호이스팅되지 않으며, 변수 선언만 호이스팅됩니다. ( var가 아닌 let을 쓴다면 'ReferenceError' 발생! 이유는 ' TDZ '  아래에서 다시 설명) 예를 들어, 아래와 같은 코드가 있을 때:console.log(x); // undefinedvar x = 5;console.log(x); // 5위의 코드는 실제로는 다음과 같이 동작합니다:var x;console.log(x); // undefinedx = 5;console.log(x); // 5 즉, 변수 x의 선언이..

CDN(Content Delivery Network, 콘텐츠 전송 네트워크)

CDN(Content Delivery Network, 콘텐츠 전송 네트워크)은 인터넷 사용자에게 콘텐츠를 빠르고 효율적으로 전달하기 위해 전 세계에 분산된 서버 네트워크입니다. CDN의 주요 목적은 사용자와 서버 간의 물리적 거리를 줄여 웹페이지 로딩 속도와 성능을 개선하는 것입니다.CDN의 주요 기능과 이점속도 향상: CDN은 사용자와 가장 가까운 서버에서 콘텐츠를 제공하여 웹사이트의 로딩 시간을 단축합니다. 이를 통해 사용자 경험이 향상됩니다.부하 분산: 전 세계에 분산된 서버를 통해 트래픽을 분산시켜 서버 과부하를 방지합니다. 이는 특히 대규모 트래픽이 발생하는 이벤트나 프로모션 기간 동안 유용합니다.안정성 향상: CDN은 서버 다운타임을 줄이고, 데이터 손실을 방지하며, 안정적인 서비스 제공을 보..

Using the FileDocument and Image Entity

학습 목표이 모듈을 마치면 다음을 수행 할 수 있습니다.앱에서 FileDocument 및 Image 시스템 엔터티 사용Use the FileDocument and Image system entities in your app로직을 적용하여 새 이미지 또는 로고 만들기전문화에 대한 특정 보안 규칙 구성FileDocument 엔터티에는 문서 업로드, 저장 및 다운로드 목적을 지원하는 특성 집합이 있습니다.속성형묘사파일 ID일련 번호시스템의 파일을 고유하게 식별합니다.이름문자열업로드된 파일의 파일 이름을 보유하거나 문서가 생성될 때 설정됩니다.삭제 후 다운로드부울true로 설정하면 브라우저에서 파일을 다운로드한 후 파일이 삭제됩니다.목차바이너리파일을 처리하는 가져오기 매핑에 사용할 수 있습니다.HasConten..

Inheritance - being special and one of a kind

학습 목표이 모듈을 마치면 다음을 수행 할 수 있습니다.상속 사용 시기 결정도메인 모델에 상속 적용페이지에서 상속 활용상속 또는 1-1 연결 사용 중에서 선택소개이 모듈에서는 상속 기능을 사용하여 응용 프로그램을 강화하는 방법을 배웁니다. Adrian의 앱은 팀 관리자와 함께 확장되어야 합니다. Adrian은 TeamPlayer와 마찬가지로 사람이기도 하지만 특정 팀 관리자 정보를 저장하려고 합니다. 특정 팀 플레이어 정보와 다릅니다.다음 강의에서는 현재 버전의 Adrian 앱이 포함된 모델 프로젝트 패키지를 사용하여 프로젝트를 설정합니다.환경Mendix studio Pro 버전 9.12.4 Mendix에서는 상속을 일반화 (generalization) 라고 한다. 예시로는 다음과 같습니다.A Dog i..