김기지의 코딩노트

수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다. (사실 거의 다 보고 베낀 수준이지만..) 계산기 최종 먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다. 다크모드 / 라이트모드 처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다. 하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다. 🔍 element.classList.toggle()이란? -> 클래스 값을 토글링한다. 즉, 클래스가 존재..

🔖 객체 사전적인 의미는 실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념 🔍 자바스크립트에서의 객체란? 값 또는 기능을 가지고 있는 데이터 즉, 소프트웨어적 사물로써 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단이다. 🏷️ 최초의 객체 : 웹 브라우저 웹 브라우저는 소프트웨어에 세계에 존재하는 사물, 즉 객체이다. 자바스크립트는 웹 브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어로, 사용자가 웹 브라우저에게 명령을 내릴수 있도록 돕기 위해 웹 브라우저와 관련된 다양한 객체들을 제공한다. 그 중 대표적인 객체는 window객체이다. 📎 자바스크립트 코드 내에서 window를 입력하면 웹 브라우저에 접근할 수 있다. 🏷️ 객체 사용하기 객체는 값 또는 기능을 가지고 ..

1. 목표 상기하기 한 달 전, 블로그에 기록한 내 목표가 기억이 나질 않… 2022.12.15 - [코딩/코드스테이츠] - 프론트엔드 부트캠프를 들어가며..- 💬 나는 지금 어느 정도까지 왔을까? 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? 더보기 부트캠프에 들어오기 전, 수강 했던 다른 수업이 완료된 이후에 나만의 페이지를 만들어 보려 시도한 적이 있었다. 그런데 혼자서 시작을 해보려 하니 첫 시작 단추부터 채우지 못했다. 학원에서 주던 코드에 무언가를 추가 하기만 했었기에 내가 원하는 페이지를 만드는 데에는 전혀 쓰지를 못했던걸까.. 그래서 이번 부트캠프에 들어오면서 처음부터 끝까지 내가 원하는 무언가를 만들어보자! 라는 목표를 제일 먼저 세웠다. 여러분이 현재 바라는 목표를 모두 이..

(유노코딩의 자바스크립트 기초 영상을 보고 공부한 내용 정리) ◎ DOM이란? 브라우저는 HTML문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTMLZ코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. 🔍 렌더링에서는 무슨 일이 일어날까? 더보기 브라우저는 HTML코드를 해석해서 요소들을 트리형태로 구조화해서 표현하는 문서(객체)를 생성한다. 이 객체를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. ● DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의 할 수 있도록 제공되는 프로그래밍 인터페이스이다. 자바스크립트가 웹 문서에 대한 어떤 동작을 구현하고 ..

🔍 koans???? = 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가짐 (각 주제의 문제를 해결하면서 알게 된 부분을 위주로 적어보겠다!) ► 01_Introduction 첫 번째 주제에서는 '기대하는 값'과 '결과로 나온 값'이 같은지 알아보는 expect함수를 사용했다. expect(테스트하는값).기대하는조건 여기서 기대하는 조건에 들어가는 함수를 'matcher'라고 부른다. expect(1+1).to.equal(2) // sum(1+1)의 결과값은 2와 같아야함 expect(true)to.be.true // 테스트하는 값이 true여야함 기대하는 값은 표현식 이거나 함수의 실제 실행 결과이다. (기대하는 조건에 들어가는 함수는 여러가지가 있지만 수업에서는..

◎ 원시 자료형 (primitive data type) 고정된 저장 공간을 차지하는 데이터 ex) number, string, boolean, undefined, (null) , bigint, symbol 🔍 왜 원시 자료형이라 부를까? 더보기 원시 자료형은 모두 "하나"의 데이터를 담고있음 왜? 옛날에는 데이터 저장소의 용량이 제한되어 있어 변수 하나에 용량이 제한된 하나의 원시 자료형밖에 담을 수 있었음 BASIC이라는 예전에 사용하던 컴퓨터 언어에서도 string과 number는 쉽게 찾을 수 있지만, 배열에 상응하는 형태는 찾기 어려움 이 때 배열이 구현 가능했더라도 보통 사이즈가 제한되어있음 이처럼 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 원시 자료형은 값 자체에 대..

◎ CSS 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어 더 나은 UX(user experienc)를 제공하기 위한 UI(user interface)및 레이아웃을 구성하기 위해 사용 ► UI(사용자 인터페이스) 더보기 • 인터페이스 : 컴퓨터와 교류하기 위한 연결고리 버튼이나 마우스가 없던 시기에 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI을 사용했음 이 방식은 키보드로 작성한 암호코드를 적어 엔터로 눌러야 애플리케이션이 작동했으므로, 컴퓨터에 무지한 일반 사용자들은 사용할 수 없었음 하지만 인터페이스가 잘 만들어진 요즘은 일반 사용자도 애플리케이션을 사용할 수 있음 이러한 인터페이스 앞에 '사용자'를 붙여 '사용자 인터페이스'가 됨 UI는 컴퓨터에 무지한 일반 사용자들이 애플리..

◉ HTML 웹 페이지의 뼈대를 구성하는 마크업 언어 (프로그래밍 언어X) 웹 페이지의 틀을 만듬 ○ HTML은 tag들의 집합 tag : 부등호()로 묶인 HTML의 기본 구성요소 구조를 살펴보면 상위 태그 안에 하위 태그의 묶음으로 구성된 트리 구조로 이루어져 있다. 태그는 여는 태그로 시작해서 닫는 태그로 끝낸다. 하지만 예외인 태그들도 존재한다. 예를 들어 태그같이 내부에 내용이 없는 태그의 경우 닫는 태그 없이 로 표현한다. 여기서 / 도 생략이 가능하다. 이러한 태그를 Self-closing tag라 한다. 자주 사용하는 태그 중 태그를 알아보자 태그는 self-closing tag로 닫는 태그 없이 사용 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성 다양한 종류..

◎ 반복문이란? 자바스크립트의 대표적인 제어문 중 하나 코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 것 반복문을 왜 써야할까? 구구단을 출력하는 코드를 짠다고 가정해보자. 먼저 2단을 출력하는 코드를 작성하고 동작이 마무리되면 다시 3단을 출력하고... 컴퓨터가 같은 동작을 반복하는 동안 우리는 계속 코드를 입력해주어야 할것이다. 이때 반복되는 코드를 자동으로 반복하도록 한다면 시간적인 측면에서나 가독성에도 좋을것이다. ◎ for문 자바스크립트의 대표적인 반복문 ▶ for문 형식 for ( 초기값; 조건식; 증감식 ){ 실행할 코드; } 초기값 : 증감식 반복횟수를 카운트하는 역할을 하는 변수(주로 정수를 의미하는 integer의 약자인 i를 사용) 초기값은 반복..

컴퓨터는 작성된 코드를 위에서 아래 순서로 순차적으로 실행한다. 그런데 어떤 경우에 따라 다른 코드가 실행되게 하고 싶다면?? → 조건문을 활용하자 ◎ if문 가장 대표적인 조건문 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됨 → boolean타입이 되도록 작성해야한다. if ( 조건식 ) { 내부 코드 } 조건식이 참(true)으로 평가되면 코드블록 내부의 코드가 실행된다. 조건식을 상황에 맞게 작성하면 특정 상황에만 코드가 실행되도록 할 수 있다. boolean타입에서 사용한 연산자를 이용하여 조건식을 만들어보자! ● 동치 연산자(===) - 두 피연산자가 동일하면 true, 아니면 false로 반환됨 - !==는 반대로 반환 let nickname = 'kiji'; if..