반응형 Embedded/JavaScript60 CSS&JS 부트스트랩 https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 부트스트랩을 다운로드하면 미리 만들어 놓은 각종 반응형 기본 소스코드들을 가져다 쓸 수 있다.우선 나는 부트스트랩 4.6x버전으로 다운로드 한다. https://getbootstrap.com/docs/4.6/getting-started/introduction/ Intro.. 2025. 6. 12. [JS] 가비지 컬렉션 & 메모리 누수 메모리 누수란 무엇인가? 메모리 누수는 어떤 이유에서든 지간에, 운영체제 또는 사용가능한 메모리 풀에서 반환되지 않으면서 동시에 애플리케이션에서 더 이상 필요로 하지 않는 메모리로 정의 될 수 있다. 흔한 자바스크립트 메모리 누수 3가지 1. 의도치 않은 전역 변수 2. 잊혀진 타이머 또는 콜백 3. DOM 외부에서의 참조 메모리 관리는 왜 필요한가? 대부분의 언어에서 메모리 라이프 사이클은 메모리 할당 → 메모리 사용 → 메모리 해제의 단계를 거친다. C같은 low-level 언어의 경우 이 라이프 사이클을 개발자가 malloc()이나 free()를 사용하여 직접 관리를 해주어야 하지만 자바스크립트와 같은 high-level 언어는 대부분 Garbage Collection이라는 자동 메모리 관리를 사용.. 2023. 11. 6. [JS] 깊은 복사 & 얕은 복사 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다. 얕은 복사(shllow Copy) 방법 Object.assign(생성할 객체, 복사할 객체) : 메소드의 첫 번째 인자로 빈 객체를 넣어주고 두 번째 인자로 복사할 객체를 넣어주면 됩니다. 깊은 복사(Deep Copy) 방법 JSON.stringify : 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다. JSON.parse() : 다시 원래 객체(자바스크립트 객체)로 만들어줍니다. => 사용하기 쉽지만 다른 방법들에 비해 매우 느리다고 한다. 2023. 11. 6. [js] 가변성과 불변성 원시데이터(String, Number, Boolean, undefined, null) - 불변 참조형 데이터(Object, Array, Function) – 가변 값이 바뀌냐 안 바뀌냐가 아니고, 주소가 바뀌냐 안 바뀌냐에 따라 불변/가변을 나눈다. 한번 할당된 메모리 주소는 변하지 않음(데이터 불변성) 선언 할 때 마다 새로운 메모리 주소가 할당(데이터 가변성) 2023. 11. 6. [js] bigint bigint number 보다도 큰 값까지 저장 가능한 객체이다. let x = 1234567890123456789012345n; // 끝에 n을 붙인다. let y = BigInt(1234567890123456789012345); // BigInt 함수를 이용한다. 2023. 11. 6. [js] symbol 심볼(symbol) 심볼은 객체의 프로퍼티 키로 사용된다. 프로퍼티 키란 곧 해당 프로퍼티의 값에 접근하고자 할 때 사용하는 이름이다. JavaScript에서 객체의 프로퍼티 키는 대개 문자열 값이다. 숫자로 쓰는 것도 사실은 문자열이다(내부적으로 문자열로 변환됨). [Symbol의 특징] const sym1 = Symbol(); const sym2 = Symbol(); const sym3 = Symbol('foo'); const sym4 = Symbol('foo'); console.log(sym1 === sym1); // true console.log(sym1 === sym2); // false console.log(sym3 === sym4); // false 1. Symbol 함수를 호출하면 매번 새.. 2023. 11. 6. [JS] history History 객체 history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다. history.length() : 히스토리 목록의 개수 history.back() : 브라우저의 뒤로 가기 버튼과 같은 동작 history. forward () : 브라우저의 앞으로 가기 버튼과 같은 동작 history.go : 인수로 전달받는 정수만큼 히스토리 목록 사이를 이동 2023. 10. 29. [JS] location Location 객체 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다. location.href() : 현재 문서의 URL 주소 location.hostname() : 현재 문서의 호스트 이름 location.pathname() : 현재 문서의 파일 경로명 location.assign() : 브라우저 창에 지정된 URL 주소에 존재하는 문서를 불러옵니다. location.replace() : 새 문서를 불러오기 전에, 현재 문서를 브라우저의 히스토리에서 제거한다는 점이 assign() 메소드와 다릅니다. 2023. 10. 29. [JS] Storage 로컬 스토리지 vs. 세션 스토리지 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 .. 2023. 10. 29. [JS] 쿠키 Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자. ex) username = 홍길동 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 쿠키와 세션의 차.. 2023. 10. 29. 이전 1 2 3 4 ··· 6 다음 반응형
