본문 바로가기

분류 전체보기352

Js 함수 vs 메서드 글 작성 동기 javascript를 공부하다보면 함수와 메서드를 구분해서 쓰는 경우를 종종 발견 했습니다. 만날때 마다 비슷하겠거니 하고 넘어갔는데, 이번 기회에 개념 정리를 확실히 하려고 글을 작성 하였습니다. 함수: function 메서드: method 함수(function) function functionName(parameters){ //내용 } 일반적으로 함수란, 특정기능을 수행하며 function 키워드를 사용합니다. 메서드(method) const object = { num: 0, methodName: function () { //내용 } } 메서드란 객체의 프로퍼티중 하나로, 쉽게 말해서 객체 안에 있는 함수를 의미 합니다. 메서드는 또한 객체안의 프로퍼티를 참조하여 조작할 수 있는 동작을.. 2022. 2. 14.
Javascript Run Environment 자바스크립트는 싱글 스레드이지만, 브라우 저상에서 동시에 많은 일을 하는듯해 보입니다. 이번에는 이러한 작동과정 원리에 대해 알아보았습니다. 이 작동은 4가지를 중심으로 이루어졌습니다. 1. javascript 엔진 2. web api 3. callback queue(task queue) 4. event loop HEAP과 STACK은 자바스크립트 엔진을 의미합니다. HEAP에는 객체, 변수 같은 것들이 들어가고 STACK에는 콜백함수가 들어갑니다. 예시 예시를 통해 JAVASCRIPT RUN ENVIRONMENT를 설명해보겠습니다. default : (EVENT LOOP가 엔진, Render, Queue를 계속 순회함) 1. 이벤트 발생(WEB API) => 2. TASK QUEUE에 코드 블록 생성 .. 2022. 2. 11.
Critical Rendering Path(CRP) CRP이란 CRP은 브라우저가 HTML, CSS, JS를 변환하여 스크린으로 보여주는 과정을 의미합니다. CRP을 최적화한다면 웹페이지의 성능을 크게 향상할 수 있다고 합니다. CRP은 그림에서 보다시피 Request/Response => loading => scripting => rendering => layout => painting으로 구분됩니다. Requset/Response : 브라우저가 서버에게 요청/응답을 보냄 loading : 브라우저가 서버에서 파일 받아옴(html, css, js) scripting : html파일을 DOM요소로, css 파일을 cssom요소로 (DOM : document object model) (DOM + CSS = CSSOM) rendering : DOM 과 CSS.. 2022. 2. 8.
[백준] 자바 1914 하노이 탑 문제 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 옮기려 한다. 한 번에 한 개의 원판만을 다른 탑으로 옮길 수 있다. 쌓아 놓은 원판은 항상 위의 것이 아래의 것보다 작아야 한다. 이 작업을 수행하는데 필요한 이동 순서를 출력하는 프로그램을 작성하라. 단, 이동 횟수는 최소가 되어야 한다. 아래 그림은 원판이 5개인 경우의 예시이다. 입력 첫째 줄에 첫 번째 장대에 쌓인 원판의 개수 N (1 ≤ N ≤ 100)이 주어진다. 출력 첫째 줄에 옮긴 횟수 K를 출력한다. N이 20 이하인 입력에 대해서는 두 번째 줄부터 수행 과정을 출력한다. 두 번째 줄부터 K.. 2022. 2. 7.
async Vs defer 비교 html에서 외부의 js파일을 불러올때 로 불러옵니다. 근데 이 코드의 위치에 따른 의미가 있다고 하여 공부해보았습니다. 1. 안에 있을 때 그냥 단순히 안에 작성한경우, 브라우저가 html 가져오다가 + js가져오기 + js 실행 + 나머지 html 가져오기 => 중간에 html 가져오는거 끊김 ! => 유저가 불편 2. 맨 밑에 있을 때 1에서 중간에 html이 끊기는 이슈가 있었기 때문에, 마지막에 넣음으로써, html이 안끊기게함 브라우저가 html 가져오기 + js가져오기 + js실행 => html 다 가져올 때까지 js기능을 못씀 => 유저의 불편 유발 가능성 UP! 3. 안에 쓰지만 async 추가 를 추가하면 말 그대로 비동기적으로 진행합니다. 브라우져 가져오기와 js가져오기를 동시에 합니.. 2022. 2. 2.
getBoundingClientRect() Vs css 좌표 getBoundingClientRect()는 엘리먼트의 좌표값을 알 수 있는 api입니다. 그런데, 이 좌표값이 css와 혼동이 있어서 정리 해 보았습니다. getBoundingClientRect() css ex) (getBoundingClientRect()) right:1240px; bottom:569 (css) position: fixed right:40px; bottom:40px; 두 좌표가 같은 element를 의미하고 있습니다. (화면크기에 따라 위에 해당 하는 값 다를 수 있음) 결론 getBoundingClientRect()를 이용할 때는 right, bottom의 기준이 왼쪽 상단이지만, css에서 right, bottom을 측정할 때는 element를 기준으로 값을 지정했습니다. 2022. 2. 1.
반응형

티스토리툴바