본문 바로가기

전체 글212

116. JS call, apply의 차이점? TIL 23.01.19 call, apply의 차이점 .call과 .apply는 모두 함수를 호출할 때 사용됨, 첫 번째 매개변수는 함수 내에서 this의 값으로 사용됨 .call은 쉼표로 구분된 인수를 두 번째 인수로 취하고, .apply는 인수의 배열을 두 번째 인수로 취하는 차이가 있음. call은 , 로 구분하고 apply는 [ ] 구분 ex) function add(a,b){ return a + b } console.log(add.call(null, 1, 2); //3 console.log(add.apply(null, [1,2]); //3 2023. 1. 19.
115. JS 화살표 함수 사용 이유? TIL 23.01.18 화살표 함수 사용이유 1. 코드의 간결성 2. 콜백함수 this에 값을 참조시킬 때 (this 값에 Lexical scope를 참조시킬 때) 3. map 사용할 때 this를 넘겨주어 코드를 더 쉽게 작성 가능 화살표 함수 VS 일반 함수 1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor 2. 중복된 매개변수 이름을 선언할 수 없음 3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음 화살표 함수와 일반 함수와 구별되는 가장 큰 특징은 this 화살표 함수의 this는 일반함수의 this와 다르게 동작함 일반 함수에서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킴 화살표 함수는 자체의 this 바인딩을 갖지 .. 2023. 1. 18.
114. 브라우저 렌더링 TIL 23.01.17 브라우저 렌더링 1~4. HTML 파일과 CSS 파일을 파싱해서 DOM Tree, CSSOM Tree를 만든다(Parsing) 5. 두 Tree를 결합하여 Rendering Tree를 만든다. 6. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout) 7. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.(Paint) 8. 레이어를 합성하여 실제 화면에 나타낸다.(Composite) Dom(Document Object Model) Tree CSSOM(CSS Object Model) Tree Render Tree (출처)https://web.dev/critical-rendering-path-render-tree-construction/ Render-.. 2023. 1. 17.
113. HTTP 통신흐름 TIL 23.01.16 HTTP 통신흐름 브라우저에 www.naver.com을 치면 일어나는 과정 1. 웹브라우저에 www.naver.com 입력. 2. 사용자가 입력한 URL 주소 중 도메인 네임 부분을 DNS 서버에 검색하고, DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아온다. 3. HTTP 프로토콜을 사용하여 페이지 URL정보와 찾아온 IP주소를 포함하는 HTTP요청 메시지를 생성하고, 생성된 HTTP요청 메시지는 TCP 프로토콜을 사용하여 인터넷 망을 통해 해당 IP주소의 컴퓨터로 전송된다. 4. HTTP 요청 메시지를 받은 컴퓨터(서버)는 웹 페이지 URL 정보 중 PATH와 HTTP Method에 맞는 액션을 취한다. (여기서는 naver페이지를 띄우기 위해 필요한 html 등의 리소스를 찾을 것이다) .. 2023. 1. 16.
112. Til 23.01.13 트러블 슈팅 오늘은 Firebase를 통해서 백엔드를 구현하고 s3를 통해 배포까지 해봤다. spa로 프론트를 만드는 와중에 commentlist를 불러오지 못하는 오류가 있었다. 아래에 문제가되는 코드를 확인해 보자. 오류: spa로 프론트를 만드는 와중에 commentlist를 불러오지 못하는 오류가 있었다. //router.js export const handleLocation = async () =>{ let path = window.location.hash.replace("#",""); const pathName = window.location.pathname; if (path === "fanLog"){ document.getElementById("nickname").textContent = a.. 2023. 1. 13.
111. null 병합연산자 란? TIL 23.01.11 null 병합연산자(nullish coalescing operator) 짧은 문법으로 여러 피연산자 중 값이 확정되어 있는 변수를 쉽게 찾을 수 있도록 도와주는 연산자 ex1) 변수 a와 b가 있을 때 a가 null이나 undefined가 아니면 a를 그 외의 경우는 b를 대입하는 경우 //null 병합 연산자를 사용한 경우 let result = a ?? b //null 병합 연산자를 사용하지 않은 경우 let result = (a !== null && a !== undefined) ? a:b ex2) let firstName = null; let lastName = null; let nickName = "가렌"; //null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName .. 2023. 1. 12.
110. React Hook 이란? TIL 23.01.11 React Hook란? Hook은 React 16.8 버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다. Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다. 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야 하는 이유! 리액트를 배우는 데에 있어서 클래스는 큰 진입장벽이다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS문법 사앙을 알아야 다룰 수 있기 때문 - 클래스의 문법이 어렵다 - 축소가 어렵다. - reloading의 신뢰성이 떨어진다. - 최신 기술의 적용이 효과적이지 않다. 👉 이러한 클래스의 단점을 함수형 컴포넌트로 커버할 수 .. 2023. 1. 11.
109. onKeyPress 사용하지 않음 TIL 23.01.09 onKeyPress 사용하지 않음 유튜브 클론코딩 하던 중 onKeyPress를 사용했는데 아래 사진처럼 onKeyPress가 적용되지 않았다. 왜 적용되지 않는지 공식문서를 통해서 확인해 봤다. MDN의 공식문서를 보면 이제 onKeyPress는 더 이상 사용되지 않으니 onKeyDown을 사용을 권장했다. https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event Element: keypress event - Web APIs | MDN The keypress event is fired when a key that produces a character value is pressed down. developer.mozilla.org 그.. 2023. 1. 9.
728x90