study

라이프사이클 메서드 라이프사이클 메서드의 종류는 총 아홉가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. 라이프 사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다!! 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 이때 호출하는 메서드는 다음과 같다. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render ->componentDidMount constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props..

8/14 정처기 필기 시험 정리!! 내가 모르는거 위주로 할 거!!! 3-2 수업(소공, db ...) 아직 못 들어서 헷갈리는 친구들이 좀 많다!!!! 없는 번호는 그냥 넘어간거 1. 소프트웨어 생명 주기 폭포수 모형(= 고전적 생명 주기 모형) 소프트웨어 개발 과정의 한 단계가 끝나야만 다음 단계로 넘어갈 수 있는 선형 순차적 모형 모형을 적용한 경험과 성공 사례가 많음 제품의 일부가 될 매뉴얼을 작성해야함 각 단계가 끝난 후에는 다음 단계를 수행하기 위한 결과물이 명확하게 산출되어야함 두 개 이상의 과정이 병행하여 수행되지 x 타당성 검토 -> 계획 -> 요구 분석 -> 설계 -> 구현(코딩) -> 시험(검사) -> 유지보수 프로토타입 모형 사용자의 요구사항을 정확히 파악하기 위해 실제 개발될 소프..

import React from 'react'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ) }; export default IterationSample; IterationSample.js 라는 파일을 작성했다!! 이 코드를 보면 이 형태가 계속 반복되는 것을 볼 수 있다. 지금은 li태그 하나뿐이라 괜찮은데 좀 더 코드가 복잡해지면 코드양도 늘어나고 파일 용량도 증가한다!! 그래서 이번에는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 알아보자!!! 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 커모넌트를 렌더링할 수 있다!! map 함수는 파라미터로 전달된 함수를 ..

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다!! 이게 바로 ref(reference) 개념이다!! DOM을 직접적으로 건드려야 할 때 ref를 사용해야한다. DOM 이란 Document Object Model의 약자로 문서 객체 모델이라고 번역할 수 있다. 이나 같은 html 문서의 태그들을 javascript가 이용할 수 있는 객체로 만들면 그것을 객체 문서라고 한다. 그러니까 웹 브라우저가 html 페이지를 인식하는 방식을 DOM이라고 하는데 개발자 도구에서 F12를 눌러서 볼 수 있는 친구들이 바로 DOM이다!! src 디렉토리 안에 ValidationSample.css, ValidationSample.js 파일을 만들었다. V..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다!! 리액트에서 이벤트 다루는 법을 알아보자!! EventPractice.js 라는 새 컴포넌트를 만들었다!! import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e) } } /> ) } } export default EventPractice; App.js에 EventPractice를 렌더링 해주는거 잊지말고!!! import React from "react"; import './App.css'; import EventPractice from "./EventPrac..

저번 게시글에서 짧게 언급만 하고 넘어간 props와 state!!! 를 좀 더 자세히 알아보자!!! props props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다!!! MyComponent라는 컴포넌트를 하나 만들어서 이 컴포넌트에 name이라는 props를 렌더링하도록 설정해보자!! import React from 'react'; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다. }; export default MyComponent; 이러면 이제 이 컴포넌트를 사용할 부모 컴포넌트에서 이 props값을 설정..

1. 리액트 Angular, Backbone.js, Derby.js ... 등 많은 자바스크립트 프레임워크들은 주로 MVC(Model - View - Controller) 아키텍쳐, MVVM(Model - View - View Model) 아키텍처를 사용한다. 이런 구조의 공통점은 모델(Model)과 뷰(View)가 있다는 것이다!! 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분이다. 프록램이 사용자에게 어떤 작업(ex 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다. 모델에 있는 값이 변한다 -> 뷰에서도 이를 변화시켜준다. 즉, 일단 첫 화면을 보여주고 변화에 따라 필요한 곳을 바꿔준다. 이 변화..

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 1. 선택한 요소에 지정한 스타일을 적용함 $("CSS 선택자"..

HTML : 진한 글씨 : 언더바 : 줄바꿈 : 단락 : 목차 (ㆍ) : li 나누는 부모 태그 (Unordered List) : li 나누는 부모 태근데 li의 ㆍ 이게 아니라 숫자가 넘버링됨 (Ordered List) : 링크 : inline으로 나눔 : block으로 나눔 CSS class 선택자 : . -> 태그 선택자보다 우선순위 높음 id 선택자 : # -> class 선택자보다 우선순위 높음, id는 한번씩만 써야됨 #grid ol : 그리드 밑에 있는 ol

자바스크립트 정의 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다. 자바스크립트 코드는 태그 사이에 들어가고 이 태그로 시작되고 종료된 곳 까지를 스크립트 영역이라고 한다!! 보통 자바스크립트 선언문은 태그 영역에 선언한다!! 외부에 스크립트를 작성하고 html에 연결하려면 이렇게 해주면 된다!! 변수 변수 선언은 var 변수명; 또는 var 변수명=값; 이렇게 해주면 된다. (근데 var은 오래된 방..

백준 11728번 www.acmicpc.net/problem/11728 11728번: 배열 합치기 첫째 줄에 배열 A의 크기 N, 배열 B의 크기 M이 주어진다. (1 ≤ N, M ≤ 1,000,000) 둘째 줄에는 배열 A의 내용이, 셋째 줄에는 배열 B의 내용이 주어진다. 배열에 들어있는 수는 절댓값이 109보다 작거 www.acmicpc.net 문제 : 정렬되어있는 두 배열 A와 B가 주어진다. 두 배열을 합친 다음 정렬해서 출력하는 프로그램을 작성하시오. 그냥 일반적인 정렬 방식을 쓰면 O(N^2) 시간이 걸리는데 여기서 배열의 최대 크기가 100만이므로 시간이 너무 오래 걸린다. 배열 A, B가 정렬되어있기 때문에 머지 소트를 이용해서 풀면 빠르게 풀수있다.(merge sort의 시간 복잡도는 ..

백준 10816번 www.acmicpc.net/problem/10816 10816번: 숫자 카드 2 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10, www.acmicpc.net 문제 : 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,000,000보다 작거나 같다. 셋째 줄에는 M(1 ≤ M ≤ 500,000)이 주어진다. 넷째 줄에는 상근이가 몇 개 가지고 있는 ..