전체 글 (41) 썸네일형 리스트형 State - component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props를 구현하는 state가 철저하게 구분되어 있어야 한다. - component가 실행될 때 constructor 함수가 존재하면 가장 먼저 실행되어 초기화를 담당한다. - constructor(props) { super(props); this.state = { subject:{title:'WEB', sub:"World Wide Web!"} } } → subject의 state값을 위와 같이 설정 - → App component의 state값을 Subject component의 props값으로 준다. → 상위 component의 상태를 하위 component로 전달하고 싶을 때, 상위 compon.. Component React: JavaScript Library For Building User Interfaces Component: 사용자가 정의한 태그 (사용자가 만든 태그) → props를 input으로 하고 react element를 output으로 하는 함수 → component를 작성하면, 1) 가독성을 획기적으로 높일 수 있다. (복잡한 코드를 태그만을 명시하는 것을 통해 숨길 수 있다.) 2) 한 번 정의해놓으면 여러 곳에서 재사용할 수 있다. 3) 유지보수가 쉽다. (component를 수정하면 사용하는 모든 곳에서 수정사항이 자동으로 업데이트된다.) - 그냥 html으로 작성한다면 위와 같이 코드가 길게 늘어져 있을 것이다. 예시에서는 코드가 짧으니까 괜찮은데 코드가 많이 길어진다고 생각하면 내용을 보.. 객체 - 정보의 양이 많아졌을 때 정리 정돈하기 위해서 사용 - 순서에 따라 정보를 저장 - 배열 리터럴: 대괄호 [] - 순서 없이 정보 저장 - 다시 꺼낼 일이 있기 때문에 마구잡이로 집어넣으면 안 되고 이름과 함께 저장해야 한다. - 이름이 있는 정리 정돈 상자 - 오브젝트 리터럴: 중괄호{} - 객체의 쓰기와 읽기 → 객체 생성 - 정보를 그냥 넣으면 안 되고 이름을 붙여서 넣어야 한다. (ex. "programmer" : "egoing") → 객체에서 정보 꺼내오기 - coworkers.designer의 .은 object access operator, 즉 coworkers라는 객체에 접근하는 operator이다. - document.write(): document 객체에 html 콘텐츠를 삽입 - +.. 함수(Function) 위 예시의 input 태그가 만약 1억 개가 된다면, 즉 1억 개의 사용처에서 이러한 동일한 작업을 수행하려 한다면 수정사항이 생겼을 때 하나하나 바꿔줄 수도 없고, 비효율적으로 긴 코드가 될 것이다. 이와 같은 불필요한 반복을 피하고 내용을 쉽게 수정할 수 있도록 "함수(function)"를 활용한다. head 부분의 안에 새로운 함수를 function 키워드로 만들어준다. 함수의 이름을 nightDayHandler로 지정해주고 전에 input 태그에 작성한 코드를 함수에 그대로 작성한다. 이때 input 태그의 onclick이라는 event 안에서 this는 event가 소속되어있는 태그, 즉 input 태그를 가리키도록 약속되어있는 것이다. 그러므로 input 태그와 독립된 함수를 만들게 되면 th.. Array&Loop 1) 변수 fruits에 배열 만들어 원소 저장 var fruits = ["apple", "banana"]; 2) 배열의 길이 측정 fruits.lenth 3) 인덱스를 이용해 배열의 원소 선택 fruits[0] fruits[fruits.length-1]: 배열은 0번째부터 시작하기 때문에 마지막 원소는 (length-1)번째에 위치한다. 따라서 fruits의 (fruits.length-1)번째 원소는 배열의 가장 마지막 원소를 뜻한다. 4) 배열의 끝에 원소 추가 fruits.push("orange"); 5) 배열의 끝부터 원소 삭제 (마지막 원소 삭제) fruits.pop(); 배열의 앞부터 원소 삭제 (첫번째 원소 삭제) fruits.shift(); +) document.write: 열린 문서에 텍.. 리팩토링 - 전과 동일하게 작동하지만 코드 자체를 좀 더 효율적으로 바꾸는 과정 - 가독성을 높이고 유지 보수하기 쉽게 만들며, 중복된 부분을 최대한 없애는 방향으로 코드를 개선 - 소프트웨어의 규모가 커질수록 틈틈이 리팩토링 과정을 거쳐야 좋은 프로그램을 만들 수 있다. → 이 예시 코드의 윗부분에 버튼이 하나 있고, 아래에 버튼을 하나 더 만들고 싶어 아래쪽에 버튼을 추가한 모습이다. 원래는 누를 때마다 day/night이 바뀌어가며 나오도록 짠 코드인데 위에 이미 input 태그의 id 값을 night_day로 설정했기 때문에, 아래에 똑같은 코드를 복사 붙여 넣기 해 night_day가 두 개가 되어 제대로 작동하지 않고 있다. → 위의 문제를 해결하기 위해 id값을 night_day2로 바꾸니까 버튼의 .. 조건문 → HTML에서 style 속성을 이용해 CSS의 속성을 태그에 첨가할 수 있었던 것처럼 JavaScript에서도 querySelector 메소드가 CSS 선택자를 사용해 특정 요소를 찾는다(선택한다). document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color='white'; → querySelector 메소드를 통해 body 부분을 찾고, style 속성을 통해 그 body의 backgroundColor는 black, text color는 white로 설정 ex) document.querySelector('.example'): example이라는 class명을 가진 요소.. JavaScript 개요 - Javascript를 이용하면 동적인, 사용자와 상호작용할 수 있는 웹 페이지를 만들 수 있다. 따라서, 우선 html을 이용해 웹 페이지를 만든 후, javascript를 이용해 사용자와 상호작용할 수 있도록 기능을 추가한다. 이로써 html의 정보와 javascript의 기술이 융합된 웹 페이지를 만들 수 있는 것이다. - 기본적으로 javascript는 html 위에서 동작하는 언어다. 1) - 웹 브라우저한테 html의 코드로 javascript가 시작된다고 알리는 태그 - 태그 안쪽의 코드를 javascript로 인식 - html은 정적, javascript는 동적인 언어 - html은 1+1을 입력하면 그대로 출력 / javascript는 1+1을 2로 계산해 출력 2) event - 웹 .. 이전 1 2 3 4 5 6 다음
