yh-jeon Full stack

타입스크립트 개발은 Node.js 프로젝트를 생성한 이후 개발 언어를 타입스크립트로 설정하는 방식으로 진행합니다.Node.js 프로젝튼는 디렉터리를 생성하고 생성한 디렉터리에 package.json 이름의 파일을 만드는 것으로 시작합니다. 아래와 같이 실습 디렉터리를 생성한 이후 npm init --y를 입력합니다. 📌 타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다. 앞서 이미 2개의 패키지를 -g 옵션을 주어 전역에 설치하였지만, 이 프로젝트를 전닯다아서 이용하는 다른 개발잘의 컴퓨터에는 2 패키지가 전역에 설치되어 있지 않을 수도 있기에 이를 고려하여 터미널에서 다음 명령으로 두 패키지를 -D 옵션으로 설치하여 package.json에 등록하는 것이 좋습니다.>..

폼 요소의 입력값 다루기사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다. 한 줄 입력 - input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼form name="frm">    input type="text" name="id">    input type="password" name="pw">  form> text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에 value 속성을 사용합니다.document.frm.id.value;document.frm.pw.value; 다음 코드처럼 value 속성에 값을 할당하여 원하는 값을 자바스크립트로 입력..

.style. = ;객체는 { } 를 이용하여 생성이 가능하며 이러한 방식을 리터럴 방식으로 객체를 생성했다고 표현합니다.만약, { } 내부에 아무런 속성이 없으면 빈 객체라고 부릅니다. 대괄호 연산자로 접근하기 = [ ]console.log(person["name"]); 마침표 연산자const person = { name:"Hong Gildong"};console.log(person.name); 객체 속성 동적으로 추가 - 객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고, 없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가합니다.const person = {};person.name = { firstName:"GilDong", lastName:"Hong"}; pers..

함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다. 함수 선언문 - function 키워드로 함수를 정의하는 방법function 식별자(){}function gugudan() { for(let i = 1; i  이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.gugudan(); 함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.const 변수명 = function(){}; // 익명 함수const 변수명 = function 식별자(){}; // 네이밍 함수const gugudan = function(){ for(let i=1; i  함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장..

블록문 - 1개 이상의 자바스크립트 코드를 중괄호로 묶은 것, 다른 말로 블록 또는 코드 블록이라고 합니다. 조건문if문 - 소괄호(()) 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문if(조건식) { // 조건식이 참이면 실행} else문 - if문의 조건식이 거짓일 때 실행되는 블록문if(조건식) { // 조건식이 참이면 블록문 실행} else { // 조건식이 거짓이면 블록문 실행} 단, else문은 if문 없이 단독으로 사용이 불가능하며 하나의 if문에는 하나의 else문만 사용 가능합니다. else if문 - if문에 조건을 추가하고 싶을 때 사용, 개수에 제한이 없으며 단, else문과 마찬가지로 단독으로 사용할 수 없고, 항상 if문 다음에 사용하고 else문보다는 ..

[변수의 틀]var num = 10 + 20;var(키워드) num(식별자) =(연산자) 10 + 20(표현식) ;(세미콜론)  식별자 명명 규칙규칙불가능 예시식별자에 키워드 사용 불가var, let, const식별자에 공백 포함 불가my School, like food식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용*name, #age, @email규칙좋은 예시나쁜 예시식별자는 영문으로만 작성name, age이름, 나이식별자는 의미 있는 단어로 작성name, age(이름과 나이 저장 시)a,b (이름과 나이 저장 시)식별자 표기법표기법설명예시카멜 표기법변수명과 함수명 작성 시 사용firstName, lastName언더스코어 표기법상수명 작성 시 사용FIRST_NAME, last_nam..

HTML 파일과 자바스크립트 연결하기 - 총 2가지(내부 스크립트 or 외부 스크립트) [내부 스크립트 방법]html 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법DOCTYPE html>html lang="ko">head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>내부 스크립트 방법title>head>body>  script>    document.write('내부 스크립트 방법');  script>body>html> document.writ..

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기1차원 방식(가로 or 세로 중 한 방향으로 설계하는 방식)으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. 구성 요소주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축교차축(cross axis) : 주축과 수직한 축플렉스 컨테이너(flex container) : display 속성값으로 flex난 inline-flex가 적용된 요소플렉스 아이템(flex item) : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소relative와 absolute의 역할:부모에 relative:부모 요소에 position: relative를 적용하면 자신의 위치를 ..

배경 속성으로 요소의 배경 설정하기background-color 속성요소의 배경에 색상을 넣을 수 있습니다. 속성값으로는 색상값을 사용합니다.background-color:;div{      width:100px;      height:100px;      background-color:red;    } background-image 속성이미지를 넣을 수 있고, 속성값은 삽입할 이미지의 경로를 url() 함수로 지정하면 됩니다.background-image:url('이미지 경로');background-image 속성을 사용할 때 주의사항첫째, 요소의 배경 크기가 반드시 있어야 합니다. background-image 속성은 요소의 배경에 이미지를 삽입하는 원리이기에 요소 배경의 너비와 높이를 지정하지 않으..

css 언어가 가진 특징 1) 기본 스타일 시트 : HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없는데, 웹 브라우저에서 다르게 태그들이 표시가 되는 이유는 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문입니다.2) 적용 우선순위와 개별성 :웹 브라우저에 css 속성이 웹 브라우저의 기본 스타일 시트보다 우선하기에 웹 브라우저에서는 사용자가 정의한 스타일 속성이 적용되는 것입니다. 이는, css가 Cascading Style Sheets 즉, 단계적으로 적용되는 스타일을 뜻하는 언어이기 때문입니다.단계적 적용이란? 같은 태그에 여러 스탕일이 적용되더라도 마지막에 영향을 주는 하나의 스타일만 적용되는 것 {단계적 적용의 개별성 규칙} 선택자예시점수전체 선택자*0태그 선택자div,..