배운 점 1. return문의 활용 if (!audio) return; return문을 사용하여 지정된 키 외의 다른 키는 무시되도록 하였다. 이를 통해 굳이 아무 요소도 담기지 않은 null값의 audio 변수를 갖고 코드를 더이상 진행하지 않도록 했고, 에러도 방지했다. 2. currentTime 프로퍼티 audio.currentTime = 0; 눌린 키보드 키에 연결된 드럼 소리는 잘 나왔으나, 키를 연속으로 누를 때 해당하는 소리는 연속으로 나오지 않는 문제가 있다. 그 이유는 연결된 드럼 소리 오디오 파일이 끝까지 재생되어야만 다시 소리가 나올 수 있었기 때문이다. 이 문제를 해결하기 위해 currentTime 프로퍼티를 사용해주었다. currentTime은 HTML의 미디어 요소(비디오나 오디..

리액트로 프로젝트를 만들며 최근 느낀 점은 제가 기초가 많이 부족하다는 것입니다. 저는 기초가 탄탄한 개발자가 되고 싶기에 어떤 것을 공부하고 어떠한 방법으로 할 지에 대해 고민했습니다. 그 결과 바닐라 자바스크립트를 공부하기 위한 방법으로 토이프로젝트를 개발하면서 바닐라 자바스크립트의 사용에 익숙해지려고 합니다. 토이 프로젝트 아이디어를 찾아보던 중 찾게 된 것이 바로 다음의 챌린지입니다. 이 챌린지는 30일간 프레임워크, 라이브러리 등 없이 순수 자바스크립트로 프로젝트를 완성시키는 챌린지입니다. 제가 이 챌린지를 선택한 이유는 다양한 주제의 프로젝트들이 나와있어 기획에 있어서 부담을 줄일 수 있다고 생각했기 때문입니다. 또한 강의 제작자의 깃허브에 코드가 공유되어있고, 짧은 강의도 올라와 있기 때문에..

미니 프로젝트를 마치며 서론 멋사에서 마지막 미니 프로젝트로 팀이 빌딩되었다. 프로젝트 주제 등 모든 것이 자유였다. 동아리의 마지막 마무리..! [팀 구성] 팀명 : 안녕 1팀 디자니어 1명 프론트엔드 2명 백엔드 3명 총 6명으로 이루어졌고, 나는 그 중 프론트엔드로 참여하게 되었고, 프론트엔드장 역할을 맡게 되었다. [프로젝트 기간] 23.9.4~23.11.19 한 학기 세션을 프로젝트로 대체하기로 하였고 중간에 중간고사 기간도 겹쳤기에 프로젝트 기간이 매우 길었다. [적용 기술 및 협업 툴] - Frontend : Html, Css, Javascript, React - Backend : Django - Collaboration Tool : Github, Figma, notion [프로젝트 진행] ..

서론 지난 여름방학 동안 flutter 강의를 완강하려고 하였지만 실패했다. 그 이유를 생각해보니 총 30시간이라는 긴 강의 시간이 주원인이라고 생각되었다. 처음에는 열심히 듣다가 후반부로 갈수록 지루하다고 느껴 점점 피하게 됐던 것 같다. 그래서 이번에는 강의를 들으며 개념을 학습하기보다 한 가지를 클론 코딩하며 전체적인 흐름을 익히고 난 후에 내가 개발하고 싶은 어플을 만들어보는 방식으로 공부를 하기로 하였다. 그렇게 해서 정하게 된 것은 바로 넷플릭스 클론 코딩이다. 넷플릭스로 정하게 된 이유는 클론코딩 강의 중 시간도 짧고 후기도 많고 무료인 강의를 찾다가 인프런에서 권태뽕 강사님의 강의를 발견하게 되었기 때문이다. https://www.inflearn.com/course/flutter-netfl..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trim String.prototype.trim() - JavaScript | MDN trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 developer.mozilla.org trIm() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등..

EdgeInsets란? padding, margin과 같이 특정 위젯의 상하좌우에 여백을 두기 위해 자주 사용하는 클래스입니다 EdgeInsets.all 모든 방향에 같은 값 //all const EdgeInsets.all(7.0); //모든 방향으로 8pixels의 여백 EdgeInsets.only 한 방향 //only const EdgeInsets.only(left: 40.0); //왼쪽에만 40pixels의 여백 EdgeInsets.symmetric 수직 혹은 수평 //symmetric const EdgeInsets.symmetric( {double vertical = 0.0, double horizontal = 0.0} ) const EdgeInsets.symmetric(vertical: 8.0)..