본문 바로가기

전체 글235

React Array.prototype.map() React를 공부하다보니 새삼 map매소드의 강력함과 편리함을 느끼게 된다. 처음 map메소드를 배울 때는 왜 개발자들은 이런 요상한걸 만들었을까.. 하고 생각했지만, 학습을 진행하면서 필요성을 절실하게 느끼게 된다. 오늘은 React 실습 중에 "Delete" 버튼 구현에 꽤나 애를 먹었다. 데이터를 컴포넌트끼리 주고받는 것은 이해를 했지만 "Delete" 버튼은 특별히 "어떤" 데이터를 지우고 싶은지 그 정보를 특정할 수 있어야 했는데 아무리 생각해도 방법이 생각나지 않는 것이다. (구글링을 해도 전부 Class props를 이용한 방법들 뿐이었다.) 결국 처음으로 GG를 외치고 Reference 코드를 살펴보니 이럴수가..! map 메소드에는 매핑되는 각 엘리먼트에 인덱스를 부여할 수 있는 방법이 .. 2021. 11. 3.
JS Import 무지성으로 import를 남발하던 어느날... 문득 궁금해 졌다. 왜 어떤 import는 { }를 섞어서 쓰는 걸까?! 오늘은 그 이유를 알아보자. import {Something} from somelib 우선 Curly Bracket은 라이브러리 내에 특정 모듈 혹은 무언가를 불러온다는 의미가 있다. 예를들어 'somelib' 라이브러리 안에, 'Something', 'Anything'이라는 모듈이 있다면 위의 경우 그 중 'Something'만을 import한다는 의미다. 만약 둘 다 불러오고 싶다면, import {Something, Anything} from somelib이라고 하면 된다. 이 때 export하는 스크립트에서는 export Something() 혹은 export Anyhting().. 2021. 11. 1.
React Props/State 페이스북(이제는 메타구나)의 개발자들이 만든 자바스크립트 오픈라이브러리 React! 간단하고 유지/보수가 편한 컴포넌트 기반으로 SPA를 만들 수 있는 장점 때문에 전세계적으로 이용되는 라이브러리다. 오늘은 React의 핵심 개념 중 하나인 Props와 State에 대해 알아보자 Props React에서 데이터는 위에서 아래로 (Top to Bottom) 흐른다. 즉 데이터를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달 해 줄 수 있지만 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달 할 수 없다. 또한 부모 컴포넌트로 받은 데이터는 자식 컴포넌트가 수정을 할 수 없다. (Read Only) 이유는, 자식 컴포넌트가 데이터를 수정하면 부모 컴포넌트의 데이터를 참조하고 있는 수많은 다른 .. 2021. 10. 30.
JS Async vs Defer 자바스크립트를 HTML로 연동하기 위해서는 태그의 맨 끝 부분에 태그를 넣어야 한다. 왜 그럴까? 이유는 브라우저가 태그를 만나는 순간 코드를 해석(parsing)하는 과정을 중단하고 자바스크립트 코드를 해석해서 실행하기 때문이다. 그렇다면, 모든 HTML 문서는 위와같은 과정으로만 해석되고 실행되는 것일까? 답은 아니다. 오늘 알아볼 Async와 Defer 스크립트를 이용하면, HTML의 해석방식에 약간의 변형을 가할 수 있다. With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. async 옵션은 DOM트리 생성을 자바스크립트를 만나자마자 중단을 하지 않고, 다운로드가 끝나고 실행.. 2021. 10. 27.
JS Regular Expressions 오늘은 Regular Expressions에 대해 알아보자. Regular Expressions란? A regular expression (shortened as regex or regexp; also referred to as rational expression) is a sequence of characters that specifies a search pattern. Usually such patterns are used by string-searching algorithms for "find" or "find and replace" operations on strings, or for input validation. It is a technique developed in theoretical co.. 2021. 10. 26.
JS 심화개념 - MapReduce, Currying, Function composition, Declarative Programming 자바스크립트를 공부하면 공부할수록 컴퓨터 언어의 세계는 정말... 심오한 것 같다. 컴퓨터공학은 인간이 만든 공학이기 때문에 다른 공학에 비해 간단할 것이라 생각했던 과거의 내가 부끄러워 진다. 오늘은 훌륭한 개발자가 되기위해 알아둬야 할 몇가지 개념들에 대해 알아보자 MapReduce Model MapReduce 모델은 대량의 데이터를 처리할 때 사용 하는 프레임워크이다. 이름에서 유추 할 수 있듯이 Map과 Reduce를 혼용해 대량의 정보를 병렬처리하며 점차 가지수를 줄여나가는 방법이다. 아래의 이미지를 보면 이해가 빠를 것이다. 잘은 모르겠지만 위와같은 모델을 사용하면 대량의 대이터를 분산시켜 병렬처리를 하기 때문에 좀더 효율적인 데이터 처리가 가능하다고 한다. Currying 커링의 Curry는.. 2021. 10. 25.
JS Shallow Copy 브래들리 쿠퍼와 레이디 가가가 주연으로 나왔던 영화 Star is born에서 shallow라는 곡을 참 좋아한다. 근데 자바스크립트의 shallow 개념은 정말 거지같다. 오늘은 Shallow Copy (얕은 복사)에 대해 공부해 보자 Shallow Copy란? Shallow copy는 단어의 의미에서 유추 할 수 있듯이, 얇게 복사를 한다는 개념이다. 다음과 같은 객체가 둘 있다고 가정해 보자. const obj = { mastermind: 'Joker', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: { 'Jared Leto': 'Suicide Squad', 'Joaquin Phoenix': 'Joker', 'He.. 2021. 10. 25.
JS 내장 고차함수 자바스크립트에서는 기본적으로 제공하는 고차함수들이 있다. 그 중 배열 메소드 중 아래 고차함수들이 자주 사용된다. forEach find filter map reduce sort some every 오늘은 이 내장 고차함수들에 대해 공부해 보자. 사용법은 다른 메소드들과는 약간 다르다. 변수하나만 넣어주면 되던 다른 메소드들과는 달리, 내장 고차함수들은 찾고자 하는 혹은 원하는 논리식을 함수 형태로 넣어주어야 한다. 뭔 말이지? 하겠지만 아래 예제를 통해 감을 잡아보자. forEach "배열".forEach(배열의 한 요소씩 꺼낼때 마다 실행하고픈 함수); forEach는 배열을 한번씩 순환하며 파라미터값(함수)를 실행한다. forEach가 처음에는 쓰기 어렵지만, 익숙해지면 for문 노가다에서 해방될 .. 2021. 10. 24.
DOM 이벤트 객체 오늘은 다양한 종류의 이벤트 객체에 대해 공부해보자. onsubmit form이 submit 되었을 때 자바스크립트 실행 onchange select 엘리먼트의 선택옵션이 변경될 떄 자바스크립트 실행 onmouseover 이미지 위로 마우스 포인터가 움직일 때 자바스크립트 실행 onkeyup 키(문자 숫자 등)가 입력 되었을 때 자바스크립트 실행 event.preventDefault Default로 설정된 기능의 실행을 막는다. 예를 들어, 체크박스를 클릭하면 체크박스가 선택되는 것은 기본적인 기능이다. even.preventDefault 메소드는 이런 기본적인 기능이 실행되는 것을 막는다. 2021. 10. 23.
DOM 오답노트 DOM이 이렇게 복잡하고 어려운 개념일 줄이야... 만만하게 생각했었는데, 내가 너무 안일하게 접근을 한 모양이다. 아래 좋은 오답들을 정리해 본다. 1) 아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성하기 위한 방법 let aElement = document.createElement('a') aElement.setAttribute('id', 'javascript') aElement.textContent = 'awesome' let aElement = document.createElement('a') aElement.id = 'javascript' aElement.innerHTML = 'awesome' 2) 아래 예제의 button을 클릭하면 안내창에 "코드스테이츠에 오신.. 2021. 10. 22.
DOM 개념정리 오늘은 Javascript로 HTML을 동적으로 만드는데 사용하는 DOM에 대해 공부해 보자. DOM와 자바스크립트의 관계 DOM은 과연 무엇일까? DOM은 자바스크립트인 것인가? 답은 Nope! MDN의 정의는 아래와 같다. The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. 간단히 정리하자면 DOM은 자바스크립트로 HTML을 다룰수 있게 하는 API인 셈이다. 쿼리셀렉터 고급활용 기본적으로 DOM에 대해 제일 처음 배우는 것이 바로 .querySe.. 2021. 10. 22.
JS Reduce 메소드 Rest에 관한 내용을 공부하면서 오늘은 Rest에 관한 내용정리를 해야겠다고 생각을 하던 와중, 아래와 같은 예문을 만나게 되었다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요? 도대체 이게 뭐람... reduce메소드 이후로 계산이 도대체 어떻게 진행되는 것인지 도통 이해가 되질 않는다. 사실 공부할게 산더미라 그냥 대충 이해하고 넘어갈까... 하다가 그냥 오늘 공부하기로한 Rest개념은 잠시 접어두고 reduce 메소드에 대해 한번 파보려고 한.. 2021. 10. 21.

티스토리툴바