투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

모듈이란? 모듈(Module)이란 프로그래밍 관점에서 특정 기능을 갖는 파일 하나하나, 특정 기능을 갖고 있는 작은 코드 단위를 의미한다. 우리가 개발을 하다보면 가독성과 유지보수 향상을 위해 파일을 여러 개로 분리를 하는데, 이때 분리된 파일 각각을 모듈이라고 부른다. 모듈이 필요한 이유 브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역을 공유한다. 그렇기 때문에 호출되는 순서가 중요하다. 하지만 이렇게 개발하다 규모가 커치면 오류를 찾기 힘들고 유지보수가 어려워진다. 그래서 파일 단위로 변수를 관리하기 위해서 모듈이 필요하다. 웹 환경은 발전하는 컴퓨터의 성능과 관계없이 요청과 응답으로 이루어져 있기 때문에 파일이 늘어나면 늘어날 수록 요청과 응답에 걸리는 시간도..

어쩌다보니 three.js를 잠깐 공부할 계기가 생겨서 잠깐 공부한걸 정리해보려한다. three.js란? WebGL은 점, 선, 삼각형만을 그리는 단순한 시스템이고 이런 복잡한 3D요소들의 처리를 도와 직관적으로 코드를 짤 수 있도록 해주는게 Three.js이다. scene 씬 그래프의 최상위노드로서 배경색, 안개등의 요소를 포함하고 포함한다. 포함된 객체들 또한 부모/ 자식 트리 구조로 이루어진다. 각 객체의 유래와 방향성을 나타낸다. 자식 객체의 위치와 방향이 부모 기준이다. Three.js 구조 mesh Meterial로 하나의 Geometry를 그리는 객체이다. Meterial,Geometry는 재사용이 가능하여 여러개의 Mesh가 하나의 Meterial 또는 Geometry를 동시에 참조할 수 ..

Lazy loading이란? 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술, 즉 사용자가 보지 않는 것들을 당장 로딩하지 않는다. 그러다가 나중에 사용자가 필요로 하는 시점에 로딩하는 것이다. Lazy loading을 사용하지 않았을때의 문제점 Lazy-loading 없이 구현된 웹 페이지를 사용자가 접근하면 그 안에 있는 내용이 모두 다운로드 된다. 만약 사용자가 웹 페이지의 모든 컨텐츠를 실제 이용한다면 첫 로딩이 조금 느리더라도 문제가 크진 않다. 하지만 만약 최상단의 이미지만 확인하고 나가버리면 낭비가 발생한다. 예시 1. Image Lazy Loading Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때..

DOM이란? 문서 객체 모델(Document Object Model ) html요소를제어할 수 있도록 웹문서를 객체화한걸 말한다. tree구조 각각을 노드라도 칭한다. document객체 웹 문서 영역을 제어하는 객체 돔트리 최상위 노드이다. DOM요소에 접근하기 위한 진입점 방법 // 바로 수정 document.childNodes[1].childNodes[2].textContent = '제목입니다' // 객체로 받아와서 수정 let domObject = document.querySelector('h1') domObject.textContent = '변경합니다.' BOM이란? 브라우저 객체 모델 Browser Object Model 브라우저의 새탭을 열거나 주소표시줄에 다른 주소를 입력해서 다른 웹문서..

로토강의가 시작되면서 진짜 기본기가 너무 없었던 것 같다고 느꼈던게 더 실감이 되었다. 처음부터 강의보다는 미션이 바로 진행이 되는데 문제 자체가 이해가 되지 않았고 내가 너무 당장의 프로젝트!에만 치중되어있었고 이론 공부에 많이 부족하다고 생각이 들었다. 내가 이걸 푼다고 할 수 있을까? 다른사람이 해놓은걸 봐도 이해가 되지 않았고 환불하고싶었다...ㅠㅠ 그러고 라이브코딩을 보고나서 다시한번 문제를 보고나니 그제서야 문제가 이해되기 시작했다.. 약간 현타가 오는 시점이였다 미션 1 필수구현을 하면서 느낀 점 1. map 메서드로 생성된 문자열 배열을 innerHTML에 할당하면 배열의 각 요소 사이에 ' , '쉼표가 자동으로 추가되어 이어서 보고싶다면 .join('')이 필요하다는걸 알게되었다. 2. ..

HTML 변경과 조작할때 주의 안녕하세요 let 제목 = document.querySelector('#title'); 제목.innerHTML = '반가워요' // 에러발생 : 제목은 Element | null 이기때문에 에러가 발생한다. 이런경우 narrowing을 사용해야한다. // 1번 if(제목 !== null){ 제목.innerHTML = '반가워요' } // 2번 if(제목 instanceof Element){ 제목.innerHTML = '반가워요' } // 3번 let 제목 = document.querySelector('#title') as Element; 제목.innerHTML = '반가워요' // 4번 if(제목?.innerHTML != undefined){ 제목.innerHTML = '반..

Narrowing type이 아직 하나로 확정되지 않았을 경우 사용한다. const 내함수 =(x:number|string)=>{ return x+1 } 위 코드는 number가 들어올지 string이 들어올지 알 수 없기 때문에 에러가 발생한다. 이럴경우 narrowing을 사용해야 한다. const 내함수 =(x:number|string)=>{ if(typeof x === 'number'){ return x + 1 }else { return x + '1' } } 이런식으로 if문으로 타입을 확정을 해줘야한다. 주의 ! if문 썼으면 끝까지 써야 안전하다. else, else if 안쓰면 에러로 잡아줄수도 없을 수 있다. assertion문법 const 내함수 =(x:number|string)=>{ l..

자바스크립트는 자유도가 높기때문에 5 - '2' = 3 이라는 숫자열 - 문자열을 했는데 숫자로 자동변환되어 계산이 되버리기 때문에 자유도 & 유연성은 작은 프로젝트에는 더 편리할지 몰라도 큰 프로젝트에는 에러를 일으키기 너무 쉽다. 그렇기 때문에 큰 프로젝트일수록 타입스크립트를 사용하는게 좋다. 또한 타입을 엄격하게 잡아주기 때문에 에러메세지가 자세하게 얘기해준다. 이건 엄격한 타입체크를 해주기 때문에 그렇다고 할 수 있다. // 간단 타입지정 let 이름 :string = 'kim' // array 타입지정 let 이름 :string[] = ['kim','park'] // object타입지정 let 이름 :{name?:string} = {name:'kim'} ?는 속성이 들어올 수 도 있고 안들어올 ..