프로그래밍 공부하기

할당과 얕은 복사, 깊은 복사는 헷갈리는 개념이므로 한 번 정리해본다. 1. Assignment vs Copy 할당과 복사의 차이는 무엇일까. 처음에는 reference type을 할당하면 얕은 복사가 된다고 생각했었다. reference를 참조하게 되었기 때문이다. 하지만 엄밀히 말해서 이는 다른 의미이다. let originObj = { pro1: 'AA', pro2: 'BB', pro3: ['C', 'CC', 'CCC'], pro4: { 'D': 'E', 'DD': 'EE' }, }; let assignObj = originObj; let copiedObj = Object.assign({}, originObj); //얕은 복사 위 코드처럼 originObj, assiginObj, copied Obj..

오늘 레슨에서 Closure라는 개념을 새로 배웠다. Java, C#에도 클로저라는 개념이 있었지만 써본 적이 없어서 한 번 정리해보려 한다. Closure란 함수와 함수가 선언된 어휘적 환경의 조합이다. 이해하기 쉽게 말하자면 내부함수에서 외부함수의 문맥에 접근할 수 있는 것. 그러한 내부함수를 클로저 함수라 부른다. Scope Chaining에 의해 외부함수의 문맥에 접근하기 때문에 어휘적 환경의 조합이라 부른다. (스코프는 선언할 때 발생하기 때문이다.) [예시1] function OuterFn() { let num = 123; console.log("num(outer)>>" + num); function InnerFn() { num++; console.log("num+1(inner)>>" + nu..

Javascript문서를 보다보면 ...arg라는 표현이 있다. 이 것이 무엇을 의미하는지 정리해본다. ...arg라는 표현이 나오면 2가지 경우로 나누어 해석해야 한다. 1. Rest Parameter 파라미터로 넘어오는 것들을 배열로 묶는다. value1, value2... -> 배열 function printArgs(...args) { console.log(args[1]) // -> 30출력 } printArgs(10, 30, 40) 2. Spread syntax 배열 값을 펼친다. 배열 -> value1, value2... function printArgsPlus(x,y){ console.log(x+y) // -> 7출력 } let arr = [3,4]; printArgsPlus(...arr)

*{ box-sizing: content-box; /*box-sizing: border-box;*/ } #box1{ border:10px solid red; width: 100px; } #box2{ border:30px solid blue; width: 100px; }​ Box_Test Box_Test [결과] box-sizing: content-box (기본 값)일 때 결과 box-sizing: border-box일 때 결과

UI를 만들 때 고민되는 것 중 하나는 크기 단위를 어떻게 잡을 것인가 이다. 페이지의 타겟이 모바일인지 PC인지에 따라서, 같은 페이지여도 메뉴 등 크기를 고정시키고 싶은 요소는 화면 크기 상관 없이 고정값으로, 그 외 요소는 화면 사이즈에 따라 변하게 만드는 등 용도에 따라 다른 단위를 써야할 수 있다. 1. 절대적인 크기: px -사용자 디바이스 기본 크기 설정과 상관없이 크기 설정 -강조하기 위해 큰 크기(px)로 지정했는데 사용자에 따라 지정하지 않은 글꼴보다 작은 크기가 될 수도 있다. -모바일 처럼 작은데 고해상도인 환경의 경우 1px이 모니터의 한 점보다 크게 업스케일되므로 문제가 생길 수 있다. 2. 보통의 경우: rem -사용자 디바이스 기본 크기 설정을 기준으로(1rem) 크기를 지정..

div: 단순히 영역을 묶어주는 역할(의미X) article: 독립적으로 존재하는 내용 블록 article 부분만 독립적으로 봤을 때 이해 가능하며 이 부분만 떼서 다른 페이지에 끼워 넣을 수 있다. ex. 블로그 포스팅 section: 다른 블록들과 관련이 있는 요소일 때 사용. 큰 묶음(단위)인데 다른 블록과 관련이 있을 때.. ex. 연속된 정보 그룹 section의 깊이에 따라 같은 h1태그여도 크기가 다르다. See the Pen section_tag by ImHyeLim1209 (@imhyelim1209) on CodePen. 하지만 결과가 이렇게 나온다고해서 section태그 깊이에 상관없이 h1태그만을 사용하는 것은 좋지 않다. 같은 크기의 텍스트여도 접근성 검사기능으로 확인했을 때 sec..