본문 바로가기

전체보기

 (286)
웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module 웹팩을 쓰면 CSS까지도 모듈로 쓸 수 있다는 장점이 있다. 이게 무슨 말인가. 기존의 CSS는 전역 변수와 다름 없었다. .any라는 클래스가 있으면 모든 .any에 영향을 줬다. 물론 SCSS의 네스팅을 이용하면 비껴갈 수는 있지만 그래서 BEM과 같은 길고 못생긴 class 네이밍을 해야 했다. .modal__button--active 물론 정확히 네이밍하면 좋은 방법이라고는 생각한다. 자칫하면 작대기로 나눈 위의 세 부분 개념을 사람마다 다르게 해석해서 중구난방이 될 수 있다는 게 문제인듯 하다. 이런 난해함을 해결하기 위해 스타일 컴포넌트 등 다양한 스택들이 있지만 본인은 CSS module이 눈에 들어왔다. 그동안 익숙하게 써왔던 CSS와 똑같기 때문이다. 가운데에 .module을 붙여 any..
자바스크립트로 웹 개발을 하기 위한 웹팩 설정 방법 리액트에서는 분명 잘 써왔는데 자바스크립트로만 개발을 하려다 보면 import나 export가 잘 안 된다. script의 type을 module로 할 때만 쓸 수 있다고 한다. 그렇다고 module로 설정한 다음에 써도 잘 안 되는 건 여전하다. 모듈 대신 전역 변수로 선언한 클래스를 써야 했다. 아니 회사에서 그렇게 하고 있었다. 뭔가 방법이 있을 것이지만 급한 게 아니라 넘어갔다. 이를 해결할 수 있을 것 같은 웹팩은 어렵기 때문이다. 개발 중에 require나 import, export를 이용한 모듈을 안 쓴다는 것은 너무나 손해다. 필요할 때만 딱 뽑아서 쓰는 코드의 깔끔함을 누리고 싶었다. 다행히 예상대로 웹팩을 사용하면 type 설정 따위는 잊을 수 있다. 웹팩을 통해 번들링이 끝난 파일은 ..
CSS Module CSS Module을 이용하면 각 모듈에서만 불러온 css 파일이 적용되기 때문에 클래스 이름의 중복 걱정 없이 css 코드를 작성할 수 있다. 결과적으로 보다 간결하게 class 이름을 지을 수 있다. npx create-react-app 명령어로 만든 프로젝트에서 사용할 수 있다. .css 파일이 아닌 .module.css 확장자의 파일을 만들고 아래처럼 styles라는 변수로 불러와서 사용한다. App.js import styles from './App.module.css'; function App() { return ( hello world ); } export default App; App.module.css .first { color: dodgerblue; } .second { color: p..
codeceptJS 설치법 1. node 버전을 최신으로 바꾼다. 2. 프로젝트 폴더에 들어가서 다음을 입력해 codeceptjs를 설치한다. npx create-codeceptjs . 3. 다음을 입력해 초기 설정을 한다. npx codeceptjs init 여러 옵션을 선택할 수 있는 리스트가 나타나고 default로 하되 helpers를 물을 때에는 Playwright를 선택한다. 4. _test.js 파일의 내용을 바꾼다. Feature('My First Test'); Scenario('test something', ({ I }) => { I.amOnPage('https://github.com'); I.see('GitHub'); }); 5. 다음을 입력해 위의 내용 대로 테스트 한다. npm run codeceptjs 아래..
docker 기본 도커는 다양한 방식으로 활용된다. 개발 환경을 구축할 때 쓰기도 하는데 이런 경우라면 도커를 알아야 여러가지 대처를 할 수 있다. 도커를 쓰는 기본적인 방법에 대해서 다루겠다. 1. 홈페이지 등에서 도커 데스크탑을 설치한다. 2. docker images 명령어를 입력해서 현재 설치된 이미지를 확인한다. 3. 우분투 이미지를 설치한다. docker pull ubuntu:14.04 4. 이미지를 이용해서 컨테이너를 만들고 실행한다. docker run -i -t --name 생성할컨테이너이름 ubuntu:14.04 /bin/bash -i 옵션 : 사용자가 입출력을 할 수 있는 상태로 하겠다. -t 옵션 : 가상 터미널 환경을 에뮬레이션 하겠다. /bin/bash : 실행 파일로 bin bash shell을..
git rebase로 commit 메시지를 수정하는 방법 다음 명령어를 입력하면 해당 커밋 아이디 이전까지의 커밋 메시지를 수정할 수 있다. git rebase -i 커밋아이디 에디터가 열리고 아래와 같은 내용이 나타난다. pick 3bd42b6 첫 번째 커밋 pick 9cc5200 두 번째 커밋 pick 478443d 세 번째 커밋 수정하고 싶은 커밋의 pick을 reword로 바꾸고 저장한 뒤 에디터를 종료하면 reword로 바꾼 커밋 메시지를 연달아 다시 작성할 수 있다.
git rebase로 commit 메시지 순서 변경하는 방법 다음 명령어를 입력하면 해당 커밋 아이디 이전까지의 커밋 순서를 변경할 수 있다. git rebase -i 커밋아이디 에디터가 열리고 아래와 같은 내용이 나타난다. pick 3bd42b6 첫 번째 커밋 pick 9cc5200 두 번째 커밋 pick 478443d 세 번째 커밋 위에서부터 오래된 커밋이고 여기서 커밋의 줄 위치를 변경한 뒤에 저장하면 커밋의 순서가 바뀐다. pick 9cc5200 두 번째 커밋 pick 3bd42b6 첫 번째 커밋 pick 478443d 세 번째 커밋 경우에 따라서 conflict이 발생할 수 있다. 그런 때 rebase를 취소하고 싶다면 git rebase --abort 명령어를 입력한다.
바벨 7.11 시작하기 브라우저의 종류는 다양하다. 때문에 사람들이 최신 브라우저인 크롬만 사용하지는 않는다. 구형 브라우저에서도 돌아갈 수 있는 조치가 필요하다. 이를 위해서 바벨을 사용한다. 바벨을 사용하면 최신 문법의 코드를 옛날 방식으로 바꿔주기 때문에 나이스한 자바스크립트 문법을 마구 사용하더라도 문제가 생길 걱정을 덜 수 있다. 심지어 요즘 웹 개발자들에게 골치를 썩이는 인터넷 익스플로러 11까지도 말이다. 대신 폴리필과는 구분해야 한다. Promise와 같은 메소드는 바벨을 사용한다고 해결되지 않는다. 구형 브라우저에는 Promise라는 빌트인 객체가 아얘 존재하지 않기 때문이다. append나 remove 역시 마찬가지다. Dom Element 객체에 prototype 메소드가 포함되어 있지 않아(아마도?) 구형..

티스토리툴바