어제보다 더 나은 오늘

Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.xyz 📍 immutable methods : - slice(), concat() - map(), reduce()

Zero CHO - 호출 스택과 이벤트 루프 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 www.zerocho.com

부트캠프에서 회원가입 페이지의 유효성 검사를 하는 과제가 주어졌다. 요구사항은 아주 간단했다. 아이디가 4글자 이상이어야 함 비밀번호와 비밀번호 확인창의 두 값이 일치해야 함 아이디 길이와 비밀번호 일치 여부에 따른 메시지를 각각의 상황에 적합하게 화면에 출력해야 함 기본 과제는 1) 위의 두 가지 요구사항을 확인하기 위해 true, false 두 가지 boolean 값을 반환하는 함수를 각각 만들고, 2) 해당 유효성 검사 함수 통과 여부에 따라 화면에 적합한 메시지를 출력하는 핸들러 함수를 만들어서 3) 아이디 입력창과 비밀번호 확인 입력창에 2)의 핸들러가 동작하게 하는 keyup 이벤트 리스너를 달면 통과였다. 이벤트 리스너를 달지 않고 onkeyup 으로 처리해도 과제 통과가 되긴 했는데, 기본..

children과 childNodes는 자바스크립트에서 특정 요소의 자식 요소/노드에 대해서 접근할 수 있게 해주는 프로퍼티다. 이 둘의 차이는 무엇일까? 그러려면 일단 요소와 노드의 차이부터 알아야겠다. 결론부터 얘기하자면 node는 element(요소)의 상위 개념이다. DOM 트리구조의 모든 것이 다 node이고, 그 중 element는 html 문서에서 , , , , 등과 같은 태그를 사용해서 작성된 노드이다. 늘 그렇듯 말로 푸는 설명이 더 어렵기 때문에 바로 예제를 살펴보자. menu menu menu photo news-picture news-title news-description footer 이 중에서 id가 nav인 태그를 가져와 해당 요소의 children과 childNodes를 살펴..

1. 모바일 앱 제작 - iOS 앱은 Swift로, 안드로이드 앱은 Kotlin으로 만드는 것이 정석 - 하지만 React Native를 사용해서 자바스크립트로도 모바일 앱을 만들 수 있다! - 실제 사례: 인스타, 페이스북 등 2. 비디오 앱 (화상회의) - 실제 사례: 구글 행아웃, 디스코드 등 (앱 설치 없어도 브라우저에서 작동) - 사용 기술: WebRTC (웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API) 3. 로봇 및 IoT 디바이스 앱 - Ardouino, Raspberry Pi : 하드웨어 제어 가능하게 해주는 초소형 컴퓨터 - 사용 라이브러리: Johnny-Five - Johnny-Five가 지원하는 분야: 각종 모터, GPS, 적외선 센서, 근접 센서 등 4..

코드스테이츠 소프트웨어 엔지니어링 부트캠프 프론트엔드 코스 21일차. 개강 후 딱 3주가 지났다. 한국에서 가장 오래된 부트캠프답게 하루하루 잘 짜여진 커리큘럼과 여러 면에서 수강생들을 챙겨주는 운영진들의 노고에 감탄을 거듭하고 있다. 그중에서 이제까지의 과제 중 화룡점정에 해당하는 Javascript Koans 과제를 마쳤다. 처음에는 명칭만 보고 자바스크립트 과제인 건 알겠는데 뭘 하라는 거지🤔 했는데, 테스트 코드 형식으로 이제까지 배운 자바스크립트 관련 개념들(변수, 자료형, 함수, 배열, 객체, 스코프, 클로저, spread syntax, 구조 분해 할당)을 총정리하는 백과사전을 만들어놓은 거였다...! 개발자 job description을 볼 때 '테스트 코드 짜 본 경험이 있는 분 우대' 등..

자바스크립트의 배열은 수많은 내장 메소드가 있는데, 그 중 강력한 메소드 중에 하나로 데이터 핸들링 시 자주 쓰인다는 reduce 메소드. 하지만 array.reduce()는 mdn을 읽어봐도 당최 무슨 말인지 모르겠고, 강력한 거 다 좋은데 그래서 언제 어떻게 왜 쓰는건데! 라는 답답함을 안고 지내다가 며칠 전 유투브 ZeroCho TV 채널의 자바스크립트 강좌를 보다가 광명을 찾았다. 구문: array.reduce((누적값, 현재값) => (다음 누적값 표현식), 초기값) 구문을 봐도 무슨 말인지 모르겠는 게 당연하다. 바로 예제를 보자. [1, 2, 3, 4].reduce((a, c) => (a + c), 0) // a (accumulator) : 누산기 // c (currentValue) : 현재..

오늘의 주제는 변수에 원시자료형(number, string, boolean, undefined, null)을 담을 때와 참조자료형(객체, 배열, 함수)을 담을 때 데이터를 저장하는 공간(메모리)에서는 어떤 일이 일어나는지를 두 자료형의 차이점을 중심으로 살펴보고자 한다. 우리가 프로그램을 짜는 이유는 데이터를 내가 원하는 방식으로 처리, 가공하여 재생산하고자 함이 크다. 그렇기 때문에 이런 데이터 핸들링을 원활하게 하기 위해서는 데이터를 저장해 두고 필요한 때에 꺼내 쓸 수 있어야 한다. 컴퓨터에서 데이터를 저장하는 공간이 바로 우리가 아는 '메모리'이다. 우리는 메모리에 데이터를 저장해두고 원할 때에 해당 데이터를 꺼내와서 그 데이터를 읽기도 하고 수정하기도 하고 삭제하기도 한다. 이러한 과정을 쉽게 ..

계산기 기능 구현과 코플릿(알고리즘 문제) 풀이시 레퍼런스 코드랑 (누더기 같은) 내 코드를 비교해 보며 몇 가지 공통적으로 보이는 부분이 있어서 마치 오답 노트처럼 적어보는 셀프 크리틱. 1. 쉬운 길 놔두고 괜히 빙 둘러 돌아가지 말자. input으로 string이 들어오면 해당 string을 바로 순회하면서 갈 수 있는 길을 놔두고 string.split("")으로 배열을 만들어서 그 배열로 순회를 하는 그런 거, 이제 하지 말자. 물론 꼭 배열 메소드를 써야 하는 경우라면 그럴 수도 있겠지만. 2. 조건식은 true 값이 나오는 표현식이 들어가는 자리다. 너무 기본적이고 당연한 얘기지만 한 번 더 명심할 필요가 있겠다. 특히 변수가 falsy한 값(false, undefined, null, 0, ..

배열과 객체가 담고 있는 데이터에 접근하거나 조작(수정, 삭제 등등)을 해주기 위해 배열과 객체를 순회해야 하는 경우가 빈번하게 발생한다. 배열 순회하는 방법 for loop forEach 메소드 for of : element 접근 for in : index 접근 while 객체 순회하는 방법 for in : key 접근 Object.keys() : 객체의 keyName을 배열로 받아오기 때문에 이 배열을 활용해 객체를 순회 (또는 Object.values() 도 쓸 수 있지만 key를 받아오면 어차피 obejct[key]로 value에 접근 가능하기 때문에 굳이...?) 시작점이나 종료 지점을 지정할 수 있는 for loop를 객체를 순회할 때는 쓸 수 없기 때문에 사실상 선택지가 for in 하나 밖..