DH의 개발 공부로그 DH의 개발 공부로그

1. Object shorthand assignment let name="shape"; let age = 20; let person={ name:name, age:age } console.log(person) key 이름과 value에 변수 이름과 같으면 단축 가능 let person={ name, age } 2.Destructuring (객체를 분해해서 가져오다) let person ={ name:"shape", age:20 } /* let name = person.name let age = person['age'] */ let {name, age} = person 많이 사용되는 방식의 문법이며, 특히 React Hook인 useState와 함께 사용이 많이 된다. 객체뿐만 아니라 배열에서도 사용가능 ..

React란? • React 는 UI 를 구현하는 JavaScript 라이브러리 • 웹 앱(Web App) 또는 네이티브 앱(Native App) • 유지보수를 쉽게 , DOM 관리 • 성능최적화 쉽게 • 컴포넌트에 집중 ​컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece). 독립적으로 분리되어 재사용 됨을 목적. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) ​ 함수형 컴포넌트 컴포넌트 외부로 속성(props)을 전달 받아 어떻게 UI 를 구성해야 할지 설정하여 React 요소(JSX 를 Babel 이 변환 처리)로 반환하는 문법 구문을 사용하는 컴포넌트. ​ JSX ..

GIT이란? GIT이란 버전 관리 시스템이다. 파일 내용의 변경 사항을 기록하고 관리하며, backup, recovery, collaboration이 가능하다 주요 명령어 명령어 설명 pwd 현재 디렉토리 위치 안내 mkdir "폴더명" 해당 폴더 생성 cd "폴더명" 해당 폴더로 경로 이동 ls -al 현재 디렉토리의 파일 목록을 보여주는 명령어 clear 현재 입력창에 보여지는 모든 입력값과 출력값을 지움 vim 에디터를 이용한 파일 편집 > vim "파일명.확장자" 해당 확장자로 된 파일명의 파일을 엶 > i INSERT 모드로 들어가 글자 편집 > :wq w: 저장의 기능, q:파일 밖으로 나감 GIT 명령어 > git init 현재 디렉토리에다가 작업을 진행하겠다는 것을 알려주는 기능 > git..

See the Pen js 시계 by Shape2ee (@shape2ee) on CodePen. 자바스크립트를 이용한 시계를 만들어보았습니다. 코드는 생각보다 아주 간단합니다. HTML 코드 00:00:00 요일 시간이 들어갈 부분을 기본값으로 00:00:00과 요일로 작성하였고 자바스크립트 코드로 넘어가겠습니다. JAVASCRIPT 변수선언 const clockTime = document.querySelector(".time"); const day = document.querySelector(".day"); let date = new Date(); 우선 자바스크립트로 수정해줄 h1과 h2를 상수로 선언하고 new Date() 함수를 이용하여 오늘 지금 시간을 변수에 저장합니다. 시간 변경 함수 func..

며칠전에 기초 작업을 해둔 가위바위보 게임을 주말을 맞아서 완성을 하였습니다. 가위바위보 게임 바로가기 가위바위보 게임 코드 보러가기 저번에 생각했던 것처럼 디자인을 전체적으로 수정을 하였고, 호버 이벤트를 이용하여 사용자와 상호작용 할 수 있도록 하였습니다. 누구나 다 아는 가위바위보 게임이지만, 그래도 사용자에게 한번 더 알려주기 위해 게임설명서를 모달창으로 만들어서 추가하였습니다. 그리고 기능적인 면을 신경을 써서 추가하였고 이부분은 코드로 설명드리겠습니다. 주요 코드 사용성 문제 const gameStart = (e) => { const target = e.target; resetImg(); setTimeout( () => { switch(target.textContent) { case "가위" ..

포트폴리오 작업과 자바스크립트 공부를 병행하면서 머리가 아프고 집중력이 떨어져서 갑자기 토이 프로젝트나 한번 만들까라는 생각과 함께 바로 작업을 하였습니다. 우선 기초는 작업을 다 했지만 디자인과 가위바위보 이미지도 임시로 넣어둔 이미지라 변경 예정이며, 아직 수정할 부분이 많은 프로젝트지만 기록을 남기고 싶어서 이렇게 작성합니다. 방식은 가위바위보를 선택하면 컴퓨터가 랜덤으로 가위바위보를 선택하여 승부하는 게임으로 작업했습니다. 1. HTML 코드 가위바위보 게임을 해보아요😊 My Point 0 Your Point 0 reset 가위 바위 보 html 코드는 이렇게 작성을 하였습니다. bem 네이밍 방식을 공부하고 있고, 아직 부족한게 많지만 이번 프로젝트에 적용하고 싶어서 bem 방식으로 작업했습니다..

요즘 웹사이트를 돌아다녀 보면 자주 보이는 마우스를 따라다니는 도형들을 볼 수 있습니다. 그래서 그런 기능은 어떻게 구현할 수 있을지 공부하면서 구현을 해보았습니다. See the Pen Untitled by Shape2ee (@shape2ee) on CodePen. JavaScript 코드 1. 마우스 좌표 얻기 마우스의 좌표값을 구하는 javascript 프로퍼티에는 종류가 다양한 것으로 알고 있습니다. 대표적으로 clientX, offsetX, pageX, screenX 이렇게 있는데(X를 Y으로 변경하면 Y값 제어) 그중에서 clientX, clientY를 이용했습니다. 이유는 현재 보이는 브라우저의 x,y 좌표 값을 구할 수 있기 때문입니다. offset은 이벤트 대상 노드를 기준으로 좌표값을 ..

Lotte Cinema 롯데시네마 페이지를 리디자인 하였습니다. 기존의 롯데시네마가 다른 영화관 사이트에 비해 올드한 느낌이 있다라고, 개인적으로 생각되어 리디자인하여 작업을 했습니다 ReDesign 반응형웹 시멘틱 마크업 작업페이지 Main, 메인 페이지 Movie, 영화 페이지 Tiketing, 예매하기 페이지 느낀점 & 힘들었던 점 BEM방식의 네이밍 방식을 적용하겠다는 생각을 가지고 작업 하였고, 적용은 시켰지만 헷갈리는 부분이 css에서나 class네이밍에 있어 완벽하게 하지는 못한거 같아 개인적으로는 아쉽습니다. 공부를 더 해야할 것 같습니다. 메인 배너 슬라이드를 플러그인의 도움 없이 오로지 javascript로 작업을 해보고 싶어서 적용은 하였지만 마우스 드래그와 터치로는 작동을 시키지 못..