🌈 기술스택
쿠키런 소식 페이지 만들기 - [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 저장소에서 확인 가능합니다 ❤️ ..
Slick 같은 무한 루프 슬라이드 만들기
Slick 같은 무한 루프 슬라이드 만들기
2022.01.09Carousel 캐러셀은 사전적으로 회전목마라는 뜻을 가지고 있으며, 웹에서는 슬라이드 형태로 순환하면서 사용자에게 콘텐츠를 보여주는 UI를 말합니다. 일전에 카카오 이모티콘샵 클론 프로젝트를 진행하면서 메인 배너에 슬라이드 라이브러리인 Slick을 사용했었는데, 직접 구현해보면 어땠을까 하는 아쉬움이 계속 남았습니다. 그래서 이번 기회에 Slick 같은 느낌으로 무한 루프 슬라이드를 만들어 봤습니다. 구현하고자 하는 체크리스트는 다음과 같습니다. n초 간격으로 슬라이드를 자동으로 넘긴다. 이전 · 다음 버튼을 눌러 슬라이드를 앞뒤로 넘긴다. 페이지네이션 버튼을 누르면 특정 슬라이드로 이동한다. 버튼은 슬라이드 개수에 맞춰 동적으로 생성한다. (슬라이드가 1개라면 버튼 불필요) 그리고 이번에는 제가 즐겨..
간단한 페이지네이션 구현하기
간단한 페이지네이션 구현하기
2022.01.07Pagination 페이지네이션은 다수의 콘텐츠를 여러 페이지로 나누고, 이전 또는 다음 페이지로 넘어가거나 특정 페이지로 이동할 수 있는 버튼을 제공하는 기술입니다. 페이지네이션은 공통된 주제로 묶은 글의 목록을 보여주는 게시판과 같은 곳에서 많이 사용되고 있습니다. 비슷한 목적의 기술로 무한 스크롤도 있는데, 이에 대한 장단점은 이전 포스트에서 다루었으니 본문에서는 페이지네이션의 장단점을 살펴보겠습니다. 페이지네이션의 장점 사용자 의도에 맞게 페이지를 넘길 수 있습니다. 특정 항목의 위치를 간편하게 확인할 수 있습니다. 페이지네이션의 단점 사용자 입장에서 페이지 이동이라는 추가적인 행동이 발생합니다. 한 페이지에 나타나는 정보량이 제한적입니다. 페이지네이션과 무한 스크롤 모두 장단점이 존재하기 때문에..
Intersection Observer API로 무한 스크롤 구현하기
Intersection Observer API로 무한 스크롤 구현하기
2022.01.04Infinite Scroll 무한 스크롤은 말 그대로 스크롤을 무한으로 할 수 있는 기능을 말하며, 페이지의 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 동작합니다. 페이지네이션(Pagination)과 함께 많은 콘텐츠를 사용자에게 제공하는 사용자 경험(UX) 방식으로 무엇이 더 나은 방식이다라기 보다는 서로가 장단점을 가지고 있습니다. 이번에는 무한 스크롤을 만들어 보는 시간이니, 무한 스크롤에 대해서만 장단점을 살펴보겠습니다. 무한 스크롤의 장점 콘텐츠 탐색이 간단하며, 별도의 추가 동작(페이지 버튼 클릭 등)이 필요 없습니다. 모바일 환경(터치 스크린) 또는 세로로 긴 화면을 보유한 디바이스에서 강점을 갖습니다. 무한 스크롤의 단점 한 페이지 내에 많은 콘텐츠가 로드 되므로, 페이지 성능이 ..
마우스로 터치 스크롤 구현하기
마우스로 터치 스크롤 구현하기
2022.01.04Touch Scroll 모바일에서는 스크롤 가능한 요소를 터치 제스처를 통해 스크롤하면서 읽을 수 있습니다. 이를 데스크톱 환경에서도 마우스를 가지고 동일하게 동작할 수 있도록 만들 수 있는데, 웨이브나 카카오 이모티콘샵과 같은 서비스를 방문해 보면 이 기능이 어떤 것인지 확인할 수 있습니다. 모바일에서는 기본적으로 터치를 이용한 스크롤이 가능하지만, 데스크톱에서는 불가능하기 때문에 마우스, 터치, 클릭 이벤트에 대해 기능을 구현해야 합니다. 처음에는 크게 헤맸지만 만들고 보니 크게 어렵지 않더라고요. 그럼 함께 만들어 볼까요? 😆 구현할 내용은 모두 자바스크립트이기 때문에, HTML과 CSS 코드는 자유롭게 작성하셔도 됩니다. 리스트 요소를 수평 일렬로 표현하기만 하면 되는데, 만약 제가 만든 코드를 ..
실수를 되돌리는 방법들 (restore, reset, revert)
실수를 되돌리는 방법들 (restore, reset, revert)
2021.10.24마음 아프지만 실수는 누구나 하는 것 😢 Git으로 프로젝트를 관리하다 보면 종종 실수를 합니다. 오타를 낸 상태로 커밋 메시지를 저장하기도 하고, 때로는 문제가 해결되지 않은 코드를 그대로 커밋하는 경우도 있을 수 있습니다. 저도 정말 많이 겪은 실수들인데 이럴 때 되돌아가는 방법을 몰라서 항상 프로젝트를 다시 클론하거나, 완전히 지운 다음 처음부터 다시 시작하곤 했습니다. 작은 실수라도 문제이지만, 치명적인 영향을 주는 실수라면.. 생각만 해도 벌써부터 현기증이 나네요 ㅂㄷㅂㄷ 다행히 Git은 실수가 발생했을 때, 되돌릴 수 있도록 다양한 명령을 제공하고 있습니다. 최근 커밋 수정하기 변경 내역을 커밋할 때 메시지를 잘못 작성했으면 다음 명령을 사용하면 됩니다. $ git commit --amend ..
Stash로 변경 이력 임시 저장하기
Stash로 변경 이력 임시 저장하기
2021.10.24변경 이력을 잠시 저장해야 하는 경우 💦 프로젝트에서 자신이 맡은 기능을 열심히 구현하고 있는데, 중간에 다른 브랜치를 확인해야 하는 경우가 발생할 수 있습니다. 그런데 커밋을 하지 않고 이동하게 되면, 현재 브랜치의 워킹 디렉토리에서 작업 중이던 내용들이 해당 브랜치에서도 함께 보이기 때문에 반드시 커밋을 하고 넘어가야 합니다. 하지만 커밋을 하기 애매한 경우라면 정말 곤란할 것입니다. 이때 사용할 수 있는 것이 git stash입니다. 이 명령은 stash stack이라는 공간에 현재 작업 중인 내역(WIP: Working In Progress)들을 임시적으로 저장할 수 있는 명령입니다. 스택 구조를 띄고 있기 때문에 stash 명령으로 저장한 이력의 위로 나중에 저장한 이력들이 계속해서 쌓이게 됩니..
Merge와 Rebase 알아보기
Merge와 Rebase 알아보기
2021.10.24브랜치를 하나로 합치는 방법 🤔 Git을 통해 프로젝트를 진행하다 보면 기능별로 브랜치를 만들어 구현하게 됩니다. 그리고 완성이 된 브랜치는 별다른 문제가 없다면, 상위 브랜치에 병합을 해줄 수 있습니다. Git에서는 병합을 위한 명령어로 merge가 있습니다. merge는 병합하고자 하는 브랜치의 상위 브랜치로 이동한 후, git merge 명령으로 수행할 수 있습니다. 서로 다른 브랜치에서 같은 파일을 수정했을 때 발생하는 충돌(Conflict)과 같은 문제가 없다면, 브랜치들을 정상적으로 병합해 줍니다. 그리고 git log 명령으로 커밋 히스토리를 확인해보면, 다음과 같이 병합이 잘 된 것을 확인할 수 있습니다. 브랜치를 따서 작업한 후 병합을 했음에도 불구하고 로그 그래프가 깔끔하고, 병합과 관..
웹 접근성과 표준의 중요성
웹 접근성과 표준의 중요성
2021.10.22중요하지만 익숙하지 않은 접근성과 표준 😵💫 웹 접근성(Web Accessibility)이란, 웹 사이트에서 제공하는 정보를 신체적, 환경적 조건에 관계없이 동등하게 이용할 수 있도록 보장하는 것입니다. 현대의 웹 사이트는 특정 기기나 운영체제에만 최적화되어 있는 경우가 많아 사이트가 제공하는 정보를 정상적으로 이용하기 어려운 경우가 많습니다. 특히 노약자와 장애인을 포함한 사회적 약자들은 혜택을 받아야 하는 분들임에도 오히려 정보를 제공받는 면에서 소외되곤 합니다. 그렇기에 웹 접근성은 정보의 격차가 발생하는 부분을 줄여, 서로가 정보를 동등하게 얻고 공유하는 것을 궁극적인 목표로 하고 있습니다. 웹 표준(Web Standards)은 말 그대로 웹에서 표준적으로 사용되는 기술이나 규칙을 말하며, 표준..