안녕하세요. 진득 코딩입니다.  프로그래밍 언어도 계속해서 발전하기 위해 업데이트를 하게 됩니다.  자바스크립트도 계속해서 업데이트가 되어가면서 새로운 기술들이 나오게 됩니다.  이번 시간에는 자바스크립트 최신 기술들에 대해 알아보도록 하겠습니다. ES6   먼저 ES6 업데이트에서 나온 여러 최신 자바스크립트 문법에 대해 알아보도록 하겠습니다.  첫 번째는 객체 초기화 방법입니다.  원래는 각각의 요소들을 console에 출력하기 위해서는 key:value 꼴로 작성하여 출력하였습니다.  이때 변수 이름이 키값과 동일하다면 해당 키값만 적어주면 해당 키값이 변수 이름이 되어 출력됩니다.   console에 출력된 값을 보시면 키값이 변수 이름이 되어 해당 키값에 있는 데이터 값을 잘 가지고 온 것을 확..

안녕하세요. 진득 코딩입니다.  프로그램을 개발할 때 구현만큼 테스트도 굉장히 중요합니다.  정처기를 공부하면서 들었던 말 중에 개발한 프로그램에서 버그나 오류가 생기는 것은 개발자에게 있어서 부끄러운 일이다라는 얘기가 있을 만큼 테스트의 중요성이 높습니다.  이번 시간에는 개발 단계에 따른 애플리케이션 테스트에 대해 알아보도록 하겠습니다. V-모델 소프트웨어의 개발 단계에 따라 단위 테스트, 통합 테스트, 시스템 테스트, 인스 테스트로 분류됩니다.이렇게 분류된 것을 테스트 레벨이라고 합니다.애플리케이션 테스트와 소프트웨어 개발 단계를 연결하여 표현한 것을 V-모델이라고 합니다.  단위 테스트(Unit Test) 단위 테스트는 코딩 직후 소프트웨어 설계의 최소 단위인 모듈이나 컴포넌트에 초점을 맞춰 테스..

안녕하세요. 진득코딩입니다.  자라오면서 어느 정도 부모님께서 음식 하는 것을 봐왔거나 자취를 해보신 분들은 따로 요리를 배우지 않아도 어느 정도 음식을 요리할 줄 알고 있습니다.  이때 요리를 본격적으로 배우고 싶을 때 따로 학원을 다녀도 되겠지만 두꺼운 요리책을 구매해서 원하는 요리의 레시피를 참고할 수도 있습니다.  이번 시간에는 프로그래밍을 할 때 메뉴얼이 되는 디자인 패턴에 대해 알아보도록 하겠습니다. 디자인 패턴(Design Pattern) 디자인 패턴은 모듈 간의 관계 및 인터페이스를 설계할 때 참조할 수 있는 전형적인 해결 방식 또는 예제를 의미합니다.문제 및 배경, 실제 적용된 사례, 재사용이 가능한 샘플 코드 등으로 구성되어 있습니다.GOF의 디자인 패턴은 생성 패턴, 구조 패턴, 행위..

안녕하세요. 진득 코딩입니다.  저번 시간에는 버튼 로직을 만들고 간단한 버튼 스타일을 입혀주었습니다.  이번 시간에는 아이템 필터링하는 기능을 만들고 여러 스타일들을 적용하여 프로젝트를 마무리하는 과정을 살펴보도록 하겠습니다. HTML   먼저 HTML을 살펴보도록 하겠습니다.  이번에도 HTML은 거의 변화가 없습니다.  일단 태그를 살펴보게 되면 placeholder 속성을 추가하여 사용자로 하여금 해당 input 박스에 무엇을 입력해야 하는지 알려주는 기능을 추가하였습니다.  이번 프로그래밍에서는 아이템 필터링을 하여 탭 별로 상태를 알아야 하기 때문에 각 탭에 id를 부여하였습니다.  마지막으로 태그에 아무 것도 입력하지 않았을 때의 예외처리를 위한 Alert 창을 위해 태그를 추가하였고 ..

안녕하세요. 진득 코딩입니다.  이번 시간에는 저번 포스팅부터 시작한 To-Do-List의 버튼 로직을 만드는 과정에 대해 살펴보도록 하겠습니다. HTML   task-Board 안에 들어가는 버튼들의 변화가 많은데 이 task들은 js 파일에 있기 때문에 HTML 파일에는 변화가 거의 없습니다.  우선 head 부분을 살펴보면 하이퍼링크에 파일 이름이 바뀐 것을 확인할 수 있습니다.  이번 과정 중에 favicon을 추가하였고 해당 정적 파일은 favicon 폴더에 넣어두었습니다.  또한 태그 밑에 있는 + 아이콘 부분을 태그에서 태그로 변경하여 버튼 이미지를 업데이트하였습니다. CSS   다음은 css에 추가된 css 클래스에 대해 살펴보도록 하겠습니다.  전체적으로 check와 delete 버..

안녕하세요. 진득 코딩입니다.  프로그래밍을 좀 배웠다 하시는 분들이 시도하기에 접근성이 좋은 프로젝트 중 하나는 바로 To-Do-List 만들기입니다.  이번 시간에는 서브 프로젝트로 To-Do-List를 만드는 과정 중 메인 로직을 구현하는 과정을 살펴보도록 하겠습니다. 프로젝트 구조   우선 프로젝트 구조부터 살펴보도록 하겠습니다.  assets에는 리소스 파일들을 모아두는 폴더로 일단 favicon과 image 폴더로 구분해 두었습니다.  image 폴더에는 배경사진을 넣어둔 상태입니다.  웹 정적 리소스로는 html, css, js 파일을 넣어두었습니다. html   우선 html head 부분을 살펴보도록 하겠습니다.  http-equiv="X-UA-Compatible" content="IE=..