전체 글112 CSS Module 나는 가운데 정렬을 하지 않았는데? 오늘 내가 겪은 문제상황을 소개해본다. 들어가기 전에 먼저 CSS Module에 관해 간단히 설명하려고 한다. CSS Module은 CSS in CSS 로써 css파일을 따로 관리하고 태그에 class를 지정해서 CSS를 적용하는 방식을 사용한다. 예를들어 header 태그에 bgc = red를 적용하고 싶다면 header태그에 myheader라는 클래스를 지정해 준 후 CSS파일에서 해당 스타일을 적용해주면 된다. I AM HEADER .myheader { background-color: red; } 이러한 CSS Module의 장점은 각 파일마다 로컬로 클래스를 지정해줘서 관리가 편하다는 장점이 있다. 그래서 다른 파일에 myheader라는 클래스명을 다시 써도 영향을 주지 않는다. 여기서 나의 문제.. 2024. 3. 15. yarn berry로 프로젝트 세팅하기(vite, React, TS) yarn berry로 프로젝트 세팅하기(vite, React, TS) 일단 npm은 node.js를 설치하면 자동으로 설치가 되는데 yarn은 npm을 통해서 따로 설치를 해줘야 한다. 1 . 내 컴퓨터에 yarn 설치 npm install -g yarn 설치 한 다음에 잘 설치되었나 확인해보자 yarn --version 이 명령어를 치고 설치가 되었으면 버전이 나올 것이다. 만약 자기가 이미 yarn으로 세팅된 프로젝트를 실행하고 싶다면 맨 아래로 스크롤 해서 번외3 으로 가시길 바랍니다! 2 . 프로젝트 생성 yarn create vite [프로젝트 명] --template react-ts 이 명령어를 치면 react+ts기반 기본 프로젝트가 생성이 될 것이다. 그 다음에 만든 프로젝트로 이동해준다... 2024. 3. 7. 모던 JS 딥다이브 스터디 회고 스터디 종강 1월 7일부터 시작한 모던 자바스크립트 딥다이브 스터디가 끝났다. 레포지토리 주소 : https://github.com/joonsun1006/Modern-JS-Deep-Dive 직접 스터디원을 모으고, 규칙도 정하며 스터디를 주도적으로 진행한 것이 처음이었는데 잘 진행되었다고 생각한다. 걱정했던 점은 7~8주 라는 짧은 기간동안 방대한 분량의 책을 소화할 수 있을까 라는 점이었는데 핵심 개념을 제대로 공부하기 위해 기본 문법과 같은 부분은 제외하여 진행했다. 처음 1회차에 스터디를 진행할 때는 각자 공부한 내용을 발표하는 형식으로 해봤는데 모든 인원이 효율적이지 못함을 느껴 스터디장(?) 으로써 효과적인 스터디 진행방식을 고민을 했다. 고민끝에 퀴즈 형식으로 바꿨는데 반응들이 좋았고 나 또한.. 2024. 3. 3. a태그와 Link태그의 차이점 a태그를 통해 이동하는 것은 서버에 새로운 요청을 전송한다. (새로운 http 요청을 서버에 전송) ⇒ SPA의 장점이 사라짐. 모든 코드를 다시 로드한다. 그래서 성능에 안좋은 영향을 끼침. Link 사용 장점 : 요청을 전송하는 기본 설정을 막고, 리액트 라우터가 새 URL을 알고, 그 URL에 맞는 적절한 요소를 로딩하도록 해줌. 사용법 import import { Link } from "react-router-dom"; 기존 a태그 import { Link } from "react-router-dom"; function HomePage() { return ( My Home Page Go to the list of products ); }; export default HomePage; Router의.. 2024. 2. 22. 모던 자바스크립트 Deep Dive - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 ES6+와 최신 사양을 사용하여 프로젝트를 진행하려면 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요함. Babel ES6의 화살표 함수, ES7의 지수 연산자 49-01 [1, 2, 3].map(n => n ** n); IE 같은 구형 브라우저에서는 위 문법을 지원하지 않을 수 있음. Babel을 사용하면 위 코드를 ES5 사양으로 변환할 수 있음. 49-02 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel은 최신 사양의 소스코드를 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있음... 2024. 2. 21. 모던 자바스크립트 Deep Dive - 모듈 48장 모듈 모듈의 일반적 의미 재사용 가능한 코드 조각 일반적으로 기능을 기준으로 파일 단위로 분리함. 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야함. 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음. 즉 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함. 이를 export라고 함. 공개된 모듈의 자산을 사용하는 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있게 함. 이를 import 라고 함. 자바스크립트와 모듈 Node.js는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원함. ES6 모.. 2024. 2. 20. 이전 1 2 3 4 5 ··· 19 다음
