본문 바로가기

FrontEnd/JavaScript14

클로저에 대해 알아보기 with useState 클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV.. 2024. 10. 9.
브라우저 엔진의 작업 처리 우선순위 (feat. 마이크로 테스크 큐, 테스크 큐, 렌더 큐) 브라우저는 렌더링 엔진과 자바스크립트 엔진의 혼합으로 작업이 처리된다.이벤트 루프에 의해 콜 스택이 비워져 있다면 큐에 담겨진 요소들을 선입선출 순서로 콜스택에서 실행시키는데,이 때 큐의 종류에 따라 콜 스택에 담겨지는 우선순위가 달라진다. 첫 번째로 Promise가 반환하는 resolove,reject가 담겨진 마이크로 태스크 큐,두 번째로 렌더링 업데이트 요소들이 담겨진 렌더 큐마지막으로 DOM 이벤트,fetch,setTimeOut,setInterval 등이 담겨진 태스크 큐 순서로 각각의 큐에 담겨진 작업들을 콜 스택에 담은 후 처리되면 그 다음 큐, 그 다음 큐로 실행된다.따라서, 아래와 같이 코드를 작성하더라도 setTimeout의 콜백함수는 0초에 값을 줬더라도 즉시 실행되지않고 1과 3이 출.. 2024. 10. 7.
Security Vulnerability: SSRF(Server-Side Request Forgery in axios) 깃헙 알림으로 axios로 인한 보안 취약점이 발견됐다는 메시지가 왔음SSRF에 대한 이슈였고, 해결책으로 axios의 1.7.4 버전 이상으로 업그레이드 하라고 함 Affected versions :  axios(npm)   >= 1.3.2, axios 1.7.2 allows SSRF via unexpected behavior where requests for path relative URLs get processed as protocol relative URLs.해당 이슈: https://github.com/axios/axios/issues/6545보안 공격으론 CSRF, XSS, SQL injection에 대해서만 알았어서 SSRF 는 처음 접하게 됨.SSRF의 개념을 알아보고 위 이슈가 생긴 이.. 2024. 8. 14.
babel 직접 설정해보기 1. 기본 웹팩의 등장 배경과 마찬가지로 브라우저는 자바스크립트의 발전 속도를 따라오지 못하면서 es5 이후의 문법들을 직접적으로 해석할 수 없다. 때문에 화살표 함수라던가 let cont 변수, jsx, 타입스크립트 등의 문법들을 브라우저가 알고 있는 자바스크립트 문법으로 변환시켜줘야 함. 이러한 도구를 트랜스파일러 라고 하는데 babel은 트랜스파일러 중 하나. Babel의 동작(빌드)은 3단계로 진행된다. Parsing -> Transforming -> Printing npm install -D @babel/core @babel/cli 바벨을 사용하기 위해 babel/core 와 커맨드 라인 인터페이스인 babel/cli를 개발 모드로 설치해줌. // ./src/math.js const sum = .. 2024. 4. 6.
webpack 직접 설정을 위한 기본 개념 1. 기본 브라우저는 자바스크립트의 발전 속도를 따라오지 못함. 때문에 es2015에서 표준 모듈 시스템을 내놓았지만 몇 몇 브라우저는 이를 사용하지 못했고, 브라우저에 무관하게 모듈을 사용하고 싶다는 욕구하에 모듈 번들러인 웹팩이 등장했다. 웹팩은 모든 파일을 모듈로 바라보고 이것들을 하나의 파일(혹은 소수)로 합쳐주는 번들러이다. 하나의 시작점인 entry 포인트로부터 의존적인 모듈을 전부 차장내어 output을 만들어낸다. npm install -D webpack webpack-cli 패지키 매니저를 통해 웹팩과 커맨드라인으로 웹팩을 실행시킬 수 있게 하는 webpack-cli를 설치해준다. node_modules/.bin/webpack // webpack 위와 같은 명령어를 통해 (같은 동작) 웹.. 2024. 4. 5.
내가 JSON Viewer를 짠 방식 이러한 객체로 이루어진 배열 data 가 있을 때, 이것의 JSON형태로 볼 수 있는 Viewer를 웹에 띄울려고 했다. 뷰어는 데이터를 직접적으로 편집 가능 할 수 있게 하는 것이 목표. 뷰어는 데이터의 편집까지 가능하므로 곧 에디터 역할을 함. 두가가지 방식을 생각해봄. 위의 객체를 items 라고 명명했을 때, 1. 아래와 같이 pre 태그 안에 input 박스를 넣어서 key값에 대한 value만 조작 가능하게 만들기 this.$primeEditor.innerHTML = ` [ ${this.state.items .map( (node, idx) => ` { "id": "value": }, ` ) .join('')} ] `; // 이것은 json 편집기라기엔 의미가 없다 생각해서 폐기 2. 두 번째 .. 2023. 11. 4.
[javascript] Custom event Custom event란 js의 내장 이벤트(click, change...)가 아닌 사용자가 생성한 이벤트 Event / CustomEvent 생성자를 사용해 생성 const selectEvent = new CustomEvent('select', { bubbles: true, detail: '메뉴 클릭이당' }); const itemList = document.querySelectorAll('.item'); for (const item of itemList) { item.addEventListener('click', () => item.dispatchEvent(selectEvent)) } document.addEventListener("select", (e) => alert(e.detail)); //각 .. 2023. 10. 30.
[JS] url 다루기 url 관련 용어 정리 URL (Uniform Resource Locator): URL은 웹에서 특정 리소스의 위치를 가리키는 주소입니다. 주로 웹 브라우저를 통해 해당 리소스에 접근할 수 있도록 합니다. URL은 일반적으로 다음과 같은 형식을 가집니다: protocol://domain:port/path?query#fragment Protocol: 프로토콜은 클라이언트와 서버 간의 통신 방식을 지정하는 부분입니다. 대표적인 프로토콜로는 HTTP, HTTPS, FTP, SMTP 등이 있습니다. Domain: 도메인은 웹 사이트나 서버의 주소를 나타내는 부분입니다. 예를 들어, "www.example.com"이 도메인입니다. Port: 포트는 서버 내에서 특정 애플리케이션에 연결하기 위한 숫자입니다. 일반적.. 2023. 8. 19.
[자바스크립트] 이터러블 개념과 FE에서의 사용처 이터러블은 순회 가능한 객체를 의미 이러한 객체는 Sysyem.iterator 라는 특별한 메서드롤 가지고 있으면 이것을 통해 이터레이터를 반환함 이터레이터는 순회할 수 있는 값의 시퀀스를 나타내는 next() 메서드를 가짐 const iterable = [1, 2, 3]; const iterator = iterable[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator... 2023. 6. 24.

티스토리툴바