728x90 코딩/JS11 Js문제 오답노트 반장뽑기(reduce(), 배열값 중복 계산) 여느 때와 같이 문제 푸려던 중 고민 고민해도 어떻게 해야 할지 감이 안 오는 문제가 있었다. 일단 prompt로 입력을 받을테니 "원범 원범 혜원 혜원 혜원 유진 유진" 이런 식으로 긴 문자열이 될 것이고, 그다음은 split(" ")으로 공백 단위로 쪼개 이름 한 개씩 갖는 문자열 배열을 만들었다. (이름 수를 세고 누가 많은지 계산하기 위해) 배열 중복 값 개수 구하기 검색하니 공통적으로 reduce가 검색되었다. reduce( ) arr.reduce(callback[, initialValue]) reduce는 배열의 각 요소에 대하여 주어진 reducer함수를 실행하고, 하나의 결과값을 반환한다. 여기서 이 reduce함수는 4개의 인자를 가진다. 누산기 (acc) : 콜백의 반환값을 누적함 현재.. 2022. 8. 10. JS문제풀이 (로꾸거배열) + (&, |, 연산자 단축평가) 에이 티 티 이 엔 티 아이 온 유 갓 미 룩킹 포 어텐션~ string을 배열로 바꿔 순서를 거꾸로 바꿔 출력하면 된다. string을 배열로 바꾸는 방법엔 여러 가지가 있다. 1. Spread Operator const str = 'attention'; const arr = [...str]; //빈 array에 attention요소 추가 console.log(arr); // output =>['a''t''t''e''n''t''i''o''n'] 2. Array.from() const str = 'attention'; const arr = Array.from(str); //문자열을 변환해 배열 생성 console.log(arr); //output => ['a', 't', 't', 'e', 'n', 't'.. 2022. 8. 8. 별 탑 쌓기 문제해결 모든 프로그래밍 언어의 반복문 단골 예제 별 탑 쌓기! 순조롭게 진행하던 와중 문제에 봉착했다. const n = prompt("숫자를 입력하세요."); for (var p = 1; p < n+1 ; p++) { const blank = []; const star = []; for (var i = p; i < n; i++) { blank.push(" "); }; for (var j = 1; j 2022. 8. 7. Js복습 pt.6 NPM 티스토리를 정리할 때면 종종 노래를 들으며 정리하곤 한다. 기억을 되짚으며 하기에 가사 있는 노래는 피한다. 그래서 ASMR이나 연주곡을 듣곤하는데 요즘엔 쳇 베이커의 재즈에 빠졌다. 공부하며 들을 새로운 노래를 찾는 중이라면 맛보자. https://youtu.be/keU3J0HHQ4s NPM (Node Package Manager) 나에게 npm은 익숙한 친구이다. 다만, 친하지는 않은 안면이 있는 친구와도 같다. 강의를 듣고 실습을 진행하거나, 무언가 기능일 필요해서 추가할 때면 터미널 창에 항상 npm~ 이런 식으로 사용해 왔었다. npm은 풀네임에서 알 수 있듯이 노드 패키지들을 관리하는 기능을 한다. 좀 더 와닿게 말하면 개발 시 필요한 다양한 모듈들을 다운로드할 수 있게 해주는 도구이다. np.. 2022. 8. 4. Js복습 pt.5 module system 자바스크립트와 리액트를 사용하면서 무심코 사용했던 import와 export 뭐 대충 파일 내보내고 가져오는 의미아닌가? 얼추 맞았다. 하지만, module에 대한 정확한 이해와 기존의 script를 통해 파일을 주고받는 것과 무슨차이가 있는지 보도록 하자. 1. 모듈, 모듈시스템 애플리케이션의 기능들을 추가하다보면 당연히 규모 확장이 될 것이다. 이 경우 한 개의 파일로 통솔하기엔 어려움이 많다.파일을 여러개로 분리하게되는데 이때 이 분리된 파일을 모듈이라고한다.추가로, 이렇게 분리된 파일들을 불러올 수 있게끔 하는 것이 모듈 시스템이다. 자바스크립트 상에선 script태그를 통해 파일을 주고 받는데 이경우 전역스코프를 공유한다는 문제가 발생한다. 예시로, a.js, b.js모두 number라는 변수에.. 2022. 8. 1. (부록)스터디 윗 미 4월 동안 열심히 들은 바닐라 js 정리 내용 + 실습 후 결과물 당시에는 티스토리 안 해서 메모장에 적어놓았는데 더 가독성 좋게 정리 + 한 곳에 내 행보 정리함으로써 통일화하는 김에 업로드한다. (결과물 미리보기) - 노트북으로 들어가길 반응형 작업 1도 안 해서 이리 깨지고 저리 깨질 확률 99% https://minkyu0424.github.io/studyWithMe/ StudyWithMe minkyu0424.github.io 1. variables console을 통해 숫자 또는 문자를 입력받거나 출력하게 된다면, 일일이 숫자를 작성하고 수정해야 한다. 너무 많은 시간과 에너지를 소모하게 된다. 따라서 변수 사용 a+b한 후 매번 a와 b값을 변경하도록 한다. ex) const a=1; / co.. 2022. 7. 31. Js복습 pt.4 API와 이벤트 버블링, 캡쳐링 오래간만에 글 저장 안 하고 신나게 쓰다가 음악 바꾸려고 뒤로 가기 잘못 눌러서 두 번째 쓴다 ^_^ 몸뚱이야 미안해 뇌가 실수했어. 1.API(어플리케이션 프로그래밍 인터페이스) 맨 마지막에 인터페이스는 무엇일까 UI 유저 인터페이스도 많이 들어봤는데... 상호(사물-사물 또는 사물-인간 인간-인간) 간의 소통을 위해 만들어진 접점이라고 생각하면 편하다.리모컨을 생각해보면, 우리가 TV보고 음량을 키워!라고 한다 해서 음량은 커지지 않을 것이다.(음성인식 배제)리모컨 음량 버튼을 누르면 소리가 커지고, 여기서 리모컨이 인터페이스의 기능을 한다. (하드웨어적인 인터페이스)+ 배달앱 같은 경우는 소프트웨어 인터페이스라고보면 된다. + 위에서 내가 궁금한 UI의 경우 사용자가 사용하는 인터페이스이다. 인터페.. 2022. 7. 26. Js복습 pt.3 this 최근에 잠들기 전 영화를 가끔 보곤 한다. 하나에 오래 집중 못하고, 금세 졸려서 이용하는 방법이다. 강의에서의 코드 캡쳐본은 내가 듣는 강의인 짐코딩에서 가져왔다. https://www.youtube.com/channel/UCZ30aWiMw5C8mGcESlAGQbA 짐코딩의 CODING GYM 실용적인 코딩채널 CODING GYM 💪🏋️♀️ 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 【광고 및 제휴 문의 😙】 👉 bruce.lean17@gmail.com 【커피 한잔 후원 🙂】 👉 https://toon.at/donate www.youtube.com 내 기억이 맞다면 과거 await async, arrow function을 복습하는 과정 중에 this를 봤었다. 그.. 2022. 7. 24. Js복습 pt.2 script, defer, async 요번 시간에 자바스크립트 코드를 html에 가져올 때 사용하는 script 그리고 defer async에 대해서 배워보자. 참고로 async await 같은 동기, 비동기 처리에관해 한번 정리한 경험이 있는 터라 밑의 글을 참고하자. 2022.06.23 - [코딩/REACT] - React 부록 async, await, arrow function(1편) React 부록 async, await, arrow function(1편) 이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는 minkyunoori.tistory.com html 파일을 보통 위에서 아래로 파싱하는데 s.. 2022. 7. 20. 이전 1 2 다음 728x90
