익명의 개발노트

메모이즈라고도 불리운다. 기본 컨셉 : 한번불렸던거는 메모리에 저장해놓자. 재귀처럼 반복되는 결과를 메모리에 저장에서 다음에 사용시 같은 결과 나올때 결과가 빨리나오게 하는 기법.

z-index 웹 페이지가 다이나믹 해지고 요소들의 배치가 자유로워지면서, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련임. 이때 어느 것을 위에 표시할 것인가를 제어해주는 속성이 이것임. 파워포인트를 예를 들면 겹쳤을때 , 가장 위로, 가장 아래로 이런거랑 같다. 특징 1) z-index값을 사용하려면 해당요소의 position값이 relative, absolute, fixed 중 하나여야 한다. 2) position이 지정되지 않았다면, z-index값은 0인 것 처럼 작동한다. 숫자가 클수록 위로 올라온다. 3) z-index의 값은 같은 depth의 요소(형제요소, siblings) 끼리 비교하는 것이 원칙임. 4) z-index의 기본값은 auto이며, 부모의 z-index값이 auto인 경..

정렬 방법 1. float : 기본적으로 띄워지게 만드는 속성임. 블록요소를 가로로 나란히 정렬하기 위해 사용. 일단 이걸쓰면 더는 width가 100%가 아니다. 단점은 부모태그가 float 속성의 자식 태그를 인식하지 못함. 해결하려면 overflow: auto나 overflow: hidden 를 줘야함. 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.float된 요소를 부모 요소..

1. static : 모든 태그들의 기본. 디폴드 값이 static이라 따로 써주지 않아도 됨. 2. relative : 태그 위치 변경하고 싶을때 position : relative 사용. top, right, bottom, left 속성 사용 할 수 있음. 각각의 방향을 기준으로 태그 안쪽방향으로 이동하기 때문에 바깥쪽으로 이동하게 하려면 -값을 줘야 하는 특징이 있음. static 상태를 기준으로 주어진 값만 큼 움직임. top, left, right, bottom 속성이 있어야 움직임. 3. absolute : position : static 속성을 가지고 있지 않은 parents를 기준으로 움직인다. 부모 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(b..

레이아웃 & 박스모델 1. margin : 다른 태그와의 거리를 나타냄. 2. border : 테두리이며, 가장 기준임. 3. padding : border와 content사이의 간격 4. content : 보통 태그가 차지하는 영역 이 중에서 기준은 border가 된다. 5. box-sizing : 너비를 직접 일일이 계산하고 싶지 않을때 사용. * padding과 margin은 width에 포함되지 않는다.( box-sizing: border-box 이면 margin만 미포함)

HTML 컨텐츠 관련 Tag 1. : 웹 브라우져를 열때 이부분은 표시가 안됨. 사용자에게 안보이는 부분임. 2. : 실질적인 html 을 작성하는 부분 3. : css를 html에 적용시키고자 할때 사용 4. : 실행가능한 코드를 문서에 포함시키거나 참조하기 위한 것. 5. : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그. 6. vs : 영역을 설정할 때 사용함. 1) 차이점 : div는 줄바꿈이 되지만 span은 옆으로 붙어버림, 텍스트 표현시 div는 사각형 박스로 구역을 정하지만, span은 문장단위로 지정이 됨. div은 폭, 넓이 지정 가능하지만, span은 지정 불가. ※ table 태그대신 div와 span이용해서 간결한 표 만들 수 있음. 7. : 문서를 연결하는 Tag, 앵커..

콜백 함수 : 함수를 인자로 넘기는 함수. ex) function executableCode(){ } function otherCode(callback){callback();} 위 결과에서 1. otherCode(executableCode); 입력하면?? //undefinded 2. otherCode(executableCode()); 입력하면?? //typeEr ror 2번째는 클로져로 실행하면 됨.

비동기 호출이라고도 한다. 동기 호출과 비동기 호출의 차이점을 먼저 보면, 예) 식당에 간다. 식당에 왔다.메뉴판을 본다.김밥을 주문한다.테이블을 셋팅한다.김밥을 먹었다.계산한다. 위와 같은 흐름으로 진행한다 하면, 동기식은 순서대로 진행한다. 그렇기때문에 김밥을 주문하고 김밥이 나올때까지 암것도 못한다. 하지만 비동기식은 김밥주문하고 테이블 세팅하고 김밥나오면 먹으면 된다. 먼저 요청하고 응답받을때까지 기다리는게 아니라, 다른거 하면서 기다리는 거다. 통상 서버와의 요청시에 비동기식을 사용한다. 비동기식 사용 유형은 크게 3가지 1. 이벤트 핸들러2. 타이머에서 콜백(애니메이션)3. 서버에 자원요청(fetch이용) 대표적인 비동기식 함수는 setTimeout함수가 있다. 특징이 시간에 0을 넣어도 동기..

자바스크립트에서 Arguments 는 모든 function() 안에서 사용할 수 있는 지역변수이다. 자바스크립트 프로그래밍에서 중요하다고 하며, 자바스크립트 라이브러리는 arguments 객체를 사용하기 때문에 자바스크립트 개발자라면 사용법에 익숙해야한다. 특징을 살펴보자. 1. argument는 함수 내에서 변수를 통해 접근할 수 있다. 2. 호출된 arguments 는 함수에 전달된 인수(arguments)를 배열 형태의 object로 표현한 것이다.. 하지만, 실제 배열은 아님. 유사배열?! 그래서, Array의 메소드를 .length 빼고 사용할 수 없음. ※ arguments.length는 실제 함수에 사용자가 넣은 인자(파라미터) 의 갯 수임. ex) function one(arg1){......

Immediately Invoked Function Expression 번역하면 즉시 실행함수 이다. 사용목적은 스코프 문제 때문에 사용한다. 이름이 없는 함수이기 때문에 argument나 value값을 넘겨줄때도 쓴다. 가독성도 많이 떨어지기는 단점이 있다. IIFE에 변수를 할당하면 IIFE 자체에 저장이 되지 않고 함수가 실행된 결과만 저장된다. (function () { var aName = "Barry"; })();이런식으로 function 의 시작과 끝을 아기를 포대기에 감싸듯 ( ) 를 사용하여 감싸준다. IIFE 안에서 포문을 돌릴 경우 var i 이런식으로 주는경우도 있는데, let i로 사용하면 IIFE를 굳이 사용하지 않아도 된다. 또는 .bind를 사용해도 IIFE를 굳이 사용하지 ..