본문 바로가기

분류 전체보기

 (388)
<알고리즘> 버블정렬과 선택정렬 1. 버블 정렬 - 버블 정렬은 두 개의 인접한 데이터를 비교하면서 서로의 위치를 교환하며 정렬해나간다. - 임의의 숫자의 나열 7 5 6 8 1 3 을 보자. - 오름차순으로 나열하기 위해 버블정렬을 한다면 가장 먼저 7과 5가 비교된다. - 7 5 6 8 1 3 => 5 7 6 8 1 3 - 7이 더 크므로 5와 위치가 교환된다. 다음은 두 번째 위치값과 세 번째 위치값이 비교된다. - 5 7 6 8 1 3 => 5 6 7 8 1 3 - 7과 6중 7이 더 크므로 위치가 교환된다. - 마찬가지로 진행하면 세 번째와 네 번째, 네 번째와 다섯 번째, 다섯 번째와 여섯 번째를 비교하면 다음과 같이 교환된다. - 5 6 7 8 1 3 => 5 6 7 8 1 3 => 5 6 7 1 8 3 => 5 6 7 1..
<리액트 기초> 웹팩 데브서버와 핫 리로딩 - 기존에는 소스코드를 고칠 때마다 다시 빌드를 진행했어야 했다. 하지만 이런 일은 매우 번거롭고, 자동으로 빌드가 되기를 원한다. - 그래서 이 장에서는 실시간으로 빌드가 되는 핫리로딩에 대해서 알아보자. npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D - 핫리로딩을 위해서는 위와 같이 리액트 리프레시와 리프래시 웹팩 플러그인이 필요하다. npm i -D webpack-dev-server - 리로딩을 위해서 개발용 서버가 필요하므로 웹팩 데브 서버를 설치한다. - 그리고 기존에 packge.json파일 스크립트에 webpack만 작성했었던 대신 webpack serve --env development로 변경해 준다. - 이제 위에서 받은 플러그..
<리액트 기초> 리액트와 웹팩 * 웹팩 소개 - 지난 장까지는 컴포넌트를 하나만 만들었지만 컴포넌트를 여러개 만들게 되면 스크립트 문서가 너무 복잡해진다. 이렇게되면 코드를 관리하기가 매우 까다롭다. - 웹팩은 여러 개의 자바스크립트 파일을 하나로 만들어 준다. 이 때 바벨도 적용가능하고 코드를 더 깔끔하게 해준다. * 웹팩 사용 - 먼저 터미널을 켜서 원하는 폴더 내에서 npm init을 입력해 패키지를 만들어준다. - 리액트와 리액트 돔도 필요하므로 npm i react react-dom 을 입력하여 설치한다. - 웹팩을 사용하기 위해서 npm i -D webpack webpack-cli 두가지를 설치한다. 웹팩은 개발환경에서만 사용하므로 -D를 입력하였다. - webpack.config.js 파일을 만들어준다. module.ex..
<C언어 기초> 07. 문자열 · 문자열 * 문자열과 문자 - 우리는 지금까지 문자열을 사용하기 위해서 string자료형을 사용하였다. 문자열(string)은 실제로는 문자(char)자료형 데이터들의 배열이다. - string s = "HI!"; 와 같은 문자열 s가 정의 되어있다고 한다면 메모리 상에 다음과 같이 저장될 것이다. - s는 문자의 배열이므로 s[0] 과 같은 방법으로 문자에 접근할 수 있다. - \0은 문자열의 끝을 나타내는 널 중단 문자이다. 이는 모튼 비트가 0인 1바이트이다. - 이번에는 여러 문자열의 배열을 보자. string names[3]; names[0] = "HARRY"; names[1] = "IU"; names[2] = "SUZY"; printf("%s\n", names[0]); printf("%c%c..
<리액트 기초> 리액트와 Hooks * Hooks 소개 - 2018년 리액트에서 Hooks업데이트 이후 최근의 리액트는 클래스가 아닌 Hooks를 권장하고 있다. - 기존에도 함수형 컴포넌트가 사용 가능하긴 했으나 state 관리할 때에는 클래스를 써야 했었다. - Hooks의 업데이트 이후 함수형 컴포넌트를 사용하더라도 setstate와 ref기능들을 사용 가능해졌다. - 참고로 함수형 컴포넌트 = Hooks는 아니다. 기존에도 state를 안 쓸 경우에는 함수형 컴포넌트가 더 선호 되었다. hook은 함수컴포넌트가 아닌 useState나 useRef, useEffect등을 의미한다. * Hooks 사용 const GuGuDan = () => { const [first, setFirst] = React.useState(Math.ceil(..
<컴퓨터 구조> 컴파일링과 디버깅 1. 컴파일링 - 우리는 C언어를 작성하면서 clang 명령어로 c파일을 컴퓨터가 이해할 수 있는 머신코드를 만들어 보았었다. 그 때 cs50라이브러리를 이용했었기 때문에 다음과 같이 명령어를 입력했었다. clang -o hello hello.c -lcs50 - 위는 clang에게 cs50 라이브러리에 있는 코드들까지 0 과 1로 만들어서 연결하라는 의미이다. 물론 위 명령어를 make로 단순하게 만들수도 있지만 기본적으로 거치는 단계는 동일하다. - 컴파일이 되는 과정은 전처리, 컴파일링, 어셈블링, 링킹 의 네 단계를 거친다. * 전처리 - 전처리 단계는 가장 처음에 일어나는 단계로써 우리가 처음에 선언한 라이브러리들을 읽고 가져오는 역할을 한다. - 예를 들면 stdio.h 라이브러리를 #inclu..
<브루트 포스> 7568번 덩치 with 파이썬 문제 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩치가 각각 (x, y), (p, q)라고 할 때 x > p 그리고 y > q 이라면 우리는 A의 덩치가 B의 덩치보다 "더 크다"고 말한다. 예를 들어 어떤 A, B 두 사람의 덩치가 각각 (56, 177), (45, 165) 라고 한다면 A의 덩치가 B보다 큰 셈이 된다. 그런데 서로 다른 덩치끼리 크기를 정할 수 없는 경우도 있다. 예를 들어 두 사람 C와 D의 덩치가 각각 (45, 181), (55, 173)이라면 몸무게는 D가 C보다 더 무겁고, 키는 C가 더 크므로, "덩치"로만 볼..
<자바스크립트> ? 연산자와 ?? 연산자 * 조건부 연산자 '?' - 조건에 따라 다른 값을 변수에 할당해줄 때, if문 대신 조건부 연산자 '?'를 사용할 수 있다. let sojuAllowed; let age = prompt('나이는? : '); if (age > 18) { sojuAllowed = true; } else { sojuAllowed = false; } - 나이가 19세 이상이어야 소주를 허용하는 코드를 작성했다. 위를 조건부 연산자를 사용하여 표현하면 다음과 같다. let sojuAllowed = (age > 18) ? true : false; - 코드가 매우 간결해 졌음을 알 수 있다. 물음표 연산자의 사용법은 다음과 같다. 변수 = 조건 ? 값1 : 값2; - 사실 위는 비교 연산자 자체가 true와 false를 반환하므로..
<C언어 기초> 06. 배열 * 배열 - 배열은 같은 자료형의 데이터를 메모리상에 연이어서 저장하고 그것을 하나의 변수로 관리하고 싶을 때 사용한다. - 72점 73점 33점이라는 점수를 scores라는 변수 하나로 관리하고 싶다고 하자. #include #include int main(void) { // Scores int scores[3]; scores[0] = 72; scores[1] = 73; scores[2] = 33; // Print average printf("Average: %i\n", (scores[0] + scores[1] + scores[2]) / 3); } - 위와 같이 배열 안의 자료형과 원소의 갯수를 이용하여 변수를 선언한다. - 그리고 0부터 차례로 인덱스값을 대괄호[]에 입력하여 점수를 넣어 주었다. -..
<리액트 기초> 메서드와 함수형 setState 이번 장에서는 간단한 구구단 게임을만들며 리액트의 기능들을 학습했다. 질문이 각 1부터 9까지 숫자로 랜덤으로 나오고 답을 입력한다. 입력버튼을 누르면 틀리면 땡, 정답이면 정답이라는 문자와 답을 출력하고, 다음 문제가 위에 새로 뜨게 된다. 먼저 지난 장에서와 같이 헤드에 리액트, 리액트돔, 바벨을 넣는다. 그리고 div태그로 root를 만들어준다. class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { ... }; } onSubmit=(e) => { ... }; onChange=(e) => ...; input; onRefInput = ...; render() { return ( ... ); } }..

티스토리툴바