본문 바로가기

All50

[React] 동전을 뒤집어보자 -! 동전을 뒤집는 동작을 리액트로 구현하기. 버튼을 누를 때마다 뒤집은 횟수가 증가하고 동전 앞면과 뒷면이 랜덤으로 나오고 이 역시 나올 때마다 그 횟수를 증가하게끔 한다. 간단해보이는데 생각보다 코드를 써야하더라. 버튼을 누르고 횟수 증가하고 랜덤이 되게끔 하는 것까진 구현했는데 동전 이미지의 면을 어떻게 하위 Component에 전달하지 모르겠더라. 이부분은 강사분이 하는 풀이영상을 봤는데 동전의 상태까지 state에 넣어 변화하는 상태를 기록하는 거였다. class CoinFlip extends React.Component { static defaultProps = { sides: ['heads', 'tails'] }; constructor(props) { super(props); this.state .. 2021. 8. 28.
[React] 정해진 배열 안에서 랜덤으로 Index 뽑기 [상황설명] Udemy에서 리액트와 관련해 강의를 듣고 있는데 defaultProps으로 포켓몬 8마리를 배열 안에 넣고, 플레이어가 2명이 있다는 가정 하에 랜덤으로 4마리를 뽑아 각각의 경험치를 더해서 승자와 패자를 나누는 걸 코드로 작성한다. class Pokegame extends React.Component { static defaultProps = { pokemons: [ { id: 4, name: 'Charmander', type: 'fire', base_experience: 62 }, { id: 7, name: 'Squirtle', type: 'water', base_experience: 63 }, { id: 11, name: 'Metapod', type: 'bug', base_experi.. 2021. 8. 26.
[Hello WM] Responsive Web Responsive web page : Hello WM 2021.07.19 ~ 2021.08.09 https://hello-WM.vercel.app HTML, Sass, JavaScript PREVIEW [후기] 생각보다 오래 걸렸다... 다른 강의 들으면서 틈틈히 하려고 했는데 하기 싫을 땐 그냥 건너뛰기도 하고 그래서 그런 듯. 이번 프로젝트 하면서 느낀 건, HTML, CSS, JavsScript 모두 연결고리이기 때문에 하나라도 어긋나면 HTML부터 다시 가서 코드를 짜야한다는 것. 아무 것도 없는 상태에서 디자인을 구상하고 실제로 적용해보고 스타일을 입히고, 자바스크립트까지 적용시키는 건 생각보다 오래 걸렸다. HTML 골격을 잡을 때부터 조금 더 철저하게 계획을 세워가며 해야겠다고 깨달은 이번.. 2021. 8. 9.
[Hello WM] Media query Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript Media query까지 적용한 모습. (Desktop - Mobile - Tablet 순서) 처음 Figma로 디자인 구성을 했을 때와는 좀 많이 달라지긴 했다. 이 프로젝트를 하면서 Sass강의를 들었는데 grid 부분을 새로 알아가기도 했고, 전에 했던 부분이 마음에 들지 않아서 여러 번의 수정을 거쳤다. 크롬 개발자 툴로 디자인 구성이 흐트러질 때마다 break point로 설정했고 이제 남은 건 JavaScript로 할 작업들. 사진출처 : 이 프로젝트에 사용하는 B1A4, OHMYGIRL, ONF의 사진 모두 각각 그룹의 공식 트위터, 그리고 WM 엔터테인먼트 공식 트위터에서.. 2021. 8. 6.
[Hello WM] Section Artists Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript 이 부분을 어떻게 정렬하면 좋을까 고민했다. 안테나뮤직 홈페이지에서 본 것처럼 원으로 표현하고 싶었는데 여긴 솔로 뮤지션이 아니라 그룹이라 사진을 동그랗게 오려내면 멤버들 얼굴이 다 나오지 않을 것이 뻔해서 결국은 사각으로 진행했다. 인원이 많은 아이돌 그룹을 표현할 때 왜 사각형으로 쓰는 지 알겠더라. 뭔가 엔터테인먼트 하면 아티스트를 가장 먼저 떠올릴 거 같아서 강조하는 의미로 배경화면을 포인트로 쓰는 컬러를 넣었다. hover 했을 때 그룹의 이름과 각각의 SNS가 떠오르도록 표현했고, 그와 동시에 이미지가 약간 어둡게 되도록 표현. hover를 못하는 경우엔 안에 있는 내용이 바.. 2021. 7. 21.

티스토리툴바