허도경, limewhale

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

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

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

Api를 통해서 받아온 사용자의 데이터를 노출할 때 정보보호를 위해 특정 데이터는 전체를 보여주지 않고 일부를 가려서(Masking) 보여줘야 하는 경우가 발생합니다. 가장 좋은 방법은 Back-End서버에서 데이터가 가공처리되어 전달하고 Front에서는 전달받은 데이터를 화면에 그대로 노출시켜 주는 게 가장 좋은 방법이지만 상황에 따라서 Front에서 데이터를 가공해야 할 경우도 발생합니다. 이럴 때 공통 마스킹 Function을 만들어서 사용하면 굉장히 유용하게 사용할 수 있습니다. 💡 마스킹 처리 함수 /******************************************** * 공통 마스킹 * checkNull : 데이터 Check => 공백 | undefined | null * * ※) ..

이번 포스팅에서는 웹 개발자라면 한 번쯤은 얻어맞아 봤을 법한 CORS(Cross-Origin Resource Sharing) 정책에 대한 이야기를 해보려고 합니다. 사실 웹 개발을 하다 보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서 누구나 한 번 정도는 겪게 된다고 해도 과언이 아닙니다. 나는 단순히 Api에 데이터를 요처했을 뿐인데 돌아오는 건 데이터가 아닌 빨간 에러일 때.... 😱😱😱😱 그래서 이게 대체 무슨 에러냐고? 바로 CORS 정책을 위반해서 나온 에러라고! 그렇다면 CORS 정책이 대체 뭐길래???? 💡 CORS에 대한 기본적인 내용 우리가 겪는 CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생하는 것입니다. 개발하는 입장에서는 저 정책 때문에 신경..

💡 디자인 패턴이란? sw개발 방법을 공식화한 것 ✔ 1. MVC 패턴 Model, View, Controller의 앞글자만을 따서 만들어진 단어가 바로 mvc패턴입니다. 모델은 데이터들을 관리하고, 뷰는 화면을 그려주고, 컨트롤러가 뷰와 모델의 중개자 역할을 맡고 있습니다. 또한 사용자의 입력(input)은 컨트롤러를 통해 처리됩니다. 이렇게 각 하는 역할이 정해져 있기 때문에 각 역할에 맞는 코드를 짜도록 주의하셔야 합니다. Model : 데이터(데이터 베이스), 애플리케이션에서 사용되는 데이터와 그를 처리하는 부분 View : 모델에 포함된 데이터의 시각화(화면), 모델을 이용하여 화면을 나타냄 Controller : 사용자의 입력(input)을 받아 처리하는 부분 - 장점 동시다발적 개발이 가능(..

💡 CSS 애니메이션 다음 코드는 W3C tutorial에 있는 코드를 가져와 CSS 애니메이션으로 수정한 코드입니다. Click Me **** #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } .animation-move { animation: move 4s } /* @keyframes rule */ @keyframes move { from { left: 0; top : 0; } to { top : 350px; left: 350px; } } function ..

애자일 방법론이란? 애자일 방법론 이란, ‘Agile = 기민한, 날렵한’ 이란 뜻으로 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을 통칭해 일컫는 말로서 앞을 예측하며 개발하지 않고, 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해 프로세스 모델 방식을 말합니다. 미리 정해진 몇 개의 단계에 따라 엄격한 순서대로 이루어지는 일직선의 과정인 폭포수의 프로세스와는 비교가 많이되는 반대의 개념입니다. 애자일 방법론의 진행 과정 애자일 방법론은 계획 → 설계(디자인) → 개발(발전) → 테스트 → 검토(피드백) 순으로 반복적으로 진행되며 계획을 세운 후 다음 단계까지 기다려서 절차대로 진행하는 폭포수 모델과 달리 먼저 진행 후 분석..

요즘 핫한 React와 Vue 모두 'Vertual Dom' 이라는 것을 사용합니다. 그럼 도대체 버추어 돔이 무엇이길래 요즘 가장 핫하고(스벨트 미안: 그리고 참고로 스벨트는 버추어 돔을 사용하지 않습니다) 사용빈도가 높은 두 프레임워크에서는 버추어 돔을 사용할까요? 우선 버추어 돔(Vertual Dom)을 이해하기 전에 선행 지식으로 알아두면 좋은 것은 브라우저의 동작원리입니다. 브라우저의 동작원리를 모른다고 해서 버추어 돔을 이해하지 못하는 것은 아니지만 확실히 브라우저의 동작원리를 이해하고 있으면 왜 버추어 돔을 사용하는지와 버추어 돔이 무엇인지 좀 더 명확하게 이해하실 수 있습니다. 브라우저의 동작원리를 심도있게 알고 싶으시다면 이전에 작성한 브라우저는 어떻게 동작하는가? 를 먼저 읽어 보시고 ..

💡 REST API 란 REST API는 웹에서 데이터를 전송 및 처리하는 방법을 정의한 인터페이스를 말합니다.. 모든 데이터 구조와 처리방식은 REST에서 URL을 통해 정의되며, 그래서 매우 직관적으로 이해할 수 있습니다. REST API에서 REST는 (Representational State Transfer)의 약자로 소프트웨어 프로그램 아키텍처의 한 형식입니다. 즉, 자원을 이름 (자원의 표현)으로 구분하여 해당 자원의 상태 (정보)를 주고받는 모든 것을 의미하며 월드 와이드 웹 (WWW)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식입니다 REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 ..