IT 개발 블로그

# frame input에 내용을 입력하면 list에 추가되는 형식으로 만들것. list 옆에 삭제 버튼도 구현할것이다. # 순서 input에 입력할 todo와 입력된 todo에 관한 state를 만든다. state는 string으로 처음에 빈문자열로 받을것이다. 그리고 return문에 div와 input을 만든다. 이 input의 type은 text이고 placeholder도 만들어준다. 그리고 list를 추가할 button도 하나 만들어준다. input의 value는 todo로 받을 것이고 , onchange이벤트를 하나 만들어서 input의 입력값이 변하면 받을 함수를 만든다. onchange함수는 event가 발생하면 setTodo함수가 실행된다. 이 setTodo함수는 input에 입력받은 값이..

# Effect란? 기본적으로 React.js는 component를 새로고침한다. 하지만 우리가 개발을하다보면 특정 component만 변하게하고 싶을수도 있다. 이때 필요한것이 useEffect! => state가 변화할때 code를 재실행시키는것! # useEffect()의 기능(1) 특정 component 사용 확인을 하기위해 counter와 keyword value를 만들어 놓았다. 그리고 click을하면 counter수가 증가하고, input에 keyword를 입력하면 console에 문장이 찍힌다. useEffect(첫번째인자,[dependencies])를 사용하여 첫번째인자에는 실행하려는 코드 두번째인자에는 지켜보려는코드를 넣어주면 된다. 첫번째 useEffect는 대괄호에 아무것도 받지 않..

1. state (1) button:active => 버튼을 클릭했을때 (2) button:hover => 마우스를 올렸을때 (3) button:focus; => active와 비슷하다고 생각할수 있는데 키보드를 눌렀을때 (4) a:visited{ color:tomato; } =>링크를 방문하면 색이 tomato 로 바뀐다. (5) focus-within => focused인 자식을 가진 부모 element에 적용된다. 2. transition 어떤 상태에서 다른 상태로 가는 변화 과정을 애니메이션으로 보여주는 것 Go home a태그에 마우스를 올렸을때의 변화과정을 애니메이션으로 보여주는 코드 color,background-color를 대조시켜서 변화를 선명히 느낄 수 있다. ease-in-out을 써..

그동안 의식하고 보지 않았지만 우리가 자주 접속하는 웹사이트의 구조는 기본적으로 Title, text, image로 이루어져있다. 웹사이트는 아주 많이~ interactive 할수도 있고, 타임즈같은 기사 사이트처럼 Title, text, image 로만 이루어질수도 있다. 우클릭해서 페이지 소스를 보면 다양한 들이 text를 감싸고 있다는 것을 알 수 있다. text로 이뤄진 파일들을 복사해서 프린트한다고 아무일도 일어나지 않는다..! 그렇다면 저 많은 소스들을 복사해서 브라우저에 실행시키면 어떤일이 생길까..? 그렇다..! 브라우저는 내가 사용하는 코드를 읽고 웹사이트를 만들어준다..! 이 text들은 사실 html css javascript로 이루어져있다..! 다음부터 본격적으로 HTML을 시작해보..