개발

해당 포스팅은 자바스크립트 클로저에 대해서 다룹니다. JS를 주언어로 다루는 개발자라면 ‘클로저’라는 단어를 몇 번이고 들어봅니다. 설명을 찾아보면 그 당시에는 이해가 되지만, 만약 다른 사람에게 설명한다고 하면 입이 떨어지지 않는 그 애매한 개념에 대해서 오늘 정리해보려고 합니다. 스코프 클로저를 이해하려면 일단 스코프부터 알아야합니다. 스코프는 식별자가 유효한 범위, 실행 컨텍스트의 렉시컬 환경을 뜻합니다. 이렇게 말하니 뭔지 모르겠죠? 지금 당장 “여름 좋아세요?” 라는 물음을 듣는다면 어떤 대답을 할 것 같나요? “아니요, 저는 겨울이 좋아요.” “네, 저는 여름이 좋아요.” 같은 답을 하겠죠. 여기서 ‘여름’은 당연하게도 해가 쨍쨍해서 밖에 나가면 땀이 주륵주륵 흐르는 계절을 뜻합니다. 근데 ‘..

해당 포스팅은 React Webpack 환경에서 최적화하는 방법에 대해 다룹니다. Tree Shaking, 난독화, production 빌드에 대한 이야기가 나옵니다. 💡 요약 필요한 파일만 import하기 "sideEffect" 옵션 사용하기 "production" 모드로 build하기 CSS 최적화하기 devtool:false 트리 쉐이킹이란? 웹 최적화를 위해 사용하지 않는 코드(Dead code)를 제거하는 방법입니다. webpack과 같은 모듈 번들러에서 해당 기능을 제공합니다. 이 과정을 통해 파일을 최소 크기로 번들링하여 웹 어플리케이션 최적화할 수 있습다. 영어의 뜻을 그대로 해석하자면 나무 흔들기. 죽은 나뭇잎을 떨어뜨리기 위해 나무를 흔드는 것처럼 자바스크립트에서 죽은 코드를 제거하는 ..

해당 포스팅은 브라우저 렌더링 원리에 대해 다룹니다. 면접시 바로 말할 수 있는 답과 그외 자세한 내용이 적혀 있습니다. 브라우저 렌더링 과정은? 1. HTML 파싱 -> DOM 트리구축, CSS 파싱 -> CSSOM 트리 구축 2. DOM과 CSSOM을 조합하여 렌더 트리(Render Tree) 구축 3. 렌더 트리 배치 (Layout) 4. 렌더 트리 그리기 (Paint) 첫 번째 DOM 트리 구축을 위한 HTML 파싱, 두 번째는 렌더 트리 구축, 세 번째는 렌더 트리 배치, 네 번째는 렌더트리 그리기입니다. 일단 HTML 구문을 분석하여 브라우저가 이해하도록 바꿔주는 작업이 필요합니다. 이를 위해 HTML 파서가 사용되는데 이는 HTML 마크업을 DOM 트리로 변환합니다. 이때 중간에 태그를 만나..

해당 포스팅은 HTTP 캐쉬가 도입된 목적과 헤더를 통해 캐쉬 동작을 제어하는 방법에 대해 다룹니다. 캐시가 도입된 이유 인터넷의 팽창 이후 http 전송 속도를 높이기 위해 도입했습니다. 사이트를 방문할 때마다 매번 같은 파일을 받는 건 비효율적입니다. 자주 사용하는 파일은 사용자 측 브라우저에 저장하고 재사용한다면 효율이 더 좋겠죠. 그래서 나온 기술이 바로 캐시입니다. 캐시의 장점은 네트워크를 사용하지 않으면 일단 지연이 발생하지 않고 비용도 감소한다는 점입니다. 반면에 단점도 존재합니다. 캐시를 사용하고 있다면, 우리 웹사이트가 개편이 됐더라도 사용자는 이전의 사이트를 보고 있을 수 있습니다. 최신 상태를 계속 유지하는 웹의 장점을 그대로 사용하기 위해서는 섬세한 조정이 필요합니다. 웹 사이트 일..

해당 포스팅은 자바스크립트에서 undefined와 null의 공통점과 차이점. 해당 값을 체크하는 방법에 대해 다룹니다. Null null은 JavaScript의 원시 값중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. -MDN- console.log(!null); // true console.log(!!null); // false console.log(null === false); // false console.log(!null === true); //true // null => math =>0 console.log(null + 123) //123 console.log(typeof null); // object' null 자체는 불리언 값을 가지지 않지만 !n..

해당 포스팅은 자바스크립트에서 많이 쓰는 linter인 Eslint에 대해 다룹니다. Eslint가 무엇인가요? Eslint는 Linter의 한 종류 중 하나다. lint는 소스코드에 문제가 있는지 탐색하는 작업을 의미하고 linter는 이 작업을 도와주는 도구를 의미한다. 개발자가 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있도록 도와주는 것이다. 자바스크립트를 사용하는 가이드라인을 제시하고 문법적 오류가 나면 알려주는 역할을 한다. 올바른 코딩 습관을 가지기 위해 필수적으로 사용할 것을 권장한다. 1. Eslint VSCode extention 설치 이미 Creat React App으로 리액트를 설치했다면 기본 eslint가 설정되어 있다. 하지만 이 상태로는 Vs Code에서 바로 에러 확인이 불..

해당 포스팅에서는 innerHTML, innerText, textContent에 대한 특성을 알아보고 innerText와 textContent의 차이점에 대해 다룹니다. 프로퍼티 textContent innerText innerHTML 값 raw text rendered text HTML parsed text 성능 좋음 보통 나쁨 보안 취약 Element.innerHTML const content = element.innerHTML; element.innerHTML = htmlString; 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. XSS 공격 (en-U..

해당 포스팅은 react에서 datalist 태그를 사용해서 이메일 자동 완성 기능을 구현하는 방법에 대해 다룹니다. SPOTV NOW 회원가입 페이지에 본 이메일 자동완성 기능이 인상 깊어서 진행중인 프로젝트에 적용해봤다. 구현 방법 자주 사용하는 이메일 리스트를 미리 정의한다. input value와 Email List 두 개를 useState로 등록한다. input에 onChange 이벤트를 등록한다. input value가 자주 쓰는 이메일 값과 합쳐져서 Email List 를 만든다. Email List를 순회하여태그의 value로 넣어준다. 선택한값을 input 값에 넣어준다. 란 무엇일까 email: 이메일 자동 왼성 로직을 구현하기 위해서는 라는 조금 생소한 태그를 사용한다. 을 담는 태그..

해당 포스팅은 React에서 axios interceptors를 typescript로 설정하는 방법에 대해 다룹니다. interceptors란? then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. https://axios-http.com/kr/docs/interceptors 사용자가 수신하는 모든 요청 또는 응답에 자동으로 추가되는 기본 설정입니다. 수신되는 응답의 상태코드를 확인하거나 인증 토큰을 넣을 때 유용합니다. 인터셉터에는 두가지 유형이 있습니다. request interceptor : 요청이 전송되기 전에 코드 일부를 작성하거나 실행할 수 있습니다. response interceptor: 응답이 발신 측에 도달하기 전에 코드 일부를 쓰거나 실행할 수 있습니다. 1. ax..

해당 포스팅에서는 i18n의 의미와 바닐라 자바스크립트를 사용하여 국제화 하는 방법에 대해서 다룹니다. i18n이란? internationalization(국제화)의 축약형으로 웹사이트에서 다국어를 지원하는 것을 의미합니다. I18n은 영어 첫글자 "I" + 18글자 + "N"을 의미합니다. 비슷한 축약형으로 L10N(localization)이 있습니다. 라이브러리 명칭을 뜻하는 것이 아니라 국제화 행위 그 자체이다. 이에 관련된 유명한 라이브러리로 i18next가 이다. 기본적인 i18n 방법 // 번역 데이터 const en_US= { "이름" : "name" } const getEngText = function(string) { return en_us[string] } console.log(getE..