[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🌌] 리액트 공식문서 함께 읽기 📘 / 2️⃣ - 리액트를 사용하는 여러 방식 /
들어가며 이 부분을 놓치고 들어가면 안될 것 같은데 주제를 분류하다보니 이번 게시글은 길이가 좀 짧아질 것 같습니다. 중요한 내용이긴 하지만, 아마 이미 알고계시는 분들이 많을테니 그 분들은 가벼운 마음으로 보셔도 될 것 같습니다! 지난 포스팅에서는 JSX 에 대해 생각해보고, 리액트라는 게 무엇인가에 대해서 알아봤었습니다. 이제 리액트 공식문서에서는 리액트를 어떤 방법으로 이용할 수 있을지에 대해 나옵니다. 리액트를 이용하는 방법은 한 가지만 있지 않습니다. 리액트를 사용하는 방법들 1. CDN 방식 지난 포스팅에 나왔던 것과 같이 배포용 (용량 및 성능 최적화) cdn 방식을 이용할 경우, CORS 설정을 해줘야 한답니다. 위에 코드를 자세히 보시면 일반적인 src= 가 아니라 crossorigin ..
2020. 8. 28.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 1️⃣ - JSX 없이 사용하는 리액트 /
JSX란? 리액트를 이용하는 개발자님들에게 여쭤보고 싶습니다. 정확히 JSX 가 뭘까요? 솔직히 말하면 저는 JSX 라는 개념을 모호하게 알고 있었던 것 같습니다. 그냥 리액트에서 사용하는 엘리먼트를 표현하는 문법? 딱 이정도로 가볍게 생각하고 있었습니다. 리액트 공식문서 초반부를 읽다가 이에 대해 다뤄보면 좋을 것 같았습니다. 자세한 내용은 글 뒷부분에 공개됩니다! 리액트 시작하기 React 공식문서의 도입부는 html 에서 React 를 어떻게 도입하는지에 대해 설명해줍니다. https://ko.reactjs.org/docs/add-react-to-a-website.html 저는 리액트의 시작을 create-react-web 으로 접해서 뭐가뭔지 잘 몰랐던 경험이 있었고, 그렇기에 또한 babel 과..
2020. 8. 24.
[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..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 2️⃣ - 리액트를 사용하는 여러 방식 /
들어가며 이 부분을 놓치고 들어가면 안될 것 같은데 주제를 분류하다보니 이번 게시글은 길이가 좀 짧아질 것 같습니다. 중요한 내용이긴 하지만, 아마 이미 알고계시는 분들이 많을테니 그 분들은 가벼운 마음으로 보셔도 될 것 같습니다! 지난 포스팅에서는 JSX 에 대해 생각해보고, 리액트라는 게 무엇인가에 대해서 알아봤었습니다. 이제 리액트 공식문서에서는 리액트를 어떤 방법으로 이용할 수 있을지에 대해 나옵니다. 리액트를 이용하는 방법은 한 가지만 있지 않습니다. 리액트를 사용하는 방법들 1. CDN 방식 지난 포스팅에 나왔던 것과 같이 배포용 (용량 및 성능 최적화) cdn 방식을 이용할 경우, CORS 설정을 해줘야 한답니다. 위에 코드를 자세히 보시면 일반적인 src= 가 아니라 crossorigin ..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 1️⃣ - JSX 없이 사용하는 리액트 /
JSX란? 리액트를 이용하는 개발자님들에게 여쭤보고 싶습니다. 정확히 JSX 가 뭘까요? 솔직히 말하면 저는 JSX 라는 개념을 모호하게 알고 있었던 것 같습니다. 그냥 리액트에서 사용하는 엘리먼트를 표현하는 문법? 딱 이정도로 가볍게 생각하고 있었습니다. 리액트 공식문서 초반부를 읽다가 이에 대해 다뤄보면 좋을 것 같았습니다. 자세한 내용은 글 뒷부분에 공개됩니다! 리액트 시작하기 React 공식문서의 도입부는 html 에서 React 를 어떻게 도입하는지에 대해 설명해줍니다. https://ko.reactjs.org/docs/add-react-to-a-website.html 저는 리액트의 시작을 create-react-web 으로 접해서 뭐가뭔지 잘 몰랐던 경험이 있었고, 그렇기에 또한 babel 과..