본문 바로가기

기술들/javascript

 (8)
객체지향언어 - prototype과 __proto__의 관계 protoype과 __proto__를 공부하고 있던 참에 코드스테이츠 엔지니어 분께서 좋은 글을 추천해주셨고 이를 보고 이 개념에 대해 어느 정도 이해하게 되었다. 까먹을새라 내가 이해한데로 나만의 언어로 정리해보고자 한다. 먼저 Food라는 함수를 하나 생성해보자. function Food() { } 함수를 생성하면 prototype이라는 것이 자동적으로 생성이된다. (이것은 진리) 그 prototype이라는 것에 접근하면 객체형태가 반환되는데, 이는 prototype이 객체라는 것을 의미한다. Food.prototype => {constructor: ƒ} //객체가 반환됨. 그 prototype 객체를 까보면 constructor라는 속성과 __proto__라는 속성이 있다. 아래에 보이는 것처럼 c..
[Today I Learned] 10월 28일(수) - 객체지향언어 - 오늘 공부했던 부분. #객체지향 😄javascript는 왜(why) 객체지향 언어(OOP)일까에 대한 생각? javascript를 배우면서 처음 객체(object)를 마주했을 때 들었던 생각은 배열(Array)보다는 조금 더 명확하게(key를 이용) 데이터를 관리할 수 있고, 뭔가 익숙해지기가 배열보다는 훨씬 어려울 것 같다는 것이 객체를 마주한 나의 첫 느낌이었다. 그래서 이 당시 난 이 객체가 중요하지 않은 개념이었으면 하는 바람이 있었다. 그렇지만 지금의 나는 javascript가 대표적인 객체지향 언어(OOP)라는 것을 알고 있다. 나는 'javascript는 객체지향언어다'임을 확실히 인지하게 된 계기는 1. 객체에 value값으로 익명함수(function)를 넣을 수 있다는 점을 알게 된 ..
Twittler과제(2) - CSS HTML만 작성했을 때를 브라우저에 띄우면 왼쪽 사진과 같다. 브라우저 왼쪽 및 위쪽에 모든 컨텐츠가 치우쳐져 있는 상태이다. 반면 CSS를 적용하면 오른쪽 사진과 같다. 사진이 잘려서 전체적인 컨텐츠구조 위치를 잘 볼 수 없는데 실제로는 구조를 브라우저 정중앙에 위치 시켰다. HTML구조를 어떤 CSS속성을 적용해서 오른쪽 이미지와 같은 모습을 구현했는지 내가 썼던 CSS 속성을 레이아웃 속성 위주로 정리하려고 한다. (CSS는 내가 썼었던 속성을 다시 보면 왜 썼는지 항상 의문이 든다;;) (1)전체적인 구조를 정중앙에 위치시키기. - 정중앙에 위치시키기 위해 html에서 모든 컨텐츠를 class="container"인 div태그(빨간색)로 묶은 이유가 여기에 있다. 모든 컨텐츠를 포함하고 있는 di..
Twittler과제(1) - HTML부분 코드스테이츠 과제인 Twittler를 진행하면서 그 과정에 대해 글을 써보려고 한다. 과제를 하면서 무슨 생각으로 이 코드를 썼었는지 정리해보고 싶고, 정리를 하면서 얻게되는 을 키우고 싶어서 과제를 글로 정리해보려고 한다. (1) 전체적인 부분을 우선 container를 class로 하는 태그로 묶었다. 이유 : 전체를 div 태그로 다시 묶은 이유는 나중에 css로 전체를 가운데 정렬하기 쉽도록 하기 위해서였다. 이 태그는 태그의 유일한 자식이고 아래 구성한 모든 컨텐츠의 부모 역할을 한다. (사실 이 웹에서 유일한 것(?)이기 때문에 id로 지정해도 됬지만 그냥 class로 통일했다, 사실 li를 제외한 모든 부분을 id로 지정해줘도 되지 않을까? 이 목업에서는 하나씩밖에 안쓰이니까..?) (2) ..
[공부했던 것 정리] Scope(2) 저번에 이어서 function Scope와 block Scope를 비교해 보겠다. function Scope는 앞에서 정리했던 local Scope와 같이 함수 영역을 의미하고, block Scope는 중괄호로 시작하고 끝나는 범위를 말한다. 예를 들어 for { block 범위 } 문, if { block 범위 }문이 이에 해당한다. let ? 이 블록범위에서만 변수를 사용할 수 있게 만드는 변수타입이 바로 let이다. block 범위 안에서 let 으로 변수를 지정해주면, 그 변수는 그 block 범위 밖에서 사용할 수 없다. 반대로 block 범위가 아닌 전역범위에서 let으로 변수를 선언해줄 경우 그 변수는 어디서든 사용할 수 있다. 위 그림에서 (1) 과 (2) 는 어떤 결과값을 나타낼까? (1..
[공부했던 것 정리] Scope(1) 공부하면서 헷갈렸던 개념인 scope에 대해 정리하겠다. 우선 scope에 대해 알아보자. Scope = 변수를 사용할 수 있는 유효범위를 의미한다. 그리고 그 범위는 중괄호({ })를 통해 구분한다. 좀 더 구체적으로 다음과 같은 기준으로 scope를 구분할 수 있다. (1) Global Scope와 local Scope Local Scope : 함수 안의 범위. Global Scope : 함수를 포함한 모든 범위. 함수 안쪽 범위를 Local(지역) scope라 부르고, 함수를 포함한 범위 전체를 Global(전역) scope 라고 한다. 위 그림처럼 함수를 선언했을 때 local scope 가 생기는 이유는 Javascript는 함수를 선언했을 때, 그 함수가 자기만의 scope를 갖도록 설계되어 ..
[공부했던 것 정리] 배열의 불변성, 가변성[2] 그렇다면, 원본을 훼손시키지 않는 방법에는 무엇이 있을까? 상식적으로 원본을 복사하면 된다. 복사본을 삶아 먹든 구워먹든 원본은 그대로 있다. 다만 1편에서 예시로 다뤘던 것처럼 복사본에 원본을 직접 할당하면 안된다. ex) 원본 : let array1 = [1,2,3]; 복사본: let array2 = array1; (X) 그 이유는 두 배열의 값 모두 같은 메모리에 하나의 값으로 존재하기 때문에 array2의 배열의 값을 수정하면 당연히 메모리에 하나밖에 없는 배열값이 수정되기 때문에 자동적으로 array1의 배열값(원본)도 수정되기 때문이다. 내가 지금껏 배운 선에서 원본을 훼손시키지 않고 복사하는 넘버원 방법은 slice 메소드를 쓰는 것이다. slice의 뜻은 '일부분'이다. 어떠한 배열에서 내..
[공부했던 것 정리] 배열의 불변성, 가변성[1] mutable : 변화 가능한(가변) immutable : 변화 가능하지 않은(불변) 코드스테이츠 배열의 메소드 강의를 들으면서 immutable에 대한 설명을 들었다. 배열에 있어서 immutable이란 본래 원본이 손상되지 않는 것을 말한다. 여기서 원본이라 함은 array변수를 최초 선언하고 그 안에 [1,2,3]이라는 배열을 할당하면 [1,2,3]이 원본이 되는 것이다. let array = [1,2,3]; // [1,2,3] 원본 이렇게 선언을 하게 되면 아래 그림처럼 array이라는 이름으로 메모리 특정 위치에 배열 [1,2,3]이 보관된다. 여기서 새로운 배열을 선언해보자 let newArr = [1,2,3]; 이 newArr이라는 배열은 위에서 선언한 array배열과 똑같은 [1,2,3]이..

티스토리툴바