전체 글

[JavaScript] 배열 메서드 arr.slice()

arr.slice() slice() 메서드는 배열의 start부터 end 전 까지의 값을 복사하여 새로운 배열로 반환하고, 원본 배열은 바뀌지 않는다. 구문 arr.slice(start,end); // end-1까지 start의 경우 default 값은 0이며, end 값을 지정하지 않을 경우 배열의 길이까지 복사한다. 사용 예시 const arr = ['a', 'b', 'c', 'd']; console.log(arr.slice(1, 3)); // [ 'b', 'c' ] console.log(arr.slice(1)); // ['b', 'c', 'd'] console.log(arr.slice(-3, -1)); // ['b', 'c'] start, end가 음수일 경우 위 arr 배열의 끝에 있는 'd'가 ..

[JavaScript] 배열 메서드 arr.filter()

배열에서 조건이 일치하는 요소를 찾길 원할 때, filter 를 알기 전 까지는 for문을 돌리고 .. 또 if문을 중첩해서 사용했다. 다른 사람은 어떻게 해결했는지 찾다가, 배열 메서드인 filter를 발견했는데 filter() 는 배열에서 조건을 충족하는 요소들을 새로운 배열 형태로 반환하는 함수라고 한다. 만약 충족하는 요소가 하나도 없다면 빈 배열이 반환된다. 사용 예시 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["..

[React] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

협업을 시작하기 전 비어있는 리액트 프로젝트를 npm start 했더니, 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 발생했다. npm install -save react-scripts react-scripts를 설치하여 간단히 해결하였다!

[React] npm ERR! code ELIFECYCLE / npm ERR! errno 1

리액트를 처음 접해보면서 프로젝트를 생성하고 작업환경을 옮겼더니 아래의 에러가 발생했다.. 더보기 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! movie_app_2022@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the movie_app_2022@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging out..

[HTML] tabindex 속성, 웹 접근성/키보드 접근성 준수하기

웹 접근성(Web Accessibility) 웹 사이트에서 제공하는 정보를 모든 사용자가 신체적, 환경적 조건에 차별 및 제한 없이 동등하게 웹에 접근하여 이용할 수 있도록 보장하는 것을 웹 접근성이라 합니다. 신체적 조건은 일반 사용자는 물론, 장애를 겪고 있거나 고령자를 의미하며 환경적 조건은 다양한 기기(PC, 모바일, 태블릿), OS(운영체제), 웹 브라우저, 저사양, 저속회선 등의 모든 환경을 의미합니다. 웹 접근성은 사용자뿐만 아니라 외곽 지역에 있는 사람들의 사회적 통합을 지원하기도 하며, 누군가에게는 직접적으로 와닿는 생활의 일부일 것입니다. 기본권을 보호받듯 웹 접근성 또한 법적으로 필수적입니다. 접근성을 보장하여 정보의 격차를 줄이고, 모두가 공유할 수 있는 웹 세상을 만드는 것이 바로..

[jQuery] 제이쿼리 요소 숨기기, 보여주기

hide hide 함수를 쓰면 선택된 요소에 display:none; 이 설정되어 요소가 숨겨진다 $('#item').hide(); show show 함수를 쓰면 hide 함수로 숨겨진 요소가 다시 보이게 된다 $('#item').show(); fadeOut fadeOut() 함수는 요소를 천천히 사라지게 하며 파라미터로 1000을 넘겨주면 1초동안 요소가 천천히 사라진다 $('#item').fadeOut(1000); fadeIn fadeIn() 함수는 숨겨진 상태의 요소를 천천히 나타나게 해주며, 아래 #item 요소는 1초동안 천천히 나타난다 $('#item').fadeIn(1000);

[JavaScript] 자바스크립트 다양한 이벤트(Event) 정리

마우스 이벤트 이벤트 설명 click 클릭시 발생 dbclick 더블클릭시 발생 mouseover 마우스 포인터가 영역 위로 올라올 경우 발생 mouseout 마우스 포인터가 영역에서 벗어날 경우 발생 mousedown 마우스 버튼을 누를 경우 발생 mouseup 마우스 버튼을 눌렀다 놓을 경우 발생 mousemove 마우스를 움직일 경우 발생 contextmenu contextmenu(마우스 우클릭시 나오는 메뉴)가 나오기 전에 발생 키보드 이벤트 이벤트 설명 keydown 키보드의 버튼이 내려가는 순간 발생 keyup 키보드의 버튼이 내려가는 순간 발생 ('a', '5' 등 출력이 가능한 키에서만 동작하며 Enter, ESC 등의 키에는 반응하지 않음) keypress 눌러진 키보드의 버튼이 다시 올..

[토이 프로젝트] 닮은 배우 찾기 #0

안녕하세요~! 오늘은 함께 스터디하는 팀원분께서 토이 프로젝트를 계획하고 있는데 저에게 프론트단을 맡아줄 수 있냐는 제안을 해 주셔서 저도 참여하기로 했습니다ㅎㅎ Justweon 과 아이스는 아메리카노 두분이 머신러닝을, 저는 웹 프론트부분을 담당하여 진행하기로 했습니다. 저희가 만들어 볼 것은 아래 사이트 같은 닮은꼴 분류기입니다. https://kr.vonvon.me/quiz/3444 당신과 가장 닮은 연예인은 누구?! 당신도 충분히 연예인이 될 수 있습니다! kr.vonvon.me 유명 배우 여자, 남자 각 10명씩 대략 1천 장의 얼굴 데이터를 수집하여 학습하고, 사용자가 얼굴 사진을 입력하면 학습된 데이터 셋에서 가장 닮았다고 판단되는 결과를 도출해 냅니다. 나온 결과는 SNS로 공유하기 기능 ..