본문 바로가기 메뉴 바로가기

공부 기록일지📚

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

공부 기록일지📚

검색하기 폼
  • 분류 전체보기 (387)
    • Frontend (278)
      • CSS, HTML (50)
      • CSS 프레임워크 (5)
      • JavaScript (114)
      • TypeScript (22)
      • react.js (49)
      • Next.js (9)
      • jQuery (8)
      • WIL😎 (20)
    • 코딩테스트 (27)
      • 알고리즘 & 자료구조 개념 (18)
      • 연습문제 (9)
    • 프로그래밍 (77)
      • Node.js (6)
      • Python (3)
      • 유용한 사이트 | 정보 (16)
      • Git, Github (24)
      • 정리하지 못한 내용 (3)
      • CS 지식 (25)
    • private (1)
      • interest (0)
      • 자격증 (1)
  • 방명록

Frontend/JavaScript (114)
[생활코딩][웹브라우저JS]- 사용자와 커뮤니케이션 하기

HTML은 form 을 통해서 사용자와 커뮤니케이션할 수 있는 기능 제공 자바스크립트에서는 사용자와 정보를 주고받을 수 있는 간편한 수단을 제공한다. alert 경고창 사용자에게 정보를 제공 or 디버깅등의 용도로 많이 사용 ->디버깅의 경우, 브라우저의 개발자도구가 있기 때문에 alert보다는 console.log를 많이 사용합니다. 경고창을 실행할 동안은 그 다음 코드가 실행되지 않는다는 특징을 가지고 있음 confirm window객체의 메소드 중 하나 다른 경고창과 다르게 "확인, 취소"버튼이 있습니다. 확인 버튼을 누르면 true를 리턴, 취소 버튼을 누르면 false를 리턴합니다. -> 조건문의 조건식으로 활용가능 prompt 사용자로부터 입력값을 받아서 그 값을 리턴합니다. -> 조건문의 조..

Frontend/JavaScript 2022. 1. 26. 19:42
[생활코딩][웹브라우저JS]- 스크립트 태그 위치, Object Model

HTML: 정보 CSS: 디자인 JavaScript: 웹브라우저, HTML 제어 JS로 웹페이즈를 제어하기 위해서는 JavaScript를 로드해야 한다. JS로드 방식 inline: 태그에 직접 자바스크립트를 기술하는 방식 // 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어짐 ​ 이렇게 onclick= ""이라는 HTML 속성에 값을 JS코드로 주는 것이 inline 방식이다. script: 태그를 만ㄷ르어서 여기에 자바스크립트 코드를 삽입하는 방식이다. 장점은 HTML태그와 js코드를 분리할 수 있다는 점이다. 그렇지만 엄격하게 분리한 것이 아니라 HTML코드 내에서 분리한 것// script 태그까지는 HTML문법이다. 외부 파일로 분리: js를 별도의 파일로 분리할 수도 있다. 장점은 보다..

Frontend/JavaScript 2022. 1. 23. 20:47
[생활코딩] JS문법(패턴)- 재귀함수(feat. 노드 종류 API)

재귀함수는 함수 자신을 호출하는 프로그래밍 기법이다. 재귀 함수에 관한 수업은 웹브라우저 자바스크립트 모듈에서 언급 ->http://opentutorials.org/module/904/6700 노드 종류 API - 웹브라우저 JavaScript 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName no opentutorials.org 노드 종류 API 노드 작업을 하게 되면 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있습니다. 이런 경우에 사용할 수 있는 API 가 nodeType, nodeName 이다. N..

Frontend/JavaScript 2022. 1. 22. 20:46
[생활코딩] JS문법(객체지향)- 참조

참조를 알아보기 이전에 복제에 대해서 알아보자 복제 전자화된 시스템의 가장 중요한 특징은 복제입니다. 현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제하는 것은 비용이 거의 들지 않는다. 이 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징일 것이다. 복제는 연결되어있지 않은 별도의 데이터이다. let a = 1; let b = a; //여기까지 b의 값은 1 b = 2; // b의 값은 2 document.write(a, b); // output: 1,2 //b의 값이 변한다고해서 a의 값에 영향을 미치지않는다. 원본 파일이 있고 복제한 파일이 있다면 복제한 파일의 내용을 바꿨을 때 원본파일에 영향을 미치지 않는 것과 동일하다. 위의 코드에서는 원본파일을 a 라고 보고 복제된 파일을 b라..

Frontend/JavaScript 2022. 1. 21. 20:38
[생활코딩] JS문법(객체지향)- 데이터타입

데이터 타입은 크게 2가지로 구분할 수 있다. 원시 데이터 타입(or 기본 데이터 타입, primitive type) - 객체가 아닌 데이터 타입 숫자 문자열 불리언(true/false) null undefined 객체 데이터 타입 (참조 데이터 타입) -원시 데이터 타입 외의 모든 데이터타입은 객체입니다. 래퍼 객체(wrapper object) -원시데이터가 있을 때 객체처럼 활용할 수 있도록 감싸주는 객체를 wrapper object 라고 합니다. -> 이 작업을 JS가 자동으로 처리해 줍니다. -원시 데이터는 객체가 아니기 때문에 객체처럼 사용할 수 없습니다. 하지만 wrapper object를 통해서 마치 객체인 것처럼 사용할 수 있게 됩니다. ▶원시데이터 타입 별 래퍼 객체 유/무 숫자 -> N..

Frontend/JavaScript 2022. 1. 21. 17:44
[생활코딩] JS문법(객체지향)- Object객체

Object 객체란? Object객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 아무것도 상속받지 않는 순수한 객체라는 의미 (최상위 객체) -> 모든 객체는 Object객체로 부터 상속받는다. 생략이 되어있을 뿐 모든 객체는 Object 객체를 상속받고, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object 를 사용한다. MDN references를 보면 Object 객체의 카테고리는 2022기준으로 Standard built-in objects(구 Fundamental objects)이다. Object API 사용법 - API를 보면 메소드의 형태가 Object.keys() 인 형태와 Object.prototype..

Frontend/JavaScript 2022. 1. 19. 23:51
[생활코딩] JS문법(객체지향)- 표준 내장 객체의 확장

표준 내장 객체란? Standard Built-in Object 라고 하며 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. JavaScript 언어 자체가 제공하는 객체는 아래에 나와있는 것이 전부이다. = 자바스크립트의 코어엔진이 제공하는 API Object Function(JS에서는 함수도 객체입니다.) Array String Boolean Number Math Date RegExp(정규표현식) 언어 자체에서 제공하는 객체는 적은 편이지만 호스트환경에 따라 제공하는 API는 더 많을 수 있습니다. 즉, 기본 내장 코어엔진이 제공하는 API + 호스트환경이 제공하는 API 이용하여 소프트웨어를 만들게 되는 것이죠. 표준 내장 객체와 호스트환경이 제공하는 API는 JS개발자에게 기본적으로 제공되..

Frontend/JavaScript 2022. 1. 19. 19:50
[생활코딩] JS문법(객체지향)- 상속(inheritance), prototype

상속(inheritance)이란? 객체는 연관된 로직들(변수, 메소드)로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. -> 로직 재활용 가능 단순히 물려받는 것이 아니라 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. //이전에 생성자를 통해 객체를 만드는 방법 //생성자 함수의 내부에 프로퍼티를 정의하고 있다. // function Person(name) { // this.name = name; // this.introduce = function () { // return "My name is " + this.name; // }; // } // const p1 = new Person("co..

Frontend/JavaScript 2022. 1. 17. 20:53
이전 1 ··· 5 6 7 8 9 10 11 ··· 15 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • is()
  • 틸드와 캐럿
  • 원티드 3월 프론트엔드 챌린지
  • 항해99프론트
  • 원티드 FE 프리온보딩 챌린지
  • getStaticPaths
  • ~ ^
  • && 셸 명령어
  • 타입스크립트 DT
  • grid flex
  • 항해99추천비추천
  • 원티드 프리온보딩 프론트엔드 챌린지 3일차
  • 프리렌더링확인법
  • getServerSideProps
  • D 플래그
  • 부트캠프항해
  • 항해99프론트후기
  • float 레이아웃
  • fs모듈 넥스트
  • aspect-ratio
  • reactAPI
  • tilde caret
  • nvm경로 오류
  • text input pattern
  • 원티드 프리온보딩 FE 챌린지
  • nvm 설치순서
  • Prittier
  • 프리온보딩 프론트엔드 챌린지 3월
  • 형제 요소 선택자
  • 타입스크립트 장점
more
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바