츄리닝개발자

로컬 앱과 저장소를 연결해야한다. // 작업 디렉터리 상의 모든 변경 내용을 스테이징 영역에 추가해준다. 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을 넣어 호출하면 바로 ..

리액트는 여러개의 컴포넌트로 구성되어있다. 리액트의 컴포넌트는 두가지가 있다. 1. 클래스형 컴포넌트 (Class Components) class App extends Component { render() { return 안녕하세요. } } 2. 함수형 컴포넌트 (Functional Components) - 리액트 Hooks이 나온이후 함수형 컴포넌트를 사용해서 개발을 많이 한다. function App() { return 안녕하세요. } # 리액트 실행전 node js, npm(node js가 설치될때 같이 설치된다.)을 설치해야한다. 리액트는 가상돔을 사용한다. CRP(critical render path)과정을 이용해서 브라우저에 뿌려주게된다. DOM tree 생성 -> Render tree생성(브..

# 빠른 출력을 할려면 코딩테스트에서는 시간이 제한되어있는데. 많은경우 시간초과가 되게된다. 예로 라인마다 코드를 읽어오게되면 라인이 많을경우 많은 시간이 걸리게된다. 메모리를 많이 사용하지만 출력시간을 빠르게 할 수 있다. 한꺼번에 모아뒀다가 출력하는 방식이다. (자바에서는 BufferedReader가 이걸위해 사용된다.) let answer = ''; /* 여러 출력 결과를 한 줄에 하나씩 출력하는게 아니라 하나의 문자열에 결과를 저장해서 한꺼번에 출력해주는거다. */ for (let i = 1; i (반환값) - 배열의 각 원소를 하나씩 확인하며, 각 원소는 currentValue에 해당합니다. - 반환값은 그 이후의 원소에 대하여 accumulator에 저장됩니다. */ let data = [5,..