본문 바로가기

분류 전체보기159

[면접] MVC패턴 MVC 패턴 M(Model): 애플리케이션에서 사용하는 데이터를 관리하는 영역 V(View): 사용자에게 보이는 부분 C(Controller): 프로그램이 사용자에게서 어떤 작업(ex) 버튼 클릭, 텍스트 입력, 버튼 선택 등 이벤트 발생)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경된 사항을 뷰에 반영 모델, Model 애플리케이션의 정보, 데이타를 나타냅니다. 데이타베이스, 처음의 정의하는 상수, 초기화값, 변수 등을 뜻합니다. 또한 이러한 DATA, 정보들의 가공을 책임지는 컴포넌트를 말합니다. 이 모델은 다음과 같은 규칙을 가지고 있습니다. 1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다. 즉, 화면안의 네모박스에 글자가 표현된다면, 네모박스의 화면 위치 정보, 네모.. 2020. 10. 27.
[React] 2-10. class를 Hooks로 변환하기 1. state부분을 setState로 변경하기 class WordRelay extends Component{ state = { word: '가나다', value: '', result: '', }; ////////////////////////////////////////// const WordRelay = () => { const [word, setWord] = useState('제로초'); const [value, setValue] = useState(''); const [result, setResult] = usetState(''); } 2. ref부분을 useRef로 변경하기, Ref를 사용할 때에는 current를 붙여서 사용해야한다. input; onRefInput = (c) => { this... 2020. 10. 6.
[React] 1-10. document 를 접근하는 ref ref document.querySelector('input').focus() 위의 코드처럼 자바스크립트에서 직접 접근할 때는 보통 직접 'document' 키워드를 통해 접근하였지만, 리액트에서는 직접 document를 통해 접근하는일은 거의 없다. 리액트가 화면을 컨트롤 할 수 있게 하는 것이 좋다. 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용한다. 아래 예와 같이 input 등에 focus를 해야할 때 특정 DOM의 크기를 가져와야할 때 외부 라이브러리(플레이어, 차트)를 사용할 때 hello; // 클래스 선언 render(){ return ( {this.state.first}곱하기{this.state.second}는? {this.he.. 2020. 9. 25.
[JavaScript] 스프레드(spread) 문법 스프레드(spread) 객체 혹은 배열을 펼칠 수가 있다 문법: 배열을 빠져나온다. const fruit = { name: '과일' }; const greenfruit = { name: '과일', color: 'green' }; const greenmelonfruit = { name: '과일', color: 'green', attribute: 'melon' }; console.log(fruit); console.log(greenfruit); console.log(greenmelonfruit); 먼저, fruit 라는 객체를 선언한다음, greenfruit 객체를 만들었습니다. 이때 greenfruit는 name: '과일' 을 그대로 두고, 새로운 객체를 만들어서 사용하였습니다. 그 이후, greenmel.. 2020. 9. 23.

티스토리툴바