분류 전체보기 339

TIL) 프로토타입 정리

JavaScript는 프로토타입(원형 객체) 기반 언어 → 객체를 상속하기 위해 프로토타입을 이용한다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아니고, 체인을 타고 올라가며 접근할 뿐이다. 상속 받는 멤버들은 prototype 속성에 정의되어 있다 Object.로 시작하는게 아니라, Object.prototype.로 시작한다. prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체이다. 그래서 Object.is(), Object.keys()등 prototype 버킷에 정의되지 않은 멤버..

TIL) 객체 지향 프로그래밍, OOP, 캡슐화, 추상화, 상속, 다형성

객체 지향 프로그래밍 vs. 절차 지향 프로그래밍 절차 지향 프로그래밍 = 단순히 별개의 변수와 함수로 순차적으로 작동 절차적 언어 = 순차적인 명령의 조합 ex) 초기의 C, 포트란 객체 지향 프로그래밍 = 데이터의 접근, 데이터의 처리 과정에서 대한 모형을 만들어낸다. ('클래스'라는 데이터 모델의 청사진을 사용해서 코드를 작성한다. ) 그래서 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 된다. // 메서드와 속성이 존재한다. 현대 언어들은 대부분 객체 지향의 특징을 가지고 있다. OOP는 프로그램 설계 철학이다. OOP의 모든 것은 '객체'로 그룹화된다. // 이 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. OOP의 재사용성을 얻..

TIL) 객체 지향 프로그래밍, 클래스, 인스턴스, 모듈화를 하는 이유

객체 지향 프로그래밍 (OOP; Object-oriented programming)= 데이터와 기능을 한 곳에 묶어서 처리한다. 속성과 메서드가 하나의 '객체'라는 개념에 포함되며, 이는 js 내장 타입인 object와는 다르게, 클래스라는 이름으로 부른다. 메서드 호출하는 방법 // 화살표 함수를 쓰지 않는다. ** 화살표 함수 ** this나 super에 대한 바인딩이 없다. 메서드로 사용될 수 없다. new.target 키워드가 없다. 모듈화란? 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. ==> 그 중 하나가 코드를 여러개의 파일로 분리하는 것이다. (모듈화) 1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 2. 코드를 개선..

TIL) 고차함수, 내장고차함수, map, filter, reduce

일급객체 변수에 할당 가능 // (함수 표현식 & 함수 선언식 모두 가능) 다른 함수의 전달인자로 전달 가능 // 콜백함수 = 함수에 인자로 전달되는 함수. 다른 함수의 결과로서 리턴 가능 (함수가 일급객체이기 때문에 클로져도 사용가능한거였다. ) => 문자열, 숫자 같은 다른 데이터처럼 사용 가능! ==> js에서 함수는 일급객체!! 커링함수 = 함수를 리턴하는 함수. 고차함수 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 함수가 일급객체라서 고차함수로 활용 가능한거다! 함수를 전달인자로 받는 함수 함수를 리턴하는 함수 콜백함수 비동기에서 콜백함수가 매우 중요하다. 커링함수 커링함수때문에 클로저가 나온거다. 거의 같다고 말할 수 있다. 배열 내장 매서드..

TIL) 문자열과 배열의 공통점

문자열과 배열의 공통점 1. 접근과 수정 방법 배열은 접근과 수정 방법은 문자열의 접근과 수정 방법과 동일하게 [괄호 표기법]을 사용한다. const number = [0,1,2,3,4,5]; console.log(number[3]); // 3이 출력된다. number[2] = 20; console.log(number); // [0,1,20,3,4,5]이 출력된다. 2. 둘 다 index를 가져서 관련 메서드를 사용할 수 있다. ex) indexOf, slice, length 메서드를 사용할 수 있다. 2-1. 갯수 알아내기 length 속성을 이용한다. 혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다. 참고 https://developer.mozilla.org/ko/do..

TIL) id 속성과 class 속성의 차이에 대해서 설명해주세요.

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리합니다. 하지만 이 둘의 차이점이 존재합니다. ID를 불러올때는 #ID명 앞에 # 샾을 씁니다. #ID명 CLASS를 불러올때는 .CLASS명 앞에 . 마침표를 씁니다. .CLASS명 ID는 중복으로 사용할 수 없습니다. 한 개의 ID는 페이지에서 딱 한번만 사용해야 합니다. CLASS는 중복 사용이 가능하여, 동일한 CLASS명을 페이지의 여러 곳에 사용해도 상관없습니다. CLASS 속성을 둘 이상 사용할 때는 class="class1 class2" 와 같이 띄어쓰기로 구분해야 합니다. 그리고 CSS내에서 가장 마지막에 작성한 스타일이 적용되는 점을 유의해야합니다.

TIL) innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.

innerHTML 와 textContent 메서드 모두 텍스트 값을 읽어오고, 설정할 수 있는 기능을 합니다. 하지만 이 둘의 차이점은 분명합니다. 먼저 innerHTML 메서드는 해당 요소에 포함된 HTML*, XML**의 전체 내용을 읽어오거나 설정할 수 있습니다. 그래서 태그는 물론이고, HTML 코드 내의 공백까지도 출력됩니다. 하지만 XSS*** 공격 위험에 취약하다는 단점이 있습니다. 이에 반해, textContent 메서드는 해당 요소와 그 자손의 텍스트 콘텐츠를 표시합니다. 따라서 innerHTML 메서드와는 달리 HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋고 XSS*** 공격 위험이 없습니다. 따라서 결론적으로 가급적 textContent를 사용하는 것이 ..

TIL) 터미널로 접근하는 깃, 명령어 정리

mkdir ~/Desktop/codestates 👉Desktop 파일안에 codestates 파일을 만드세요. cd ~/Desktop/codestates 👉codestates 파일 안으로 들어가세요. mkdir my-app 👉my-app 파일을 만드세요. cd my-app 👉 my-app 파일로 들어가세요. touch index.html style.css 👉 index.html, style.css 파일을 만드세요. ls 👉현재 폴더에서 모든 폴더와 파일을 보여주세요. index.html style.css 👉touch 명령어로 만든 index.html, style.css이 있습니다. git init 👉 작업공간에 local Git repository를 생성합니다. **git clone 시 git in..

🤼Git 2022.05.22

CSS 간격을 맞추고 싶은데 안됩니다..! css 보라색 부분 없애기

문제사항 아래 표에서 사진 - 내용 - 체크표시를 담고 있는 전체 영역의 justify-content 를 space-between으로 설정했다. 그랬더니 가운데의 내용 영역에 따라 가운데 배열이 되서 전체적으로 깔끔하지 못한 인상을 주고 있다. 내가 만들고 싶은 것 가운데 내용 영역의 글자 길이에 영향을 받지 않고, 제목은 왼쪽에 붙이고, 아이디와 날짜는 오른쪽으로 붙이고 싶다!  해결과정 1. 개발자 도구에서 영역을 확인한다. 👇 내용이 1줄이 안되는 부분에는 보라색으로 빗금이 있다. 이 부분을 없앤다면 내가 원하는 대로 만들 수 있다는 것을 알았다!! 2. 사진 - 내용 - 체크표시를 담고 있는 전체 영역의 크기를 내가 임의로 설정해주자! (맨 위 사진에서 파랑색 영역) width, heigh를 설..

TIL) 깃

[목표] 로컬 Git 리포지토리를 직접 생성할 수 있다. staging area의 개념에 대해서 이해하고 git add로 staging area에 변경한 코드를 추가할 수 있다. git commit 으로 자신이 작업한 결과물을 기록할 수 있다. 로컬 Git 리포지토리란? 로컬 Git 리포지토리는 자신의 컴퓨터(로컬 환경)의 작업 공간에 위치한 Git 리포지토리이다. 컴퓨터 하드 드라이브에 원하는 디렉토리로 이동해서 로컬 Git 리포지토리를 추가하면 해당 디렉토리의 파일 변화를 감지할 수 있다. 반대로, Github에서 생성한 리포지토리는 원격(remote) Git 리포지토리라고 부른다. 내 컴퓨터 상에는 없지만, 원격에 존재하는 리포지토리이다. 로컬 Git 리포지토리: 내 컴퓨터의 저장소, 내 개인 전용..

🤼Git 2022.05.19
반응형