츄리닝개발자

데이터를 담기위한 구조 # 자료구조의 종류 1. 선형 구조(linear data structure): 선형 저료구조는 하나의 데이터 뒤에 다른 데이터가 하나 존재하는 자료구조다. 데이터가 일렬로 연속적으로(순차적으로) 연결되어 있다. - 배열(array) - 연결 리스트(linked list) - 스택(stack) - 큐(queue) 2. 비선형 구조(non-linear data structure): 비선형 자료구조는 하나의 데이터 뒤에 다른 데이터가 여러 개 올 수 있는 자료구조다. 데이터가 일직선상으로 연결되어 있지 않아도 된다. - 트리(tree) - 그래프(graph) # 프로그램의 성능을 측정하는 방법 - 시간 복잡도(time complexity): 알고리즘에 사용되는 연산 횟수를 측정한다. -..

https://www.kisa.or.kr/2060204/form?postSeq=9&lang_type=KO#fnPostAttachDownload

로컬 앱과 저장소를 연결해야한다. // 작업 디렉터리 상의 모든 변경 내용을 스테이징 영역에 추가해준다. git add . // 스테이징 영역에 있는 소스 코드를 로컬 저장소에 간단한 메세지와 같이 저장해준다. git commit -m "first commit" // 원래는 자동으로 master 브랜치가 설정되지만, 따로 main브랜치를 설정해 이용할때는 git branch -M main // 로컬 깃 저장소와 깃허브의 리포트 저장소를 연결할려면 git remote add orgin https://github.com/깃주소.git // 로컬 깃 저장소에 있는 소스 코드를 깃허브 저장소로 푸시한다. git push -u origin main

리액트에서는 요소의 리스트를 나열할 때 key를 넣어줘야한다. key는 React에서 변경하거나 추가 또는 제거된 항목을 식별하는데 도움이된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다. key에는 유니크한 값을 넣어주는데 index는 리스트가 추가되거나 제거되면 해당 리스트들의 키값도 변경되서 추천하지 않는다. {/* before */} 1 2 {/* after */} 3 2 {/* after */} 3 1 2

class 없이 state를 사용할 수 있는 기능이다. React는 원래 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. React Component 1. Class Component: 더 많은 기능, 더 긴 코드, 더 복잡한 코드, 더딘 성능 import React, { Component } from 'react' export default class Hello extends Component { render() { return { hello my friends! } } } 2. Functional Component: 더 적은 기능, 짧은 코드, 더 심플한 코드, 더 빠른 성능 import React from 'react' export d..

자바스크립트의 원시타입은 불변성(immutable)이고 참조타입은 가변성(mutable)이다. 원시 타입: Boolean, String, Number, null, undefined, Symbol 참조 타입: Object, Array 원시타입은 Call Stack에 저장을하고 참조타입은 Heap에 저장을 하는데 저장하는 방식이 다르다. 둘다 주소와 값을 가지고 있는 형태인데 Heap이 값을 배열형태로 가지고있는데. 이 값의 주소를 Call Stack에서 Heap의 메모리 참조의 ID를 값으로 저장한다. 원시타입: 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당. 참조타입: 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되고 변수에 ..

super는 자식클래스 안에서 부모클래스의 생성자를 호출할 때 사용한다. - (3) super는 자식클래스 안에서 부모클래스의 메소드를 호출할 때 사용한다. - (6) class Car { (3)constructor(brand) { this.carname = brand; } (6) present() { return 'I have a ' + this.carname; } } class Model extends Car { (2)constructor(brand, mod) { super(brand); this.model = mod; } (5) show() { return super.present() + ', it is a ' + this.model; } } (1)let mycar = new Model("Ford"..

export를 통해 이 파일을 어떻게 사용한다고 알려줘야하는데 import React, { Component } from 'react' export default class Board extends Component { render() { return ( Board ) } } 이런식으로 매번 써주기는 귀찮으니 rcc라는 요약어를 적어주면되게하는데 이것을 사용할려면 확장을 깔아줘야한다. es7을 visual studio code안에 설치해준다. ES7+ React snippets 파일명에 export default class 이렇게 적어주면 이 클래스를 main으로 외부로 보내주겠다는 뜻이다.

자바스크립트의 확장 문법으로 화면에서 UI가 보이는 모습을 나타내준다. JSX는 UI를 보이게할때 자바스크립트(logic)과 HTML구조(markup)을 같이 사용할 수 있어 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현하게한다. 만약 JSX를 사용하지 않고 리액트를 사용하면 이렇게 사용해야한다. React.createElement API를 사용해 객체를 생성하고 In-Memory에 저장한다. ReactDOM.render 함수로 웹 브라우저에 그린다. const myelement = React.createElement('h1', {}, 'I do not use JSX'); -> ReactDOM.render(myelement, document.getElementById('roo..

일반적으로는 멀티페이지 어플리케이션이라고 여러 페이지들을 사용한다. 하지만 최신의 프론트엔드 라이브러리들은 싱글페이지 어플리케이션을 이용해 개발을 한다. 이게 가능한 것은 HTML5의 History API를 이용해서 가능하게된다. 하나의 html파일안에서 화면 이동이 가능하다. # History API History.back() 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드로 브라우저 뒤로가기와 같은 효과를 가지고 있다. History.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드로 브라우저 앞으로 가기와 같은 효과를 가진다. History.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드로 1을 넣어 호출하면 바로 앞페이지로 가고, -1을 넣어 호출하면 바로 ..