본문 바로가기
반응형

분류 전체보기155

[DIL] 03 this 01 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다.  3-1-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js 환경에서는 global이다. 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. 변수이면서 객체의 프로퍼.. 2024. 7. 10.
[발표2회차] this와 콜백함수 this란this는  자기가 속한 객체를 가리킨다. 객체를 속상과 메서드(함수)를 가질 수 있는 일종의 상자라고 생각해보면 this는 그 상자 안에서 "내가 지금 속한 상자가 무엇인지"를 알려주는 역할을 한다. 아래 설명을 통해 각 상황에 따른 this를 살펴보자. 객체 내부에서 const 사람 = { 이름: '철수', 자기소개() { console.log(this.이름); // this는 '사람' 객체를 가리킴 }};사람.자기소개(); // "철수" 출력 this는 '사람'이라는 객체를 가리키고 있다. 그래서 'this.이름'은 '사람.이름'과 같다.  전역에서는 this는 윈도우를 가리킨다.전역에서 this는 브라우저 환경에서는 window라는 큰 상자를 가리킨다. 이 상.. 2024. 7. 8.
웹페이지 디자인 참고 사이트 https://www.cssdesignawards.com/wotd-award-winners CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS AwardsCSS Design Awards. Be inspired, Be inspiring. Submit your website to the world's best CSS awards for a chance to win Site of the Day, UI awards UX awards and more from a panel of 200+ international web designers and developers.www.cssdesignawards.com https://www.gdweb.c.. 2024. 7. 8.
github badge https://github.com/Ileriayo/markdown-badges 2024. 7. 7.
[발표1회차] 실행 컨텍스트(Execution Context)와 스코프 실행 컨텍스트란?실행 컨텍스트란 프로그래밍에서 코드를 실행할 때 그 코드를 이해하고 관리하는 일종의 환경이다. 예를 들면 수학문제를 푼다고 했을 때 책상에 앉아 연필, 종이 등이 사용하여 문제를 풀 것이다. 문제를 풀기 위해 준비환경 역할을 하는 책상처럼 코드가 실행될 때 필요한 정보나 상태를 담는 것을 실행 컨텍스트라고 한다. 실행 컨텍스트의 역할변수관리 : 코드를 실행하는 동안 사용할 변수들을 저장하고 관리한다.코드 실행 위치 관리 : 지금 코드의 어느 부분을 실행하고 있는지 추적한다.함수 호출 관리 : 코드에서 호출할 때 함수의 실행 환경을 만들어준다.  예시function sayHello() { var name = "철수"; console.log("안녕, " + name);}sayHel.. 2024. 7. 5.
[DIL] 02 실행 컨텍스트 01.실행 컨텍스트란?실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 우선 스택stack과 큐queue의 개념을 살펴보자. 스택은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조로 최신 데이터가 제일 먼저 나가고, 큐는 양쪽 모두 열려있는 파이프와 같은 구조로 먼저 들어간 데이터가 제일 먼저 나온다.동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택call stack에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.  VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의.. 2024. 7. 4.
[css] 로딩 스피너 css https://tobiasahlin.com/spinkit/ 2024. 7. 4.
[DIL] 01 데이터타입 [출처/ 코어 자바스크립트]01. 데이터 타입의 종류02. 데이터 타입에 관한 배경지식1-2-1 메모리와 데이터컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억한다. 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트bit라고 한다. 메모리는 매우 많은 비트들로 구성돼 있는데 각 비트는 고유한 식별자unique identifier를 통해 위치를 확인할 수 있다.그런데 비트 단위로 위치를 확인하는 것은 매우 비효율 적이므로 몇 개씩 묶어 하나의 단위로 여긴다면 표현할 수 있는 값도 늘어나면서 검색시간도 줄일 수 있다.하지만 이처럼 하면 동시에 낭비되는 비트가 생기기도 한다. 표현 가능한 개수에 어느 정도 제약이 따르더라도 크게 문제가 되지 않을 적정 공간을 묶는 편이 낫다는 생각으로 바이트byte 단위.. 2024. 7. 2.
[CSS] tailwind class 찾아보기 https://tailwindcomponents.com/cheatsheet/ 2024. 6. 28.
[TIL] supabase 연동 시 'url'과 'anone key'를 .env파일로 보안하는 방법 supabase를 사용할때 url과 anone key를 앱에 그대로 삽입하여 github에 올리면 보안에 취약할 수 있다.이럴때는 .env 파일에 넣어 github에 올릴 때 제외 시킬 수 있다. 그 방법을 알아보자 ! 1. supabase에 프로젝트를 생성한다. 2. 진행중인 프로젝트 앱에 'supabase'폴더 - 'supabaseClient.js'을 생성한다.(가독성 & 유지보수를 위해) 3. 진행중인 프로젝트 앱에 '.env.local' 이름의 파일을 생성한다.4. '.env.local' 파일에 supabase에 있는 'url'과 'anone key'를 넣어준다.VITE_SUPABASE_URL="프로젝트 URL"VITE_SUPABASE_KEY="프로젝트 anone key"//vite 기반으로 앱설.. 2024. 6. 28.
[CSS] reset css 파일 (input 추가) /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbo.. 2024. 6. 28.
[TIL] JavaScript fetch와 async await 사용법 1. fetch 사용법fetch : 데이터 요청을 위한 함수then : fetch가 완료되면 그때 ~라는 뜻json() : 자바스크립트 데이터로 변경하는  함수 fetch 함수를 쓰기 위해 필요한 정보 (예시 데이터 : https://developer.themoviedb.org/reference/movie-top-rated-list )API주소를 알아야함 ex) https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1메소드를 알아야 함 ex) get, post 등등 아래 예시 코드를 보며 좀 더 이해해보자! const options = { method: 'GET', headers: { accept: 'application/json' }};f.. 2024. 6. 28.
반응형

티스토리툴바