lecture
10 posts
vanilla JS로 그림판 만들기

👉👉 그림판 바로가기 👈👈 🤔 계기 처음 개발을 시작하면서는 백엔드에 관심이 생겼지만, 결국 프론트엔드와 백엔드 둘다 기초적인 개념과 지식이 바탕이 되어야 한다는 것을 깨달았다. (아닐지도?) 그렇게 생전 접해본 적 없는 자바스크립트에 대한 호기심이 생겼고, 배움을 통해 직접 내 손으로 작은 결과물을 내고 싶었다. (사실 그냥 만들어보고 싶었다는게 학계의 점심.) 근데 확실히 뭘 만들면서 내가 원하는 것들을 직접 구현하다보니 무엇을 어디서 어떻게 활용해야하는지 느낌이 왔다. (느낌만..?) ✨ 지원 기능 🖤 다크모드 가능 🎨 그림 저장 가능 🖌 여러 색상 선택 가능 👩‍🎨 색 채우기 가능 🖍 펜 굵기 선택 가능 🍇 이름 입력 후 사용하는 기능 구현 🎨 결과물 미리보기 localStorge를 통해 이름을 받을 수 있다. 이름을 입력하면 ㅇㅇ’s painting! 이라고 상단에 적힌다. 그림판 붓의 굵기를 조절 할 수 있다. 색 채우기도 가능하고, 버튼을 통해 그림을 저장할 수 있다…

🌕 vscode terminal에서 python 실행 단축키 설정

주변에 (몇 없는 🙂) 취업한 사람들에게 들은 이야기 중 대부분이 “c언어 공부 .. 그 정도면 됐으니 다른 언어로 갈아타” 라는 … 말씀에 … 처음 코딩을 할 때 배웠던 python을 제대로 해보자! 라는 생각이 들었다. 그래서 vscode로 파이썬을 하려는데 이게 웬 .. 오류 ..? 인가 싶어 보니 terminal에서 compile이 python이 아닌 code runner(c 사용)로 돌아가는 것이었던 .. 것이었던.. 것이었다… 코드 실행 단축키 문제였으므로 단축키를 바꾸는 글입니다. 서론이 기네요 😅 ⌨️ mac 단축키 : + + 윈도우 단축키 : + + 위와 같이 keyboard shortcuts가 뜨는데, vscode의 단축키를 설정할 수 있는 창이다. ⌨️ Type to search in keybindings 칸에 을 검색한다. 위와 같이 검색이 되는데, 일치하는 검색어(파란 글씨)를 클릭하면 글자 왼쪽에 연필모양의 버튼이 뜬다. ⌨️ 원하는 단축키로 …

🌊 html의 기본 (2)

우선 첫 번째 포스팅에서는 기본적으로 아는 내용들에 대해 다루긴 했지만, 그래도 아직 html이 익숙치 않은 것은 어쩔 수 없나보다 .. 근데 또 나름 글을 작성하다보니 재미있는 것 같기도 하고 …?🤔 최근 블로그 테마 수정하고 이것저것 하다보니 자바스크립트도 배워서 직접 웹디자인도 해보고싶다 … (마음만 .. 😎) 무튼! 다음 내용 시작! ☁️ 줄 바꾸기 줄 바꾸는 기능을 하는 태그들 HTML은 공백(space bar)과 엔터(enter key)를 여러 번 입력하더라도 하나의 공백만으로 인지한다. 그렇기에 줄 바꾸는 기능을 하는 태그들을 익혀야한다… (마크다운에서도 비슷하다. 근데 마크다운은 단락은 자동으로 되더라 ..) 줄 바꾸기 기능을 하는 가장 일반적인 태그는 와 태그이다. 하나의 문단을 의미하는 태그: p는 paragraph의 약자로, 문단을 의미한다. 위와 같이 코딩을 할 경우, 첫 번째 문단과 두 번째 문단 사이에 공백라인이 들어간다. 출력은 아래와 같다.…

🌊 html의 기본

개인프로젝트를 진행하게 되면서, html을 처음부터 차근차근 공부를 해야겠다는 생각이 들었다. 마크다운도 잘 못하는데 🤦‍♀️ 원래 그냥 읽으면서 공부하려 했는데, 어차피 타이핑도 칠 겸, 손가락에 익힐 겸 … 포스팅도 할 겸! 겸사겸사 적으면 나중에 까먹었을 때가 되더라도 도움이 되겠구나 싶어서 .. . ☁️ HTML의 구성요소 요소 (Elements) HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미한다. 태그 (Tag) 요소(Elements)의 일부로 시작 태그와 종료 태그 두 종류가 있다. 시작 태그는 요소를 시작하며, 종료 태그는 요소를 끝내는 기능을 가지고 있다. 일부 태그 중에는 종료 태그가 없는 것도 있다. 태그 안에 align이라는 속성(attributes, 애트리뷰트)를 사용한다면, 문단 안의 정렬을 설정할 수 있다. 변수(Arguments) 속성과 관련 된 값으로, 위의 코드에서처럼 align 이라는 속성의 center 라는 변수를 지정하였다…

Merge Sort

👊 이진 탐색 트리 개념 이진 탐색 트리는 임의의 키를 가진 원소를 삽입, 삭제, 검색 등을 하기에 효과적인 자료구조이다. 모든 연산은 (node) 값을 기초로 실행하며, 2개 이상의 같은 key값을 허용하지 않는다. 이진 트리는 공백이 아닐 시에 다음과 같은 조건들을 만족한다. 모든 노드는 상이한 키를 가짐. 왼쪽 서브 트리 노드들의 키는 루트의 키보다 작아야 하고, 오른쪽 서브 트리 노드들의 키는 루트의 키보다 커야 한다. pic1.png (a): 이진 탐색 트리가 아님 / (b): 이진 탐색 트리 / (c): 이진 탐색 트리 이진 탐색 트리에서의 탐색 (순환적 기술) 키 값이 x인 원소를 탐색할 때 이진 탐색 트리가 공백이면, 실패로 탐색이 끝난다. 시작은 루트에서부터 시작을 하고, 루트의 키 값이 x일때, 탐색이 성공하여 종료된다. 키값 x가 루트의 키값보다 작을 시, 루트의 왼쪽 서브트리만 탐색한다. 키값 x가 루트의 키값보다 클 때, 루트의 오른쪽 서브트리만 탐…

포인터(1)

👊 포인터의 기본 포인터 변수란? 다른 변수의 주소를 저장하는 변수 포인터 변수는 주소를 저장하기 위해서 주소 크기만큼 메모리를 사용하는데, 주소의 크기는 시스템에 따라 다름. 포인터 변수는 다른 변수를 가리키는 변수이다. 포인터는 주소를 이용해서 특정 변수에 접근할 수 있도록 도와준다. 포인터 변수를 선언할 때는 데이터 형을 먼저 쓰고, 을 쓴 다음, 변수 이름을 적어준다. 포인터의 선언 포인터 변수는 포인터 형에 관계 없이 항상 크기가 4바이트이다. (32비트 플랫폼을 기준으로 함.) 포인터의 사용 주소 구하기 연산자 변수 이름 앞에 &를 사용하면 변수의 주소를 구할 수 있다. 반드시 변수 이름 앞에만 사용할 수 있으며, 상수나 수식에는 사용할 수 없다. &연산자로 구한 주소를 포인터 변수에 대입할 때 형이 일치하는 경우에만 대입하도록 주의해야 한다. 간접 참조 연산자 포인터 변수 이름 앞에 를 사용하면 포인터 변수가 가리키는 변수에 접근할 수 있다. *연산자는 반드시 포…

이진 탐색 트리

👊 이진 탐색 트리 개념 이진 탐색 트리는 임의의 키를 가진 원소를 삽입, 삭제, 검색 등을 하기에 효과적인 자료구조이다. 모든 연산은 (node) 값을 기초로 실행하며, 2개 이상의 같은 key값을 허용하지 않는다. 이진 트리는 공백이 아닐 시에 다음과 같은 조건들을 만족한다. 모든 노드는 상이한 키를 가짐. 왼쪽 서브 트리 노드들의 키는 루트의 키보다 작아야 하고, 오른쪽 서브 트리 노드들의 키는 루트의 키보다 커야 한다. (a): 이진 탐색 트리가 아님 / (b): 이진 탐색 트리 / (c): 이진 탐색 트리 이진 탐색 트리에서의 탐색 (순환적 기술) 키 값이 x인 원소를 탐색할 때 이진 탐색 트리가 공백이면, 실패로 탐색이 끝난다. 시작은 루트에서부터 시작을 하고, 루트의 키 값이 x일때, 탐색이 성공하여 종료된다. 키값 x가 루트의 키값보다 작을 시, 루트의 왼쪽 서브트리만 탐색한다. 키값 x가 루트의 키값보다 클 때, 루트의 오른쪽 서브트리만 탐색한다. ✍️ 탐…

동적 메모리 할당 과제

1. 👊 문제 동적 메모리 할당을 사용하여 정수형 배열을 생성하고, 그 배열의 크기만큼 정수를 입력받는다. 이때 같은 정수가 1번 이상 입력될 수 있으며, 중복되지 않은 정수들만을 출력하는 프로그램을 작성하시오. 3가지 다른 데이터에 대해 프로그램을 실행하시오. 2. 🤔 코드 설명 3. 😎 코드 전체 주석이 없는 전체 코드입니다. 4. 💻 실행화면 위 코드를 참조하시면서 궁금하신 점이 있다면 아래 로 남겨주세요!👇 1. 👊 문제 2. 🤔 코드 설명 3. 😎 코드 전체 4. 💻 실행화면

배열과 문자열

이번 2학기에 새로 배우는 내용인 배열부터 포스팅을 하도록 하겠습니다 :) 이전 학기에 배웠던 내용은 이곳에서 볼 수 있습니다. 차근차근 옮길 예정.. 1. 배열의 기본 같은 데이터 형의 변수를 메모리에 연속적으로 할당하고, 같은 이름으로 사용하는 방법. 배열의 각 원소는 메모리에 연속적으로 할당된다. 배열의 선언 배열을 선언할 때는 우선, 배열의 , 이 필요하고, []안에 를 써주어야 한다. 배열의 크기는 반드시 0보다 큰 로만 지정할 수 있다. 배열의 크기는 로 지정할 수 있다. 배열의 크기를 구할 때 연산자를 이용할 수 있다. 배열의 사용 배열을 사용할 때는 첨자 또는 를 이용한다. — 같은 이름의 배열 중 몇 번째 원소인지를 []안에 써준다. — 배열의 인덱스는 항상 0부터 시작하고 하나씩 증가된다. 배열을 사용할 때는 for문을 활용한다. (예제 7-1) 배열의 인덱스가 유효 범위를 넘어서지 않아야한다. 배열도 따로 초기화를 하지 않으면 쓰레기 값을 갖는다. 2. …

7장 [쉽게 풀어쓰는 c언어 express]

강의를 수강하며 네이버 블로그에 기록해 두었다. 그게 벌써 작년이라니 🥲 시간은 순식간에 흘러가는데 내 실력은 왜 … 🤦‍♀️ 네이버 블로그 글들 중 조회수가 유난히 많은 글들을 옮겨놓으려고 한다. 그 중에서도 조회수가 1500이 넘은 이 글부터 옮기기… 🐬 do while 문 적어도 한 번은 무조건 실행하고, while의 조건이 참이라면 do 안의 문장들을 반복한다. # 예제 1 : 사용자가 0을 입력할 때 까지 숫자를 더한다. # lab : 숫자 추측 게임 프로그램이 가지고 있는 정수를 사용자가 맞추는 게임. (up down게임) # 도전문제! 위의 프로그램이 게임이 되려면 난수를 발생시키는 것이 좋다. 난수는 (rand()%100)으로 발생이 가능하다. stdlib.h 헤더 파일도 포함시켜야 한다. ​ 를 위한 난수 생성의 개념과 적용 👇 ​ ​ 🐳 난수 생성 라이브러리 함수를 이용한 난수 생성 주어진 범위 안에서 난수 생성 실수형 난수의 생성 난수(random number): …