허도경, limewhale

단순한 정보를 제공하던 정적인 웹 화면에서 이제는 정보제공은 물로 다양한 인터렉션과 애니메이션 효과까지 적용된 웹 화면들이 늘어나고 있습니다. 오히려 정적인 웹 화면을 찾는 게 더 힘든 것 같다는 생각이 들 정도로 회사를 대표하는 대부분의 사이트에 들어가 보면 웹 사이트들이 크고 작은 애니메이션 효과가 적용되어 있습니다. 그 중 가장 많이 사용되는 효과는 단연 스크롤 애니메이션일거라 생각됩니다. 스크롤 애니메이션이란 웹 화면의 스크롤이 이벤트가 발생해야 하는 웹 화면의 위치에 도달하였을 때 미리 정의해놓은 이벤트 효과가 발생되는 효과를 말합니다 애니메이션 효과를 적용하는 방법은 대표적으로 인터섹션옵저버를 사용하거나 윈도우의 스크롤 값과 이벤트가 적용되어야 하는 타깃의 offset값을 비교해서 애니메이션을..

이전의 단순한 정보를 제공하던 동적이던 웹 화면은 이제는 더 이상 찾아보기 힘듭니다. 단순 정보만을 제공하는 웹 화면이라 할지라도 사용자의 시선을 끌어들이고 유저의 흥미와 재미요소를 위해서 점점 다양한 애니메이션이 적용된 웹 화면들이 생기고 있습니다. 그럼 웹 화면에 일반적으로 애니메이션 효과를 주기 위해선 어떻게 할까요? html로 화면을 구성할 때 가장 일반적인 방법은 Jquery를 사용하여 animate 효과를 주거나 Css3 속성을 사용하여 애니메이션 효과를 주는 방법입니다. 그럼 우리는 트윈맥스를 사용해야 하는 이유가 뭘까요? GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 Jquery의 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 또한 Jquery보다 가볍고 ..

📘 반응형 웹이란? 웹 사이트는 크게 적응형과 반응형으로 나눌 수 있습니다. 아니 적응형은 뭐고 반응형은 또 뭔가요??🥶🥶🥶 적응형은 사용자의 환경에 최적화 되게 PC와 모바일 환경을 구분해서 두 개의 웹 사이트 주소로 각각 구성된 화면을 보여줍니다. 예를 들어 모바일 사용자가 네이버에 접속하면 m.naver.com에 접속되고 PC 사용자는 www.naver.com 주소로 접속 됩니다. 반면 반응형은 웹 사이트 크기에 따라서 화면의 UI가 변경되면서 사용자에게 최적화된 화면을 제공해주는 방식입니다. 두 개의 가장 큰 차이점은 하나의 소스로 관리되며 화면의 브라우저 크기에 맞게 최적화된 UI를 제공하는가(반응형) 아니면 두 개의 소스로 관리하면서 사용자에게 모바일, PC의 최적의 화면을 각각 제공하는가의 ..

📖 타입스크립트를 사용해야 하는 이유 ⭐ Javascript 자바스크립트는 매우 유연한 언어라 에러를 사전에 보여주지 않기 때문에 코드에서 오류가 발생할 가능성이 높아집니다. // 예시) 🚫 숫자 배열 + false [1,2,3,4] + false → '1,2,3,4false' // 배열이 사라지고 string으로 바뀜 // 🚫 함수의 인자가 잘못 들어가도 실행됨 function add(a, b) { return a + b } add(1) → NaN //return값이 NaN일 뿐, 에러가 나지 않음 const a = { a: "A" }; a.hello(); // 선언 되지 않은 함수를 호출할 때: 실행 시 에러 발생(실행 전에 에러 감지 불가) ⭐ Tyescript 타입 안정성과 사전에 에러를 발생시켜..

좋은 코드란 무엇인가? 이 질문은 IT업무를 하고 개발을 하는 사람이라면 누구나 한 번쯤 고민하고 나아가서 그렇게 하기 위해 노력합니다. 하지만 true/false처럼 명쾌한 답이 있지 않고 좋은 코드는 무엇인가요라고 동료들에게 물어본다면 '버그 없이 잘 돌아가는 코드', '이해하기 쉬운 코드', '재사용성이 좋은 코드' 정도의 추상적인 답변을 들을 가능성이 높습니다. 다시 처음의 질문으로 돌아가 봅시다. 좋은 코드란 무엇일까요? 정말 사람들의 말처럼 코드가 우아하고 섹시하다면 그 코드는 좋은 코드일까요? 정말 코드의 재 사용성만 높다면 그 코드는 좋은 코드일까요? 코드가 최신 기술 스펙에 맞게 구현되어 있으면 그 코드는 좋은 코드일까요? 어찌 보면 모두 맞는 말이지만 그 코드가 어떻게 구현되었나에 좋은..

이전에 작성한 프론트 개발의 시간을 덜어주는 유용한 HTML(Part 1)에 이어서 두 번째 시간을 가져보도록 할게요. 그럼 바로 시작하겠습니다. 💡 details 게시판의 Q&A와 같은 토글 메뉴(슬라이드 메뉴)를 만들기 위해선 JS의 도움이 반드시 필요했습니다. 하지만 이젠 HTML과 CSS 만으로 토글 메뉴를 구현할 수 있습니다. ✅ details 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용됩니다., 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다. 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화..

웹을 구현함에 있어서 HTML과 CSS는 절대로 빠질 수 없는 부분입니다. 더욱이 CSS의 기능은 이전처럼 디자인 꾸밈 기능만 담당하던 시절과는 다르게 그 기능이 점점 강력해지고 있으며 JS로만 구현이 가능하던 기능들까지도 일부 기능들은 HTML과 CSS로만 구현이 가능하게 되어가고 있습니다. 대분분의 프론트 개발을 하는 많은 분들이 자바스크립트와 React(난 사실 라이브러리🤣), Vue와 같은 프레임워크만을 중요하다고 생각하고 기본이 되는 HTML, CSS는 가볍게 생각을 하는 부분이 있습니다. 하지만 오늘 알아볼 기능들을 살펴보게 되면 HTML, CSS의 기능에 놀라게 될 거라 생각합니다. 💡 @supports CSS3를 적용하려다 보면 브라우저마다 지원하는 스펙이 달라서 우리는 해당 브라우저에서 ..

프론트 개발에 관해서 프로그래밍을 하다 보면 어디선가는 반드시 마주치게 되는 단어가 있습니다. 바로 웹팩, 바벨, 폴리필입니다. 각 단어의 의미와 역할을 정확히 알고 있다면 상관없지만 어렴풋이 기능이 다르다고만 생각했거나 각 기능에 대해 명확히 설명할 수 없다면 이 글을 읽으면 많은 도움이 될 거 같습니다. 참고로 웹팩, 바벨, 폴리필은 프론트 면접에서도 자주 물어보는 용어입니다. 📖 폴리필(Polyfill) 폴리필을 사전에서 찾아보면 충전솜이라는 의미를 가지고 있습니다. 베개나 이불의 솜이 부족하면 우리는 충전 솜을 이용하여 부족한 부분을 채우는 역할을 합니다. 폴리필의 역할은 사전 의미처럼 부족한 부분을 채워주는 역할을 합니다. 그러면 부족한 것은 무엇이며 무엇을 채워주는가?라는 의문이 들 수 있습니..

이 글을 쓰는 저 역시 함수형 프로그래밍에 대하여 들어만 보았을 뿐 실제로 코드를 작성해서 프로젝트에 적용해본 적은 없는 것 같습니다. 그럼에도 프로젝트에서 실제로 사용하기도 하고 어떠한 것을 알고 있음과 없음은 큰 차이가 있고 누군가는 이 글을 읽고 함수형 프로그래밍의 매력을 느껴 새롭게 함수형 프로그래밍을 배우는 계기가 될지도 모릅니다. 📖 프로그래밍 패러다임(Programming Paradigm)] 함수형 프로그래밍이 무엇인지 이해하기 전에 프로그래밍 패러다임에 대해 잠시 알아보려고 합니다. 프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할지 결정하는 역할을 하는데 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각..

모바일 작업을 진해할 때 가장 대표적인 안드로이드와 IOS(아이폰)의 환경을 최대한 비슷하게 구현해야 합니다. 하지만 의외로 IOS의 표준 동작은 우리가 예상하는것과는 다르게 동작할 때가 왕왕 있습니다. 우리는 숫자값을 입력받기 위해서 사용하기 위해 필드를 사용합니다. 안드로이드에서는 우리가 원하는 정상적인 방법으로 숫자 키패드가 적용되는데 IOS의 경우 기본적으로 상단에 숫자행으로 수정되어 특수문자가 혼용된 키보드가 기본적으로 적용되도록 되어 있습니다. 이는 숫자값만 필요한 필드에서 굉장히 불편한 UI 구조일 뿐 아니라 안드로이드와 IOS의 키패드가 다르게 동작된다는 점에서 사용자의 UX적인 측면에서도 좋지 않습니다. 이전에는 이런 경우 스크립트를 이용하여 강제로 키패드 패턴을 변경하는 방법을 사용하였..