코드공부방

나는 5살 딸의 아빠다. 딸을 키우고는 있다고는 하지만 사실 육아에 큰 관심은 없었다. 내가 할 수 있는 것이라고는 시간이 허락할때 함께 식사를 하고 마냥 즐겁게 놀아주기만 할뿐이다. "무조건" 아빠 말을 따르던 딸은 어느덧 나에게 자기의 생각을 이야기 하기도 하고 화가 나거나 속상한 감정을 드러내기도 하는 모습을 볼때 조금은 놀랍기도 하면서 동시에 내가 부모로서 아이에게 어떤 영향을 끼치고 있는걸까 걱정도 되고 있었기 때문에 육아법을 공부해보려고 이 책을 선택했다. 역시 육아 관련 아무 지식이 없던 내게 모든 내용이 새로운 정보였고, 어떤 것은 정 반대로 생각하고 있던 것도 있어서 많이 놀랐다. 또 아이에 기질에 맞춰 올바르게 대응할 수 있는 여러가지 팁과 사례를 함께 제시하며 아이의 잠재력을 깨우는 ..

"가진 돈은 몽땅 써라" 저축을 하지 못하는 내 상황을 논리적으로 대변해줄 것만 같은 제목이었다. 헛소리만 늘어놓진 않을까 걱정도 했지만 나름 외부 평도 괜찮아 선택해보았다. 태어나서 처음으로 3일만에 책한권을 다 읽었다. 애기 재우고 넷플릭스, 유튜브 영상 보는 것을 포기하고 책을 읽었다. 그만큼 책이 쉽고 흥미로웠다. ​ 이 책은 누구나 알고 있는 '개미와 베짱이' 이야기를 부정하며 시작한다. 개미처럼 묵묵히 근면 성실한 내세우기보다는 베짱이처럼 잘 놀고 무엇이든 잘 즐기는 사람이 인정받고 성공하는 시대가 왔다는 것이다. 근면 성실함이 중요하지 않다는 것이 아니라 주위에 즐거움을 주고 놀이를 제공하는 능력이 근면 성실만큼, 아니 그 이상의 가치를 갖게 되었다는 것이다. 개미와 베짱이 모두 굶지 않고 ..

MySQL, MariaDB -- 한달 전 SELECT DATE_ADD(NOW(), INTERVAL-1 MONTH) -- 일주일 전 SELECT DATE_ADD(NOW(), INTERVAL-1 WEEK) -- 하루 전 SELECT DATE_ADD(NOW(), INTERVAL-1 WEEK) MS-SQL -- 한달 전 SELECT DATEADD("MONTH", -1, GETDATE()) -- 일주일 전 SELECT DATEADD("WEEK", -1, GETDATE()) -- 하루 전 SELECT DATEADD("DAY", -1, GETDATE())

좌표값과 더불어 웹 UI개발을 할때 거의 항상 쓰이는 window scroll과 관련된 Window 메소드에 대해 알아보자. # window.scrollTo() 지정된 좌표값으로 웹브라우저의 스크롤을 이동시킨다. const $btn = document.querySelector('.btn'); $btn.addEventListener('click', () => { // window.scrollTo(x좌표, y좌표); window.scrollTo(0, 250); }); 스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다. const $btn = document.querySelector('.btn'); $btn.addEventListener..

웹 UI개발을 하다보면 필수적으로 브라우저 내 Element나 마우스의 좌표가 필요한 경우가 생긴다. # Element.getBoundingClientRect() getBoundingClientRect 메소드는 Element Object에 포함되어 있다. 이 메소드를 사용하여 특정 Element의 width, height, 좌표(top, left) 값을 구할 수 있다. const $googleLogo = document.querySelector('#google-logo'); const logoRect = $googleCI.getBoundingClientRect(); let logoPositionLeft = logoRect.left; let logoPositionTop = logoRect.top; let ..

window객체는 browser에서 기본적으로 제공하는 것중 하나이다. 그 중 Size(width, height)와 관련된 API를 알아보려 한다. # window.screen : 모니터 사이즈 (해상도) let screenWidth = window.screen.width; let screenHeight = window.screen.height; 스크린(모니터)의 해상도를 나타내기 때문에 헤상도를 바꾸기 전까지 값에 변화가 없다. # window.outer : 브라우저 사이즈 (탭, URL입력창 영역 등 포함) let browserWidth = window.outerWidth; let browserHeight = window.outerHeight; 웹브라우저 창의 width와 height값을 가져올 수 ..

Array는 JavaScript에서 자료구조 중 하나이다. object가 관련이 있는 변수나 함수를 그룹핑 할때 사용한다면, Array는 관련이 있는 변수들을 모아두는데 주로 사용이 되며, 때로는 object들을 모아놓는데에도 사용할 수 있다. ([{}, {}, {}, {}, {}, {}]) # 배열 선언 const array1 = new Array(); const array2 = [1, 2]; # 배열 조회 // index는 0부터 시작 (0,1,2...) const carModels = ['쏘나타', 'K5', '펠리세이드']; // 배열 크기 조회 console.log(carModels.length); // 특정 index 값 조회 console.log(carModels[2]); # 배열 loop ..

object는 연관되어 있는 데이터(변수)나 실행문(함수)를 모아놓을 수 있는 데이터 타입이다. 아래 자동차와 관련된 데이터들을 정의해놓고 console 창에 출력을 해보자. const brand = '현대'; const model = '펠리세이드'; const cc = 3000; //출력 함수 정의 function infoPrint(brand, model, cc){ console.log(`${brand} ${model} >> ${cc}cc`); } //호출 infoPrint(brand, model, cc); 잘 출력이 된다. 하지만 차량이 계속 추가 될 경우 위와 같이 데이터를 관리하면 차량이 많아질 수록 점점 힘들어진다. const car01brand = '현대'; const car01model = ..

JavaScript에서의 class 키워드는 ES6버전에 와서야 만들어졌다. class는 template라고도 불리기도 하는데 그 이유는 class자체적으로는 어떠한 데이터도 갖지 않으며 틀만 정의해둔다. 그리고 이 만들어진 틀(class)에 데이터를 넣어 만드는 것을 object라고 한다. (붕어빵 만드는 틀을 class, 그 틀에 데이터(팥 또는 슈크림 등)을 넣어 만든 붕어빵을 object라고 이해하면 좀 쉬운 것 같다.) 1. class 선언 (틀 제작) 아래는 새로 입고된 중고차를 DB에 입력 후 console에 출력하는 class를 선언한 것이다. class usedCar { //constructor constructor(brand, model){ // fields this.brand = br..

어떤 프로그래밍 언어든 마찬가지이지만 함수는 매우 중요한 역할을 한다. 프로그램 내에서 하나의 함수는 또다른 하나의 프로그램이라고 봐도 된다. 함수에 대해 자세히 알아보자. 1. 함수 생성 function fnName(parameter01, parameter02){ ... //do something ... return result; } 2. 함수는 최소단위의 프로그램 하나의 함수에서는 하나의 일만 하도록 세분화하여 설계해준다. 3. 함수 네이밍 변수명은 명사로 짓는 것이 일반적인데, 함수명은 해당 함수가 어떤 일을 수행하는지 나타내기 위해 getName, deleteName, checkingMembers와 같이 무엇을 하는지? 또는 명령어 형태 또는 동사 형태로 작성해주는 것이 좋다. (함수 이름을 만드..