Study (46) 썸네일형 리스트형 [JavaScript] 문자조작에 유용한 tagged literals 자바스크립트에서 보통 함수를 호출할때 다음과 같은 형태로 호출하곤 하는데, 함수(); 이 외에도 자바스크립에서는 특이한 함수 호출법이 있다. 이름하야 tagged literals. 함수 뒤에 관호가 아닌, 텍스트를 넣어서도 함수 호출이 가능하다. 함수 `안녕하세요 ${변수}입니다` tagged literals를 사용하여, 문자를 해체 분석할수 있다 . 다음 예제를 봐보자. var name = '손예진' function 함수(문자들, 변수){ console.log(문자들); // (2) ['안녕하세요 저는 ', '입니다', raw: Array(2)] console.log(변수); // 손예진 } 함수 `안녕하세요 저는 ${name}입니다` 함수 뒤 ``(백틱) 안의 문자와 변수를, 함수의 파라미터로 담아 .. 브라우저 작동원리 #1. 웹사이트 접속 - 주소창에 naver.com을 치면.... 1. DNS (IP주소 반환) 웹브라우저는 DNS에게 해당 호스트의 IP주소 요청. 숫자 형태의 IP주소를 받는다. 2. 3 Way Handshake - 브라우저와 서버 사이에서 데이터를 주고 받기 위해 3 Way Handshake 한다. - Handshake 과정이 끝난 후 브라우저는 서버에게 자료 요청 #2. HTTP Request + HTTP Response 1. HTTP Request - 브라우저가 서버에게 데이터 달라고 요청 2. HTTP Response - 브라우저의 요청에 서버가 응답해서, 데이터를 준다. #3. Data Parsing - 브라우저는 서버로 부터 받은 데이터를 해석 1. Construction 1) HTML P.. [JavaScript] this #1. this? - this는 자기 참조 변수 - this는 호출한 방법에 의해 결정된다. - 대부분의 경우 this는 호출한 놈! * 예외 - 전역 스코프에서 this는 window객체 - 화살표 함수에서 this는 상위 스코프의 this - strict mode에서 this의 기본값은 undifined (window아님) case1. 대부분의 경우 this는 자신을 호출한 놈 - 대부분의 경우 this 는 자신을 호출한 놈이다. var person = { name : "사람", getThis : function(){ console.log(this); } } // case01. this는 자신을 호출한 person person.getThis(); // {name: '사람', getThis: ƒ} ca.. [JavaScript] 호이스팅이란? 호이스팅이란 코드를 실행하기 전에, 변수 선언/ 함수 선언에 대한 메모리 공간을 미리 할당해 두는 것을 말한다. 변수 선언/ 함수 선언은 런타임 이전에 먼저 실행되는데, 변수 선언/ 함수 선언이 코드의 선두로 올려진것 처럼 동작하는 자바스크립트 고유의 특징이다. #1. 변수 호이스팅 - 변수 선언시, 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는데 이를 함수 호이스팅이라고 한다. - var, let, const 모든 키워드로 선언 시, 변수 호이스팅은 발생하지만, 각각의 출력 형태는 약간 상이하다. 1. var로 변수 선언시 ... > undifined로 초기화. - var 키워드로 선언한 변수는 런타임 이전에 변수 호이스팅에 의해 선언되고, undifined 값으로 초기화가 진행된다. cons.. [javascript 메서드 정리] 스크롤 이동 메서드 window.scroll() VS window.scrollTo() VS window.scrollBy() #결론 - 스크롤을 이동할때 쓰는 메서드 - 설정한 값이 적용되는 기준점이 다르다. - 기준점은 다음과 같이 다름. 메서드 Window.scroll() Window.scrollTo() Window.scrollBy() 기준점 - 문서의 왼쪽 상단 기준 - 문서의 왼쪽 상단 기준 - 뷰포트 왼쪽 상단 기준 (현재 스크롤 위치 기준) 특징 - 절대적인 값. - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다. - Window.scrollTo() 와 같음 - 절대적인 값 - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다. - Window.scroll() 와 같음 - 상대적인 값 - 현재 스크롤 위치가 어디인가에 따라 이동 후의 위치가 바뀐다. - 현재 스크롤된 위치 + 설정한 값으로 .. vite 에서 SCSS 경로 보기 (sourcemap 적용 안될때) vite.config.js 에서 하단 코드 추가 css: { devSourcemap: true // this one }, - 다음과 같이 css 추적이 가능함. [Sass/SCSS] mixin 사용하기 #1-1. argument 사용하지 않음 1. mixin을 사용하고자하는 scss 파일에서 mixin 작성 @mixin mixin-name() { // 추가하고싶은 css 코드를 넣는다. color: red; .ic-cloe { width: 40px; } } 2. mixin을 사용하고자하는 scss 파일에서 mixin 사용 p { @include mixin-name(); } 3. 연결된 css에서는 다음과 같이 랜더링된다. 1-2. argument 사용 1. mixin을 사용하고자하는 scss 파일에서 mixin 작성 @mixin mixin-name($color) { // css 코드 color: $color; .ic-cloe { width: 40px; } } // 다음과 같은 방식으로 argument에.. [Sass/SCSS] 반복문 사용하기 (@for $변수 from 시작점 through 끝점) #작성법 - 반복문은 다음과 같은 형식으로 사용할 수 있다. @for $변수 from 시작점 through 끝점 { ... } @for $i from 1 through 4 { // i는 변수명, 변수명은 뭘 쓰던 상관 없다. // 1부터 4까지 반복 // @debug $i; // @debug 사용시, 터미널에서 디버그 결과를 확인할 수 있음 .col-sm-#{$i} { // 클래스이름에 변수 사용시, #{}에 변수명을 감싸줘야한다. width: 100% / $i; } } - scss에서 위 코드와 같이 작성 시, css에서는 다음과 같이 랜더링 된다. .col-sm-1 { width: 100%; } .col-sm-2 { width: 50%; } .col-sm-3 { width: 33.33333%; } ... 이전 1 2 3 4 5 6 다음
