프로그래밍 공부 노트

IIFE( Immediately Invoked Function Expression ) : 즉시 실행 함수 표현 정의되자마자 즉시 실행되는 Javascript Function을 말한다. ( function () { let fruit = "apple" ; })(); // IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다. console . log ( fruit ); // Uncaught ReferenceError: fruit is not defined 일반적으로는 함수를 정의하면 나중에 호출해주어야하는데 IIFE(즉시 실행 함수 표현)을 사용하면 나중에 호출하지 않아도 함수를 바로 호출할 수 있다.

break break문 은 무한루프에서 주로 사용한다. 반복문에서 특정 if조건을 만족하면 break가 있는 지점에서 해당 반복문을 종료 하고 반복문 블록에서 벗어나게 된다.  반복문이 여러개 중첩된 경우 break를 사용하면 현재 위치한 루프 하나만 벗어나게되는데  중첩된 이중 이상의 반복문 전체를 벗어나고자하는 경우 최상위 반복문에 이름을 부여하여 즉, 레이블을 작성하여 중첩된 반복문 전체를 벗어날 수 있게 해준다. ex) Loop1 : for( ... ) {                          for( ... ) {                              ~~~~~~~~                              break Loop1;                          }                     } 위와 같이 사용하는 경우 break Loop1; 문장을 통해 중첩된 모든 반복문을 벗어날 수 있다. 여기서 Loop1을 반복문 레이블이라고 부른다. continue continue문은 반복문에서 특정 if조건의 해당 부분을 중간에 건너뛰고 반복문을 실행한다.  값이 초기화되는것은 아니며 진행중이던 해당 반복문만 건너뛰고 반복문을 계속해서 실행한다.  정밀한 제어 구조를 만들때 사용한다. continue로 해당 반복구간을 건너뛰면 반복문에 작성해놓은 증감연산자로 이동하여 작성해놓은 변수의 값을 증가하거나 감소하고나서 반복문을 이어서 다시 수행한다. break문 에서 알아봤던 반복문 레이블은 continue문 에서도 사용가능하다. 주의사항 break와 continue 문의 경우 ?(물음표) 연산자와 함께 사용이 불가능하며 반복문 내에서만 사용할 수 있다. 레이블을 사용하여 마음대로 원하는곳으로 이동할 수 없다. 레이블은 반드시 break나 continue 위에 있어야한다.

요약하면 for in : 객체에 사용 (객체의 모든 열거 가능한 속성에 대해 반복) for of : 배열에 사용 ([Symbol.iterator] 속성을 가지는 컬렉션 전용) for in은 보통 객체를 순회하면서 값을 출력할때사용한다. 배열도 객체이기 때문에 위의 코드에서도 순회를하며 값을 출력한다. 하지만 이러한 for in을 사용할 경우 위의 코드와 같이 자신이 가지고있는 않은 값들인 상위에서 추가되어있는 값들까지 출력하기때문에 문제를 발생시킬 수 있다. 즉 출력하고자 하지 않았던 다른 연관되어 있는 값들이 출력될 수 있다.  for in을 대신하여 for of를 사용하게되면 상위에 값들이 추가되어있다 하더라도 자신을 제외한 나머지 객체들에 대해서는 값을 출력하지 않는다. 추가적으로 for in 과 달리 for of는 문자열을 순회하며 값을 출력할 수 있다. 위와같은 문제점들을 고려해서 배열에서는 for in을 사용하기보다는 for of를 사용하도록 한다.

Module CommonJS, ES6 모듈 시스템 모듈이란 애플리케이션을 구성하는 개별적인 요소로서 재사용 가능한 코드 조각(부품)을 말한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.  즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다.  모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 브라우저 환경에서의 모듈 시스템 브라우저 환경에서 자바스크립트는 script 태그를 사용하여 외부의 스크립트 파일을 가져와 사용할 수 있지만, 파일마다 독립적인 파일 스코프를 갖지 않고 하나의 전역 객체(Global Object)를 공유하게 된다. 그러므로 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드하여도 분리된 자바스크립트 파일들이 결국 하나의 자바스크립트 파일 내에 있는 것처럼 하나의 전역 객체를 공유한다.  따라서 분리된 자바스크립트 파일들이 하나의 전역을 갖게 되어 전역 변수가 중복되는 등의 문제가 발생할 수 있다.  이러한 문제점을 해결하기 위해서 script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작하게 할 수 있긴하다. 브라우저 환경에서의 모듈 시스템을 간단히 알아보았고 본격적으로 CommonJS와 ES6 모듈 시스템에 대해서 알아보자! CommonJS ( require / exports / module.exports ) 최근 많은 프로젝트에서는 ES6 모듈 시스템을 많이 사용하지만 기존의 프로젝트들 중 CommonJS 모듈 시스템으로 작성된 코드들도 있으며 특히 Node.js에서는 CommonJS 모듈 시스템을 기본적으로 채택하고 있어 알아둘 필요가 있다. CommonJS 모듈 시스템에서는 모듈을 불

CSS filter, blend, transform (포토샵?) filter, blend filter와 blend는 포토샵은 아니지만 포토샵 프로그램의 기능들을 CSS로도 가능하게 해주는 속성들이다. filter의경우 사진, 동영상, 프로그램등에 필터를 활용하여 색감에 변화를 적용해줄 수 있다. blend의 경우도 배경과 배경을 합성시켜서 새로운 이미지를 생성하기도하며 이미지와 텍스트를 합성시키는등 여러가지 포토샵기능들을 대신해서 사용할 수 있다. filter와 blend 기능을 어떻게 사용하는지 아래 링크를 통해 확인할 수 있다. 아래 링크에 filter, blend 검색 https://codepen.io/ transform CSS3에서부터 포토샵기능들을 지원하기 시작했다. transform은 포토샵에서 사진을 기울이거나 회전시키는등의 효과들을 사용가능하게해주는 속성이다. 설명을하기보다는 아래의 첨부된 링크를 통해 예제를 확인하자 사용예시: https://codepen.io/vineethtr/pen/XKKEgM 사용설명서: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

CSS float float은 정렬방법중 하나이다.  float은 float만의 특성이 있기 때문에 조심해서 사용해야 한다. float을 사용하면 더 이상 width가 100%가 아니다. 왜냐하면 float은 이름대로 행동한다. 떠있다. 하지만 겹치는것은 아니다.?! 자세히 말하자면 컨텐츠는 겹치지 않으나 블록 범위는 겹쳐진다라고 하는게 맞는것같다. div태그가 차례로 있을때 맨처음 div태그에 float 속성을 작성하면 inline속성과 같이 컨텐츠의 크기만큼만 부피를 차지하게된다.(추가적으로 높이와 너비도 지정해 줄 수 있다.) 형제 태그에 있던 텍스트나 컨텐츠들이 float속성이 적용된 컨텐츠를 둘러싸게된다.   이러한 속성으로 float은 글과 함께 이미지를 삽입할 때 많이 사용한다. img태그의 경우 기본적으로 block level속성을 가지고있는데 block level 속성으로 인해서 옆에 공백이 생기고 글들이 밑으로 내려가는 문제가 발생한다. 이때 float을 사용하여 이미지의 위치를 지정하면서 inline level과 같은 속성효과가 발생되어 삽입된 image옆에 글들을 위치 시킬 수 있다. 만약에 float속성을 사용했지만 형제태그(sibling)가 컨텐츠를 둘러싸는것을 원치 않다면 둘러싸이는 컨텐츠의 위치에따라 clear: left; 또는 clear:right; 또는 clear:both; 해주면 된다. 그러면  float속성을 가진 컨텐츠의 밑으로 이동한다. 그리고 한가지 float의 문제점은 부모태그가 float속성의 자식태그를 인식하지 못한다는것이다. 따라서 높이가 0이 되어버리는 문제가 발생한다.  즉 float의 크기가 어떻하든 아무것도 없다고 인식하여 css효과가 적용이 안된다. 이러한 문제로인해 배경색이 적용이 안되는 문제가 발생하기도 한다. float속성의 자식을 인식하게 하려면 자식태그를 감싸고있는 부모태그에 overflow: auto나 overflow:hidden을 주어여 부모 태그가 정상적으로 자식 태

position 속성은 요소들을 자유자재로 배치할 수 있도록 하는 중요한 속성 중 하나이다. position 속성에는 static, realative, absolute, fixed, sticky 가 있다. static 모든 태그는 기본적으로 static한 상태이며 static 속성을 따로 작성하지 않아도 된다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left 같은 속성 값을 사용할 수 없다. relative 요소의 기본 위치(static)를 기준으로 요소의 위치를 설정하는 방식이다. relative도 static 처럼 요소를 나열한 순서대로 배치한다. static과 달리 top, right, bottom ,left 속성 값을 사용하여 위치를 지정할 수 있다. absolute absolute는 문서의 흐름(요소의 나열 순서)과 상관없이 top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치할 수 있다.  이때 요소가 움직이는 기준점은 static을 제외한 위치 지정 속성(relative, absolute, fixed, sticky)을 가지고있는 가장 가까운 부모 요소 또는 조상 요소가 기준점이 된다. 그렇기 때문에 요소의 위치를 absolute로 지정하고자하면 위치를 지정하고자하는 요소 블럭의 부모 요소 또는 조상 요소에 position: relative와 같은 위치 지정 속성을 작성해주고 위치 시키고자 하는 요소에 absolute 속성을 적용하고 top, right, bottom, left 속성으로 위치를 지정할 수 있다. 단, 부모 요소 또는 조상 요소 중 위치 지정 요소가 없다면 해당 요소를 감싸고있는 컨테이닝 블록을 기준으로 위치를 지정할 수 있다.  마지막으로 알고 있어야 할 점은 absolute 속성을 사용하면 block 요소인 div 태그도 컨텐츠 크기 만큼의 너비 만을 가지게 된다. fixed fixed 속성 값도 absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하

플렉스 박스  레이아웃이란 그리드 레이아웃을 기본으로 하여 박스들을 원하는 위치에 위치하도록 하는 것이다. 1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트, 이미지, 표 등 요소들을 플렉스하게 사용하려면 플렉스 하고자하는 요소들을 먼저 플렉스 컨테이너(최상위 태그)로 전부 묶어줘야 한다. 2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 요소들이다. 3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. 주축은 기본적으로 왼쪽에서 오른쪽 방향(row)으로 배치한다.  4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향이다. flex-direction이 row이면 위에서 아래 방향으로 교차축이 배치되고 flex-direction이 column이면 좌에서 우로 교차축이 배치된다. 플렉스 사용법 및 속성 display : 플렉스 박스 레이아웃을 지정하려면 콘텐츠들을 하나의 부모요소로 묶고 display 속성을 이용해 플렉스 박스 형태를 지정해야 한다. (ex. display : flex;) display 속성과 브라우저 접두사 : 대부분의 최신 모던 브라우저에서는 모두 지원되지만 플렉스 박스를 지원하는 방법이 다르므로 브라우저 접두사를 붙여야 한다. ex) .container { display : -webkit-box; /* ios 6이하, 사파리 3.1 */ display : -moz-box; /* 파이어폭스 19 이하 */ display : -ms-flexbox; /* IE 10 */ display : -webkit-flex; /* 웹킷 구 버전*/ display : flex ; /* 표준 스펙*/ } flex-direction :  자식 요소 정렬 방향 row : 왼쪽에서 오른쪽 수평방향 정렬 column : 위에서 아래 수직 정렬 flex-wrap : 플렉

CSS Grid와 다단(multi column) Grid 위에서 아래 방향으로 작성되는 html은 웹상에서 기본적으로 위에서 아래로 해당 내용(소스)들이 보여진다. 이러한 소스들을 위아래방향이아닌 좌우 방향으로 배치도 가능한데 이럴때 grid속성을 사용한다. grid  --->  block element inline-grid --->  inline element ***공부하면서 발생했던오류 grid로 레이아웃을 잡기위해서 div나  span태그로  각각의 컨텐츠들을 묶게되면 오류를 발생시킬 수 있다. div 혹은 span태그 각각의 묶음안에있는 컨텐츠에 스타일 속성중에 %와 관련하여 속성이 지정된것이 있을경우 문제를 야기할수있다. 그이유는 해당%관련 속성이 부모태그의 크기에 영향을 받게되는데 레이아웃을위해 크기가 지정되어있지않은 div나 span 태그 기준으로 해당%속성이 적용되므로 이미지와같은 컨텐츠에 적용되어있는 %가 적용되지않고(즉 크기 0에대해 %가 부여되므로) 이미지가 안보이거나 컨턴츠가 사라지는등의 문제를 발생시키므로 %가아닌 px단위로 속성을 부여해야한다. CSS 다단(multi column) 다단(multi column) https://www.youtube.com/watch?v=OnDuPsg631g&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62&index=39 핀터레스트 레이아웃 https://opentutorials.org/module/2398/13712

Github Github란 git을통해 파일들의 버전 관리, 백업, 협업을 도와주는 저장소이다. Fork : 원하는 프로젝트를 자신의 github로 복사해올 수 있다. watch : 트위터 팔로우처럼 watch를 눌러놓으면 watch를 누른 계정에서 발생되는 업데이트를 보다 신속하게 알 수 있다. Issues : 협업을위한 게시판이다. 새로운 Issues를 발행하고 해당 Issues가 완료되면 Close issues를 사용하여 완료할 수 있다. 완료된 작업은 나중에도 확인 가능하다.  또한 추후 다시 문제가 발생했을때 closed Issues에서 reopen issues를해서 다시 진행도 가능하다. Issues를 발행할때 템플릿을 지정해서 해당 템플릿(양식)으로 발행하게 하는방법이 있는데 구글에 github issues template을 검색해서 원하는 템플릿양식을 만들어서 사용할것. Assignees : 협업프로젝트를할때 Issues를 누군가에게 요청하고싶을 수 있는데 이때 Assignees에서 해당하는 사람을 선택해서 해당 Issues를 부여할 수 있다. Lables : Lables를 통해 업무의 타이틀을 구분할 수 있다. 9가지 특성에는 bug, duplicate등이 존재하는데 이를 선택하면 조금더 직관적으로 Issues를 확인할 수 있다. 이러한 Lables는 추가, 수정등이 가능하다. Filter : 말그대로 필터를 통해 나에게 할당된 Issues를 확인가능하며 자신뿐만아니라 다른 인원에게 할당된 Issues도 확인 가능하다. 참조기능 : Issues를 작성시에 @이를 사용하여 사람들 태그할 수 도있고 #을 사용하여 게시글을 참조시킬 수 있다. 또한 commit을 참조시키고싶으면 commit에 들어가 복사버튼을 눌러 작성하면 해당 commit으로 쉽게 이동이 가능하다.