-
Javascript [Javascript] 탭메뉴 만들기 이번엔 탭메뉴 만들기! 이번건 검색했을 때 여러가지 방법들이 많이 나와서 고민했다. 이런 저런 페이지들의 코드들을 보면서 어떤게 좋은 코드일까... 어떤게 나은 코드일까... 해보다가 결국 내 마음대로 섞어서 짜보았다(?) 🥸 내 코드는 forEach와 index를 사용한 코드이다. Javascript 코드 // 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabItem = document.querySelectorAll(".tab__item"); const tabContent = document.querySelectorAll(".tab__content"); // 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다. // 이때 index도 같이..
-
문제 해결 네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결 (개발환경 : React / Javascript / Next.js) 게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다. 근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다. 어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다. 허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람? 가끔 그러니 상관 없지 않나?라고 순간 생각했지만... 사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에, 그리고 또 이런 상황이 다시 발생 할 수 있으니까 원인을 알아내서 너무너무 해결하고 싶었다! 개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 대체 뭐가 문제일까... .. -
Javascript [Javascript] alert창(경고창) 텍스트 줄바꿈 하기 alert창(경고창) 에서 텍스트 줄바꿈 하는 방법 alert창에서도 줄바꿈이 가능하다! 최근까진 잘 모르고 가능하지 않을까~ 라고 어렴풋이 생각하고 있었는데 마침 딱 사용할 일이 와서 알아보았다. 줄바꿈을 하는 방법은 두가지 방법이 있다. \n 을 사용한 줄바꿈 줄바꿈을 할 텍스트 뒤에 \n 를 넣어주면 줄바꿈이 된다. 코드 alert('안녕하세요?\n만나서 반갑습니다.'); 출력물 템플릿 리터럴 ` ` 을 사용한 줄바꿈 템플릿 리터럴 ` ` 을 사용하면 줄바꿈을 한 상태로 입력을 하면 alert 창에서도 줄바꿈이 된다. 주의할 점은 ` 바로 뒤나 앞에서 줄바꿈을 하거나, 가독성을 위해서 탭키를 사용하면 그것 역시 적용이 되므로 주의해야한다! 코드 alert(`안녕하세요? 만나서 반갑습니다.`); 출력.. -
문제 해결 Visual Studio Code 한글 깨짐 문제 해결 (& Live Server) 다른분이 작업하셨던 파일을 받아서 작업을 하려고 vscode의 플러그인인 live server로 index.html 파일을 실행했다. 그런데 페이지가 열리자마자 아주 당황했다. 한글이 전부 깨져서 나온 것이다😂 이게 왜 그럴까? 정말 멘붕이 많이 왔었다. 내가 뭘 잘못 건드렸나? 그렇게 우왕좌왕 하다가 발견한 것이 바로... 이 코드이다. 하지만 왜일까? 이 코드만 적혀있다고 해서 문제가 생긴건 아니었다. 문제가 된 부분들은 아래와 같다. 이 부분들이 문제였다. 궁금해져서 확인을 해보니 Live Server로 실행했을 때 뿐만 아니라 인코딩 방식을 html 파일과 vscode에서 다르게 설정했을 경우, 그냥 index.html 파일을 열었을 때도 한글이 깨지는 현상을 발견할 수 있었다. html 의 me.. -
기타 VSCODE 에서 Remote - SSH 사용하여 SSH 연결하기 Remote - SSH 설치 및 사용 방법 vscode 에서 SSH 연결을 할 일이 생겼다. Remote-SSH 를 설치하면 편리하다길래 바로 플러그인을 설치했다. 설치한 후 F1을 눌러 Remote-SSH 를 검색하면 나오는 것들 중 Open SSH Configuration File 을 클릭한다. 클릭하면 자동으로 설정 파일 경로가 있는 곳이 나오는데 그걸 클릭한다. 그리고 나오는 설정 파일에서 설정을 작성해주면 된다. Host : 내가 알아볼 수 있는 이름으로 지으면 된다. 여러개를 사용할 시 구분하기 좋음! HostName : 나같은 경우는 IP 주소를 사용하여 접속해야 했다. 그래서 IP 주소를 넣었다. User : 유저 ID Port : 포트 번호 ... 이렇게 작성하고 나니 생기는 궁금한 점... -
일상 퍼블리셔 면접을 보며 내가 받았던 질문 리스트 요즘 계속 면접을 보러 다니고 있는데, 그동안 받아왔던 질문을 모아놓으면 좋을 것 같아서 정리해 본다. 질문에 대한 답은 내 개인 노션에 정리해 놓고 보기로... 웹 관련 질문 웹표준이란 뭔지 설명해 주세요. 웹접근성이 뭔지 설명해 주세요. 웹접근성을 고려한 웹 사이트를 만드는 방법은 무엇인가요? 웹접근성 확인은 어떻게 했나요? 크로스 브라우징을 확인하는지와, 확인 시 어떤 브라우징까지 확인하는지 알려주세요. 크로스 브라우징 관련 이슈 중 어려웠던 부분이 있나요? 반응형 웹이란 뭔지 설명해 주세요. 반응형 웹 작업시 어느 단위로 끊어서 작업하나요? HTML 관련 질문 meta 태그가 뭔지 알고있나요? 시멘틱태그는 무엇이며 왜 사용하는지 설명해 주세요. CSS 관련 질문 요즘 flex 를 많이 사용하고 있..
-
Javascript [Javascript] 내 사이트에 구글 지도 사용하기 (Google map API) 🗺️ 일단 구글 지도를 사용하려면 구글 클라우드에서 발급하는 API를 발급받아야 한다. API 발급 방법 1. 아래 링크(구글 지도 플랫폼) 에 접속한 뒤, 시작하기 버튼을 클릭한다. https://developers.google.com/maps/gmp-get-started?hl=ko 2. 이후 나오는 화면에서 가입하여 API 키 받기 버튼을 클릭한다. 3. 결제 사용 설정이 안 되어있다면, 결제 계정 만들기 버튼을 눌러서 사용 설정을 해준다. (결제 계정 만들기 부분은 개인정보와 관련된 부분이므로 화면은 생략한다.) 4. 결제 계정 사용 설정을 한 뒤, 이런 창이 뜨면 선택들을 해준 뒤 제출 버튼을 눌러준다. 5. 그럼 이제 API 키 발급은 완료되었다. 이 키를 script 영역에 넣어야 하기때문에, 잘 ..
-
Javascript [Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기) 예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다. https://happy-hee8.tistory.com/3 그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데 새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다. 이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다. 개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다. 이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고, id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다. Javascript 코드 // 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabIte..
-
문제 해결 fatal: No configured push destination. 에러 해결 fatal: No configured push destination. 에러 해결 프로젝트를 생성 후 처음으로 git push 를 했는데 해당 에러가 발생했다. fatal: No configured push destination. Either specify the URL from the command-line or configure a remote repository using git remote add and then push using the remote name git push 어떤 에러인가 했더니... 현재 위치의 폴더가 github의 원격 레파지토리와 연결이 되어있지 않다는 듯 하다. 그리고나서 생각해보니 github에서 해당 프로젝트 레파지토리를 생성만 해두고 연결을 해두지 않았었다. ^^; 그..
-
CSS [CSS] 텍스트에 그라데이션 효과 주기 작업중인 사이트가 뭔가 밋밋한 것 같아 텍스트 부분을 수정하기로 했다. 고민하다가 텍스트에 그라데이션을 주는 방향으로 결정! CSS 코드 background: linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -webkit-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -moz-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -o-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); -webkit-background-clip: text; background-cli..
-
Javascript [Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기 네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다. a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다. 하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우 해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다. 그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다. Javascript 코드 // 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelec..
-
개발일상 [SPAVEL] 날짜 선택 플러그인은 vanillajs-datepicker 로 결정했다 🗓️ 예약 부분의 날짜를 선택할 datepicker 플러그인은 어떤걸 써볼까 하고 검색하다가 발견한 플러그인 사이트 자체에 설명이 잘 되어있어서 놀랐다. 이런저런 플러그인들 중에 내가 이 플러그인을 선택한 이유는 1. 바닐라JS 로 되어있음 2. 날짜를 선택하면 캘린더가 닫히는 옵션이 있음 3. 원하는 날짜의 이전 날짜는 선택 불가능한 옵션이 있음 이 세가지이다. 이 외에도 좋은 옵션들이 많아서 나중에 다른 부분에서 사용할 때에도 좋을 것 같다!😎 사용 방법도 쉬웠고, 특히나 데모 사이트가 옵션들을 적용해가면서 시각적으로 볼 수 있어서 이 부분이 옵션을 설정 할 때 도움이 많이 되었던 것 같다. 좋은 플러그인을 알아둔 김에 잊지 않도록 개발일기에 기록해본다. 👍 vanillajs-datepicker 사이트 주..
-
Javascript [Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
-
문제 해결 body 태그 안, 위쪽에 공백이 생기는 문제 해결 () 작업을 하는데 갑자기 문제가 생겼다. 오잉? 이게 뭐지? 상단에 알 수 없는 여백이 생긴 것이다. 개발자 도구로 확인해보니, 내가 작성하지 않은 알 수 없는 텍스트가 들어있었다. (나같은 경우는 "" 라는 텍스트가 들어있었다.) 작업중인 파일만 계속 살펴보다가 문득 든 생각... 아! 혹시나 저번에 해결했던 것처럼 인코딩 문제일 수도 있지 않을까? 싶어서 그쪽을 살펴보니 UTF-8 이 아닌 UTF-8 with BOM 으로 되어있었다. 그렇다. 이 문제는 인코딩과 관련이 있었다. 해결 방법 해결 방법은 간단하다. 인코딩을 바꿔주면 되는데 (VSCode의 경우) 우측 오른쪽에 있는 인코딩 부분을 클릭하고 뜨는 창에서 'Reopen width Encoding' 을 클릭, UTF-8 을 선택해주면 .. -
CSS [CSS] CSS 방법론 - BEM 방식 먼 옛날 퍼블리싱 과외를 받던 시절... 과외 선생님께서 BEM 방식을 추천해 주셔서 그냥 뭐가 뭔지 모르는 상태로 알려주시는대로 썼던 기억이 있다. 최근 다시 포트폴리오를 만들면서 BEM 을 어떤식으로 써야 좋을지 헷갈려서 또, BEM 방식으로 코드를 짜볼 때에도 감이 잘 안 올때가 있어서 내 스스로가 헷갈리지 않기위해 정리를 해보았다! BEM 이란? BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다. Block (블럭) 블럭은 그 자체로 의미가 있는 독립적인 부분이다. ( 예시 : header, container, menu, checkbox, input ) 블럭은 블럭을 감쌀 수 있다. 예를들어 header 라는 블럭 안에 logo 라는 블럭이 들어갈 수 ..
-
문제 해결 ReferenceError: alert is not defined 에러 해결 (& Nothing was returned from render) React 와 typescript 환경에서 작업을 하던 중에 갑자기 문제가 생겼다. 게시글의 id 값을 가져와서 그 값이 string 값인지 확인한 후, 상세 페이지를 보여주는 화면이었는데 나타난 에러문은 바로 이것... Referenceerror: alert is not defined 그래서 어라? 이게 왜 발생했지? 하고 바로 저 에러를 복사해서 검색을 해보았다. Node.js 와 관련되어 있다는 내용들이 대부분... 근데 왜인지 저것과 관련이 있는 것 같지 않았다. 그래서 혹시나하여 아! alert 부분이 문제라면 저 alert 부분을 다른 걸로 바꿔볼까? 라는 생각에 console.log 로 바꿔보았다. 그랬더니... 이번엔 다른 에러가 나타났다. Nothing was returned from r..
-
Javascript [Javascript] Map 객체와 map 메서드(반복문)의 차이 공부를 하다가 헷갈리는 부분이 생겼다. 분명 내가 알던 map 은 반복문이었는데?? map을 반복할 때 for...each를 사용한다고? 으잉? map 자체가 반복문 아니였나? 뭐지? map을 사용하는 방법이 두개인 건가? 그리고 검색에 검색을 거쳐... 이 두가지는 다른 것이란걸 알게되었다. Map 객체와 map 메서드 Javascript 에는 Map 객체와 map 메서드, 이렇게 두가지가 있다. 이 둘은 서로 다른 목적과 맥락에서 사용된다. 아래에서 간단하게만 설명해 보겠다. 1. Map 객체 Map 객체는 Javascript 의 표준 내장 객체이다. 데이터를 저장하고 관리하며 키-값 쌍을 추가, 삭제, 업데이트 및 순환하는 등의 작업을 수행할 수 있다. 예시 코드 // 맵을 만든다. const me..
-
Javascript [Javascript] .padStart()를 사용한 숫자 앞에 0 넣기 String.prototype.padStart() 란 .padStart() 메서드는문자열이 지정된 길이에 도달할 때까지 이 문자열을 다른 문자열로 채운다. 다른 문자열은 문자열의 시작 부분부터 적용된다. const str1 = '31'; // 문자열이 4자리 길이에 도달할 때까지 앞을 0으로 채운다. console.log(str1.padStart(4, '0')); // '0003' console.log(str1.padStart(4, '영')); // '영영영3' console.log(str1.padStart(2, '1')); // '31' const str2 = '안녕하세요'; // 채워질 문자열(padString)이 너무 길면 뒷부분이 잘린다. console.log(str2.padStart(8, '반갑..
-
일상 '개인적인' 일본 컵라멘 종류별 후기 요즘들어... 계속 라멘이 먹고싶어졌다. 그래서 일본 컵라멘 자체가 맛이 괜찮은 편이라 아예 컵라멘을 몇개 사놓기로 했다! 일본 직구 짱~~~ 요즘은 배송비도 저렴함!!! (근데 이제 물품 가격이 비싼) 여튼 원래 사던것만 사다가 이번에 다른것들도 먹어보고 싶어서 이것저것 사봤는데 와... 이것저것 사보길 잘했다. 그래서 내 입맛 후기를 남겨보려고 한다... 내가 샀던 곳 가격도 같이... 왜냐면 다음에 주문 할 때 참고하려고! 세븐일레븐 프리미엄 - 스미레 삿포로 농후미소 맛 : ⭐️⭐️⭐️⭐️ (4.5점) 직구 가격 : 5,980원 너무 맛있었다!!! 근데 조금 짠 편임!! 물을 정량보다 더 부어서 먹으면 좋을듯. 재구매 의사 매우 있음! 컵라멘 먹는법 1. 뚜껑을 반만 연다. 2. 건더기를 넣는다... -
개발일상 [PORTFOLIO] 풀페이지 포트폴리오 사이트를 만들어야겠다. 지금까지 포트폴리오를 노션에 이력서와 함께 넣어놨었는데, 노션 자체가 정보를 너무 많이 넣어놔서인지 로딩이 조금 오래 걸린다는 느낌이 있어서 새로운 포트폴리오용 사이트를 만들기로 했다. 어떻게 만들까 고민하다가 풀페이지로 만들기로 했다. 일반적인 반응형 페이지와 모바일 적응형 페이지는 포트폴리오로 만들어 뒀으니, 조금 다른 느낌의 새로운 사이트를 만들고 싶었기 때문! 기획을 딱히 할 필요는 없을 것 같아서 그냥 느낌 가는대로~ 내 손이 가는대로~ 만들어 봐야겠다. 재밌을 것 같다! 열심히 만들어 봐야지. - 끝 -
-
CSS [CSS] 사파리에서 기본 input 스타일 제거하기 포트폴리오 작업을 대강 끝내고 크로스 브라우징 확인 중에 모바일 사파리에서 input 스타일이 다른 부분을 발견했다. 데스크탑 사파리로 봤을 땐 분명 괜찮았는데...!! 모바일로 보니까 input 에 border-radius가 들어가 있었다. 분명 input에 border-radius: 0 을 줬는데도.... 그냥은 먹히지가 않았다(😂) 그리고 알아낸 방법! 이렇게 하니까 다행히 잘 먹었다. input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="tel"], input[type="email"], html input[type="button"], input[type="reset"] { ..
-
Javascript [Javascript] 아코디언 메뉴 만들기 요즘은 참 편리한 시대가 되었다. 다양한 플러그인들은 더 편리한 개발환경을 제공하지만 포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는 직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다. (일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇) 그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥) 사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다. 코드 한줄 한줄을 주석으로 해석해보았다. 작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇 (아래는 예전에 작성해봤던 코드) 더보기 Javascript 코드 (예전 코드) // 1. 아코디..
-
Javascript [Javascript] 이메일주소 마스킹 처리하기 const email = "happyhee@email.com";// 이메일 형식이 맞는지 검증email.includes("@"); // true// 이메일을 @를 기준으로 나누어서 변수에 담기let emailSplit = email.split("@"); // ["happyhee", "gmail.com"]// 이메일 앞부분(유저 ID)let emailId = emailSplit[0]; // "happyhee"// 이메일 뒷부분let emailCompany = emailSplit[1]; // "gmail.com"// 아이디의 앞부분 + 마스킹 처리할 텍스트를 배열에 담기let maskingId = [];maskingId.push(emailId[0]);maskingId.push(emailId[1]);maski..
-
기타 GitHub / GitLens 에서 정확한 커밋 날짜와 시간 확인하기 Github와 GitLens에서 예전에 커밋한 부분의 날짜가 궁금해서 보려고 했던 적이 있다. 하지만 2주 전... 2개월 전... 이런식으로 애매하게 나와서 이게뭐람 싶었는데 혹시몰라서 그 애매한 날짜 부분에 마우스를 가져다대보니까 정확한 날짜와 시간을 알 수 있었다. GitHub / GitLens 에서 정확한 커밋 날짜를 확인하는 방법은, ~주 전, ~개월 전 이런식으로 되어있는 부분에 마우스를 가져다대고 기다리면 정확한 커밋 날짜와 시간을 알 수 있다. (마우스를 가져자대고 잠시 기다리면 날짜가 나온다.) -
Javascript [Javascript] 옵셔널 체이닝 '?.' 옵셔널 체이닝 '?.' 옵셔널 체이닝 ?. 은 ?. '앞'의 평가 대상이 undefined 나 null 이면 평가를 멈추고 undefined를 반환한다. 옵셔넝 체이닝 '?.' 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다,. 형태 a?.b 앞의 평가 대상(a)이 undefined 나 null 이면 undefined를 반환 예시 코드 1. // 정보가 없는 사용자 let user = { }; // user 안에 address 에 대한 정보가 없어 에러 발생 console.log(user.name.address); // TypeError: Cannot read properties of undefined (reading 'adress') // 옵셔널 체이닝을 사용하면 에러를 발..
-
Javascript [Javascript] nullish 병합 연산자 '??' nullish 병합 연산자 '??' nullish 병합 연산자를 사용하면 여러 피연산자들 중 '값이 할당된' 변수를 찾을 수 있다. undefined 나 null 이 아닌 값을 찾을 때 유용하다. 형태 a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 예시 코드 1. let a = undefined; let b = '하늘'; // 1. a가 null과 undefined 인지 확인한다. // 2. a = undefined 이므로 b인 '하늘'을 반환한다. console.log(a ?? b) // 하늘 예시 코드 2. let firstName = null; let lastName = null; let nickName = '해피'; // 1. firstName은 null 이..
-
Javascript [Javascript] map 과 filter 를 이용한 문제 풀어보기 문제 classmates 라는 배열에 여러 학생의 나이와 이름이 있을 때, 1. 나이가 16살인 학생만 골라낸 후, candy: 10 을 각각 추가하세요. 2. 나이가 19살인 학생만 골라낸 후, name 뒤에 '어린이'를 붙여주세요. 해답 나이로 학생을 골라내는 것은 filter 를 사용하고, 그 골라낸 배열을 순회하면서 새로운 것을 추가할 때 map 을 사용한다. const classmates = [ {name: "유리", age: 19}, {name: "철수", age: 16}, {name: "영희", age: 16}, {name: "수진", age: 8}, ] // 1. 나이가 16살인 학생만 골라낸 후, candy: 10 개씩 각각 추가 const classFilter1 = classmates...
-
카테고리 없음 [Javascript] .filter() filter() 란 map() 메서드는 배열 안의 모든 요소들을 각각 순회하며 주어진 함수의 테스트를 통과하는 모든 요소들을 모아서 새로운 배열을 반환한다. const fruits = ['apple', 'banana', 'cherry', 'orange', 'grape']; // 글자 길이가 5보다 큰 아이템이 있는지 테스트 const result = fruits.filter((item) => item.length > 5); // 테스트에 통과한 요소들을 모아 새로운 배열을 반환 console.log(result); // [ 'banana', 'cherry', 'orange' ] 형태 arr.filter(callback(element[, index[, array]])[, thisArg]) callback:..
