허도경, limewhale

React를 최근에 공부를 하고 있습니다. 요즘은 너무나 많은 자바스크립트 라이브러리가 나와 있고 이미 실무에서도 해당 라이브러리를 많이 사용하고 있습니다. 이전에 Vue를 공부하면서 포트폴리오도 Vue로 만들기도 했지만 혼자서 공부를 한다는 것에 한계가 있었고 아무래도 혼자서 공부를 하며 업무와 병행하다 보니 공부를 한다는 게 생각처럼 쉽지 않았습니다. 이 글은 큰 목차로 보면 UI 개발 카테고리에 포함되어야 하는 것이 맞지만 React는 너무나 큰 생태계를 가지고 있고 React만으로도 다루어야 되는 이야기 목차가 많다고 생각하여 별도의 항목으로 나누게 되었습니다. 이 글은 저와 같이 React를 공부를 하고 싶은데 막연히 어떻게, 또 어디서부터 시작을 해야 되지? 하는 의문과 불안감 등의 고민을 가..

이전에 CSS 방법론 중 하나인 BEM에 대해서 정리를 한 적이 있습니다. 현재 CSS방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 자세한 방법론에 대한 서술보다는 해당 방법론이 어떻게 다른지 또 어떠한 장점과 단점을 가지고 있는지 알아보도록 할게요. 3가지 방법론 중 무엇하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는 게 더 중요하다고 생각합니다. 그럼 우선 원론적인 질문을 하나 드릴게요. 왜 CSS방법론을 사용하는 걸까요? 잠깐씩 생각해보고 마저 아래의 글을 읽어가면서 본인의 생각과 일치하는지 보세요. 우선 제가 생각하는 방법론을 사용하는 이유는 나열해 보자면 협업 시 ..

화면이 웹에 비해서 상대적으로 작은 모바일이나 쇼핑몰처럼 다양한 상품을 보여줘야 하는 사이트에서는 화면이 길어지게 되면 사용자가 다시 화면의 최상단으로 이동하기가 굉장히 힘들어집니다. 그래서 이런 단점을 보완하기 위해 특정 버튼을 클릭하게 되면 해당 Page의 최상단으로 이동하는 기능을 구현하여 사용자에게 편의성을 제공하게 됩니다. $('.btn-top').on('click', function(){ $('html, body').animate({scrollTop:0}, 300);} ); 해당 기능에 조금 더 인터렉티브한 효과를 주고 싶으면 easing플러그인을 사용하여 다양한 텐션의 느낌으로 모션 효과를 사용할 수 있습니다. easing은 JQuery에서 animation을 사용할 때 해당 animatio..

우리는 회사를 다니게 되면 조직에 속한 한 명의 구성원이 됩니다. 각자의 서로 다른 구성원 한 명 한 명이 모여서 하나의 조직을 이루게 되죠. 개발자, 디자이너, 기획자 등 각자 다른 직군에서 서로 하나의 목표를 향해 항해를 시작합니다. 누군가는 중간에서 항해를 멈추고 내릴 수도 있고 누군가는 새롭게 항해하는 배에 탑승할 수도 있습니다. 구성원이 바뀌고 사람들의 생각이 다르고 하는 업무가 다르기 때문에 우리의 멋진 여정을 이루려면 서로간에 대한 규칙(규율)이 필요하다고 생각합니다. 아래의 글은 직군, 직책에 관계 없이 모두에게 적용되며 구성원들이 더 멋진 항해를 하기 위해선 반드시 필요하다고 생각합니다. 모든 실천은 나부터 시작하는 게 가장 중요합니다. 1. 차별, 평가를 하지 않아요. 다양성을 인정하고..

UI개발을 하다보면 의도치않게 전달받은 데이터 형태가 String(문자형)데이터인데 연산이 필요한 경우가 발생하게 됩니다. 이럴때는 String(문자형) 데이터로 바로 연산이 불가능하기 때문에 String(문자형) 데이터를 Number(숫자)로 바꾸어서 처리를 해야 합니다. 그렇지 않으면 문자형 데이터에 숫자값을 넣었다고 해도 문자값 형태끼리 값을 더하게 되면 해당값은 숫자가 아닌 문자로 인식을 하고 두 문자데이터는 문자형으로 결합을 하게 되기 때문입니다. 지금은 무슨말인지 이해하지 못해도 괜찮습니다. 예제를 통해 확인하면 쉽게 이해될 수 있어요. 그러면 String(문자형) 데이터를 Number(숫자) 형태의 값으로 바꾸기 위해서는 무엇을 해야 할까요? 바로 parseInt 함수를 사용하면 됩니다. p..

Math 객체 와 Date 객체를 알아보았습니다. 이번에는 String 객체를 알아볼께요. 글자를 자르거나 필요한 글자를 탐색, 원하는 글자만 가져오거나 문자열의 결합등 (이 놀라운 모든 구성이 초특가! 3만9천9백원 ) 문자열로 할 수 있는 모든것을 할 수 있습니다. document.write(str.length); // 공백도 문자열로 인식, 결과 : 14 document.write(str.toLowerCase()); // 영문자를 소문자로 바꿔 변환. [결과 : jquery study !] document.write(str.toUpperCase()); // 영문자를 대문자로 바꿔 변환. [결과 : JQUERY STUDY !] document.write(str.indexOf("y")); // 처음인덱..

특정 값을 확인할 때 우리는 3가지 항목을 사용하게 됩니다. console.log alert confirm 3가지 항목은 비슷한 성격을 가지면서도 다릅니다. 콘솔은 개발자 도구에서만 값이 확인이 가능하기에 데이터 값을 테스트할 때 주로 사용하게 되고 alert은 사용자에게 값을 팝업창으로 안내해주고 역할로서만 기능이 끝이 납니다. 컨펌(confirm)은 안내(질문)문에 대한 대답을 유저가 선택을 할 수 있게 구성되어 있습니다. 위의 화면처럼 [확인] 버튼을 클릭하면 true값을 반환하고 [취소]를 누르면 false값을 반환하게 되는데 우리는 이를 이용하여 다양하게 이벤트를 처리할 수 있습니다. onclick 이벤트를 사용하여 개별적으로 값을 처리할 경우 function에 자신의 this값을 값이 넘겨주어..

스크립트를 이용하여 시간과 날짜를 값을 가져오려면 내장 함수인 Date 객체를 이용해서 값을 호출하여야 합니다. 이번에 자주 사용하는 Date 객체에 대해서 정리하고 이해하는 시간이 되었으면 좋겠습니다. Date 객체에 대해 이미 알고 있거나 다른 객체도 공부하고 싶으신 분들은 제가 정리한 String 객체와 Math 객체도 살펴보면 좋을거 같아요. 예제 1. 날짜 객체를 이용하여 오늘 날짜를 구하기 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth(); var day = today.getDate(); var week = today.getDay(); var todayWeek = ['일', '월','화','수..

데이터(Data)의 값을 잘라서 다시 자신이 원하는 값만 다시 추출하는 방법은 생각보다 많이 사용됩니다. 데이터의 가공에도 필요하고 전달받은 값 중 특정값만 필요한 경우에도 사용하게 되죠. 문자열을 자르는 방법을 이해하고 정리한다면 분명 코드를 사용함에 도움이 될 거라 생각합니다. 문자열을 자르는 가장 일반적인 방법은 자바스크립트의 [substr] 를 이용하는 방법입니다. [substr]를 사용하여 잘라낼 문자열 위치의 가장 앞쪽 시작 값은 1이 아닌 0부터 시작합니다.(전에도 한번 말씀드렸지만 컴퓨터는 0부터 인식합니다.) 즉, 0,1,2.. 순서로 시작한다는 말인데 'apple' 이라는 단어를 예로 들면 a가 0, p가 1이 되는 것이에요. 1. 문자열을 앞에서 순차적으로 자르는 방법 기본 방식은 '..

숫자 데이터를 전달받아서 값을 절삭하거나 반올림 등의 가공이 필요한 경우 자바스크립트의 기본 함수인 Math 객체를 사용하게 됩니다. 간단한 예제를 통해서 한 번씩만 해보신다면 쉽게 이해가 되실 거예요. Math 객체에 대해 이미 알고 있거나 다른 객체도 공부하고 싶으신 분들은 제가 정리한 String 객체와 date 객체도 살펴보면 좋을거 같아요. document.write(Math.max(52, 273, 103, 57, 32)); // 최대값, 결과 : 273 document.write(Math.min(3 , 5, 1, 4)); // 최소값, 결과 : 1 document.write(Math.round(3.4)); // 반올림, 결과 : 3 document.write(Math.ceil(3.2)); //..