뉴비 개발자의 학습일기

[ 객체 정의 ]객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터이며, 0개 이상의 프로퍼티의 조합으로 이루어져 있습니다. 또한 프로퍼티는 키와 값의 조합으로 이루어져 있습니다. 예시) let person = { name: "객체", } //key: ( name ) value: ( "객체" ) //프로퍼티(속성) => 키 + 값 [ 객체와 배열의 비교 ]배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면, 객체는 데이터에 이름(key)을 부여할 수 있는 것이 특징인 자료형입니다. key를 이용해 데이터에 의미를 부여할 수 있고, key를 사용해 데이터에 접근할 수 있습니다. 1. JavaScript에서 사용할 수 있는 ..

CLI(Command Line Interface)는 터미널을 통한 텍스트 명령어로 컴퓨터와 상호 작용하는 방식을 가리키고, GUI(Graphical User Interface)는 사용자가 편리하게 사용할 수 있도록 입력이나 출력과 같은 기능을 아이콘 등을 활용한 시각적 요소를 사용해 컴퓨터의 기능을 간편하게 이용할 수 있도록 하는 방식이다. 컴퓨터를 조작하기 위해서는 반드시 입력(input)이 필요하다. 키보드와 마우스처럼 컴퓨터에 입력을 할 수 있도록 만들어주는 도구를 입력 소스(input source)라고 한다. 일반적인 사용자가 PC를 사용함에 있어서는 이러한 입력 소스를 사용하는 GUI가 CLI에 비해 압도적으로 편리한 것이 사실이지만, 개발자의 경우 원격으로 서버 컴퓨터에 접속하거나 소통해야 하..

지난번에 HTML과 CSS를 활용해 계산기의 겉모습을 만들어 봤었는데, 오늘은 형태를 갖춘 계산기가 웹에서 작동할 수 있게 구현해보는 것이 과제로 나왔다. 물론 실제 계산기의 기능을 모두 구현하는 것은 아니었지만 간단한 기능을 구현해보는 것도 결코 쉽지 않았다. 기초적인 자바스크립트 문법과 표현식 등을 막 배운 상태인 나는 위 코드의 첫 부분부터 이해가 잘 가지 않았다. 물론 코드 옆에 주석으로 설명이 되어 있고 코드스테이츠 강의 페이지 내에도 간단한 설명과 힌트 등이 쓰여있었지만, querySelector를 아직 배운 적이 없고 HTML과 자바스크립트를 연결하는 방법 및 원리 등도 당연히 전혀 모르는 상태이기 때문에 문제를 이해하는 것 부터 상당한 노력이 필요했다. textContent가 이번 과제를 ..

오늘은 어제 배운 if문과 else문, for문, while문 등의 조건문과 반복문을 활용해 연습문제를 페어 프로그래밍으로 풀어보는 시간을 가졌다. 페어 분이 나보다 훨씬 수월하게 코드를 작성해나가실 수 있는 것 같아서 중간중간 막히는 부분을 더 쉽게 풀어나갈 수 있었던 것 같지만 조건문 연습문제를 풀 때는 페어 분과 활발하게 의견을 주고 받으면서 문제를 같이 풀 수 있었다. 하지만 반복문 연습문제를 풀 때부터는 페어 분에 비해 나는 문제의 활로를 찾기가 너무 버거웠다. 페어 프로그래밍 시간이 지난 후 실시간 세션에서 크루님의 해설을 통해 문제를 볼 때도, 조건문 파트보다 반복문 파트가 월등히 어렵다는 것은 한눈에 알 수 있었다. 페어 분도 나도 똑같이 문제를 어디서부터 건드려야 할지 어려워했지만 차근차..

오늘은 대표적인 조건문인 if문과 else문, for문, while문, 등을 배웠다. if (true) { console.log('hello world'); } let name = 'kimcoding'; let course = 'seb be' if(name === 'kimcoding' && course === 'seb fe') { console.log('정보가 일치합니다.') } else if (name === 'kimcoding' && course !== 'seb fe') { console.log('코스를 확인하세요.') // '코스를 확인하세요.' } else { console.log('일치하지 않는 정보입니다.') let num = 5; num % 2 === 0 ? console.log('짝수') ..

첫 주차가 눈 깜짝할 새 지나가는 동안 HTML과 CSS를 개략적으로 배우고 난 뒤 2주차 첫 날부터 곧바로 JavaScript를 배우게 되었다. HTML과 CSS는 그래도 무엇인가 코드에 변화를 주면 시각적으로 바로 나타나기 때문에 직관적으로 이해할 수 있었지만, 자바스크립트는 무엇인가 잘못된 부분이 있을 경우 에러가 날 뿐이기 때문에 문제의 원인을 파악하기가 생각보다 쉽지 않았다. 또한 기본적인 수준이지만 수학적인 사고력도 조금 필요한 부분이 있어서, 수학에 굉장히 약한 나로서는 지레 겁을 먹고 시작할 수밖에 없었다. 하지만 프론트엔드 개발자라면 반드시 익숙해져야 할 언어 중의 하나가 바로 자바스크립트이기 때문에 기초적인 개념을 반복해서 암기함과 동시에, 표현식을 자유자재로 사용해 보면서 문법에 익숙..

CSS는 특정한 태그를 지정하여 스타일을 주는 언어입니다. 이를 위해서 어떤 태그에 스타일을 줄 것인지 정의하는 문법이 필요한데 이 때 사용되는 문법을 셀렉터(선택자)라고 합니다. 1. 전체 셀렉터 *전체 셀렉터는 문서의 전체 요소를 선택하는 셀렉터입니다. * { } 2. 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다. h1 { }section, h1 { } 3. ID, Class 셀렉터ID는 앞에 #을 붙여서 선택하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다.(ID는 중복되면 안 되기 때문!)#아이디명 { } Class 셀렉터는 .을 붙여서 선택하며 여러 객체에 적용할 수 있습니다..클래스명 { } 4. 자식 셀렉터자식 셀렉터는 첫 번째로 입력한 요소의..

오늘은 어제 배운 flexbox를 활용한 와어프레임 구성 및 개체의 정렬 방법을 활용하여 계산기 목업을 만들어보았다. 위 이미지는 코드스테이츠 강의에서 볼 수 있는 튜토리얼 계산기 목업이다. 기본적이고 심플한 형태의 계산기 모습이지만 div 박스들과 버튼을 정렬하는 과정에서 예상치 못 한 난관에 부딪히는 경우가 꽤 있었다. 각각의 개체들을 정렬하는 과정에서 사용되는 태그 및 속성들을 유심하게 살펴보면서 튜토리얼을 따라갔지만, 배운 내용을 토대로 나만의 계산기 목업을 만들어보려고 하니 막상 진행이 잘 되지 않았다. 처음엔 튜토리얼에서 만든 계산기에 약간의 기능 추가나 색상 변경 정도만 하려고 했지만, 코드스테이츠 크루님께서 보여주신 전 기수 분들의 작품들을 보게 되자 나 역시 조금 더 퀄리티 있는 과제물을..