본문 바로가기

전체 글35

State&Event 🔔 State 상태라는 뜻이며 단어 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다. state는 화면에 보여줄 컴포넌트의 UI정보(상태)를 지니고 있는 객체이며 얼마든지 데이터(객체)가 변경될 수 있다. state는 두 가지 종류가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다. 클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은 JSX요소가 return문 안에 들어 간다 컴퍼넌트에 state를 설정할 땐는 constructor메서드를 작성하여 설정한다. state 객체 안에는 여러 값이 있을 수 있다 🔔 Props 속성이라는 뜻으로 컴포넌트의 속성값이다. 부.. 2021. 2. 9.
"String " ( split, slice ) 1. split() string 객체를 여러개의 문자열로 나눌 수 있다 . const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words[3]); // "fox 단어도 쪼갤 수 있다. let str = "abcdefg" let word = str.split('') console.log(word); //[ a, b, c, d, e, f, g ] 주의해야할 점은 split은 빈 문바열이 주어졌을 때 빈 문자열을 포함한 배열을 반환한다. const word = ""; const split = word.split(); console.log(split); // [" "]; 2.slic.. 2021. 2. 7.
React의 등장! 처음 Web Application의 발전으로 규모가 커지고 다양한 UI,UX를 구현하고 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Framework(Library)가 등장하게 되었다. 그 중에서 가장 많이 쓰이는 세 가지가 Angular, Vue, React이다. 앵귤러와 뷰는 프레임워크에 해당하지만 react는 view만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리를 함께 사용한다! 💡 React란? 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Java Script 라이브러리 이다. 가상 돔을 통해 UI를 빠르게 업데이트한다. (*가상돔? 이전 UI 상태를 메모리에 유지하고, 변경될 UI의 최소 집합을 계산하는 기술이다. ex) 전체 중.. 2021. 1. 27.
css) property 작성하는 순서 Layout Properties (position,float,clear,display) Box Model Properties (width, height, margin, padding) Visual Properties (color, background, border, box-shadow) Typography Properties (font-size, font-family, text-align, text-transform) Misc Properties (cursor, overflow, z-index) 2021. 1. 24.
Instagram 로그인버튼 색 바꾸기 🔔ID와PW 창 만들기 html에서 input테그를 사용하여 pw와 id를 창을 만들었다 🔔ID와 PW값을 받을때 버튼색 바꾸기 JS는 DOM을 이용하여 HTML에 접근할 수 있다. 처음 생각했던 로직은 [ ID와PW값을 받는다 -> 받았을때 button색은 바뀐다 ] 이런식의 단순한 로직만 생각했지만 내가 생각했던 것 보다 더욱 더 세밀하고 치밀한 구조로 로직을 세웠어야 했다 일단 id와pw, button을 dom객체로 접근하여 변수선언해주었다 그리고 로그인버튼색이 변화하려면 id와 pw값이 들어왔을때라는것을 생각하고 사용자가 키보드를 누르고 글자가 입력되고 키보드에서 손을 떼는 순간 (key up) 과 input창에 아이디와 비번을 입력할때 ( handleinput ) event가 일어난다 (addE.. 2021. 1. 24.
배열조작하기 (push,unshift,pop) 1. 요소추가하기 cities라는 변수에 빈 배열을 할당한 후 원하는 위치 마음대로 요소를 할당할 수 있다. let cities = []; cities[0] = "서울"; citiees[6] = "부산"; console.log(cities); 아무것도 할당하지 않는다면 undefined라고 출력된다. ["서울", undefined, undefined,undefined,undefined,undefined,"부산"] 만약에 수정하고 싶을땐 아래와 같이 배열의 인덱스에 접근하여 값을 할당할 수 있다 cities[0] = "경기도" ; console.log(cities); // ["경기도", undefined, undefined,undefined,undefined,undefined,"부산"] 2. push 와 .. 2021. 1. 24.

티스토리툴바