본문 바로가기

분류 전체보기126

자바스크립트 배열 메서드 Array Method (계속 추가중) ◾ Array.isArray ( immutable ) // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 배열과 객체를 구분할 때 typeof 대신 Array.isArray를 사용한다. ◾ Array.prototype.indexOf ( immutable ) const arr = [1, 2, 2, 3]; // 배열 arr에서 첫 번째로 검색된 요소 2의 인덱스를 반환한다. arr.indexOf(2); // 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -1 // 두 번째 인수는 검색을 시작할 인덱스다... 2021. 8. 21.
21.08.20 코드스테이츠 SECTION 1 기록 📌 SECTION 1을 마무리 하며 짧지만 굵었던 SECTION 1이 끝났다. 7월 19일부터 8월 19일까지 딱 1달이라는 시간이 지났다. 한 달간 블로깅한 기록들을 보니 시간이 빠른 건 사실이지만 매정하진 않다는 생각이 들었다. 코드스테이츠에 들어오기 전, 드림코딩 엘리님의 자바스크립트 강의를 보면서 독학했었다. 자바스크립트에 대한 기본은 잡혔지만 팀 프로젝트를 혼자 진행하기엔 무리가 있었다. 같이 공부할 스터디원이나 팀플을 진행할 팀원이 필요했고 그 계기로 코드스테이츠에 들어오게되었다. 팀 프로젝트를 할 목적으로 들어왔지만 생각보다 많은 것을 얻을 수 있었다. 첫째 다양한 사람들과 만나고 (zoom) 소통하면서 혼자 할 때와 달리 활기차졌다. 둘째 현업에 나가계신 분들의 이야기를 들을 수 있는 기회.. 2021. 8. 20.
React 시작 📌 React? React는 UI 기능만 제공한다. 따라서, 전역 상태 관리, 라우팅, 빌드 시스템 등을 개발자가 직접 구축해야한다. --> 직접 만져보면서 이 특징을 여실히 느꼈다. 같은 기능을 구현하더라도수십 수백가지의 방법이 있더라. 그래서 React를 UI 라이브러리 혹은 라이브러리라고 부른다고 한다. 빌드 시스템이나 라우팅 등을 직접 구축하는 것은 진입장벽을 높히기 때문에 이를 허물고자 React측에서 CRA를 만들었다. (프레임워크는 이를 모두 구축해서 제공한다 ㅎㅎ) 📌 입문 필수 지식 ✔ 프레임워크(Frame-work) 와 라이브러리(Library) 차이 ✔ React CRA ? 보일러 플레이트 ? ✔ (그동안 몰랐던) Babel의 역할 ✔ 자바스크립트 모듈 간 import와 export를.. 2021. 8. 19.
React를 쓰다보니 Redux가 궁금해졌다 📌 Redux를 찾게된 이유? React로 간단한 웹 페이지를 만들고 있었다. 댓글을 입력했을 때 기존 댓글에 내 댓글이 추가되는 기능을 구현하고 싶었다. useState를 사용해서 데이터를 받아와 컴포넌트안에서 조작해주면 내가 원하는 그림을 얻을 수 있었다. 그런데 문제는 형제 컴포넌트였다. 댓글창 외에도 내 개인정보가 담긴 창에 왔을 때 내가 쓴 댓글들이 촤라락 보이게끔 만들고 싶었다. 그럴려면 댓글창에서 업데이트 된 그 정보가 개인정보 창에도 필요할 것 같았다. 즉, 다른 컴포넌트 안에 있는 정보를 이 컴포넌트가져와야 하는데... 필요한 코드를 그대로 복붙하는 것 말고는 방법이 생각이 안났다. State와 Props를 몰랐을 시절 ㅋㅋㅋㅋㅋ 이 방법이 너무 싫어서 구글링해보다가 global stat.. 2021. 8. 18.
자바스크립트 Math.sqrt( ) 사용하지 않고 제곱근 구하기 📌 바빌로니아 방법 Babylonian method 여기서 Xn은 말 그대로 근사값이다. S에 루트를 씌운 값에 가장 가까울 거라 생각하는 근사값을 넣어주면 된다. 어떤 값을 넣든지 점화식을 반복하다보면 결국, Xn+1이 S의 제곱근에 근접하는 순간이 온다. (그치만 그게 언제일지는 보장못함) 📌 코드로 구현하기 ◾ 초기안 수도 코드 ◾ 코드 구현 값은 잘 나오는데 ... 구체적으로 코드가 어떻게 구동하는 지 궁금했다. ◾ 문제점 근사값이 점점 원래값의 제곱근에 가까워지는 걸 확인할 수 있었다. 그런데 ... 근사값은 결국 3.xxxxxxxxxxx 형식을 넘지 못한다. 그리고 9같이 제곱근이 정수로 떨어지는 숫자 이외의 값을 입력받으면 while문이 무한반복될게 뻔하다. 무한반복을 끊어줄 break문이 .. 2021. 8. 17.
자바스크립트 배열 고차함수 reduce 📍 Array.prototype.reduce ( immutable ) reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여, 하나의 결과값을 만들어 반환한다. // 1부터 4까지 누적을 구한다. // 숫자끼리 값을 더할 때는 초기값을 0으로 설정하지 않아도 값이 나오지만 // 그래도! 그래도! 초기값을 넣어주는 게 좋다. const sum = [1, 2, 3, 4].reduce( // 콜백 함수 (accumulator, currentvalue, index, array) => { accumulator + currentvalue }, // 초기값 0);.. 2021. 8. 15.
자바스크립트 문서 객체 모델 DOM (Document Object Model) Achivement Goals ✅ DOM의 개념을 이해할 수 있다. ✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. 📌 웹 페이지는 어떻게 만들어지는가? 웹 브라우저는 원본 HTML문서를 읽고, Style을 입히고, 대화형 페이지로 만들고, 뷰포트에 표시하는 등 해석 과정을 거친다. 이렇게 해석하는 과정을 "Critical Rendering Path"라고 한다. 🏁 Critical Rendering Path Critical Rendering Path 01 Constructing the DOM Tree 02 Constructing the CSSOM Tree 03 Running JavaS.. 2021. 8. 14.
자바스크립트 배열 Array 📌 자바스크립트의 배열은 배열이 아니다? 자료 구조data structure에서 말하는 "배열" === 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 즉, "배열"의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ( 밀집 배열dense array ) 하나의 데이터 타입으로 통일되어있다는 얘기는 각 요소가 동일한 데이터 크기를 가진다는 뜻과 일맥상통하다. 일반적인 배열 장단점 장점: 인덱스로 요소에 빠르게 접근할 수 있다. 단점: 특정 요소를 검색/삽입/삭제하는 경우에는 비효율적이다. 즉, 자바스크립트의 배열은 연속적으로 이어져 있지 않을 수 있다. ex. 희소 배열 즉, 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도.. 2021. 8. 13.
21.08.11 코드스테이츠 SEB 디너클럽 후기 📌 코드스테이츠 SEB 디너클럽 예전에 DS+AIB분들이 가졌던 디너클럽 게시물을 아무것도 모른채 좋아요를 누른적이 있었는데...ㅎ DS와 AIB가 SEB와는 다르다는 걸 왜 직관적으로 모르지? 너 신박하다 ㅎㅎ 수강생분들의 후기에 등장하는 "캐릭터들의 탁상 모임"이 궁금해서 이번엔 제대로 !!!! 좋아요를 눌렀다. 아 물론 ! 여태 만난 페어분들 외에 다른 분들은 어떻게 공부하고 있는지도 알고싶었다. 이번에 Gather는 처음 써보는데 너무 귀엽고 추억이었다. 옛날에 때밀이 게임했던 것도 생각나고 ! " 아 그리고 저는 모임 끝나기 전까지 식탁 의자에 앉지 못했는데 같이 참여하셨던 분들 캡쳐본을 보면 제가 앉아있더라고요?이게 저만의 오류인지 아니면 다른분들도 본인이 식탁에 앉아계신걸 못보시는지 궁금하네.. 2021. 8. 12.

티스토리툴바