🌈 기술스택/Web Basic
쿠키런 소식 페이지 만들기 - [4] Scss 적용하기
쿠키런 소식 페이지 만들기 - [4] Scss 적용하기
2022.01.19Sass [Scss] CSS를 사용하는 것은 정말 쉽지만, 프로젝트의 규모가 커짐에 따라 불필요한 선택자의 남발이 발생하는 등 아쉬운 상황이 많았습니다. 이런 애로사항 때문에 CSS의 문법과 기능을 확장한 전처리기(Preprocessor)라는 것들이 등장했습니다. 전처리기에는 Sass, Less, Stylus 등이 있는데, Sass가 많이 사용되고 있습니다. 그래서 본 시리즈에서는 프로젝트에 Sass를 적용해 볼 예정입니다. Sass(Syntactically Awesome Style Sheet)는 문법적으로 정말 뛰어난 스타일 시트라고 합니다. 얼마나 뛰어나길래 이런 이름을 가지고 있는 걸까요? 한 번 CSS와 Sass의 문법을 비교해 봅시다. /* test.css */ ul { display: flex..
쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
2022.01.19Babel 자바스크립트는 현재도 계속해서 새로운 문법과 함께 꾸준히 발전하고 있는 언어입니다. 이렇게 빠르게 발전하는 자바스크립트를 지원하기 위해 크롬, 엣지, 파이어폭스 같은 모던 브라우저들도 ECMAScript 명세를 열심히 반영하고 있습니다. 하지만 인터넷 익스플로러(IE)와 같은 구형 브라우저들은 지원이 끊겼기에 더 이상 업데이트되지 않습니다. 그럼에도 아직까지 사용하고 있는 사용자층이 있기에 구형 브라우저에서도 최신 문법이 지원될 수 있도록 해야 합니다. 이를 위해 우리는 바벨(Babel)이라는 트랜스파일러의 도움을 받을 계획입니다. 트랜스파일러(Transpiler)란 어떤 언어로 작성된 코드를 비슷한 수준의 코드로 바꿔주는 도구입니다. 최신 문법의 코드가 어떤 식으로 변경되는지 확인해 보고 싶..
쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
2022.01.19Devtools 오늘날에는 프론트엔드의 코어 기본기(HTML, CSS, JavaScript)와 함께 개발 도구를 능숙하게 다루는 것 또한 중요해졌습니다. 구형 웹 브라우저와의 호환성을 위해 트랜스파일러의 도움을 받기도 하고, 수많은 리소스를 하나의 파일로 압축해 주는 번들러의 도움을 받기도 합니다. 이 외에도 프론트엔드에서 사용되는 개발 도구는 정말 많습니다. 그래서 이번 쿠키런 소식 페이지 만들기 시리즈를 작성하게 되었고, 이전 장에서 만든 쿠키 뉴스에 개발 도구를 같이 적용해 보면서 익숙해지시면 좋겠습니다. 이전 글인 화면 만들기에 이어서 진행되니, 되도록이면 시리즈 첫 장부터 진행해 주세요 😆 개발 도구 설치는 모두 npm으로 진행하니, 진행에 앞서 Node.js를 설치해 주세요. (LTS v16 ..
쿠키런 소식 페이지 만들기 - [1] 화면 만들기
쿠키런 소식 페이지 만들기 - [1] 화면 만들기
2022.01.18프론트엔드 기본기를 함께 익혀봐요 🚀 프론트엔드의 코어 기본기는 HTML, CSS, JavaScript 이렇게 세 가지가 있습니다. 기본의 중요성은 백날 말해도 모자라지 않은데요. 그런데 이들과 함께 중요한 것들이 더 있습니다. 그중에서도 개발 도구를 다루는 것이 있습니다. 요즘은 리액트와 같은 라이브러리를 사용하는 방법도 알아야 하지만, 웹팩 또는 바벨과 같은 도구를 설정하고 적용하는 것 역시 알아야 합니다. 그래서 지금까지 공부한 기본기들을 이용해 시맨틱 한 쿠키런 소식 페이지를 만들고, 많이 사용되는 도구들을 하나씩 적용해보려 합니다. 저도 아직은 개발 도구를 다루는 것이 미숙하지만, 이번 기회에 같이 만들면서 연습해봐요! 예제에 사용된 코드와 이미지는 GitHub 저장소에서 확인 가능합니다 ❤️ ..
웹 접근성과 표준의 중요성
웹 접근성과 표준의 중요성
2021.10.22중요하지만 익숙하지 않은 접근성과 표준 😵💫 웹 접근성(Web Accessibility)이란, 웹 사이트에서 제공하는 정보를 신체적, 환경적 조건에 관계없이 동등하게 이용할 수 있도록 보장하는 것입니다. 현대의 웹 사이트는 특정 기기나 운영체제에만 최적화되어 있는 경우가 많아 사이트가 제공하는 정보를 정상적으로 이용하기 어려운 경우가 많습니다. 특히 노약자와 장애인을 포함한 사회적 약자들은 혜택을 받아야 하는 분들임에도 오히려 정보를 제공받는 면에서 소외되곤 합니다. 그렇기에 웹 접근성은 정보의 격차가 발생하는 부분을 줄여, 서로가 정보를 동등하게 얻고 공유하는 것을 궁극적인 목표로 하고 있습니다. 웹 표준(Web Standards)은 말 그대로 웹에서 표준적으로 사용되는 기술이나 규칙을 말하며, 표준..
Flex 대신 Grid를 사용해 레이아웃 만들기
Flex 대신 Grid를 사용해 레이아웃 만들기
2021.10.21레이아웃을 만드는 또 다른 방법 요즘은 레이아웃을 만들 때, 주로 flex 속성을 사용합니다. 하지만 flex를 사용하면서 종종 아쉬운 상황들이 몇 가지 발생하는데, 기본적으로 flex는 1차원에 대한 레이아웃 시스템이기 때문입니다. 특히 정렬과 관련해 의도한 대로 동작하지 않아 억지로 맞추는 경우(CSS Trick)를 들 수 있습니다. 이런 상황에서 우리는 grid를 고려해볼 수 있습니다. grid는 기본적으로 가로/세로 2차원에 대한 레이아웃 시스템이며, 복합적인 레이아웃 구조를 만들 때 flex보다 유용합니다. Grid Box와 달리 Flex Box는 요소들을 1차원적으로 정렬하는 컨테이너입니다. Grid 시작하기 그리드도 플렉스와 동일하게 display 속성이 적용된 요소를 컨테이너(Contain..
BEM의 10가지 일반적인 문제와 이를 피하는 방법
BEM의 10가지 일반적인 문제와 이를 피하는 방법
2021.10.18본문은 Battling BEM CSS: 10 Common Problems And How To Avoid Them을 입맛대로 번역해 옮긴 글입니다. 원문 그대로 번역한 것이 아닌, BEM을 사용했을 때 발생할 수 있는 문제들을 해결하는 아이디어에 대해 개인의 생각도 일부 반영되어 있습니다. 그리고 본문에는 BEM 방법론에서 사용되는 용어들이 자주 등장하기에, BEM이 어떤 것인지 미리 알아두고 보면 좋습니다. BEM은 충분히 매력적인 방법론이지만, 사람들은 저마다 취향이 다르듯, 이를 환영하지 않는 개발자도 많습니다. 대표적인 이유로 BEM은 클래스 이름을 통한 모듈화를 하기 좋지만, 태그의 중첩이 깊어질 수록 클래스 이름이 지나치게 길어지는 문제가 있습니다. 그래서 원문의 작성자는 BEM의 딜레마에 대한..
웹 브라우저의 렌더링 과정 알아보기
웹 브라우저의 렌더링 과정 알아보기
2021.10.05렌더링 과정을 아는 것이 중요한 이유 우리는 웹사이트에 접속할 때 단순히 주소창에 주소를 입력하거나, 링크가 걸린 텍스트를 누르기만 하면 됩니다. 하지만 반대로 웹 브라우저의 입장에서는 사용자가 원하는 화면을 보여주기 위해 내부적으로 많은 과정을 수행합니다. 서버로부터 웹 페이지와 관련된 리소스(HTML, CSS, JS)도 불러와야 하고, 이를 해석도 해야 하며, 어떤 것만 보여줄 지도 결정해야 합니다. 이러한 과정을 거치며 만들어진 결과물을 최종적으로 사용자에게 보여주게 되는데, 이 과정을 통틀어 렌더링(Rendering)이라 합니다. 렌더링을 하는 프로세스 자체는 간단하지만, 잦은 렌더링은 성능 저하를 일으킵니다. 그렇기 때문에 웹 브라우저의 렌더링 과정을 잘 이해하고 있으면, 렌더링 시 필요한 자원..
BEM 방법론에 따라 클래스명 짓기
BEM 방법론에 따라 클래스명 짓기
2021.10.04BEM Methodology BEM은 클래스 이름에 Block, Element, Modifier를 함께 작성하는 방법론으로, 개발자들로 하여금 HTML과 CSS의 관계에 대한 이해가 쉽도록 하는 목표를 가지고 만들어진 명명 규칙입니다. 정말 쉽기 때문에 공식 사이트에서 확인하셔도 좋지만, 본문을 통해 가볍게 소개해 보려 합니다. 아래 코드는 BEM 스타일을 적용한 CSS 코드입니다. /* 컴포넌트 요소(Block) */ .card {} /* 컴포넌트에 의존성이 있는 요소(Element) */ .card__image {} .card__description {} .card__button {} /* 컴포넌트의 스타일 수정자(Modifier) */ .card--success {} .card--back {} Bl..
script 태그는 어느 곳에 위치하는 것이 좋을까?
script 태그는 어느 곳에 위치하는 것이 좋을까?
2021.10.02자바스크립트를 불러오는 방법 HTML 문서를 작성하면서 자바스크립트 파일을 포함시켜야 할 때, 가장 기본적인 방법으로 head 안에 script 태그를 넣는 방법이 있습니다. 대충 아래와 같은 코드가 나오겠지요? 위 코드에 의해 우리는 HTML 문서에서 자바스크립트 코드를 불러와 사용할 수 있습니다. 하지만 이 코드에는 약간의 문제가 있는데, 이를 이해하기 위해서는 HTML 문서가 파싱(Parsing)되는 과정을 알아야 합니다. HTML 문서는 위에서부터 아래로 파싱이 진행되며, 중간에 script 태그를 만나면 파싱을 잠시 중단하고 스크립트를 먼저 불러오게 됩니다. 그리고 이 과정이 끝나면, 다시 HTML 파싱을 재개하는 식으로 동작합니다. 동작 과정을 그림으로 보면 다음과 같습니다. 언뜻 보기에는 큰..