분류 전체보기 (43) 썸네일형 리스트형 브라우저는 어떻게 동작하는가? [Today I Learned - 배경지식] 브라우저에서 URL을 입력하게되면 이러한 순서로 진행이 됩니다. 먼저 브라우저가 서버에게 HTML 파일을 요청합니다. (request) 파일을 서버에게 받아서 로딩을 합니다. (loading) 파일을 한줄씩 읽어 DOM 요소로 변환하는 과정을 scripting 이라고 합니다. (scripting) DOM 요소로 변환하고, CSS 요소를 CSSOM으로 변환합니다. (scripting) 변환한 것을 window에 표기하기 위해 Rendering Tree를 만듭니다. (rendering) Render Tree의 각 요소들이 어떤 위치에 어떤 크기로 표기되는지 계산을 합니다 (layout) 화면에 요소들을 그립니다. (painting) 출처 블로그 : https://velog.io/@moonshadow/ IP .. 변수는 무엇이고, 왜 필요할까? [Today I Learned - JS] 여러 날에 걸쳐 공부한 걸 한번에 정리해서 글이 많이 길다... 변수 예시 var a = 10; 변수를 알아보기에 앞서, 컴퓨터는 어떻게 메모리에 값을 저장하고 계산하는가? 예를 들어 10 + 20 = 30 이라는 식을 계산하고 저장하려면? 👉컴퓨터는 CPU 를 사용해 연산하고, 메모리(memory)를 사용해 데이터를 기억한다. 01. 메모리(Memory)란? => 데이터를 저장할 수 있는 메모리 셀의 집합체 1. 메모리 셀 1개는 1바이트 각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소 : 메모리 공간의 위치를 의미 2. 컴퓨터는 즉, 1바이트 단위로 데이터를 저장하거나 읽어들인다. 3. 컴퓨터는 모든 데이터를 2진수로 처리 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상).. 리액트를 사용하는 이유 [Today I Learned - React] 리액트를 사용하는 이유?! 리액트를 사용하면 좋은 이유 01. 웹을 APP 처럼 사용할 수 있음 모바일 앱으로 발행이 쉬움 02. 이벤트 업데이트 관리가 쉬움 JS 이벤트 업데이트 방식 JS 로 DOM 에 접근하여 이벤트를 하나하나 핸들링 하려면, 프로젝트 사이즈에 따라 관리하기가 어려워 질 수 있음 이벤트가 많아지면, DOM 이 다양해지고, 업데이트 규칙도 복잡하게 됨 React 이벤트 업데이트 방식 어떠한 상태가 바뀌었을 때 그 상태에 따라 아예 리랜더링 되도록 설계가 되어있음 아예 리랜더링 하면 속도가 느려지지 않나? => Virtual DOM 으로 해결!! 어떻게 업데이트를 할 지에 대한 고민이 필요 없음 Virtual DOM : 가상의 DOM 메모리에 가상을 존재하는 DOM == JS 객체와 같.. [코딩 공부일지] 전역변수 간략 정리 전역변수란? 모든 곳에서 쓸 수 있는 변수! var 나이 = 20; //전역변수 : 제일 바깥에 만들어놓음 window.나이 = 20; //window 로 전역변수 만들기도 가능! (:: 전역변수) //즉, window{} 안에 '나이'라는 키값을 만든 것 function 함수(){ console.log(나이); //20 var 이름 = 'kim' //지역변수 } 함수(); 오늘은 여기까지..!! 현재 코딩 공부일지는 코딩애플 강의를 들으며 공부하는 내용을 작성한 것입니다! 코딩애플 흥해랏 [코딩 공부일지] 변수, 함수 호이스팅 간단 정리 자바스크립트 언어를 사용하면서 "호이스팅"이라는 단어 많이 들어보셨을 거에요 자바스크립트를 이해하는데 있어서 참 중요한 호이스팅!!! 오늘 한번 정리해볼게요!! 그럼 Let's Start!! 호이스팅이란? 변수나 함수를 생성할 때 자동적으로 선언한 부분을 페이지 맨 위로 올려버리는 현상을 말함 01. 변수의 호이스팅 console.log(나이) //undefined (= 변수 선언만하고 할당을 안했을때 발생) var 나이 = 30; console.log(나이) //30 var 나이 = 30; 이라고 선언을 했을 때, 자바스크립트는 자동적으로 "var 나이", 즉 변수 선언한 부분을 무조건 페이지 맨 위로 올려버림 그리고 나이 = 30; 은 변수를 선언한 위치에 그대로 존재함 이런식으로 자바스크립트는 변수.. [코딩 공부일지] 변수 var / let / const 차이점 간단 정리 휴.. 요즘 체력을 키우려 헬스를 빡시게 했더니 거의 2주간 앓아 누웠다가 다시 공부시작합니당 오늘은 변수 공부한 것 정리하려 해요! 각 변수들의 특징 01. var var : 재선언 가능 var 이름 = 'kim'; console.log(이름) //kim var 이름 = 'park'; console.log(이름) //park var : 재할당 가능 var 이름 = 'kim'; console.log(이름) //kim 이름 = 'park'; console.log(이름) //park var : 존재 범위는 function function 함수(){ var 이름 = 'kim' console.log(이름) //kim } console.log(이름) //undefined 출력 02. let let : 재선언 불가.. [코딩 공부일지] 시작해봅니다 - this 그날 그날 공부했던 것들을 조금 더 오래 기억하기 위해 코딩공부 일지라는 것을 한번 끄적여 볼까 합니다. 뭐..정성스레 기록할 생각은 없구요..(귀찮) 😒 그냥 이 날 이거 공부했었지 정도로 저 만을 위한 그런...어떠한...일지랄까? 그래서 오늘은.....!! 두구두구 자바스크립트에서 그렇게 자주 사용한다는 " this " 두둥 this 라는 가까우면서 먼듯한...이 아리까리한 녀석이 어디서 사용하느냐에 따라 가리키는 대상이 다르더라구요 1. 그냥 console.log(this) 나 그냥 함수 안에 사용하면 window{}, 즉 윈도우 오브젝트를 가리킵니다. * 윈도우 오브젝트 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체를 의미 document.getElementById(), alert(.. [vue3] v-for 를 정복해버렸다...!!!!! 뷰 새내기 윤쮼입니다!!!! 뷰의 기초 중의 기초 v-for 시간도 없는데 오늘 정복해버릴까합니다. 그래서 예시를 들고왔어요!!! 첫번째 예시!! 데이터이름 : 과일들 데이터 내용 : 사과, 딸기, 바나나 과일들 : [사과, 딸기, 바나나] 이거를 v-for 로 뿌려줄 거에요! {{과일}} 자 위에 코드에서 "과일들"(즉 데이터이름) 에서 각각의 "과일"(데이터내용 - 네이밍은 마음대로 가능)을 빼내온다고 생각하면 되요. :key="과일"은 안쓰면 오류나니까 써야합니다. (공식페이지에서 하래요....) "과일 in 과일들" 에서의 과일과 :key="과일" 에서 과일은 같은 값을 가리킵니다. 출력하면 사과, 딸기, 바나나 이렇게 같죠. 두번째 예시!! 데이터이름 : 음식들 데이터 내용 : 짜파게티, 유부초.. 이전 1 2 3 4 5 6 다음
