소개
40년 넘게 소프트웨어를 개발했으며, 지금도 개발하고 있습니다.
23년 넘게 JavaScript 중심으로 개발했습니다.
동영상: 11개
클린업 자바스크립트, 자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js
저서: 9권
몰입! 자바스크립트, ECMAScript 6, HTML5, DOM 스크립팅
자바스크립트 정규표현식, 요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript, Ajax 활용, prototype.js 완전분석
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
강의
로드맵
전체 3수강평
- 클린업 JavaScript: 베이스 빌드업!
게시글
질문&답변
이 강좌를 들으면 좋은점이 뭔가요?
근본과 목적을 파고 들어가는 모습에 박수를 보냅니다. 지금보다 멀리 바라보고 접근하는 마인드가 너무 좋습니다.Q: 이 강의를 들으면 듣지 않은 사람들에 비해 어떤 경쟁력을 갖게 되는지 궁금합니다.A: 프로그램 개발 경험이 쌓이면 감각으로 프로그램을 개발하게 됩니다. 음악가, 미술가는 자신의 컬러를 갖고 있습니다. 소프트웨어 프로(레전드) 개발자도 마찬가지로 자신의 컬러를 갖고 있습니다. 컬러를 다르게 표현하면 자신의 감각을 더 깊게 완성시킨 것이라고 볼 수 있습니다.본 강좌는 사용자 인터렉션 감각 향상에 촛점을 두고 있습니다. 즉, 사용자의 액션을 유도하는 것과 사용자 액션에 따른 시스템이 처리하는 감각을 만드는 것입니다. 강좌에서 하나의 기능을 다루지 않고 기능과 관련된 시나리오를 다루는 것은 감각을 만드는 것에 중점을 두기 때문입니다.스펙의 모든 기능을 다루는 것 또한, 전체를 통해 감각을 만들기 위한 것입니다. 일부 기능을 선별하여 강의를 만드는 것은 그다지 어렵지 않습니다. 하지만, 100%에 가깝게 만드는 것은 정말 어렵고 시간도 많이 걸립니다. 그런데 부분만 발췌하면, 전체를 보는 감각을 만들어야 한다는 것에 어긋나며, 이것이 DOM이라고 하는 것은 강의자의 어설픈 주관이 될 수 있습니다. 이러한 레시피가 있습니다, 여러가지 맛을 보고 맛에 대한 감각을 만들 수 있도록 레시피를 제공하는 것이 강의자의 역할이라고 생각합니다. 수강자에게 감각을 만드는 다양한 맛을 제공하는 것입니다. 노하우는 본인 기준이지, 그것이 필요하지 않는 사람에게는 의미가 없습니다. 필요는 사람에 따라 다르며 선택은 필요한 사람이 합니다. 선택을 위한 레시피를 제공하는 것이 강의자의 역할이라고 생각합니다.Q: 리액트 심화 강의도 혹시 출시 하실 생각이 있으신지 궁금합니다.A: 생각은 하고 있습니다만, 지금은 최근에 오픈한 "클린업 JavaScript: 베이스 빌드업"의 후속 강좌인 "클린업 JavaScript: 점프업(가칭)" 강좌를 만들고 있습니다.지금과 같은 마인드로 접근하는 것은 매우 좋은 선택입니다. 어쩌면 지금은 조금 늦는다고 느낄 수도 있지만, 몇 년 안에 차이가 벌어지게 됩니다. 자바스크립트와 DOM 기본이 튼튼하면, 관련된 라이브러리(프레임워크)를 2~3주면 배울 수 있습니다. 왜냐하면, React와 Vue의 바탕은 자바스크립트와 DOM이기 떄문입니다. 두 개의 기술을 활용하여 개발자가 쉽게 코딩할 수 있도록 만든 것입니다. React의 useState() 개요를 파악하면 안에서 어떻게 처리하는지 예측할 수 있게 됩니다. 설령 예측을 못하더라도 자신감을 갖게 됩니다. 이것은 차이가 매우 큽니다
- 2
- 1
- 61
질문&답변
섹션 1. 6번째 강의 질문입니다.
Java 문법이 확장되었나 봅니다. 설명 요지가 자바스크립트는 int, double(정수 실수)를 구분하지 않는다는 것이므로 이 관점에서 이해하면 되겠습니다.
- 1
- 1
- 130
질문&답변
선생님 Objcet 질문 있습니다.
네이티브 오브젝트가 대문자Object, 호스트 오브젝트가 소문자 object인 것으로 이해 하였고 Global 오브젝트는 네이티브 오브젝트에 포함되어 있다고 이해 하였습니다.==> 강좌에서 대문자 Object는 {key: value} 형태의 Object를 뜻합니다. Object를 객체로 번역하는데, 엄밀하게 보면 번역하면 안되는 것입니다. 왜냐하면 자바스크립트에서 Object는 오브젝트 이름이기 때문입니다. 즉, 고유명사입니다. 강좌에서 소문자 object는 new 연산자로 생성한 인스턴스를 뜻합니다. 따라서 대문자와 소문자 object는 형태도 다르고, 만드는 방법도 다릅니다. 그래서 대문자와 소문자를 구분한 것입니다.자바스크립트에 네이티브라는 용어가 없습니다. 글의 문맥으로 보아 네이티브가 자바스크립트를 지칭하는 것으로 보아집니다만, 그냥 자바스크립트 오브젝트라고 하면 되겠습니다.호스트 오브젝트 용어 또한 없습니다. 호스트 환경(Environment)은 있으며, 중고급 과정에서 다룹니다.Global 오브젝트에서 Global은 자바스크립트에서 오브젝트 이름입니다. 다만 Global 오브젝트라는 실체가 없으며 Global 오브젝트의 프로퍼티와 함수가 Window 오브젝트에 설정됩니다.-------------섹션11 강의인 Global 오브젝트의 프로퍼티들은 전역 범위의 프로퍼티이고 호스트 오브젝트에 소문자 Global objcet(window)도 전역 범위에 항상 존재하는데 Global 오브젝트의 프로퍼티들이 소문자 Global objcet(window)에서 사용된다고 봐야할까요? 아니면 네이티브 오브젝트의 전역 범위에서 Global 오브젝트의 프로퍼티들이 사용되는 것 일까요?==> Global 오브젝트의 프로퍼티, 함수가 Window 오브젝트에 설정되므로 전역 범위라고 볼 수 있습니다. 한편, Global과 전역은 뉘앙스가 다릅니다. Global은 자바스크립트에서 오브젝트 이름입니다. 다만, Global 오브젝트의 프로퍼티, 함수가 Window 오브젝트에 설정되므로 전역 개념으로 사용할 수 있는 것입니다.답변을 완전하게 이해하지 못해도 됩니다. 지금은 이 정도로 정리하고 진도를 나가도 됩니다. 왜냐하면 자바스크립트 전체 감을 잡게 되면 이해의 깊이가 달라지기 때문입니다. 그 때, 전체적인 관점에서 깊게 생각해도 되겠습니다.
- 0
- 2
- 186
질문&답변
다이어그램 사용여부에 관하여 질문합니다.
좋은 질문입니다.1. 다이어그램을 작성하면 좋습니다.그런데, 문제는 시간이 걸린다는 것입니다.아직 요구사항이 확정되지 않았으므로 요구 사항을 정의한 것이 계속 바뀐다는 것입니다.그러면 문서도 정리하고 다이어그램을 정리해야 하는데, 시간이 걸립니다.문서를 보고 개발할 수 있도록 문서를 작성하므로, 다이어그램은 보조 역할을 하는 점도 있습니다.그렇다고 다이어그램을 기준으로 프로그램을 개발하는 것은 부족함이 있습니다.요구분석을 처음 공부할 때는 공부 차원에서 다양한 다이어그램을 작성하는 것은 괜찮습니다. 이를 통해 경험을 만들수 있기 때문입니다. 프로젝트에 따라 다이어그램 작성을 요구하기도 합니다.그런데 요구사항을 문서로 정리한 후, 문서를 보고 다이어그램을 만드는 경우도 있습니다. 그야말로 문서를 위한 문서 작성이지만, 어쩔 수 없는 경우도 있습니다.프로젝트 초반에 전체 구상을 위해 activity 다이어그램을 작성하기도 합니다. 서버 환경이 객체 지향 환경일 때는 Class 다이어그램을 작성합니다.
- 0
- 1
- 223
질문&답변
요구사항 상태 구분에 대해 질문합니다.
좋은 질문, 너무 좋습니다^^ 강의자의 생각을 적어봅니다.1. 요구사항과 현행 비즈니스 프로세스를 비교한 상태입니다.2. 상태 2에서 상태 1로, 상태 3이 상태 4로 이어지는 상황이 아닙니다.3. 상태 2는, 현행 비즈니스 프로세스가 요구사항을 포함하고 있다는 상태입니다.4. 현행 비즈니스 시나리오에 10개의 비즈니스 프로세스가 있다고 할 때, 이 중에서 비즈니스 프로세스 2개가 요구사항이라면, 요구사항을 포함하고 있는 상태입니다.나머지 8개 비즈니스 프로세스 중에서 포함, 변경, 제외, 추가가 발생할 수 있습니다.지금 단계는 비즈니스 목표 모델을 정의하기 위한 요구사항 조사 단계입니다.
- 1
- 1
- 292
질문&답변
forEach문을 활용한 코딩시간 풀이
코드는 고칠 것이 없네요. 코드를 작성한 후에 주석을 작성한 것은 아닌가요? 코드 위에, 앞에 주석을 작성하세요. 주석을 먼저 작성하는 것은 코드를 작성하기 전에 내 생각을 먼저 정리하는 것을 뜻합니다. 그리고 정리한 주석을 보고 코드를 작성하는 것입니다. 어렵지만 습관으로 만들기 바랍니다.수업을 듣고 있는데도 아직까지 혼자 명확하게 코드 짜는게 어렵고 많이 헤매네요ㅠㅠ언제쯤 문제사항을 보고 능숙하게 함수와 메소드를 활용해서 코드를 짤 수 있을까요 응용실력이 얼른 늘었으면 합니다...==> 당연합니다. 그래도 지금처럼 계속 꾸준하게 하면 됩니다. 힘들더라도 진도를 뛰어 넘으면 안됩니다. 자바스크립트 4개 강좌를 5번 반복하면서 매번 코딩한다고 생각하고 진행하기 바랍니다.프로그램은 감을 잡는 것이 중요합니다. 지금은 자바스크립트 프로그램의 언어적 감각을 만드는 단계입니다. 감을 잡으려면 전체를 보아야 하고, 생각한 것을 주석으로 작성하고, 검토하고, 그것을 코딩하는 방법이 왕도입니다. 반복할 때마다 감을 잡는 범위가 넓어질 것 입니다.
- 0
- 1
- 487
질문&답변
sort 코딩 시간 풀이
two - one가 양수인 경우는==> two - one이 음수인 경우debugger로 한 줄씩 코드를 따라 가면서 값이 변하는 상태를 브라우저 개발자 도구에서 보면 확실하게 이해할 수 있습니다. 이렇게 하는 것도 습관으로 만들어 보세요.내가 작성한 코드를 내가 완전하게 체크하는 마인드를 갖는 것은 매우 중요합니다.그러면 내 자신을 내가 믿게 됩니다.
- 0
- 1
- 208
질문&답변
코딩 시간 풀이 올려봅니다.
var list = []; //html에 들어갈 배열 자리 생성==> 주석을 코드 위에 작성합니다.//html에 들어갈 배열 자리 생성var list = [];주석을 작성하는 것을 알았으니 이제 주석의 질을 생각해야 할 때입니다.코드 설명은 코드를 보면 알 수 있으므로 목적, 의도를 작성하면 더 좋을 것 같습니다.push()는 배열 끝에 첨부합니다. 삽입은 중간에 끼워넣는 뉘앙스가 담겨 있습니다.대체적으로 좋습니다. 이렇게 계속 해나가면 좋은 결과를 얻을 것 같습니다. 응원합니다.
- 0
- 1
- 164
질문&답변
인덱스 코딩시간 문제풀이
주석을 잘 작성해서 너무 멋있습니다. 지금처럼 꼭 습관을 만들기 바랍니다. 이렇게 1~2년하면 다름 사람과 차별화될 것이며 취업/이직할 때 좋은 평가를 받을 것입니다. 코드에서 느낀 것을 적어봅니다. 틀린 것은 아니니 참고하면 되겠습니다.var k = birth.indexOf(1997); ==> var year = birth.indexOf(1997); k는 가독성이 떨어지므로 yearif(k == 0){...}==> if (k === 0){...} // === 3개var i = birth.lastIndexOf(12, 4);==> var month = birth.lastIndexOf(12, 4); i는 가독성이 떨어지므로 monthif(i == 4){...}==> if (k === 0){...} // === 3개인덱스 4번째가 월에 해당하는 위치이기 때문에 ==> 인덱스는 0부터 시작하므로 5번째 인덱스 값 4, 5 두자리가 월에 해당하므로이 정도 데이터는 indexOf()나 lastIndexOf()의 차이가 없습니다. 물론 시맨틱으로는 가치가 있습니다.var i = birth.indexOf(12, 4);
- 0
- 1
- 311
질문&답변
for문 코딩 시간 답제출
우선, 주석을 자세하고 정확하게 작성한 것에 박수를 보냅니다. 멋있습니다. 짝짝~~코드를 작성하기 전에 먼저 로직을 생각하고, 생각한 것을 자세하고 정확하게 주석을 작성한 후 코드를 작성하는 습관을 만들어 주세요. 코드를 바꾸어야 한다면, 그 때에도 먼저 주석을 정리하고 코드를 작성합니다.전체적으로 구성도 좋고 코드도 좋습니다. 틀린 것은 아니지만 적어 봅니다.==> for(var k=1; k사람에 따라 다르지만 k = 1; k ==> 반복문이 돌아갈 때 반복문이 돌아갈 때마다
- 0
- 1
- 232