개발 공부/생활코딩! HTML+CSS+JavaScript
-
JS 편 - 9, 10일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 17. 09:00
9, 10일차 35. 라이브러리와 프레임워크오늘날 우리가 소프트웨어를 만든다고 하면 혼자서 만드는 경우는 없다. 그 이유는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 만들고 있는 것이기 때문이다. 그뿐만 아니라 우리가 소프트웨어를 만들 때 혼자 만드는 것보다는 다른 사람이 이미 잘 만든 것을 부품으로 삼아 내가 만들고자 하는 것을 빠르게 조립해서 만드는 것이 오늘날 소프트웨어를 만드는 아주 중요한 기본 중의 기본이라 할 수 있다.지금까지는 생산자가 되는 방법을 살펴봤고, 이제부터는 다른 사람이 만든 소프트웨어를 부품으로 삼아 내가 만들고 있는 소프트웨어의 생산자가 되는 방법을 살펴보자.이 때 알아두면 좋은 키워드는 라이브러리와 프레임워크이다. 이 두가지는 다른 사람의 도움을 받아 소프트웨어..
-
JS 편 - 7일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 15. 09:00
7일차 29. 객체 예고이제 배울 도구는 '객체(object)'이다. 객체라는 도구는 굉장히 중요하지만 어렵다.프로그래밍을 배울 때 큰 산이 두 개가 있는데, 하나가 함수이고 그 다음 산이 객체이다.객체라는 것은 함수라는 개념과 개립되는 개념이 아니고 함수라는 기반 위에 객체라는 것이 존재하기 때문에 심화된 것이라고 보면 된다.객체가 가지고 있는 여러가지 다면적인 얼굴들 중 하나만 알아보자.그것은 바로 정리 정돈의 수단으로서의 객체이다.프로그래밍을 하다 보면 코드가 많아지고, 코드가 많아지면 잘 정리 정돈하기 위해 함수라는 것을 쓴다. 그리고 함수뿐만 아리나 연관되어 있는 변수가 엄청나게 많아지면 역시나 똑같이 복잡도의 한계에 도달한다.그러한 상황에서 서로 연관된 함수와 변수를 같은 이름으로 그루핑해..
-
JS 편 - 6일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 14. 09:00
6일차 24. 함수 예고함수(function)라고 하는 것에 떠오르는 이미지는 수납상자이다. 집에 살림이 많아지면 수납상자를 장만해서 정리 정돈 할 것이다.마찬가지로 코드가 많아지면 그 코드를 잘 정리 정돈하기 위한 도구가 필요하다.가장 먼저 생각할 수 있는 것은 아주 간단하며 강력한 도구가 함수이고, 그것보다 좀 더 큰 도구가 객체이다.만약 위와 같은 태그를 극단적으로 생각하여 1억 개 작성한다고 상상을 해보자. 여기서 'powderblue'라는 부분을 다른 색으로 바꿔야 한다면 1억 개의 'powderblue'를 전부 바꿔야 한다. 물론 쉽지가 않다. 그리고 만약 하나를 복사하였더라도 만약 다른 사람이 본다면 완전히 중복된 코드라고 바로 알 수 있을까? 그건 어려울 것이다.이처럼 코드의 양이 엄청..
-
JS 편 - 5일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 13. 09:00
5일차 19. 반복문 예고기존 예제에서 불만족스러운 부분을 찾아보자.night 버튼을 누르면 링크들이 너무 어둡다. 반면 밝은 색으로 바뀌었을 때는 링크가 선명하게 보이는 것을 볼 수 있다. 즉. 버튼을 누를 때마다 어두운 경우는 조금 밝게, 밝은 경우에는 조금 어두운 색으로 링크가 표현되었으면 좋겠다는 것이다.모든 링크에 대해 style 속성의 값을 조절해서 코드를 작성해도 되겠지만, 링크가 1억 개라면 1억 번 반복해야한다. 그러면 코드의 양이 늘어나며, 유지보수가 힘들어진다.이런 문제를 해결해주는 기능이 바로 반복문이다.기존 예제를 수정하는 것은 나중이 될 것이고, 일단 다음 시간부터 자바스크립트의 기능으로 맨 먼저 배열을 알아보고 그 다음으로 배열을 이용해 반복문을 살펴볼 것이다. 저자 유튜브..
-
JS 편 - 4일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 12. 09:00
4일차 13. 프로그램, 프로그래밍, 프로그래머이번 장을 자바스크립트라는 프로그래밍 언어가 무엇인가를 이론적으로 돌아보는 장이다.HTML과 자바스크립트는 둘 다 컴퓨터 언어이다.하지만 자바스크립트는 컴퓨터 언어 또는 컴퓨터 프로그래밍 언어라고 하지만 HTML은 컴퓨터 프로그래밍 언어라고 하지 않는다.이 차이를 알기 위하여 프로그램의 어원을 알아보자음악회 같은 경우에는 시간의 흐름에 따라 음악이 연주되는 순서가 있으며, 이런 순서를 프로그램이라 한다.즉, '프로그램'이라는 단어의 중심에는 순서라는 의미가 있다.이 순서를 만드는 행위를 프로그래밍이라고 하며, 이 순서를 만드는 사람을 프로그래머라고 한다.다시 돌아와 컴퓨터에는 여러가지 기능이 있고, 이것을 작동시키는 것이 일반적으로 컴퓨터를 사용하는 방법..
-
JS 편 - 3일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 11. 09:00
3일차 09. CSS 기초: style 속성앞전 CSS 포스팅을 보았다면 내용이 중복되기 때문에 11장까지는 패스하여도 좋다.이전 CSS 포스팅을 보려면 아래를 클릭하면 된다.https://impnem.tistory.com/16?category=1065258 CSS 편 - 1일차1일차 01. 수업 소개 이 수업은 앞의 'HTML과 인터넷 수업'에 의존하는 수업이다. HTML이 무엇인지 모른다면 아래의 링크로 공부한 후에 수업을 진행하는 것을 권장한다. https://impnem.tistory.com/11 HTMLimpnem.tistory.com HTML에서 디자인 적으로 바꾸고 싶은 태그가 있다면 style 속성을 쓰면 된다.아래의 코드를 보자.JavaScriptJavaScript라는 글에 HTML의..
-
JS 편 - 2일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 10. 09:00
2일차 06. 데이터 타입 - 문자열과 숫자컴퓨터 프로그래밍에서는 데이터를 처리하는 것이 매우 중요한 일이다.이번 장에서는 자바스크립트라는 컴퓨터 언어에 어떤 형태의 데이터가 있는지 살펴보고, 그 중 대표적인 것으로 문자와 숫자라는 데이터 타입에 대해 알아보자.데이터 타입이란 한국어로 자료형이라 부르며, 현재 자바스크립트에는 6개의 데이터 타입이 있고, 객체라는 것이 있다.이번 시간에는 숫자(Number)와 문자열(String)이라고 하는 비교적 익숙한 데이터 타입을 알아보자. 먼저 개발자도구의 [Console] 탭을 선택하여 아래와 같이 어떻게 될까?alert(1)경고창으로 화면에 1이라고 출력된다.그리고 아래의 결과는 어떻게 될까?alert(1+1)경고창으로 화면에 2가 출력된다.그런데 코드를 입..
