기록하고 싶은 것들

오늘은 아고라스테이츠 게시판을 제작하는 개인프로젝트를 진행했고, 그 과정에서 겪은 어려웠던 점에 대해서 작성하고자 한다. 우선 글 작성 시, 요소의 맨 앞에 새로운 요소를 넣으려고 unshift를 사용하였다. 오류가 나서, 무엇때문인지 고민해 보았다. 분명 unshift는 맨 앞에 넣은 명령어인데 적용이 되지 않아서 의아했다. 문제를 찾아본 결과, unshift는 배열에 적용되는 메소드이고, 요소의 맨앞을 추가할 때는 prepend()를 사용해야 했다. 이후 프로필 이미지를 깃허브 api를 이용하여 github 프로필 이미지를 받아오려고 시도하였다. 하지만, 사진이 받아지지 않고, Promise()이란 문구가 console에 찍혔다. 문제점을 찾아보다가 let으로 설정해준 뒤에 재선언을 해주면 어떨까? ..

오늘은 DOM에 대해서 배웠다. JS로 HTML을 조작할 때 사용한다는 것은 알고있었지만, CRUD 실습을 하면서 다시 복습하니까 이해가 잘 되었다. querySelector와 getElementById의 차이가 궁금했었는데 동일한 기능이지만, 요즘에는 querySelector를 더 선호해서 사용한다고 한다. 그리고 여러 개의 요소를 한 번에 가져오는 querySelectorAll로 조회된 HTML 요소들이, 배열은 아니지만, for문을 사용할 수 있는 배열형 객체 라는것을 새롭게 알게되었다. 이외에도 Element.setAttribute(name,value)를 이용하여 속성을 추가 할 수 있다는 것도 Mdn 검색을 통해서 알게되었다. 이후에는 이를 배운 내용을 바탕으로 유효성 검사 과제를 진행하였다. ..

JavaScript Koans 과제를 진행하면서, 새롭게 알게 된 내용을 정리해보았다. 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 함수 선언식은 호이스팅 가능 catName("클로이"); //"제 고양이의 이름은 클로이입니다" function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); //"제 고양이의 이름은 호랑이입니다" 함수 표현식은 호이스팅 불가 console.log(catName("클로이")); // ReferenceError let catName = function(name) { return "제 고양이의 이름은 " + name + "입니다"; } consol..

오늘은 ES6 주요 문법에 대해서 공부하였다. 기존에 복사의 목적으로 사용하던, ... 연산자에 대해서 자세히 알 수 있었고, 이를 활용해서 배열 합치기, 복사, 객체 합치기, 복사, 나머지 파라미터 받기 등 다양한 방법으로 활용할 수 있다는 것을 알게되었다. 또한 구조분해할당을 통해서 배열이나 객체를 분해하여 변수에 새롭게 할당이 가능하다는 것을 알게되었다. 이후 koans 과제 활동을 하면서, 부족한 개념에 대해서 정리하였고 새로운 개념에 대해서 많이 알아갔다. (과제에서 새롭게 알게 된 내용은 내일 게시물로 올릴 예정이다.) 수업이 끝난 뒤, 스터디를 진행하였다. 오늘 주제인 표현식과 연산자 이외에도 Js가 왜 동적인 언어로 불리는지, 단축 평가(short circuit)의 예시 상황 등에 대해서도..

오늘은 JS 핵심 개념과 주요 문법에 대해서 공부하였다. 하루종일 자습이라서 조금 여유있게 공부할 수 있었던 것 같다. 첫번째로는 원시 자료형과 참조 자료형의 기초에 대해 배웠다. 원시 자료형은 값 복사, 참조 자료형은 데이터 주소를 복사한다는 것을 배웠다. 두번째로는 스코프에 대해서 배웠다. 기존에 알고 있던 용어가 아니어서, 생소하였는데 개념에 대해서 살펴보니 변수 접근 규칙에 따른 범위를 나타내는 것 이었다. 즉 기존에 변수를 설정할 때, 적용되는 범위를 스코프라고 하는 것이었다. 새로 알게된 내용은 화살표 함수는 블록 스코프라는 것과 var을 사용시 블록 스코프를 무시한다는 것이었다, 하지만 이러한 예외 경우를 막기위해 var사용을 지양해야한다고 배우게 되었다. 마지막으로는 클로저에 대해서 배웠다..

오늘은 JS 객체에 대해서 공부한 뒤, 관련 문제를 풀었다. 기존에 프로젝트를 진행했을 때는, 객체를 선언하고 그 값을 사용만 해서 정확하게 사용법을 몰랐는데 오늘 기회를 통해 공부하게 되었다. 우선 객체의 값을 사용하는 방법인 Dot notation, Bracket notation을 알게 되었고, 객체값을 삭제 하는 delete 와 , 해당 키가 존재하는 지 확인 하는 in 연산자를 배웠다. 직관적인 부분이라 이해가 되었는데, 막상 문제를 풀 때 어려움을 느낀 것이 있었다. 바로 for of 와 for in을 사용시 배열을 사용해야할지 객체를 사용해야할지 헷갈렸다. Mdn 문서를 찾아보니, for in은 객체의 반복에서 사용하고, for of은 배열의 반복에서 사용한다고 한다. 또한, ES6 에서 객체..

오늘은 JS의 배열에 대해서 공부하며, 새롭게 알게된 내용들이 있었다. 배열과 null 값에 typeof 를 사용시 object를 반환한다는 것이다. 당연히 각각 array와 null로 반환 될 줄 알았는데, object로 반환이 된다. 그렇다면 배열을 구분하는 방법은 없는가 싶었는데, Array.isArray() 를 사용 시, 배열인 경우 true 값을 반환하여 구분이 가능하다는 것도 새로 알게되었다. 또한 배열 조작시 push,pop을 통해 배열의 맨뒤에 요소를 추가, 제거 할 수 있고, unshift, shift를 통해 앞의 요소를 추가, 제거 할 수 있다는 것을 알게되었다. 새로운 내용들을 알게되니, JS를 기존에 너무 얕게 알고 있다고 생각이 들었다. 공부를 마친 후, 페어 분과 함께 배열관련 ..

오늘은 [Linux/Git] 기초에 대해서 배웠다. 기존 학교수업과 생활코딩에서 linux를 배운적이 있고, 가상환경으로 linux를 사용해본 경험이 있어서 기본 개념을 공부하는데는 수월했다. 문제는 기존에 가상환경으로 받았던 linux가 작동이 되지 않아서, 처음부터 다시 진행했는데.... 제대로 설치가 되었어도 재부팅을 하면 화면이 나오지 않거나, 1시간 정도 기다려야 로그인 화면이 뜨는 등 작동을 시킬 수가 없었다. 문득 맥북을 사야하나..? 고민이 들기 시작했고, 몇 번을 시도해도 작동이 되지 않았다. 기존 linux 설치 때는 화면 해상도 때문에 한국어로 설치가 안되고, 설치하고 일일히 한국어팩을 깔아주면서 작동시켰는데, 지금은 그냥 작동이 안되니까, 너무 스트레스를 받았다. 일단 linux가 ..

오늘은 계산기를 작동하는 기능을 만들었다. 사실 js와 html을 연결하는 것을 수업적으로는 하지 않아서 공유해주신 파일을 통해서, 코드를 수정하는 방식으로 만들었다. bareminium, advanced, nightmare 단계로 나누어졌고, 세부적인 기능을 추가하는 식으로 진행되었다. advanced 문제까지는 쉽게 해결했는데, nightmare 단계부터는 머리가 터졌다ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 마치 우테코의 프리코스를 경험하는 느낌이었는데, 맞는데 왜 틀리지...? 가 반복이었다. 통과해야하는 조건의 수가 많았고, 헷갈리는 포인트가 많았다. 3,-,3,Enter,Enter,Enter,Enter를 연속으로 누르면 -9이(가) 화면에 표시되어야 합니다. 1,0,0,.,.,1,2,5,2,+,1,2,+,1,5,-,..

오늘은 계산기 목업을 완료하였다. 완성된 계산기의 크기를 조정하려고 했는데, 이상한 모양이 되버려서 뭐가 문제인지 고민하다가, 부모 div에 display: flex와 자식 div에 flex 속성을 주어 해결하였다. 계산기를 완성시키고 나서, 다른 동기들이 한 작품들을 보았는데 기울어진 상태로 3D같이 구현한 계산기, 라이언을 직접 그려넣은 카카오 계산기, 미니언즈 애니메이션 적용 계산기 등,,, 엄청난 노력을 해서 만든게 보였다. 나도 이만하면 됐다 싶었는데, 살짝 반성이 되면서 동기부여가 되었다. 뒤늦게 나마 기존에 만들었던 계산기에 노마드코더의 눈송이 효과를 넣어주어서 효과를 줘봤다! -끝-