Study

event

이벤트란? 이벤트는 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것이다. 리액트에서 이벤트의 이름은 카멜(Camel) 표기법을 사용하고, JSX 함수명으로 전달한다. onClick : Element를 클릭했을 때 onChange : Element의 내용이 변경되었을 때 (input의 텍스트를 변경, 파일 선택 등) onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때 onDoubleClick : Element를 더블 클릭했을 때 onFocus : Element에 Focus 되었을 때 onBlur : Element가 Focus를 잃었을 때 onSubmit : Form Element에서 Submit 했을 때 이벤트 예시 src/App.js import React, {..

state

state란? state는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 컴포넌트와 전달되는 반면 state는 컴포넌트 안에서 관리된다는 차이가 있다. state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시키기 위해서이다. state 예시 src/App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content"; import Subject from "./components/Subject"; class App extends Component{ constructor(prop..

컴포넌트 제작

컴포넌트란? 리액트에서 컴포넌트란 웹을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이 잘 연결되어 동작해야 훨씬 효율적인 웹이 될 수 있다. 컴포넌트 예시 src/App.js import React, {Component} from 'react'; import TOC from "./components/TOC" import Content from "./components/Content"; import Subject from "./components/Subject"; class App extends Component{ render() { return ( ); } } export default App; src/components/Su..

개발 환경

개발 환경 구축 cd /디렉토리로 이동 create-react-app . 샘플 웹 실행 npm run start 샘플 웹 종료 control + c 배포하기 npm run build npx serve -s build 리액트에서 사용할 코드 src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start me..

배열

컴파일링 #include int main(void){ printf("hello, world\n"); } main 함수는 프로그램의 시작점으로써 실행 버튼을 클릭하는 것과 같습니다. printf는 출력을 담당하는 함수입니다. printf 함수를 사용하기 위해서는 stdio.h 라이브러리가 필요합니다. 정확히 말하면 stdio.h는 헤더 파일로 C언어로 작성되어 있으며 파일명이 .h로 끝나는 파일입니다. 이 파일에는 printf 함수의 프로토타입이 있어서 Clang 컴파일러가 프로그램을 컴파일할 때 printf가 무엇인지 알려주는 역할을 합니다. 코드를 clang hello.c로 컴파일하고 ./a.out 명령으로 프로그램을 실행할 때 이 과정은 컴퓨터가 이해하는 0과 1로 가득 찬 파일 a.out을 생성하여..

C언어

C 기초 C언어 #include int main(void){ printf("hello, world\n"); } 컴파일러 우리가 직접 작성한 코드는 “소스 코드” 라고 불립니다. 이를 2진수로 작성된 “머신 코드”로 변환해야 컴퓨터가 이해할 수 있습니다. 이런 작업은 컴파일러라는 프로그램이 수행해줍니다. 문자열 문자열 string answer = get_string("What's your name?\n"); printf("hello, %s\n", answer); C는 오래된 언어이기 때문에 변수가 저장하는 데이터의 종류를 아주 정확하게 명시해줘야 합니다. 저장하고자 하는 값의 종류가 문자열(string)이라는 것을 알려줘야 합니다. 이를 형식지정자라고 합니다. 조건문과 루프 조건문 if (x < y){ p..

컴퓨팅 사고

2진법 컴퓨터과학 컴퓨터 과학은 문제 해결에 대한 학문입니다. 문제 해결은 입력(input)을 전달받아 출력(output)을 만들어내는 과정입니다. 그 중간에 있는 과정이 바로 컴퓨터 과학입니다. 입력과 출력을 표현하기 위해선 모두가 동의할 표준이 필요합니다. 따라서 컴퓨터 과학의 가장 첫 번째 개념은 어떻게 표현하는지에 대한 표현 방법입니다. 2진법 컴퓨터는 0과 1로만 데이터를 표현합니다. 이러한 표현방식을 2진법이라고 합니다. 컴퓨터는 2진법으로 숫자뿐만 아니라 글자, 사진, 영상, 소리 등을 저장할 수 있습니다. 2진법에서는 두 개의 숫자만 있으므로 각 자리수가 2의 거듭제곱을 의미합니다. 이 방법으로 10진법의 3을 2진법으로 표현하면 2¹x1 + 1x1 = 3입니다. 2진법은 전기를 통해 연산..

JavaScript: linked list 클래스

linked list 각 노드가 데이터와 포인터를 가지고 한 줄로 연결해 데이터를 저장하는 자료 구조 배열과 다르게 원소 추가/삭제 시 다른 원소들을 움직이지 않아도 된다 Method prepend(value) - list의 처음에 넣어준다. append(value) - list의 맨 끝에 value를 추가한다. insert(value, index) - 해당 index에 value를 삽입한다. removeAt(index) - 해당 index의 value를 삭제한다. indexOf(value) : 해당 value의 index를 반환, 존재하지 않을 경우 -1을 반환한다. isEmpty() : value가 하나도 없으면 true, 아니면 false를 반환한다. size() : value의 개수 반환한다. i..