📢초3 ~ 중2 현재까지의 프로그래밍
✍i-Scream Home Learn 시작
'아이스크림 홈런(이하 홈런)'은 초등학교 교육에 필요한 자료들을 모아놓은 사이트, 대한민국 교육부의 지원을 받고 아이스크림미디어와 KBS 미디어가 공동으로 운영하고 있는 i-scream을 기반으로 학생들이 집에서 학습할 수 있게 만들어놓은 시스템입니다. 저는 이 홈런을 대략 초등학교 2학년 때부터 시작했습니다. 현재 중학교 2학년까지 하고 있죠.
✍Entry 시작
초등학교 3학년 쯤, 홈런의 컨텐츠 중 코딩 컨텐츠를 우연히 발견하게 됐습니다. 엔트리를 기반으로 했으며, 강의도 약 20개 정도가 들어있었습니다. 강의도 흥미로웠고, 한 번 하면 시간가는 줄 모르고 했습니다.
하지만 이게 학습기 내에서 구현을 해놓은 것 같아 성능이 굉장히 않좋았습니다. 왠지 웹사이트에서도 있을 것 같아 찾아 봤더니 있었습니다.(원래 웹사이트가 원조이지만요.) 그 후로 이제 컴퓨터로 엔트리를 하게 되었고, 중간 중간 흥미가 떨어져서 하지 않던 기간까지 포함시키면 대략 3년간 엔트리를 취미 생활로 즐겼습니다.
✍Python 시작
초등학교 6학년 말에서 중학교 1학년 초 쯤, 엔트리를 접고 python을 본격적으로 배우기 시작합니다. 엔트리에서 text 기반 프로그래밍을 하게 해주는 '엔트리 파이썬'이라는 기능을 발견하곤 python이라는 언어에 흥미가 생겨 바로 '점프 투 파이썬(이지스 퍼블리싱)' 이라는 책을 구입했습니다.
그 책에서 제 프로그래밍 인생을 송두리째 바꿔놓는 코드를 맞이하게 됩니다.
if 4 in [1,2,3,4]: print("4가 있습니다")1, 2, 3, 4안에 4가 있다면 "4가 있습니다"를 출력하라.
(출처 : https://wikidocs.net/6)
이 코드를 만나기 전까진 text 기반 프로그래밍언어는 인간이 알아보지 못하는 기계적 문자로 이루어있어 엄두도 못하게 어려운 학문이라고 생각했지만, 이토록 인간적인 문법으로 이루어져있구나하는 생각에 충격을 받았습니다. 후, 저는 엔트리(https://entry.org/)에 접속한 적이 없습니다. (방금 url이 기억이 안나 접속했지만요.)
✍HTML 시작
아무튼 그 코드를 만난 후 python만 죽어라 하다 제 프로그래밍 인생을 또 한번 송두리째 바꿔놓은 사건이 일어납니다. 제 친구 중 한 명이 카카오톡에 네이버 화면을 캡쳐해서 보내더군요. 그 사진을 말로 표현하자면
네이버 실시간 검색어가 모두 그 친구가 원하는데로 바뀌어 었습니다. 당연히 제가 네이버에 접속하면 그렇게 안 뜨고요.
(참고로 네이버 실시간 검색어가 사라지기 전 일입니다.)
어떻게 했냐고 묻니 그 친구는
"HTML을 썼지"
(지금 생각해보면 말 같지도 않은 소립니다.)
HTML이 뭐냐고 물으니 그 친구는
"프로그래밍 언어"
(틀렸죠.)
라고 답하더군요. HTML이 뭔지 너무 궁금해 당장 유튜브에 접속해
HTML 웹사이트 조작
이라고 검색하니 흥미로운 영상 하나가 있더군요. 그건 다름 아닌 '조코딩' 님의 영상. 저는 그 영상을 본 후 웹사이트라는 세계에 푹 빠지게 되어 지금까지도 헤어 나오지 못하고 있습니다.
python 할 때에는 맨날 검정색 cmd 창에서 글자 나오는 것만 프로그래밍 하다가 HTML을 하면서 화면에 글자가 나오고, 이미지가 나오고, 무엇보다 색상을 바꿀 수 있음이 감격스러울 지경이었습니다. 물론 JavaScript나 C언어를 하기 위해 python때의 지식이 큰 도움이 되었지만요.
✍CSS 시작
생활코딩님(유튜브 채널)님이 HTML 강의 중 하신 말씀이 있습니다.
"앞으로 여러분이 배울 어떤 컴퓨터 언어도 HTML보다 어려울 것이라고 전 확신 할 수 있어요." (본 영상)
저도 인정합니다. 프로그래밍언어가 아니라 단순히 마크업언어이니 난이도는 훨씬 낮았습니다. 하지만 그 대앙마가 등장합니다. CSS입니다. HTML에서의 문법이랄 것은
태그 & 속성
그 둘 정도라고 할 수 있습니다. 반대로 CSS에서는 포괄적으로
선택자 & 선언 & 속성 & 속성 값
정도라고 '생각'했습니다. 개수만 더 많지 결국 HTML의 속성 중 style을 추가하는 것과 똑같으니 어렵지 않았습니다. 문법은 솔직히 CSS가 HTML보다 쉬웠습니다. 하지만 HTML의 element를 화면 크기에 따라 달리하는 MediaQuery의 존재를 알게 되었을 때, CSS가 너무나 어렵다고 느꼈습니다. HTML element가 복잡해질 수록 CSS는 배로 복잡해졌습니다.
✍JavaScript 시작
웹사이트 프로그래밍에서 HTML & CSS & JavaScript는 쎄뜨입니다. 그래서 결국 JavaScript를 배워야 할 순간에 도달했습니다. YouTube로 여러 유튜버님들의 강의를 들었지만 JavaScript가 프로그래밍 언어인지라 이해하기는 어려웠습니다. 그래서 책을 샀습니다.
중학교 1학년 여름방학이 시작된지 대략 일주일 뒤, 'Let's Get IT 자바스크립트 프로그래밍(길벗)'을 샀습니다. 방학동안 열심히 독학하여 DOM(document object model) 정도는 잘 할 수 있는 수준이 되었습니다.
✍mySQL 시작
"인간의 욕심은 끝이 없죠." -생활코딩 egoing님
HTML도 그럭저럭하고,
CSS는 어렵긴 하지만 시간을 들이면 충분히 잘할 수 있고,
JavaScript는(DOM에 한해) 이제 껌이고,
하지만 더 욕심이 생겼습니다. 웹 사이트를 종료해도 변수에 저장된 데이터가 계속 유지되고, 다른 유저들도 데이터를 읽을 수 있는 그런 상호작용적인 진짜 웹사이트를 만들고 싶었습니다. 구글링을 열심히 하던 결과, DataBase라는 흥미로운 단어를 듣게 됐습니다.
"이거라면 되겠다."
또 다시 YouTube에 접속해
데이터베이스
라고 검색하니 생활코딩님의 mySQL 강의가 있었다. 그 강의를 듣는데 또 다시 충격을 받았습니다.
if 4 in [1,2,3,4]: print("4가 있습니다")이 혁신적인 코드보다 더 혁신적인 코드를 보았습니다.
SHOW DATABASES;
CREATE DATABASE mysql;
USE mysql;
CREATE TABLE ......;
SELECT * FROM users;너무나 인간적인 언어였습니다. 완전한 영어 문장, 그 자체였습니다. 놀라웠습니다. 이 코드라고 부르기도 민망한 코드로 계속 유지되는 효율적인 표를 만들 수 있다는 사실이 놀라웠습니다.
하지만 문제는 웹사이트에 적용시킬 방법을 아직 익히지 못했다는 것입니다.
✍PHP 시작
최악이었습니다. 왜 쓰는지 모르겠습니다. 안했습니다.
✍NodeJS 시작
✨서버
잘 기억은 안나지만 https://velog.io 에서 NodeJS와의 첫 만남을 가졌습니다. http라는 기술을 만나 서버를 만들 수 있게 되었고, express로 더 쉽게 서버를 구성할 수 있게 되었습니다.
✨mySQL
NodeJS와 함께라면 mySQL과의 연결을 통해 진정한 웹사이트를 개발할 수 있겠다는 확신이 들어 또또 다시 YouTube에 접속해
"노드js mySQL"
이라고 검색하니 또또 생활코딩님의 영상이 떴습니다. 그 영상에서 mySQL를 NodeJS에 연결하려면
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '111111',
database : 'opentutorials'
});
connection.connect();
connection.query('SELECT * FROM topic', function (error, results, fields) {
if (error) {
console.log(error);
}
console.log(results);
});
connection.end();이토록 간단한 코드만으로 구현이 가능하다고 했습니다. 곧장 한 프로젝트를 진행했지만 그당시에는 POST의 개념을 몰라 요청을 하기 위해 다른 파일로 넘어간 후, fs모듈로 json파일에 정보를 저장하고 ajax로 정보를 받아 표현하는... 귀찮은 방법을 사용했습니다. 이렇게 하다가는 안되겠다 싶어 일단, 포기했습니다... :(
✍p5.js 시작
중학교 1학년 때 자유학기제라는 제도가 시행되는데 학생들의 적성을 찾고 꿈을 발견하기 위한 제도입니다. 제 학교에서는 예체, 학스, 주제 시간으로 나누어졌습니다. 주제 3기 활동이 '정보 기술 활용'이라 컴퓨터실에서 수업을 들었습니다. 어느날, 선생님이 자유시간을 주셔서 컴퓨터로 또또또 생활코딩님 페이지에 들어가 스크롤을 하고 있는데 p5js 강의가 있는 겁니다.
p5.js : HTML5 캔버스 쉽게 사용할 수 있게 하는 라이브러리
웹 게임은 캔버스에서 만든다는 사실을 그 때 딱 알았습니다.
제가 p5js로 만든 최초의 웹 게임
https://semicolon0401.github.io/avoid/avoid.html
✍JavaScript 또 시작
ajax를 배울 때, Promise니 await이니하는 괴상한 문법이 등장해 JavaScript부터 다시 시작하기로 했습니다. 'Let's Get IT 자바스크립트 프로그래밍(길벗)'에는 나오지 않던 여러가지 문법을 velog나 geekforgeeks, w3 schools, YouTube 등등에서 습득했습니다.
Promise, await, async, iterable, yield, class, canvas(?) 등등등등등의 문법을 많이들 중급 문법이라고 하던데 중급이라는 이름에 걸맞게 이해하는데 애를 많이 썼습니다. 쉽게 설명해주는 분을 찾으려고 얼마나 구글링을 많이 했는지 모릅니다.
✍CSS 또 시작
우연히 YouTube에서 transition와 transform, keyframe을 사용하여 코드를 짜는 영상을 봤습니다. 그 영상을 보고 충격와 놀라움을 넘어 이제 분노 했습니다.
그간 부드러운 효과를 내기 위해 일일이 JavaScript에서 반복문을 돌리는 쌩 난리를 쳤는데 CSS에서는
transition: all 1s;이런 코드 한 줄로 부드럽게 전환을 시킬 수 있다니 왜 이 문법을 몰랐나 싶었고 그 뻘짓들이 후회스러웠습니다.
애니메이션도 마찬가집니다. animate와 @keyframe이면 쉽게 해결할 것을 JavaScript에서 하고있자니...
그 영상에서 :hover, :active, :focus 같은 문법을 쓰는 모습도 봤는데 CSS에서 이토록 쉽게 말하자면 event listener 비스무리한 걸 달 수 있음에도
const h1 = document.querySelector('h1');
h1.addEventListener('mouseover', () => {
h1.style.color = 'red';
});와 같은 짓을 하고 있었습니다. CSS로 바꾸면
h1:hover {
color: red;
}이렇게 됩니다.
또 놓친 금쪽같은 문법이 있을 것 같아 w3 schools에서 처음부터 다시 CSS 공부를 했습니다ㅎ.
✍혁명적(?) 발견
'Let's Get IT 자바스크립트 프로그래밍(길벗)'
저자 : 조현영(Zero Cho)
이 책을 출판한 길벗사의 IT 관련 책들을 모아놓은 사이트를 우연히 발견하게 됐습니다. 바로 더북입니다. 이 사이트에서는 제가 산 'Let's Get IT 자바스크립트 프로그래밍'는 물론 다른 유용한 책이 무료로 미리보기(거의 전부입니다)할 수 있습니다. 디스플레이상에서 책을 읽는 걸 굉장히 어려워하고, 실제 책은 사이트와는 달리 컬러고, 디자인이 좋기에 제가 이 책을 산 것을 후회하지는 않습니다.
✍NodeJS 또 시작
Node.js 교과서 개정 2판(길벗)
저자 : 조현영(Zero Cho)
전에 NodeJS를 너무 대충하고 넘어간 것 같아 다시 해보려고 했습니다. 그러던 중 우연히 더북 사이트에서 이 책을 발견하게 되었습니다.
NodeJS하면 서버가 다 인줄 알았지만 다른 여러가지 유용한 기능과 package를 알려주어 좋았습니다. 또 NodeJS를 하기 위해 꼭 필요한 JavaScript 문법(대부분 ES2015+때 도입)을 다시 한 번 리마인드 시켜주어 좋았습니다.
이 책의 가장 큰 장점이자 단점은 지나치게 자세하다는 것입니다. 너무 개념이 많고 사소한 것까지 알려주기에 쓸 데 없다고 느낀 개념도 많았지만 꼭 필요한 개념들도 많았습니다.
✍mySQL 또 시작
전에 mySQL를 너무 쉽게 생각하고 대충 넘긴 것 같아 다시 해보려고 합니다. 또, NodeJS에 대해 많이 알아버렸으니 프론트엔드 쪽 뿐만 아니라 서버 쪽에서도 신경을 많이 써야겠다고 생각해 겨울방학(중1)이 끝나기 전에 마스터해야겠다고 생각했습니다. w3 schools에서 하는게 가장 좋을 것 같습니다.
그런데 SQL 문법이 너무나 전에 배웠던 프로그래밍 언어들과 다른 구조를 띄고 있는 것 같아서 외우기 쉽지 않을 것 같습니다. 그냥 영어라고 생각할 수도 없는게 SQL 만의 고유 문법도 있고 순서도 조심해야 하며 속성이 많습니다. 그래서 velog에 SQL 문법 정리하려고 합니다.
✍정보영재 시작
초등학교 6학년 말에 정보 영재 시험을 쳤고, 합격해서 2021년 5월부터 11월까지 저는 정보영재였습니다. (2022년에도 합격했습니다.) 기관은 부산광역시 미래 교육원이었고, 총 세 학기로 나누어져 있었습니다.
C언어 & 자료구조와 알고리즘 & 앱인벤터
✨C언어
이 C언어를 처음하게 되었을 때는 python에서 손을 땠을 때 였습니다. 거의 모든 프로그래밍 언어의 조상이라고 할 수 있는 C언어를 처음 배워본 소감은 '지루하고 어렵다.' 였습니다. python은 변수 선언을 할 때
PI = 3.141592라고 하면 되지만 C언어는
float PI = 3.14192f;같은 식으로 자료형을 나타내주어야 했고, 당연히 모든 프로그래밍 언어가 되야할 기능인 input과 output를 하기 위해
#include <stdio.h>같이 printf함수와 scanf함수를 불려와야 했습니다. 그 당시의 저로서는 이해할 수 없었습니다.(지금은 여러 이유를 들어 이해가 됩니다.)
또한 C언어에서는 main함수를 꼭 선언해야만 프로그램이 돌아가는 반면 python에서는 그냥 코드치면 돌아갑니다.
이렇게 C언어 욕을 했던 이유는 상대적으로 쉬운 python을 먼저 배운 탓도 있는 것 같습니다. C언어를 먼저 배웠다면 python을 보고 칭찬을 했을 것입니다. 뭐... 아마 C언어를 먼저 배웠다면 '코딩=어렵다'라는 인식이 뇌리에 박혀 python배우는 것 자체를 포기했을 수도 있죠.
지금 와서 생각해보면 C언어를 잘 배운 것 같습니다. 다음 학년도가 기대가 됩니다.
✨알고리즘과 자료구조
알고리즘 수업 할 때에는 프로그래밍을 거의 안하고 개념적인 설명만 했기 때문에 재미있었습니다. 코딩할 때 구조의 중요성을 느끼게 해준 고마운 수업이었습니다.
자료구조 수업 때에는 C언어로 스택, 큐, 리스트, 여러 정렬 알고리즘을 구현해보는 시간이 많았습니다. 어려운 structure, pointer를 주로 가지고 구현을 해야 했기도 하고, 자료구조 자체가 좀 어려웠기에 결론은 어려웠습니다.
하지만 그 덕분에 리얼 프로그래밍에 대해 조금은 알아볼 수 있었던 시간이었고, 이런 복잡하고 귀찮은 기능들을 일일이 구현하는 일이 얼마나 힘든지 알게 되었기에 프로그래밍 언어 개발자분이나 package 개발자분들이 존경스럽게 된 계기이기도 했습니다.
✨앱인벤터
완전 HTML & CSS & JavaScript을 블록 기반으로 바꿔놓은 것에 불과했습니다. 이미 HTML & CSS & JavaScript을 알기에 흥미롭지는 않았으나 조도센서나 가속도센서와 같은 하드웨어를 사용한 코딩은 처음이었기에 나름대로 의미있었습니다.
📢앞으로 하고 싶은 것들
Go 언어
WebSocket.io
hyper text transfer protocol over secure socket layer 적용
암호화
html 2D & 3D 캔버스
아두이노
python 인공지능
discord.js 등등등등등
