뉴비 개발자의 학습일기

지난번에 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 박스들과 버튼을 정렬하는 과정에서 예상치 못 한 난관에 부딪히는 경우가 꽤 있었다. 각각의 개체들을 정렬하는 과정에서 사용되는 태그 및 속성들을 유심하게 살펴보면서 튜토리얼을 따라갔지만, 배운 내용을 토대로 나만의 계산기 목업을 만들어보려고 하니 막상 진행이 잘 되지 않았다. 처음엔 튜토리얼에서 만든 계산기에 약간의 기능 추가나 색상 변경 정도만 하려고 했지만, 코드스테이츠 크루님께서 보여주신 전 기수 분들의 작품들을 보게 되자 나 역시 조금 더 퀄리티 있는 과제물을..

오늘은 처음으로 페어 분을 만나서 같이 과제에 대해 고민도 해보고 1주차 코스 진행 중에 어려움은 없는지 현재까지 느낌은 어떠한지 등을 공유하는 시간을 가졌다! 내가 그러한 것처럼 페어 분도 정신 없는 하루하루를 보내고 계신 것 같았다 ㅋㅋㅋ... 첫 주차에 배운 HTML 및 CSS 사용에 능숙할 만큼 웹 개발을 공부하고 온 분들이 아니라면 아마 매일매일 수업 내용을 소화하고 복습과 정리 및 과제 수행, 블로깅 등의 활동으로 벅찬 일정일 것이기 때문이다. 하지만 SEB 크루 분들의 말씀으로는 나중에는 지금이 그리워질 것이라고 한다. 자바스크립트를 본격적으로 배울 때는 변수나 함수 등 추상적인 것을 많이 다루기 때문에 CSS처럼 눈에 즉각적으로 보이는 언어가 차라리 나을 것이라는 얘기였다. 또한 displ..

오늘은 CSS의 개념과 의미, 아주 기초적인 사용법과 여러 가지 요소, 자식 요소나 후손 요소 등을 적절하게 선택하는 법 등을 배웠다. SEB_FE_44기의 수업도 오늘로 3일 차에 접어들었는데, 다들 열정을 갖고 수많은 자료나 레퍼런스, 참고할 만한 사이트들을 활발하게 공유하고 스터디 계획도 착실하게 세워가는 모습을 보면서 긍정적인 에너지를 받고 또 나 자신도 그런 에너지를 주는 사람이 되고 싶다고 느낀 하루였다. 점점 하루에 배우는 내용도 많아지고 있고 수행해야 할 과제도 점차 늘어날 것이라는 점을 고려해서 공부일기 카테고리에는, 그 날 습득한 내용의 자세한 정리나 나열보다는 일기를 쓰는 날 느낀 감정이나 겪고 있는 문제, 어려움 등을 돌아보고 처음 다짐했던 성장하겠다는 의지에 부응할 만한 하루였는지..