2021년 4월 22일 코드스테이츠 DAY-18(자료형, 스코프, 클로저 + twittler 목업 update)

 

2021년 4월 21일 코드스테이츠 DAY-17(Twittler 목업 만들기) + CSS

 

원시 자료형과 참조 자료형(Chapter)

원시 자료형과 참조 자료형(Checkpoint)

스코프(Chapter)

스코프(Checkpoint)

클로저(Chapter)

클로저(Checkpoint)

Checkpoint Solution(Zoom)

 

+

 

twittler 목업 update

 

 

원시 자료형과 참조 자료형(Chapter)

 

원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고,

 

참조 자료형이 할당될 때는 동적으로 크기가 변하는 동적인 보관함(heap)의 주소(reference)가 담긴다. 

 

원시타입데이터는 각 변수간의 원시타입데이터를 복사할 경우에 테이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지않는다.

let a = 10;
b = a;
b=20;
a;
10

참조타입데이터는 주소를 복사한다. 복사한 데이터에서 원소를 변경하게 된다면 주소안에있는 데이터가 변경되는 것이므로

 

기존의 데이터에도 영향이 가게 된다.

let arr = [1, 2, 3, 4];
let anotherArr = arr;
anotherArr[1] = 20;
arr
(4) [1, 20, 3, 4]

 

 

 

스코프(Chapter)

 

스코프란 변수 접근 규칙에 따른 유효 범위.

스코프에는 block scope({}로 둘러싼 범위)와 function scope가 있다.

 

변수 접근 규칙

• 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능
• 스코프는 중첩이 가능함
• 가장 바깥의 스코프는 특별히 전역 스코프(Global Scopr)라고 부름(지역 스코프와 반대말)
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가짐.

동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉이라고 부른다.

 

지역 스코프에서 전역변수와 동일한 변수 이름을 선언하지 않으면(let 키워드를 사용하지 않으면) 전역 변수와 같은 변수를 쓰겠다는 의미이고, 

 

지역 스코프에서 전역 변수(let num = 1)에 재할당을 해주면(num = 2) 전역 변수의 값은 재할당한 값(num = 2)으로 바뀌게 된다.

 

var로 선언된 지역 변수 및 전역 함수는 window 객체에 속하게 된다.

 

선언 키워드 없이 변수를 할당하면 전역 변수처럼 작동한다.

 

 

 

 

 

클로저(Chapter)

 

함수가 생성될 당시의 외부 변수를 기억하여 생성 이후에도 계속 접근 가능한 특성? 성질? 그것을 closure라고 한다.

외부함수의 변수에 접근할 수 있는 내부함수(클로저 함수)

 

클로저 함수의 특징

• 함수를 리턴하는 함수
• 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다.(역은 불가)

클로저 함수의 장점

• 여러개의 변수에 클로저 함수를 담아서 완전히 독립적으로 분리하는 것을 모듈화라고 함.
• 클로저함수에 객체를 리턴하게하고 key값으로 함수가 오게하면 클로저를 가진 외부함수가 담긴 변수에 메소드 처럼 사용가능하다. 

 

twittler 목업 update

 

어제 해결하지 못했던 부분 중 update할 것이 있어서 기록한다. 

 

• wireframe을 보면 알겠지만 nav container가 왼쪽에 세로로 있어야하는데 예쁘게 정렬이 안됬다.
• 그리하여 나는 보통의 웹처럼 위로 nav container를 옮겼다.
• wireframe을 보며 알게된 contenteditable과 -webkit-user-modify: read-write를 통해 사용자 입력창을 구성하려하였지만 이는 작동하지않았다. (해결완료)
• 그리하여 input tag로 글쓰는 입력창을 대신하였다. (해결완료)
• 사진이나 GIF등 파일을 첨부하는 것을 구현하고 싶었으나 시간이 부족해 엄두조차 내지못했다.
• 2page는 꿈도 못꿨다.
• ++추가 스크롤 바 수정

수정한 것을 확인해보자.

 

 

 

다이나믹한 차이는 발견할 수 없지만,

 

input 태그 대신에 div태그를 넣었고 contenteditable을 적용시켜서 사용자로 하여금 해당 부분을 수정할 수 있게 만들었다. 

 

또한 스크롤바의 색상을 트위터 고유의 색으로 변경하여 좀 더 트위터스러운 느낌을 내보았다.

 

프로필 사진을 변경하는 기능과 글에 사진을 추가하는 기능을 주의깊게 살펴보고있는데,

 

아무래도 이 영역은 javascript의 힘을 빌려야하는 부분인 것 같다.

 

꾸준히 업데이트하여 완성까지 가보리라.