개발하고 싶은 초심자

오늘은 고차함수와 함수 메소드에 대해서 공부했다. 요즘 개념을 읽으면 이해할 수 있는데, 그 개념을 말로 설명하거나 메소드를 응용하는 부분에 있어 헷갈리는 부분이 있다. 그 말은 내가 제대로 이해를 하지 못했다는 것이겠지? 이제 개념을 보고 이해를 할 수 있는 정도에 이르렀으니, 내가 말로 설명까지 할 수 있어야겠다. 그러나 헷갈린다는 것은 정확하게 그것에 대해 알고 있지 못하다는 뜻이니, 확실하게 이해한 후 코플릿 문제를 다시 풀어봐야겠다. 내가 지금 모르고 있는 것은 map과 filter에 대해서다. 확실하게 아는 것이 아니니 문제를 보았을 때 적용해야 할 메소드를 잘 모른다. 이제 어느 정도 나의 공부 방법을 찾고, 그 공부방법에 있어 페어 프로그래밍을 통해 개선해나갈 부분을 적용시킬 수 있어서 좋..

DOM과 유효성 검사에 대하여 복습했다 사실 개념을 익히는 것도 중요하지만, 개념을 익히기만 하기 보다는 결국 내가 실제로 일을 하며 사용해봐야 할 것들이기 때문에 직접 내가 해보는 것이 제일 중요하다. vs code를 사용하여 직접 html파일을 만들어보고, 그에 따른 js파일을 만들어보았다. html파일을 만들기 전 내가 어떻게 만들고 싶은 지, 무슨 기능을 넣고 싶은 지에 대해 생각하며 파일을 만들어 실행시켜보았다. 실제로 내가 어떠한 이벤트(클릭이라던가 키보드를 누른다던가 등의)를 실행시켰을 때 원하는 대로 작동을 했을 때 기분이 좋았다. 그렇게 되게 하기 위해 생각하는 시간이 길긴 했지만, 결과물을 봤을 때의 그 뿌듯함이란! 당연히 지금 당장 복습을 하며 실습을 해봤다고 해서 내가 완벽하게 다 ..

1. 이벤트 객체 : 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체. 만약 포스기에서 특정 메뉴의 버튼을 클릭하면 특정 멘트가 나오는 코드를 작성한다고 가정하자. 버튼의 이벤트 핸들러가 동일한 함수에 의해 동작한다. ✷이벤트 핸들러: 이벤트가 발생했을 때 그 처리를 담당하는 함수 어떤 메뉴가 추가되더라도 하나의 함수를 추가하여 작성하면 함수 재사용이 가능하다. 사용자가 버튼을 클릭하면 그 버튼의 textContent(혹은 innerHTML)를 이용해 해당 요소의 정보를 가져올 수 있다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type속성과 이벤트의 대상을 나타내는 target속성을 가진다. 이러한 이벤트 객체는 이벤트 리스너가 호출할 때..

1. DOM(Document Object Model) : 프로그래머 관점에서 바라본 HTML. ⇒ HTML 요소를 Object(JavaScript Object / 객체)처럼 조작(Manipulation)할 수 있는 Model ⇒ document라는 전역변수로 접근 가능 ✷ 그렇다고 DOM이 Javascript는 아님! 단지 DOM의 구조 접근을 Javascript를 이용해서 할 뿐! ① HTML에 Javascript 적용하기 - 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면 HTML 해석을 잠시 멈추고 요소를 먼저 실행한다. ✅ 요소는 등장과 함께 실행된다. - 태그를 추가하는 두 가지 사례 ‣ 태그 안에 이렇게 넣어서 연결할 수 있다. * js에서 직접적으로 css속성인 diplay: n..

오늘은 spread와 rest문법, 구조 분해 할당을 배우고 javascript koans sprint를 페어 프로그래밍으로 진행했다. koans에는 왜 테스트 문법을 알아야 되는 지 부터 오늘 배운 구조 분해 할당까지 테스트 케이스로 문제를 풀어볼 수 있도록 담아져 있는데, 오늘은 페어와 함께 배열 중간까지만 풀어보았다. 오늘 페어 프로그래밍은 내가 설명을 듣는 것이 아닌 페어에게 설명을 해줄 수 있는 단계까지 와서 스스로 기분이 좋았다. 주말에 배열에 대하여 복습을 한 부분이 문제를 풀 때 도움이 많이 되어 설명을 해줄 수 있었다. 같이 이해를 하면서 푸느라 배열 중간까지만 풀고 페어 프로그래밍은 끝났지만, 그 뒤에 어떤 문제가 있는 지 궁금하여 풀어보지는 않고 잠깐 들여다보았다. 그런데 주말에 복습..

1. spread 문법 : 배열을 풀어 인자로 전달하거나, 배열을 풀어 각각의 요소로 전달할 때 사용한다. : 배열의 요소를 펼쳐 주는 문법 ex) function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3] sum(...numbers); // 6 ...numbers라고 써준 것은 배열의 각각의 요소들을 나눠주고 x, y, z라는 인자에 전달하는 방식이다. 요소들이 x, y, z에 전달되었으므로 sum은 1 + 2 + 3이 된다. 그렇기 때문에 콘솔에 입력하면 답은 6이 나온다. ✷ ...은 spread문법의 연산자이다(dot 3개 연속으로 붙이는 것이 연산자). ① 배열에서 사용하기 ‣ 배열 합치기 ex) let parts = ['b', ..

오늘은 배열과 객체를 복습했다. 수요일에 배웠던 것이었지만, 다시 코플릿 문제를 풀어보려 했을 때 다시 정확하게 이해하면서 풀 수 없었다. 그래서 배열과 객체에 관하여 기본 개념과 예제를 이해하고 풀어보고, 코플릿을 다시 풀어보기로 했다. 배열과 객체에 대해서는 지난 시간에 공부했던 내용들이 머릿속에 남아있어, 다시 정리하는 식으로 영상을 보며 예제를 직접 콘솔에 찍었다. 그랬더니 더욱 이해가 잘 되었다. 코플릿을 다시 풀어보는데, 예전엔 하나도 손을 대지 못했다면 이제는 문제의 의도를 수도코드로 적어가며 하나하나 되짚어보고 내가 알고 있던 부분에 대하여 코드로 작성해볼 수 있었다. 첫 주에 코플릿을 풀 때 머리속에 있던 개념을 하나도 정리하지 못하고, 정리하지 못하니 응용을 할 수 없어 쩔쩔 맬 때와는..

html과 CSS에 관하여 파일을 만들고 직접 실행시켜보아 결과물을 만들어보고, 스코프와 클로저에 관하여 복습했다. 처음에는 html과 CSS를 작성하며 눈에 보이는 결과물을 보면 분명 재미있어질 것이라는 말을 듣고, '나는 눈에 띄는 결과물을 잘 못보는데, 어떤 점이 그렇게 재미있을까? 내가 이상한걸까?' 라는 생각을 했었다. 그런데 실제로 내가 직접 와이어프레임을 구현하고, 명령어를 통해 직접 눈에 띄게 무언가 바뀌는 것을 보며, 재미를 느꼈다. '아, 이래서 재미있다고 했구나!' 라는 생각으로 바뀌었고, 지금은 클론 코딩을 하는 것에 그치고 있지만 더 많이 해보고 익숙해지면 내가 생각해서 무언가를 만들어볼 수도 있겠다. 그렇게 생각하니 더더욱 재밌어지고 열정이 생긴다. 스코프와 클로저에 대한 복습은..