본문 바로가기

분류 전체보기

 (341)
CSS) BEM convention의 개념과 사용시 유의사항 BEM convention 이란, CSS 방법론 중 하나로 지금 내가 팀에서 사용하고 있는 방법이다. BEM은 Block-Element-Modifier의 약자로 id나 class 명을 작성할 때 사용하는 규칙이다. B.E.M은 언더바 두개 (_ _)로 연결하여 표현한다. Block을 의미하는 이름_ _Element를 의미하는 이름--Modfier를 의미하는 이름 block, element, modifier은 다음을 의미한다. BEM Naming convention 소문자, 숫자만을 사용한다. 단어 여러개를 조합하는 경우에는 하이픈(-)으로 연결한다. Block 재사용 가능한 독립적인 HTML 컴포넌트를 의미한다. 형태가 아닌 목적에 맞게 결정한다. 예를 들어 red, active 등의 상태가 아닌 men..
[데몰리션] 완전한 회복에는 완전한 분해가 필요하다 시작부터 연출이 정신없다고 느꼈다. 휙휙 전환이 일어나고, 눈 아프게 화면이 깜빡거리고, 시간의 순서마저 불친절했다. 이런 정신 없는 연출이 이 영화 전반을 이룬다. 나는 이러한 연출이 삶에서 겪고 싶지 않은 엄청난 슬픔을 겪은 사람의 마음을 보여주기 위한 것이라고 생각했다. 슬픈 일을 겪은, 아니 당한 사람은 사실 그 일에 마구 구타 당한 기분이다. 그래서 상상 속 시련의 주인공처럼 마음껏 애도하고 슬픔에 잠겨있을 수 없다. 그냥 조금 어지럽다고 스스로를 속이며 휘청휘청 살아간다. 주인공도 그랬다. 예고도 없이 갑작스럽게 사랑하는 아내의 죽음을 맞이했다. 차라리 밥을 굶고 수염이 지저분하게 자라고 회사 일에 집중하지 못하고 일상을 제대로 살지 못하는 편이 덜 슬퍼보였을거다. 주인공은 너무도 평온하게 보..
Playground) Histoire 설치 및 사용 Histoire Fast stories powered by Vite histoire.dev Historie는 어찌 읽나 헷갈리는데 공식 문서에 따르면 "이스투아" 라고 읽는다. 이스투아는 컴포넌트를 개발해서 props를 마음대로 변경할 수 있는 UI를 제공한다. 원래는 storybook 을 적용하고 싶었는데 생각보다 너무 무거워서 histoire로 변경했다. Histoire 설치 일단 나는 vue3 프로젝트에서 사용하기 때문에 여기를 참고했다. pnpm i -D histoire @histoire/plugin-vue # OR npm i -D histoire @histoire/plugin-vue # OR yarn add -D histoire @histoire/plugin-vue Histoire setting..
Husky로 Commit Message 포맷 설정 git hook과 husky에 대한 설명은 아래 포스트에 작성해두었다. Frontend) Git-husky가 무엇인가 1. Git Hooks이란? 특정 상황에 특정 git 커맨드를 실행할 수 있는 기능 따로 설치할 필요는 없고 .git/hooks/ 파일에 들어가면 .sample 확장자로 되어 있는 파일들이 git 에서 지원하는 hook 들이다. 여기서 seungyooon.tistory.com commit을 남길 때 git hook으로 메시지 포맷을 확인하려고 했다. 찾아보니 commitlint라는게 있었다. 그래서 그걸 설정해주고 commit-msg hook에 commitlint를 한번 체크해주기로 했다. 위 포스 Commit Types 커밋을 너무 어렵게 남겨야 된다면 남기기 싫어질..거니까 간단하게 ..
eslint 적용 + GitHub Actions로 npm 패키지 자동 배포 Eslint란? 코드 내 문법적 오류나 정의된 스타일과 패턴에 맞지 않는 부분을 찾아내는 정적 분석 도구이다. 특히, vscode에서 eslint를 적용하고 다음과 같은 설정을 추가하면 prettier를 사용하지 않고도 파일 수정 사항을 저장할 때 eslint 규칙에 맞게 자동으로 수정할 수 있어 매우 편리하다. 근데 지금 새로 산 맥북에서 이제 적용이 안됨.. 왜지.. 해결하고 관련 문제 해결 과정도 남겨야겠다. "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": true, 사수님의 주도 하에 팀 내 eslint config를 만들었다. 여러 사람이 프로젝트에 참여하다보니 코드 스타일이 너무 각양각색이라 코드가 너..
테스트툴) Playwright 란 프론트 프로젝트 규모가 커질수록 기능을 추가할 때마다 사이드 이펙트가 생기는 일이 빈번해진다. 버그들을 자동으로 잡을 수 있는 테스트 툴을 알아보다가 사수님이 Playwright라는 것을 알려주셔서 새로 도전하는 사이드 프로젝트에 이것을 도입하려 보려고 한다. Playwright에 대해 공부하면서 내용을 정리해본다. E2E Test E2E(End to End) Test는 애플리케이션이 예상대로 동작하는지 확인하는 테스트를 말한다. 사용자 사용 시나리오을 시뮬레이션하며 제품의 동작을 테스트 하는 것! 위에서 언급했듯이 프로젝트 규모가 작을 때는 테스트 할 범위가 좁아서 버그들이 눈에 띄지만 그 규모가 커질수록 기능 추가 및 수정으로 발생하는 사이드 이펙트를 발견하기 어려워진다. 또한 운영체제나 브라우저 등..
Vue.js) Nuxt.js 란 무엇인가 작년 6월에 어떠한 계기(?)로 급하게 이직 준비를 하고 8월에 새로운 회사로 이직했다. 그동안 배우고 활용했던 React 개발자를 채용하는 자리였기 때문에 순탄하게 이직할 수 있었던 것 같은데 신기하게도 업무는 vue.js로만 하게 되었다. 그래서 불만이라기 보다는 새로운 걸 배워서 오히려 좋아~ 상태이다, 바쁘기도 하고 급하게 이직하면서 쉬지 않고 달리는 기분이었는데 새 직장 6개월차인 지금은 많이 적응을 해서 요즘에는 김영하 작가의 낭독회 영상들을 보며 글쓰기에 다시 흥미가 생겼다. 주절주절 말이 많지만 이번 글은 나의 사수님이 요새 공부를 해야한다고 자극을 준 Nust.js라는걸 월말 오프가 된 기념으로 좀 찾아보면서 정리하려고 쓰는 것이다. 박찬호된 기분. Nust.js란 무엇인가 React 에..
[오래 준비해온 대답 - 김영하] 무계획에서 얻어낸 삶의 진리, 그 위를 넘실대며 살아가는 인생 1회독 믿고 보는 김영하의 여행 수필이었다. 안정된, 심지어 꼭대기 쯤에 도달해 있는 서울의 삶을 정리하고 삶의 거처를 옮기는 그 용기가 무엇보다 가장 존경스러웠다. 안정적인 것을 추구하는 나에게 절대 일어날 수 없을 것 같은 결심이었다. 그리고 그 옆을 묵묵히 지키는 김영하 작가의 아내는 그 둘 사이의 사랑과 믿음이 얼마나 확고한지 책의 많은 부분을 할애하지 않고도 알 수 있었다. 정말 괜찮은 사람인 김영하는 정말 멋진 사랑을 하고 있구나. 이탈리아의 지명이나 관광 명소들의 이름은 너무 어려워서 기억하지 못한다. 그러나 그가 기록하고 들려주는 이탈리아의 모습은 내가 좋아하는 영화 와 비슷하다. 뜨겁지만 건조해서 끈적거리지 않는 내가 좋아하는 날씨가 대부분의 사람들이 느긋하게 여유를 즐기고 일상의 소소함..

티스토리툴바