너와 나의 프로그래밍

[JQuery] 동적으로 생성된 Textarea에 자동 높이 이벤트 바인딩 IE8부터 Textarea의 높이값이 자동으로 증가되지 않아, 자바스크립트나 제이쿼리를 사용해 자동으로 높이를 늘리는 방식을 많이 사용하고 있다. 순수 CSS를 찾아보려고 노력해 봤지만 특별히 원하는 결과가 나오지 않았다. 기존 Textarea의 Element가 DOM에 있을 때의 자동으로 높이값을 주는 방식은 이미 구글에서도 자동으로 높이값을 늘릴 수 있는 방법이 나와있지만, 동적으로 Textarea가 생성됬을 때 자동으로 높이 값을 설정 할 수 있는 방법을 찾아 모두에게 소개하려고 한다. 먼저 예시를 위해 div 태그를 하나 생성 후 Button을 이용해 클릭 했을 시 Textarea를 생성하기 위해 기본적인 Dom을 생성한다..

SelectBox의 Option의 Text color를 바꾸는 동작을 구현하는 중 IE에서만 Text의 Color가 정상적으로 변경되지 않는 문제가 발생하였다. DOCTYPE html> Document window.onload = function(){ var selectbox = document.getElementsByTagName('select')[0]; var options = selectbox.querySelectorAll('option'); document.getElementById('change').addEventListener('click', function(){ for(var i = 0; i < options.length; i++) { options[i].style.color = 'blue'..

[CSS] 여러개의 Span태그에 깔끔하게 Border 만들기. span태그에 mouseover/mouseout을 해서 빨간색 border상자가 생기고 없어지는 스크립트를 구현하고 있었다. 하지만 여러개의 Span에서 mouseover를 하면 뭔가 흔들리면서 border가 나와 멀미가 나올 지경이였다. Hi. Hello. Span태그에 존재하지 않던 border가 생겨서 1px씩 밀리는 현상이 있어, 맨 처음 Span 태그에 margin:1px을 줘서 해결하였지만, 모든 Span들의 margin값이 1씩 늘어나 내가 의도하는 구현과는 달랐다. 그래서 나온 결론이 처음으로 설정한 margin값을 지우고 border가 생길 때 마다 margin에 -1px씩 주었다. 이렇게 하면 border가 생기면서 Spa..

State는 어쩌면 React의 꽃이라고 부를 정도로 가장 중요한 부분이 아닐까 싶다. 그만큼 심오하고 깊게 파고들 필요가 있을 필요가 있다. 사실 이 부분의 대해 깊게 파보지 않은 상태지만 그 전에 State가 뭔지, 그리고 State를 어떻게 써야되는지의 대해 글을 쓰려고 한다. 물론 이번에도 정말!!! 쉽게 풀어보려고 한다. 리액트에서 State(컴포넌트)란? State의 특징이라면 Props와 다르게 동적으로 값을 수정할 수 있다는게 가장 큰 핵심이자 특징이다. Props는 부모에서 자식으로 전달되는 단방향 방식으로 수정할 수 없지만 State는 Component안에서 수정이 가능하다. State를 만들자. 제일 먼저 state를 선언해 준다. state는 여러가지 방법으로 만들 수 있는데 첫번째..

이번 시간에도 리액트를 어떻게 하면 쉽게 설명할 지의 대한 고민이 생겼다. 'Component(컴포넌트)'라는 말에서 벌써부터 어려움을 겪는 초보자들이 있을 것 같다.(물론 나도 초보지만...) 리액트에서 Component는 어떤 역활을 하는지 정말 쉽고 간단하게 설명해보려고 한다. 리액트에서 Component(컴포넌트)란? React.js 공식 홈페이지에서 번역기를 돌려 가져왔다...(개발자인데 영어를 못하는게 함정...) 혹시 Java Web을 개발하시는 분들이라면 "CustomTag"를 만드는 방식과 비슷하다고 생각한다. 결국에 자신이 만들고 싶은 템플릿을 만드는 것. "커스터마이징"을 한다고 본다. 이제, 컴포넌트가 왜 "작고 재사용 가능한 코드 조각" 이라고 하는지 알아보려고 한다. 컴포넌트를 ..

리액트에서 Component 만드는 것 보다 더 이해가 안가고 도저히 블로그를 보고 책을 찾아봐도 초반에는 이해가 안되서 따로 정리를 해보려고 한다. (내가 이해 부족인듯...) 아마 지금 이 글을 쓰면서도 내가 이해한 것과 타인이 봤을 때 다른 점이 있을 수도 있다고 생각한다. React에서 정말 중요한 Props를 최대한 쉽게 풀어보려고 글을 써본다. 시작하기 전에 준비해야 할 것. App.js(이건 굳이 생성안하셔도 있을거라 믿고...) TestComponent.js 생성 Props(Properties의 줄임말) 1. 부모에서 자식으로에게만 전달 : 이 말이 무엇이냐면, 보통 예제로 실습하는 App.js(부모)에서 TestComponent라는 자식 컴포넌트을 하나 만들고 값을 App.js에서만 값을..