javascript 썸네일형 리스트형 전역 변수의 문제점 자바스크립트는 전역 변수를 반드시 사용해야할 이유가 없다면 지역 변수를 사용해야한다. 전역 변수의 무분별한 사용은 매우 위험하다. 지역 변수의 생명 주기(life cycle) 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 가비지 컬렉션에 의해 언젠가 소멸된다. 즉 변수는 생명주기(life cycle)를 지니고 있다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성 되고 함수가 종료하면 소멸한다. 변수 생명 주기 메모리 공간이 확보(allocate) 메모리 공간이 해제(release) 가용 메모리 풀 반환(memory pool) //지역 변수 function foo() { var x = 'local'; // x는 지역.. 더보기 객체와 변경불가성(Immutability) mutate 에서 im을 붙인다면? Mutate - 변화, Mutable - 변화 가능한(형용사), mutability - 변화 가능함(명사) 다시 말해서 mutability는 정보의 원본이 변경될 수 있다는 것입니다. 부정의 의미인 im을 붙이면 immutability, 즉 변화 가능하지 않음 이라는 뜻이 됩니다. 정보의 원본을 훼손되는 것을 막는 것이 immutability 입니다. Immutability 배경 자바스크립트에서 객체는 참조(reference) 형태로 전달하고 전달 받으며, 객체가 참조를 통해 공유되고 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커집니다. 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에 그 영향을 받기 때문.. 더보기 [CSS] position: stityck position: stityck static 속성과 fixed 속성의 특징을 동시에 갖고 있는 psotion: sticky sticky 를 사용하면 유저의 스크롤을 따라다니는 요소를 만들 수 있다. 비교 (static, fixed, sticky) https://codepen.io/creatijin/pen/VwbqwJR 예제2 https://codepen.io/creatijin/pen/yLbGLqg 사용전 고려해야할 사항 도달 위치 설정이 되어 있는지 확인 top bottum left right 속성 중 하나는 반드시 필요 크로스 브라우징 및 브라우저 확인 사파리에서도 동작려면 -webkit-sticky 속성 추가 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인 overflow: (hi.. 더보기 Javascript Data Type Javascript Data Type 데이터 타입은 값의 종류를 말하며, 자바스크립트의 모든 값은 데이터 타입을 가지고 있습니다. 자바스크립트는 ES6 이후 7개의 데이터 타입을 제공하고 원시(primitive)타입 과 객체(object / reference) 타입으로 구분됩니다. 원시(Primitive)타입 블리언(boolean) 타입 - 논리점 참(true) 과 거짓(false) null 타입 - 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 undefined 타입 - var 키워드로 선언된 변수에 암묵적으로 할당되는 값 숫자(number) 타입 - 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 - 문자열 심볼(Symbol) 타입 (New in ECMAScri.. 더보기 Web Storage - LocalStorage 와 sessionStorage 로컬 스토리지와 세션 스토리지는 생명주기에 대해서 차이가 난다. 로컬 스토리지의 경우 사용자가 데이터를 지우지 않는 이상 계속 브라우저에 남아 있다. 하지만 세션 스토리지는 브라우저를 종료하거나 탭을 닫을 경우 제거가 된다. 그리고 보안에 취약점이 있기 때문에 중요한 정보(비밀번호 등)은 절대 저장하지말고 로컬 스토리지를 사용할 경우 암호화를 하는것이 좋다. web storage 는 쿠키와 비슷하지만 차이점이 있다. cookie에서는 용량제한, 시간제한, 갯수제한이 있다. 물론 web Storage도 용량에 대한 제한은 있지만 쿠키의 용량 제한이 3~5KB 인것에 비해 web storage 는 5MB(브라우저 마다 다름) 정도를 사용할 수 있다. 사용법 //setItem(key, value) - key-.. 더보기 Throttle 과 Debounce Throttle 과 Debounce Throttle과 Debounce는 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키기 위해 사용 된다. Throttle은 이벤트를 일정한 주기마다 발생하도록 하며 Debounce는 마지막으로 함수가 호출된 시점에서 특정 시간이 지난 후 한번의 이벤트만 발생하도록 하는 것 위 내용은 구글에 찾아보면 그림으로 친절하게 설명해둔 글이 많으니 참고 const throttleAndDebounce = () => { // (1) let throttleCheck, debounceCheck; return { // (2) throttle(callback, millisecond) { return () => { if (!throttl.. 더보기 리펙토링 [code smell] 리펙토링 마틴파울러 - 소프트웨어에 겉보기 동작은 그대로 유지한채 코드를 이해하고 수정하기 쉽도록 내부구조를 변경하는 기법 3의 법칙 처음에는 그냥 실행해본다 비슷한일을 두번째로 한다면 (중복) 그래도 일단 진행한다. 비슷한일을 세번째 할때 그때가 바로 리펙토링을 할때다. 어떤걸 리펙토링 해야하는가?[code smell] 너무 큰 함수나 클래스 이름이 명확하지 않는 함수나 변수명 지나치게 짧은것보단 명확하게 조금 긴게 더 좋다 중복코드(같은 일을 하는 코드가 여저기저 있으면) 전역변수 과도한 콜백과 중첩된 조건문 과도하게 긴 식별자(너무 긴것도 문제다.) 리펙토링의 방법 함수를 추출하거나 혹은 옮기는 방법 const logPost = (post) => { console.log(post); }; const.. 더보기 SSR vs CSR 그리고 SPA SSR vs CSR 그리고 SPA 서버 사이드 렌더링과 클라이언트 사이드 렌더링에 대해서 알아보자 SSR(서버 사이드 렌더링)은 페이지에 변화가 있을때 마다 새롭게 전체 페이지를 다시 로드해야한다. ajax가 나온 이후에 바뀐 부분만 특정해서 변화가 가능했지만 그것 또한 손이 많이 갔고, 서버에서 HTML,CSS,JS 파일을 렌더링 한다는 것은 서버에 부담을 준다는 소리이다. 반면 CSR(클라이언트 사이드 렌더링)의 경우 클라이언트에서 렌더링을 하기 때문에 서버에 부담을 덜어줄 수 있다. 그리고 서버에서 렌더링된 HTML파일을 받아오는게 아니기 때문에 CSR의 경우 바뀐 부분만 서버로 부터 받아서 렌더링 하면 되기 때문에 더 효율적이다. SSR은 CSR과 비교했을때 SEO(검색 엔진 최적화)가 가능하고 .. 더보기 이전 1 2 3 4 ··· 6 다음
