JavaScript37 [React] CRA에서 eject없이 SCSS사용하기 CRA에서 eject없이 SCSS사용하기 1. sass 설치 => scss를 css로 변환해 주는 라이브러리 yarn add node-sass 2. styles 폴더 생성, 내부에 scss폴더 생성 후 scss파일 생성 3.터미널 에서 사용시, package.json에서 script에 "sass"명령어를 추가해 주어야 한다. => 이 때는 map파일도 같이 생성되어 원하지 않을 경우 따로 map파일이 생성되지 않도록 설정할 필요가 있다. "sass": "sass --watch src/styles/scss:src/styles/css" yarn run sass => watch 시작 익스텐션 사용시 : liveSass 경로 설정 => /src/styles/css 폴더에 css파일이 생성되도록 설정 3. wat.. 2023. 4. 15. [JavaScript] 동기와 비동기 차이, 비동기 처리 방식의 종류와 특징 1. 동기와 비동기의 이해 자바스크립트는 동기적 언어이며, Single Thread 언어다. 자바스크립트는 hoisting이 된 이후부터, 코드를 한줄씩 스크립팅하여 순차적으로 실행된다. 여기서 자바스크립트는 Single Thread 언어이기 때문에 하나의 Thread만 존재하며, 하나의 stack이 존재한다. 이 말의 뜻은, 하나의 Call stack에 쌓인 환경정보를 기반으로 컨텍스트를 생성하고 코드를 실행시키기 때문에 LIFO에 의해 순차적으로 순서가 보장된다는 것이며, 즉 자바스크립트 엔진 자체만으로는 멀티쓰레딩이 불가능 하다는 것이다. 현재 task가 종료되기 전까지 다른 task가 실행될 수 없다는 것을 의미하기도 한다. 💡 자바스크립트는 Single Thread 언어인데, 어떻게 비동기 처리.. 2023. 4. 14. [JavaScript] 실행 컨텍스트와 this바인딩(this binding) 💡리마인드 - 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. - 그 객체 안에는 3가지가 존재한다. ✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings 상황에 따라 달라지는 this this는 실행 컨텍스트가 생성될 때 결정된다. 이 말을 this를 bind한다(=묶는다) 라고도 한다. 다시 말하면 this는 함수를 호출할 때 결정된다. 1. 전역 에서의 this 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)를 가리킨다. 런타임 환경? 여러분들이 javascript로 만들어놓은 프로그램이 구동중인 환경을 말하죠. 우리는 node 파일이름.js로 vscode 상에서 구동하고 있으니 n.. 2023. 4. 5. [JavaScript] 실행컨텍스트(스코프, 변수, 객체 호이스팅) 실행 컨텍스트 자바스크립트의 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 record(hoisting), outer, this값을 설정 한다. 1) 콜 스택 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 콜스택에 쌓아올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다. 실행 컨텍스트에 담기는 정보 1. VE => VariableEnvironment 1) 현재 컨텍스트 내의 식별자 정보(=record)를 갖고있다. var a = 3의 경우, **var a**를 의미, 선언부 현재 컨텍스트와 관련된 코드의 식별.. 2023. 4. 5. 데이터 타입 심화, 메모리 데이터 타입 종류 기본형과 참조형을 나누는 기준 : 값의 저장 방식과 불변성 여부에 따라 나뉜다. 💡 [기본형과 참조형의 구분 기준] 복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성의 여부 기본형 : 불변성을 띔 => var나 let은 값이 변경되는데? => 메모리 관점에서 봐야 불변한지 아닌지 파악 가능 참조형 : 불변성을 띄지 않음 자, “불변성을 띈다” 이 말을 이해하기 위해서 우리는 메모리와 데이터에 대한 내용을 이해해야만 합니다. 아래에서 그 배경지식을 낱낱이 살펴보기로 합시다 😎 메모리와 데이터에 관한 배경지식 1. 메모리, 데이터 1)비트 컴퓨터가 이해할 수 있는 가장 작은 단위죠 0과 1을 가지고 있는 메모.. 2023. 4. 4. [SCSS] 온보딩 3주 3일차 - Swiper와 SCSS 사용해 보기 🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기 ✨03/22 : 목표 : SCSS 설치 및 기본 문법 익히기 Swiper를 이용해 슬라이드를 가져오고, SCSS로 커스터마이징 해보자. 01 Swiper 슬라이드 사용해 보기 1. Swiper홈페이지 => Demos => 목록 중에서 원하는 슬라이드 가져오기 2. Core(html,css,js), React, Vue 등 여러 종류로 코드를 볼 수 있다. 클릭하면 코드가 쭉 나오는데 이 코드를 개인 플젝에 첨부하면 된다. 주의할점은1. script를 올바르게 가져왔는지, 2.슬라이드는 position 설정이 중요한데, 코드에서는 보통 html이나 body에 relative가 걸려있기 때문에 원하는 요소에 옮겨서 잘 조정해 주어야 한다. HTML 이 .. 2023. 3. 23. 이전 1 2 3 4 5 6 7 다음
