발견 보고서

먼저 구조 분해 할당은 ES6의 등장과 함께 추가된 방식이다. 리액트에서 구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있고, 간략하게 코드를 작성할 수 있어 가독성을 높이는 좋은 효과를 준다. 구조분해 기본 문법 let a, b, rest [a,b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 [a,b, ...rest] = ['a', 'b', 'c', 'd', 'e'] console.log(a) // 'a' console.log(b) // 'b' console.log(rest) // ['c', 'd', 'e'] ({a,b} = {a:1, b:2}); console.log(a); // 1 console.log(b); // 2 le..

난 아무리 피곤하더라도 자기 전 한 판 정도는 게임을 하고 잠이드는 습관이 있다. 하루의 마무리를 짓는 하나의 의식같은 걸로 굳어졌다는 느낌이 들 정도이다. 근데, 최근 들어 나 자신이 참 이상하다고 느끼기 시작했다. 요즘은 게임을 해도 재미를 느끼지 못한다. 롤을 해도 티어를 올리기 위한 욕구가 높지도 않고 스타를 해도 이기기 위해서 하는게 아니라는 것을 알게된 것이다. 단지 그동안 해왔기 때문에 하는 느낌, 어떤 목적 없이 그냥 시간을 쓰는 느낌이 들기 시작했다. 그리고, 이런 생각이 든 시점은 어떤 글을 접하고나서부터였다. 내용이 정확히 기억이 나지 않지만, 얼추 내 자신에게 적용하면 "니가 롤 티어를 올리려고 전적 검색을하고, 전적이 좋지 않은 사람들과 잡혔다고 닷지를 하고 대기하던 시간 그리고 ..

DOM의 사용법에 대해 아주 기초적인 지식만 공부했기에, Javascript상에서 DOM이 어떤식으로 작동하는지에 대해 확실히 이해를 하지 못했다. 그래서 막상 알고리즘을 짜거나 코드를 작성할 때 문제가 생기곤 한다. 첫 번째 알게된 점 template literal로는 appenChild를 할 수 없다는 것 const frag = document.createDocumentFragment(); const domString = `'let's test!!'` frag.appendChild(domString); const body = document.body; body.appendChild(frag); alert(body.lastChild.tagName); 위 코드를 실행해보니 오직 Node만 파라미터로 사용..

재귀함수 재귀의 의미에 대해서 이해하고, 자바스크립트에서 재귀 호출을 할 수 있다. // 문제. 자연수로 이루어진 리스트(배열)를 입력받고, // 리스트의 합을 리턴하는 함수 `arrSum` 을 작성하세요. let arr = [1, 3, 5, 7] //a let sum = 0; for(let i =0; i acc+cur) 재귀란, 자기 자신을 참조하여 자기 자신을 정의하는 것인데, 위의 경우처럼 어떤 문제를 맞이했을 때, 그 문제를 가장 작은 단위로 나누어 해결하고, 그 범위를 점차 넓혀가며 전체 문제를 해결하는 방식이다. 위를 예시로 들어 재귀를 통해 풀어본다면, 1. 기존의 문제에서 출발하여 더 작은 경우를 생각한다. arrSum([1, 3, 5, 7]) = 1 + arrSum([3, 5, 7]); ..

절차 지향 프로그래밍 객체 지향 프로그래밍에 대해 더 디테일하게 공부하기 전에 먼저 절차지향 프로그래밍을 찾아보면, 순차적인 처리가 중요시 되는 프로그래밍 기법이다. 즉 물이 위에서 아래로 흐르는 것같은 방식을 통해 모든 프로그램이 유기적으로 연결되도록 만드는 것이다. 이 방식 자체는 컴퓨터의 작업 처리 방식과 유사하여 실행속도가 빠르지만, 시대가 흐를수록 발전하는하드웨어로 인해 컴퓨팅 환경은 급속도로 증가했지만, 소프트웨어가 그 발전 속도를 따라가지 못하게 되었고 이런 상황에 발 맞춰 소프트웨어의 개발시간을 단축할 수 있는 방식을 택하기 위해 객체 지향 프로그래밍이 등장하게 된 것이다. 장점 - 컴퓨터의 처리구조와 비슷하여 실행속도가 빠르다. 단점 - 실행 순서가 정해져 있으므로, 코드의 순서가 바뀌면..

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다. 단, 두 가지 문법 차이가 있는데, React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용해야 한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다. 예시를 들어보면, HTML에서는 event를 처리하는 방식은 아래와 같은데 Event React에선 조금의 차이점을 볼 수 있다. Event // onclick ==> onClick (camel case 적용) // handleEvent() ==> {handleEvent} (JSX를 적용하여 함수를 중괄호 안에 넣어줌) 이벤트 종류 관련해서는 기존에 작성한..

https://www.tutorialspoint.com/square-root-function-without-using-math-sqrt-in-javascript Square root function without using Math.sqrt() in JavaScript Square root function without using Math.sqrt() in JavaScript We are required to write a JavaScript function that takes in a number and calculates its square root without using the Math.sqrt() function. Therefore, let’s write the code for this func..

6월 10일 기수 이동을 선택하고 다시 HA 시험에 임했다. 시험 전날, 기수 이동을 한 이후의 나의 행동들을 다시 돌아봤다. 나름 부끄럽지 않은 삶을 살아왔다고 생각했다. 1. 조금이라도 더 개념을 이해하기 위해 매일 내가 오늘 알고 싶은 개념, 그리고 새로 알게된 개념들에 대해 정확하게 작성하고자 했다. 2. 스터디 모임을 구성하여, 내가 이해한 개념이 정확한지 그리고 그 개념을 다른 사람들에게 설명할 수 있는지에 대해 확인하고, 또한 서로를 독려하며 그 모임을 계속 유지했다. (물론 내가 도움을 받은 부분이 더 많다.) 3. 일주일에 최소 3번은 어떻게든 아침에 수영을 갔고, 최근 몸에 생기는 긍정적인 변화들에 감사함을 느끼고 있다. 하지만, 막상 시험을 맞이했을 때, 내 부족함이 드러나게 되었다...

State(상태) 컴포넌트를 사용하는 와중에 컴포넌트 내부에서 변할 수 있는 것 실생활에서 예시를 들어보면, 나이, 취업 여부, 현재 사는 곳, 결혼/연애 여부같이 변경이 가능한 부분들 토글 스위치 온 오프, 체크박스 체크가 되었는지 아닌지, input 텍스트에 글이 입력이 되었는지 여부 등등 React 에서는 이러한 state 를 다루는 방법 중의 하나로 useState 라는 특별한 함수를 제공한다. useState 함수는 React Hook을 사용하기 위해 쓴다. 함수형 컴포넌트에 적용된다. 어느정도 차이점을 보이기 위해 Class Component 일때의 예시도 들어본다. useState 사용 방법 먼저 useState 를 컴포넌트 안에서 호출한다. useState 를 호출한다는 것은 "state"..

SPA ( Single Page Application) SPA 등장 배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 예시 그림은 동일한 페이지 전환을 보여주고 있는데, 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는 걸 볼 수 있다. 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 Header 나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발..