본문 바로가기

분류 전체보기415

Sass(SCSS) 최종 수정 : 2024-04-18 Sass(SCSS) css는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않는다. 그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들기 시작했다. 그 중에 가장 많이 쓰이는 것이 바로 Sass이다. 변수, 네스팅(Nesting) 문법, 믹스인(Mixin) 등등 다양한 기능을 제공한다. 이 중에서 변수와 네스팅 등은 웹 표준으로 흡수되기도 했다. Sass는 프리프로세서(Preprocessor) 스크립트 언어라고 하는데, 프로그램을 통해서 Sass 코드를 CSS로 변환한다. Sass에는 기존 Sass와 SCSS 두 가지 문법이 있는데, 최근에는 CSS의 모든 문법 위에서 확장된 문법을 사용하는 SCSS를 많이 사용한다. 장점 파일을 분리하고 부럴 올 수 .. 2024. 4. 18.
CSS 클래스 이름 설정 : BEM(Block Element Modifier) 최종 수정 : 2024-04-18 BEM(Block Element Modifier) BEM은 CSS 클래스 이름을 짓는 규칙이다. 블록(Block), 요소(Element), 변경자(Modifier) 형태로 작성한다. 블록은 같은 영역을 의미하고, 요소는 , 같은 요소를 의미한다. 마지막으로 변경자는 요소의 변형을 표시한다. 장점 CSS 클래스의 이름을 짓는 고민을 덜 수 있다. 단점 및 한계 여전히 규모가 큰 코드를 관리하기는 어렵다 Email Password Sign In .signin-form { /* 로그인 폼 */ } .signin-form__input { /* 로그인 폼의 인풋 */ } .signin-form__input.signin-form__input--password { /* 로그인 폼의 .. 2024. 4. 18.
[JS Q.R 스터디] 2번째 모임 질문 QnA 최종 수정 : 2024-04-18 JS Q.R 질문 QnA 1. 변수가 필요한 이유는 무엇이며, 값이 재할당 될 경우 자바스크립트 엔진은 어떤 일을 수행하나요? -> 변수는 값이 저장되는 위치를 가리키는 값에 대한 이름이다. 값들을 구분하기 위한 식별자라고도 부른다. 값이 재할당되면, 기존에 가리켰던 값은 사용하지 않게 되므로, 자바스크립트 엔진은 가비지 콜렉터로 메모리에서 자동 해제한다. 하지만 언제 해제될지는 예측할 수 없다.. 2. var, let, const 키워드로 선언한 변수들의 특징은 무엇인가요? -> var 키워드로 선언한 변수는 함수 레벨 스코프를 갖으며, 변수의 호이스팅이 발생한다. 또한, 변수의 선언과 초기화가 별도로 이루어지며, 처음 선언됐을 때는 undefined가 할당된다. 이후.. 2024. 4. 18.
React context / useContext() 최종 수정 : 2024-04-21 Context 리액트 애플리케이션에서는 데이터가 컴포넌트의 props를 통해 부모에서 자식으로 단방향 전달만 가능하다. 이런 전달 방식으로 인해 프롭 드릴링(Props Drilling)이 발생한다. 이런 문제를 해결하고자 등장한 것이 바로 Context이다. context를 이용하면 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 부분적으로 전역변수 처리하여 이용하는 방법이다. 또한 코드 역시 간결해지므로 디버깅 하기에도 굉장히 유리하다. 주로 context를 사용해 활용하는 기능은 다음과 같다. 테마 데이터(dark or light mode) 사용자 데.. 2024. 4. 18.
[JS Q.R 스터디] 타입 변환과 단축 평가 최종 수정 : 2024-04-18 9장. 타입 변환과 단축 평가 1. 타입 변환이란? 모든 값에는 타입이 있다. 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting)이라 한다. 반면, 의도와는 상관없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이라 한다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러나지만. 암묵적 타입 변환은 자바스크립트 엔진이 표현식을 에러 없이 평가하.. 2024. 4. 18.