티스토리

코딩못하는컴공

검색하기

블로그 홈

코딩못하는컴공

aeunhi99.tistory.com/m

코딩하는 블로그

구독자: 23

방명록 방문하기

주요 글 목록

[모던 자바스크립트 Deep Dive] 13장 ~ 15장 13장 스코프 1. 스코프란: 식별자의 유효한 범위 식별자란, 변수나 함수의 이름 등을 의미한다.식별자는 어떠한 값을 구별할 수 있어야 하므로 유일해야 한다. 즉 중복될 수 없다.자바스크립트에서는 스코프라는 개념을 통해 식별자의 중복을 방지한다.렉시컬 환경 : 스코프를 구분하여 식별자를 등록/관리하는 저장소(상위 스코프에 대한 참조를 관리함)실행 컨텍스트 : 현재 실행중인 코드에 대한 데이터 구조를 담고있는 동적인 데이터 구조스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에서는 다른 이름의 식별자를 사용할 수 있다즉, 스코프는 네임스페이스다 👍 2. 스코프의 종류1) 전역 스코프- 전역에서 선언된 변수는 전역 스코프를 가진다.- 전역 변수는 어디서든지 참조할 수 있다. 2) 지역 스코프- 함수 .. 공감수 4 댓글수 2 2024. 11. 10.
[모던 자바스크립트 Deep Dive] 45장 Promise 45장 Promise 1. 비동기 처리를 위한 콜백 패턴의 단점1) 콜백 헬어떠한 함수를 실행했을 때, 해당 함수 내부의 비동기 함수가 완료되지 않았다해도, 비동기 함수를 기다리지 않고 즉시 종료 된다. ex) setTimeout 비동기 함수let g = 0;setTimeout(() => { g = 100; }, 0);console.log(g); // 0 ex) get요청 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { return JSON.parse(xhr.response); }};const res = get('https://.. 공감수 2 댓글수 2 2024. 11. 10.
[모던 자바스크립트 Deep Dive] 12장 함수 12장 함수 1. 함수란 ? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정한 것 함수 정의를 통해 생성하고, 함수 호출로 실행한다. 2. 함수를 사용하는 이유 코드의 재사용성 유지보수의 편의성 코드의 신뢰성/가독성 3. 함수 리터럴 📌 구성 요소 : 함수 이름, 매개변수 목록, 함수 몸체 일반 객체는 호출할 수 없지만, 함수는 호출할 수 있으며 고유의 프로퍼티를 갖는다. 함수는 "객체" 이다. 4. 함수 정의 1) 함수 선언문 function add(x,y) { return x + y; } console.dir(add); // console.log와 다르게 객체의 프로퍼티까지 출력 console.log(add(2,3)); ✅ 함수 선언문은 표현식이 아닌 "문" 이다. (und.. 공감수 0 댓글수 0 2023. 6. 8.
[모던 자바스크립트 Deep Dive] 09 ~ 11장 09장 타입 변환과 단축 평가 1. 타입 변환 1) 명시적 타입 변환(explicit coercion) / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환 하는 것 var x = 10; var str = x.toString(); // 숫자를 문자열로 타입 캐스팅 2) 암묵적 타입 변환 : 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 var x = 10; var str = x + ''; // typeof str = string 👉 명시적/암묵적 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니라, 새로운 원시 값을 생성하는 것! 2. 암묵적 타입 변환 1) 문자열 타입으로 변환 1 + '2' // "12" NaN + '' // "NaN" true + ''.. 공감수 0 댓글수 0 2023. 6. 2.
[모던 자바스크립트 Deep Dive] (01~03) 04~08 장 01장 - 프로그래밍 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것 02장 - 자바스크립트란? 1. 역사 넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트 2. 표준화 ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴 3. 성장 초창기 자바스크립트는 웹페이지의 보조적 역할 Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환 jQuery : DOM을 더욱 쉽게 제어 V8 자바스크립트 엔진 : 더욱 빠른 성능 Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장 4. ECMAScript 자바스크립트 표준.. 공감수 0 댓글수 0 2022. 12. 4.
[React] React 완벽 가이드 섹션 18 : Redux https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Redux 1) 개념 : 크로스 컴포넌트, 앱 와이드 상태를 위한 상태 관리 시스템 - 우리의 상태를 변경하고 화면에 표기하는 데이터를 관리하도록 도와주는 역할 2) State의 종류 ⓐ 로컬 state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 👉 useState를 이용하거나 더 복잡하다면 useReducer을 사용하여 관리할수 있음 ⓑ Cross-componen.. 공감수 0 댓글수 0 2022. 9. 27.
[React] React 완벽 가이드 섹션 13 클래스 컴포넌트 1. 클래스 컴포넌트 - 과거에 많이 사용한 컴포넌트 선언 방식 * React 16.8이전에는 사이드 이펙트(훅)를 다루기 위해서는 클래스 기반 컴포넌트를 사용했어야 했다. // 클래스 class User extends Component { render(){ return {this.props.name}; } } // 함수형 const User = (props) => { return {props.name}; }; - props는 this예약어를 사용해야하고, Component를 상속받아야 한다. - render() 를 사용한다. class Users extends Component { constructor(){ super(); this.state = { // 상태 조각과는 상관없이 state는 객체가 된다.. 공감수 0 댓글수 0 2022. 8. 23.
[CSS] 안 잡히는 알 수 없는 빈 여백 원인 찾기 css를 작성하다보면 왜인지 모르게 안잡히는 여백들이 몇가지 있다. 1. flex로 레이아웃 설정 안했을 경우! - div사이에 font-size만큼의 빈 여백이 생긴다. font-size : 0 해주면 해결은 된다. 2. 전체 요소 중 이미지들 크기 확인해보기 ! 이미지 크기 width랑 hight를 둘다 설정해 줘야 한다. width만 설정했을때 height도 줄어든것처럼 보이는데 원인을 찾다보면 이미지가 원래 height만큼 차지하고있다... 일단 내가 겪었던 문제의 해결방법은 위와 같은데, 혹시나 도저히 모르겠다 !!! 하는 분들을 위해 노가다 방법이있다. 모든 요소를 일단 주석처리하고.. 하나하나 주석 풀어보면서 뭐가 여백을 만들어내는지 찾아내는 것이다. 보통 하다보면 뭐땜에 이상한 여백이 생기.. 공감수 0 댓글수 0 2022. 7. 8.
[JS] 자바스크립트 중급 part3 정리 1. JSON(javascirpt object notation) 1) 정의 : 자바스크립트 객체 표기법 ! 2) 특징 - 서버와 웹페이지간의 데이터를 주고받을 때 많이 사용 - key와 value의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷 - 예전에 쓰던 xml을 대체하여 만들어졌다.(xml을 굉장히 복잡하다 !) - 계층적인 구조를 가지며 간결하고 짧다 * xml과 json 비교 > xml : 엔드태그를 사용하여 데이터 표현 Izzy Siamese 6 yes no Izz138bod Colin Wilcox > json : 엔드태그가 필요없다 3) 구조 let people = [ {"firstName" : "길동", "lastName":"홍"}, {"firstName" : "순신", "l.. 공감수 0 댓글수 0 2022. 7. 6.
[React] React 완벽 가이드 섹션 10 : Reducer을 사용하여 부작용처리& Context API 사용하기 https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Side Effect란? - 애플리케이션에서 일어나는 모든 것 - 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 - 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. - 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEff.. 공감수 0 댓글수 0 2022. 5. 4.
[React] React 완벽 가이드 섹션 9 : 프레그먼트 작업, Portals & Ref https://www.udemy.com/course/best-react/ 1. jsx 제한 사항 및 해결 방법 - 루트 요소는 1개여야만 한다 - 그 이유는 자바스크립트 자체가 원래 하나의 요소만 반환하기 때문 // 자바스크립트에서 아래 문법은 불가능 하다 return ( React.createElement('h2',{}, 'hi'); React.createElement('h2',{}, 'hi'); ); 1) 해결 방법 ⓐ 여러개의 요소를 하나의 태그(아무태그)로 감싼다. => div soup 발생, 불필요한 렌더링 과정 실행 * div soup : div태그가 중첩되어 스타일링이 깨질 수도 있고, 속도가 느려질 수도 있다. ⓑ 배열형태로 반환한다. => 경고 발생 키가 필요하기 때문 그래서 이상적인 해.. 공감수 0 댓글수 0 2022. 5. 2.
[React] React 완벽 가이드 섹션 6 : 리액트 컴포넌트 스타일링 https://www.udemy.com/course/best-react/ * css 파일로 빼서 jsx파일에 import하는 방식 : 파일 내 모든 컴포넌트 요소에 영향을 미침 1. 동적 스타일 1) 인라인 스타일 hi - 라벨의 색상을 state 값에 따라서 동적으로 적용 가능 - 인라인 style은 최우선순위기 때문에 css파일을 오버라이드 함 2) css 클래스 .className1.className2 { color: black; } - 템플릿 리터럴을 이용하여 동적으로 클래스 이름 추가 가능 - css 파일에서 클래스 이름에 따른 css를 설정해주면됨 2. styled components - 컴포넌트 별 스타일을 지정할 수 있는 패키지 npm install --save styled-componen.. 공감수 0 댓글수 0 2022. 4. 29.
[React] React 완벽 가이드 섹션 5 : 렌더링 리스트 및 조건부 Content 【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 배열 동적으로 렌더링 - 상위 컴포넌트에서 동적으로 변화하는 배열을 props로 받았을 때, 하위 컴포넌트에서 동적으로 렌더링 할 수 있다. - map함수를 이용하여, jsx를 리턴하도록 하면 된다. - key를 지정하지 않으면, 웹페이지에서 경고가 난다. (오류는 안남) * 경고가 나오는 이유는 새로운 아이템이 추가될 때, 어느 인덱스에 추가가 될지 리액트가 모름 그래서 리액트가 추가될 배열의 모든 상태를 확인하는 작업이 생겨서 비효율적임 const Expense = (props) => { return( {props.items.map((expense) => ( //props.items.. 공감수 0 댓글수 0 2022. 3. 29.
[React] React 완벽 가이드 섹션 4 : 리액트 state 및 이벤트 다루기 【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 이벤트 핸들러 작성(클릭 시 이벤트) const clickHandler = () => { console.log("Clicked!"); // 클릭 시 실행되는 함수 작성 }; return( Change! // clickHandler() xxx ); ⭐ 함수를 호출할 때 이름만 작성해야한다. 함수 뒤에 괄호를 붙이면 jsx 코드가 리턴될 때 함수가 실행된다. 2. State ! ⭐⭐⭐⭐⭐ - state를 사용하기 위해선 react의 useState를 가져와야 한다. import React, {useState} from "react"; 1) state 사용 방법 - 컴포넌트 함수 내에서만 사.. 공감수 0 댓글수 0 2022. 3. 27.
[React] React 완벽 가이드 섹션 3 : 리액트 기초 및 실습 컴포넌트 【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 리액트를 사용하는 이유? - 리액트는 모든 요소들이 컴포넌트로 이루어져 있음 * 컴포넌트 : 재사용이 가능하고, 우려사항을 분리할 수 있음(=반복이 없고, 코드를 작고 관리할 수 있는 규모로 유지) 👉 생산성과 유지보수가 용이하다 👉 복잡하고 동적인 웹 어플리케이션에서 ui를 동적으로 나타내기 위해서는 많은 상태를 관리해야하는 부담이 생기는데 react가 이것을 해결해 준다. 👉 virtual DOM을 이용한 빠른 렌더링이 가능하다. * react/vue/angular중 선택해야하는 경우 [React] 내가 React를 선택한 이유 (tistory.com) [React] 내가 React.. 공감수 0 댓글수 0 2022. 3. 24.
[React] React 완벽 가이드 섹션 2 : 자바스트립트 새로고침 【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. let과 const 1) let : es6 이전에 쓰던 var과 같음, 변수 2) const : 상수(처음 할당한 후 다시는 재할당 불가능) 2. 화살표 함수 : es6부터 쓰는 새로운 함수 선언 방식 const/let 함수이름 = (매개변수) => { // 함수 내용 } 함수이름(); // 함수 호출 아래와 같은 방식으로 리턴문을 생략가능하다 const mutiply = (number) => number*2 // number*2가 리턴됨 3. Exports, Imports 1) Exports : 다른 js파일로 내보내기 export default person; // default ex.. 공감수 0 댓글수 0 2022. 3. 21.
[CSS] 10_CSS 고급 선택자 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 연결 선택자 1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 특정요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함 - 기준 요소를 기준으로 한 단계 아래 요소는 자식요소, 그 요소의 한 단계 요소는 손자요소 1) 하위 선택자 - 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함 section p { ..... } 상위요소 하위요소 2) 자식 선택자 - 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 section > p { .... } 부모요소 > 자식요소 2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 1) 인접 형제 선택자 - .. 공감수 1 댓글수 0 2021. 12. 21.
[CSS] 09_이미지와 그라데이션 효과로 배경 꾸미기 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 배경색과 배경 범위 지정하기 1. 배경색 지정 : background-color background-color : #008000 | rgb(0,128,0) | green; /*16진수, rgb값, 색상이름 가능 2. 배경색의 적용범위 조절 : background-clip 종류 설명 border-box 박스 모델의 가장 외곽인 테두리까지 적용(기본값) padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스모델에서 콘텐츠 부분에만 적용 backgrond-clip : border-box | padding-box | content-box; 02 배경 이미지 지정 1. 웹 요.. 공감수 0 댓글수 0 2021. 12. 16.
[JS] 17_문서 객체 모델(DOM) # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 문서 객체 모델 알아보기 1) 문서 객체 보델이란 - 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹문서를 체계적으로 정리하는 방법 2) DOM 트리 - 문서 객체 모델의 구조를 나타냄 - DOM을 구성하는 기본 원칙 모든 HTML 태그는 요소(Element) 노드 입니다. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다. 주석은 주석(comment) 노드입니다. 2. DOM 요소에 접근하고 속성 가져오기 1) DOM에 접근하기 ① id 선택자로 접근하는 getEl.. 공감수 0 댓글수 0 2021. 7. 19.
[JS] 16_자바스크립트와 객체 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 객체 알아보기 1) 객체 - 자바스르비트에서의 객체 : 프로그램에서 인식할 수 있는 모든 대상 - 객체는 인스턴스의 형태로 만들어서 사용해야 함 ⓐ 인스턴스 만들기 new 객체명 ex) Date 객체의 인스턴스 만들기 var now = new Date(); document.write("현재 시각은 " + now); 2) 프로퍼티와 메서드 ⓐ 프로퍼티 : 객체의 특징이나 속성 ex) 제조사, 모델명, 색상, 배기량 ⓑ 메서드 : 객체에서 할 수 있는 동작 ex) 시동걸기, 움직이기, 멈추기, 주차하기 2. 자바스크립트의 내장 객체 1) Array 객체 var numbers = new Array(); //배열.. 공감수 0 댓글수 0 2021. 7. 16.
[JS] 15_함수와 이벤트 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 함수 알아보기 1) 함수 선언 function 함수명() { 명령 } 2) 함수 호출 함수명() 또는 함수명(변수) ex) 함수를 이용하여 두 수 더하기 function addNumber() { var num1 = 2; var num2 = 3; var sum = num1+ num2; alert("결과값: " + sum); } addNumber(); 2. var를 사용한 변수의 특징 1) 변수의 범위 ⓐ 지역 변수 : 한 함수 안에서만 사용할 수 있는 변수 function addNumber() { var sum = 10+ 20; //함수 안에서 사용한 지역변수 } addNumber(); console.log.. 공감수 0 댓글수 0 2021. 7. 13.
[JS] 14_자바스크립트 기본 문법 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 변수 알아보기 1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터 2) 상수 : 값을 지정하면 바뀌지 않는 데이터 2. 변수 선언 규칙 1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함 2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀 3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음 4) 변수 이름은 의미있게! 3. 변수 선언하기 var 변수명; var a, b, c; //한꺼번에 변수 지정이 가능하다. 4. 자료형 종류 설명 예시 숫자형 따옴표 없이 숫자로만 표시(정수, 실수) var num = 1000; 문자형 작은/큰따옴표로 묶어서 나타냄 var .. 공감수 0 댓글수 0 2021. 7. 6.
[JS] 13_자바스크립트와 첫 만남 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 자바스크립트의 기능 1) 웹의 요소 제어 2) 웹 어플리케이션을 만듬 3) 다양한 라이브러리 사용가능 4) 서버 개발 가능 2. ... 2) 웹 문서 외부에서 자바스크립트 작성 - 새로운 js파일을 작성한 후 확장자를 .js 로 저장한다. - js파일을 웹문서로 불러올 때는 html파일안에서 아래와 같이 작성한다. ⓔ console.log() : 콘솔 창에 출력 - 콘솔문은 괄호 안의 내용을 콘솔 창에 표시한다. - 콘솔창은 ctrl + shift + j 나 개발자도구(f11)에 들어가 콘솔탭을 클릭하면 된다. ex) 이름을 받아서 콘솔 창에 표시하기 var name = prompt("이름을 입력하세요.".. 공감수 0 댓글수 0 2021. 7. 6.
[CSS] 08_레이아웃을 구성하는 CSS 박스 모델 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 - 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨 ex) , , , , , ... 2) 인라인 레벨 요소 : 한 줄 차지하지 않음 - 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄.. 공감수 0 댓글수 0 2021. 7. 2.
[CSS] 07_텍스트를 표현하는 다양한 스타일(텍스트 속성) # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 글꼴 관련 스타일 종류 속성 사용 방법 font-family 글꼴 지정 font-family: , , ... ex) font-family : "맑은 고딕", 돋움, 굴림, ... font-size 글자 크기 font-size: | | | ex) font-size : 10px font-style 이탤릭체 font-style: normal / italic / oblique(이탤릭체) font-weight 글자 굵기 font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900 * 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다. * 글자.. 공감수 1 댓글수 0 2021. 7. 2.
[CSS] 06_CSS의 기본 # "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 스타일과 스타일시트 1) 스타일 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2 } - 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌 - 중괄호 사이에 스타일 정보를 넣음 ex) 태그에 스타일 적용하기 p { text-align: center; color: blue; } * 한 줄로 작성해도 되고, 여러 줄로 작성해도된다. (세미콜론만 붙이면!) - 스타일 주석 : /* 주석 할 내용 */ * ctrl+ ? : 주석처리 2) 스타일 시트 - 스타일 규칙을 한눈에 확인하기 위해 한 군데 묶어놓은 것 - 브라우저 기본 스타일과 사용자 스타일로 나뉠 수 있다. - 사용자 스타일은 인라인, 내부, 외.. 공감수 0 댓글수 0 2021. 6. 29.
Web과 HTML 1. Web(www=world wide web) - 웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태 - 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태 1) 용어 ⓐ 프로토콜 : 네트워크상에서 약속한 통신규약(html, ftp, smtp, pop, dhcp) ⓑ IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소(192.168.**) ⓒ DNS : IP주소를 인간이 쉽게 외울 수 있도록 맵핑한 문자열(naver.com) ⓓ Port : 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호(기본 포트 : 80) 2. HTML(hyper text markup language) - 웹문서를 기술하기 위한 언어 3. CSS(Cascading style sheets) - h.. 공감수 0 댓글수 0 2021. 2. 5.
자바스크립트 프로그래밍 입문 4장 Part 1 1. 배열 //선언 let 이름 = {자료, 자료, 자료, 자료, 자료}; - 배열 안에 들어있는 각 자료들을 요소라고 한다. 2. while 반복문 while (true) { console.log("무한 반복"); } 3. for 반복문 for(초기식 ; 조건식 ; 증감식) { } 4. for in 반복문과 for of 반복문 1) for in for (let 인덱스 in 배열) { } 2) for of for (let 요소 of 배열) { } 5. var 키워드 let과 다르게 var을 사용하면 스코프 외부에서도 사용할 수 있따. # 사용하지 않는 것이 좋음 4장 연습문제 1. let i = 0; while (i 공감수 0 댓글수 0 2020. 8. 12.
자바스크립트 프로그래밍 입문 3장 요약 1. if 조건문 기본 형태 if (a>3) { }; 2. if else 조건문 기본 형태 if(a>3) { }else { } 3. if else if 조건문 기본 형태 if (a>3) { } else if (k>2) { } 4. switch 조건문 기본형태 switch (a) { case 0 : break; case 1 : break; default : break; } 5. 삼항 연산자의 기본 형태 ? : // 표현식이 참이면 을 출력, 거짓이면 을 출력한다. 6. 짧은 초기화 조건문의 기본형태 = || let a; test = a || k(초기화값) console.log(a) > k 3장 연습문제 1. ④ 2. 1) 2) 3) 3. if (x>10 && x 공감수 0 댓글수 0 2020. 8. 12.
자바스크립트 프로그래밍 입문 2장 # 책을 기반으로 공부한 내용을 바탕으로 작성한 글입니다. Part 0 1. 자바스크립트란? 웹 브라우저에서 사용할 목적으로 만든 프로그래밍 언어 2. Node.js 란? 자바스크립트로 클라이언트 애플리케이션이 아닌 서버 애플리케이션으로 개발 한 것 * 특징 : 다른 스크립트 언어와 프레임워크보다 빠르다. 3. 자바스크립트로 무엇을 개발할 수 있는가? 1) 웹 클라이언트 애플리케이션 개발 2) 웹 서버 개발 3) 모바일 애플리케이션 개발 4) 데스크톱 애플리케이션 개발 5) 게임 개발 6) 데이터베이스 관리 Part 1 1. 기본용어 1) 표현식 : 아래와 같이 값을 만들어 내는 간단한 코드 273 10 + 20 + 30 "javascript" 2) 문장 : 표현식이 하나 이상 모이면 문장이 된다. 3).. 공감수 0 댓글수 0 2020. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.