javascript21 클로저(Closures) 클로저란? 함수와 그 함수의 렉시컬 환경과의 조합이다. 렉시컬 환경이란 뭘까요? 이전에 살펴보았듯이 함수는 실행되기전 실행 컨텍스트를 생성합니다. 실행 컨텍스트는 렉시컬 환경에다가 해당 함수의 변수, 함수 식별자들을 정의하고 값을 저장하며, 외부 렉시컬환경에 참조할수 있도록 외부 렉시컬 환경도 저장해 둡니다. 이로써 함수는 자신의 필요한 변수나, 함수, 클래스 들을 찾을 수 있었죠. 그럼 왜 클로저랑 관련이 있을까요? 한번 예시를 봐봅시다. 아래 코드는 어떤 값을 출력할까요? const x = 999999; function outerFun() { const x = 1; function innerFun() { console.log(x); } return innerFun; } const innerFun = .. 2024. 2. 21. [NextJS] e2e - PlayWright 설치 및 메인화면 띄우기(1) playwright는 병렬 테스트가 가능하며, 속도도 cypress보다 빠르고, 마이크로소프트에서 지원해 주기 때문에 playwright로 시작 설치 npm init playwright@latest 위의 명령어를 입력하면 아래처럼 다른 것들도 물어보는데 Choose between TypeScript or JavaScript (default is TypeScript) > 언어 선택 Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project) > 테스트 폴더 이름 지정 Add a GitHub Actions workflow to easily run tests on CI > CI 작성해줌 .. 2024. 2. 6. z-index와 Stacking context 목차 - z-index 없는 Stacking - z-index 있는 Stacking - Stacking context (중요 이것 때문에 씀) z-index 없는 Stacking z-index와 Stacking context를 알아보기 전에 z-index를 사용하지 않았을 때, element들이 어떻게 화면에 쌓이는지 알아봅시다. html 파일 안에 element들은 아래와 같은 순서로 차곡차곡 쌓입니다. 1. root element 2. position을 정의 안한 element 3. position을 정의 한 element 참고로 position를 명시 안하면 기본적으로 static이 부여됩니다. 샘플 화면을 보죠. 아래 그림을 보면 하얀 배경은 위의 규칙 1에 따라 가장 아래에 쌓여있습니다. 이후 .. 2023. 8. 16. dynamic 클래스가 안될 때 아래처럼 rotate-[${변수}deg] 이런 식으로 변수를 사용해서 tailwindCSS 클래스를 사용하려고 하면 안 됩니다. for (let i = 0; i < count; i++) { const element = ( ); list.push(element); } 안 되는 이유는 tailwindCSS가 빌드 타임에 검사를 하는데 안 쓰는 클래스들은 제거하기 때문입니다. 제가 해결한 방법은 사용할 클래스들을 미리 작성해 두고, watilwind.config.js 파일에서 해당 파일을 명시하는 것으로 해결했습니다. 일단 유틸 파일로 빼두고요. // size.ts // rotate deg export const ROTATE_DEG = [ 'rotate-0', 'rotate-1', 'rotate-2', 'ro.. 2023. 8. 9. 이전 1 2 3 4 ··· 6 다음
