[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
2020. 9. 8.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
2020. 9. 6.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 3️⃣ - 엘리먼트란?
엘리먼트란? 엘리먼트는 React 앱의 가장 작은 단위입니다. 갖춰져있는 React 개발환경에서 개발을 하다보면 컴퍼넌트는 엄청 자주써도, 엘리먼트에 대한 개념은 모호할 수 있습니다. (제가 그랬거든요 ㅎㅎ 😂 React 엘리먼트는 일반 객체입니다. 예를들자면 아래 예시의 color 는 엘리먼트입니다. 그리고 ReactDOM 을 통해 전달되죠. const color = 파란색 ReactDOM.render(color, document.getElementById("blue")) React 에서는 브라우저의 DOM 과 별개로 React DOM 이 존재합니다. React DOM 은 React Element 내용과 일치하도록 DOM을 업데이트 합니다! React DOM 에 렌더링을 해보자! index.html ...
2020. 9. 4.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 4️⃣ - 테마 설정하기
테마를 만들어보자! 제가 만드는 2048 게임의 2번째 차별점입니다, 기존의 2048 게임은 항상 똑같은 색깔이라 그런지 계속하다보면 밋밋한 기분이 들죠. 그래서 뭔가 버튼 클릭에 따라서 맵도 바뀌고 테마도 이쁘게 바뀌었으면 하는 생각을 해봤습니다. 그런데 정작 제 자신이 디자인알못이라 테마에 들어갈 색을 이쁘게 고르지는 못한다는 허점이 있네요 ㅎㅎㅎㅎ 😂 타일별로 색 설정하기 완성 모습을 보시면 타일별로 색깔이 다 다릅니다. 그렇다고 해서 숫자 셀 하나하나를 컴퍼넌트로 설정하면 불편하겠죠? 저희는 Styled-component 를 이용해서 구현합시다! 레벨 별 색 설정 먼저 단계별 무슨 색상을 할 것인지 설정해줍시다. 직접 고르는거보다 요즘은 색 고르는데에 도움을 주는 파레트 사이트가 좋은게 많으니 참..
2020. 9. 2.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 3️⃣ - 알고리즘 구현
2048 알고리즘 2048 알고리즘을 구현해볼 차례입니다! 아마 구현하는 방법은 사람이 생각하는거에 따라 엄청 다양하고 여러가지일 것 같습니다! 저는 이분의 유튜브에서 왼쪽으로 이동하고 터지는 부분을 참고해서 좀 더 추가하거나 변형해서 만들었습니다. www.youtube.com/watch?v=aDn2g8XfSMc 게임 작동 방식 알고리즘 작동 방식은 다음과 같이 이루어집니다. 우선 방향키를 누르게되면 누른 방향으로 0을 제외한 숫자들이 이동하게 되고, 변화가 있다면 랜덤한 위치에 가장 작은 숫자가 생성됩니다. 그리고 이동한 경우에 같은 숫자 2개가 만나면? 터집니다 ! ✨ 터지게되면 점수를 획득하고, 두 숫자가 합쳐진 새로운 숫자가 만나죠. 이를 상 하 좌 우 로 똑같이 구현하면 됩니다. 우선 만들어야 ..
2020. 8. 31.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기
화면 구성 우선, 게임을 구현하기 앞서, 2048 게임 화면엘 들어갈 요소들 레이아웃들을 정해줍시다. 저는 Ant Design 의 그리드 시스템과 Styled Component를 이용하여 스타일링을 했습니다! 이 부분에 대해서는 따로 설명하지 않을테니 잘 모르시는 분들은 스타일 컴퍼넌트 공식문서 나 제 Antd 포스팅 을 보시고 오는걸 권장합니다! 최종 화면은 다음과 같을 것이고, 저는 스타일링에는 재주가 없다보니, 스타일은 본인 취향에 맞게 꾸미시는거를 추천드립니다 ㅎㅎㅎ😜 시작합니다! 레이아웃 나누기 Ant Design 에서는 기본적으로 Row 와 Col 을 지원해서 Grid 시스템을 쉽게 쓸수 있게 해줍니다. 저는 다음과 같이 레이아웃을 나눠보았습니다. 게임에 관한 요소들이 들어있는 Game2048..
2020. 8. 29.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 3️⃣ - 엘리먼트란?
엘리먼트란? 엘리먼트는 React 앱의 가장 작은 단위입니다. 갖춰져있는 React 개발환경에서 개발을 하다보면 컴퍼넌트는 엄청 자주써도, 엘리먼트에 대한 개념은 모호할 수 있습니다. (제가 그랬거든요 ㅎㅎ 😂 React 엘리먼트는 일반 객체입니다. 예를들자면 아래 예시의 color 는 엘리먼트입니다. 그리고 ReactDOM 을 통해 전달되죠. const color = 파란색 ReactDOM.render(color, document.getElementById("blue")) React 에서는 브라우저의 DOM 과 별개로 React DOM 이 존재합니다. React DOM 은 React Element 내용과 일치하도록 DOM을 업데이트 합니다! React DOM 에 렌더링을 해보자! index.html ...
[React🌀] React로 2048 게임 만들기 ! 🎮 / 4️⃣ - 테마 설정하기
테마를 만들어보자! 제가 만드는 2048 게임의 2번째 차별점입니다, 기존의 2048 게임은 항상 똑같은 색깔이라 그런지 계속하다보면 밋밋한 기분이 들죠. 그래서 뭔가 버튼 클릭에 따라서 맵도 바뀌고 테마도 이쁘게 바뀌었으면 하는 생각을 해봤습니다. 그런데 정작 제 자신이 디자인알못이라 테마에 들어갈 색을 이쁘게 고르지는 못한다는 허점이 있네요 ㅎㅎㅎㅎ 😂 타일별로 색 설정하기 완성 모습을 보시면 타일별로 색깔이 다 다릅니다. 그렇다고 해서 숫자 셀 하나하나를 컴퍼넌트로 설정하면 불편하겠죠? 저희는 Styled-component 를 이용해서 구현합시다! 레벨 별 색 설정 먼저 단계별 무슨 색상을 할 것인지 설정해줍시다. 직접 고르는거보다 요즘은 색 고르는데에 도움을 주는 파레트 사이트가 좋은게 많으니 참..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 3️⃣ - 알고리즘 구현
2048 알고리즘 2048 알고리즘을 구현해볼 차례입니다! 아마 구현하는 방법은 사람이 생각하는거에 따라 엄청 다양하고 여러가지일 것 같습니다! 저는 이분의 유튜브에서 왼쪽으로 이동하고 터지는 부분을 참고해서 좀 더 추가하거나 변형해서 만들었습니다. www.youtube.com/watch?v=aDn2g8XfSMc 게임 작동 방식 알고리즘 작동 방식은 다음과 같이 이루어집니다. 우선 방향키를 누르게되면 누른 방향으로 0을 제외한 숫자들이 이동하게 되고, 변화가 있다면 랜덤한 위치에 가장 작은 숫자가 생성됩니다. 그리고 이동한 경우에 같은 숫자 2개가 만나면? 터집니다 ! ✨ 터지게되면 점수를 획득하고, 두 숫자가 합쳐진 새로운 숫자가 만나죠. 이를 상 하 좌 우 로 똑같이 구현하면 됩니다. 우선 만들어야 ..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기
화면 구성 우선, 게임을 구현하기 앞서, 2048 게임 화면엘 들어갈 요소들 레이아웃들을 정해줍시다. 저는 Ant Design 의 그리드 시스템과 Styled Component를 이용하여 스타일링을 했습니다! 이 부분에 대해서는 따로 설명하지 않을테니 잘 모르시는 분들은 스타일 컴퍼넌트 공식문서 나 제 Antd 포스팅 을 보시고 오는걸 권장합니다! 최종 화면은 다음과 같을 것이고, 저는 스타일링에는 재주가 없다보니, 스타일은 본인 취향에 맞게 꾸미시는거를 추천드립니다 ㅎㅎㅎ😜 시작합니다! 레이아웃 나누기 Ant Design 에서는 기본적으로 Row 와 Col 을 지원해서 Grid 시스템을 쉽게 쓸수 있게 해줍니다. 저는 다음과 같이 레이아웃을 나눠보았습니다. 게임에 관한 요소들이 들어있는 Game2048..