사이드 프로젝트를 하게됐고 간단한 프로젝트 진행순서를 정리해두려고한다. 첫번째 회의 기획자 , 백엔드, 프론트엔드, UI/UX기획, UI디자이너가 참여했고 퍼블리싱은 구하는 중에 첫 비대면회의를 진행했다. 첫 비대면 회의를 통해 기획자의 프로젝트 의도와 원하는 결과물을 간단하게 듣고 mvp 기능(메인이 되는 기능)을 얘기했다. mvp기능을 구현하기위한 필요한 기본 정보들을 기획자가 기능에 대한 업무를 하고있어 정보를 모아서 다음 회의를 하기로했음 느낀점. 첫 사이드 프로젝트여서 그런지 나는 크게 할 말이없고 그냥 듣기에만 바빴다. 두번째 회의 비대면으로 진했됐고 첫회의에 했던 내용에 조금더 디테일적인 부분을 얘기했지만 아직 큰그림을 기획하는 단계로 보였다. 회의는 보통 백엔드를 맡은분과 기획자 분이 많이..

개발순서 1 . 이미지 파일, 오디오 파일 다운로드(스타트 버튼, 적이미지, 배경 이미지, 적 클릭 효과음 등등..) 2 . html 마크업 3 . 기능 생성(js파일) , style 작성 4 . 테스트 & 소스 정리 개발했단 내용을 정리해서 게시글을 올리려고한다. 만들었던 바닐라 js 미니게임들 https://hyuckhee.github.io/ JS Tutorial hyuckhee.github.io

1.HTML 마크업 2.style잡기(기본틀) 3.js 1. HTML 마크업 - 화면을 모듈화하여 분리하는 단계 태그생성, 태그 class 설정 ※ HTML에는 UI적인 요소만 기능적인 부분은 js파일에서 하는게 좋다. (영역 분리) 예 ) 로고 --------------- 메뉴 --------------- 화면 컨테이너 2. style잡기(기본틀) 기본설정 목록 display, vh, 자주 쓰이는 속성 변수 선언 :root{ /* annimation */ --animation-duration: 300ms; } height: 100vh - 부모 태그와 상관없이 화면 전체 1~100 에서 얼마만큼을 보여줄지 정하는 설정이다. body에 설정해두는 편이다. body { height: 92vh; display..

javaScript를 공부하다가 최근 많이 사용하고있는 module방식으로 공부를하다가 module 방식으로 바뀌게된 시점과 과정같은게 궁금해서 정리해보려고한다. 일단 모듈화가 시작된 계기는 javaScript 표준규격인 ES6(ECMAScript6 의 약어)가 2015년에 출시되면서 바뀐 변화를 살펴보겠다. - 변수 선언 (let , const) 가변 변수인 let과 상수 변수인 const가 나왔다. var로 변수를 혼용해서 사용해 불편함을 느끼던 사람들은 ES6가 출시되면서 해소되었을 것 같다. - 구조 분해 할당 (변수의 참조와 복사 정리 추후에..) - 함수 표현식 (화살표 함수) const a()=>{} 이런식으로 함수를 선언할수있게 되었다. 숙련된 사람들에게 빠르게 코드를 구현할수있게 바뀐거같..

innerHTML은 문자열로 넣어주면 HTML DOM으로 화면에 렌더링된다. innerHTML은 선택한 태그의 HTML태그 전체를 변경할때 사용을 많이한다. 사용되는 예 ) 화면 렌더링 ( 다른페이지로 이동) ex) document.querySelector('.app').innerHTML = `Title` appendChild는 노드를 넣어줘야한다. 노드란 HTML Dom을 이야기한다. 문자열을 appendChild에 넣어주면 에러가 난다. appendChild는 선택한 태그에 Element를 계속하여 추가하는 개념이다. 기존 HTML을 유지하고 추가한 태그를 현재 HTML 밑에 추가된다. 사용되는 예 ) 상품추가 ex) let tempTitle = document.createElement('h1'); ..

생각날때마다 단축키 메모 ⌘ : Command key | U+2318 ⌃ : Control key | U+2303 ⌫ : Delete key | U+232B ↓ : Down arrow key | U+2193 ⌥ : Option or Alt key | U+2325 ↩ : Return or Enter key | U+21A9 ⇧ : Shift key | U+21E7 ↑ : Up arrow key | U+2191 ⇥: Tab Webstorm ⌘ + ⌫ - 줄 지우기 ⌘ + D - 선택한 줄 아랫줄에 복사 붙여넣기 ⌘ + Z - 되돌리기 ⌘ + ⇧ + Z - 되돌리기 취소 ⌥ + ⇧ + ↑ - 윗줄로 올리기 ⌥ + ⇧ + ↓ - 아랫줄로 내리기 ⇧ + ⇧ - 파일 찾기 ⌘ + ⇧ + R - 소스(코드) 검색 ⌃..