[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.
[개발일기] 한 단계 더 도약하자 / 리액트 공식문서 함께 읽기 0️⃣ - 도입
프론트 개발자로서 한 단계 더 도약하자. 아무것도 모른 체, 웹 개발자라는 것에 도전하던 때, 그 때는 마냥 화면을 잘 꾸미고 싶었다. 디자인된 화면을 보고, 그것들을 그대로 똑같이 모양 껍데기만을 표현하는 것도 쉽지 않았다. 수없이 필요한 들은 어떻게 구상해야 하며, 또 position 이나 display 는 또 뭐던지.... 책이나 문서를 읽는거는 통 머리에 들어오지 않아 일단 되는 데로 부딪혔던 것 같다. 대체 세로 정렬 하나 하는게 왜이리 힘든건지, 열심히 만들었더니 화면 창을 줄이면 또 왜이리 터지는건지, 참 기본 html , css도 초심자에겐 쉬운게 아니었다. 그래도 많이 깨지고 에러와 싸워가면서 배우긴 했는지 이제 기본적인 화면 구성은 어느 정도 감이 온다. react 문법도 손에 나름 익..
2020. 8. 24.
[JAVA☕] 자바 int 최대값, 최소값 표현 / 정수 최대값 / 코딩테스트
자바 Integer 최대 / 최소값 자바로 코딩테스트를 하다보면 int 의 최대값이 필요한 경우가 많다. 최단 경로 문제에서 그래프에 각각 경로에 초기값을 INF 로 저장해 둔다던지... 파이썬은 float("inf") 로 하면 되는데 자바는 검색해도 잘 나오지 않길래 그냥 직접 문제에서 안나올만한 값을 저장해뒀었다. 근데 우연히 발견한 Integer.MAX_VALUE !! int 범위에서의 최대값을 쉽게 표현할 수 있다! 비슷한 맥락으로 최솟값은 이렇게 표현 가능하다.
2020. 8. 22.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..
2020. 8. 17.
[⭐후기⭐] 2020 여름 삼성 SDS 알고리즘 특강 후기
지원 대학생들만 지원이 가능한 것으로 알고있다. 나는 평소에 코딩테스트에 관심도 많았고 방학이라서 이때다 싶어 주저도 없이 바로 지원했다. - 비전공자도 지원이 가능한데 전공자를 더 선호하는 것 같다. - 오픈톡방 얘기를 들어보니 1번 들었던 분들은 다 떨어지신 것 같다. 많은 분들에게 기회를 주려고 2번은 못듣게 하는듯..? 전반적인 진행 과정 이번 삼성 SDS 알고리즘 특강은 전부 온라인으로 진행되었다. (코로나 너는 진짜..😣) 120명 가량의 학생들이 한 시스템에 전부 다 들어와서 수업을 듣는 방식으로 진행된다! 어마어마하게 많은 사람들이 실시간 온라인으로 진행하다보니 뭔가 사건사고가 발생하거나 불편을 겪지 않을까 싶었는데 과정을 담당하시는 매니저님이 너무 깔끔하게 잘 진행해주셔서 별 탈 없이 진..
2020. 8. 15.
[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 과..
[개발일기] 한 단계 더 도약하자 / 리액트 공식문서 함께 읽기 0️⃣ - 도입
프론트 개발자로서 한 단계 더 도약하자. 아무것도 모른 체, 웹 개발자라는 것에 도전하던 때, 그 때는 마냥 화면을 잘 꾸미고 싶었다. 디자인된 화면을 보고, 그것들을 그대로 똑같이 모양 껍데기만을 표현하는 것도 쉽지 않았다. 수없이 필요한 들은 어떻게 구상해야 하며, 또 position 이나 display 는 또 뭐던지.... 책이나 문서를 읽는거는 통 머리에 들어오지 않아 일단 되는 데로 부딪혔던 것 같다. 대체 세로 정렬 하나 하는게 왜이리 힘든건지, 열심히 만들었더니 화면 창을 줄이면 또 왜이리 터지는건지, 참 기본 html , css도 초심자에겐 쉬운게 아니었다. 그래도 많이 깨지고 에러와 싸워가면서 배우긴 했는지 이제 기본적인 화면 구성은 어느 정도 감이 온다. react 문법도 손에 나름 익..
[JAVA☕] 자바 int 최대값, 최소값 표현 / 정수 최대값 / 코딩테스트
자바 Integer 최대 / 최소값 자바로 코딩테스트를 하다보면 int 의 최대값이 필요한 경우가 많다. 최단 경로 문제에서 그래프에 각각 경로에 초기값을 INF 로 저장해 둔다던지... 파이썬은 float("inf") 로 하면 되는데 자바는 검색해도 잘 나오지 않길래 그냥 직접 문제에서 안나올만한 값을 저장해뒀었다. 근데 우연히 발견한 Integer.MAX_VALUE !! int 범위에서의 최대값을 쉽게 표현할 수 있다! 비슷한 맥락으로 최솟값은 이렇게 표현 가능하다.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..
[⭐후기⭐] 2020 여름 삼성 SDS 알고리즘 특강 후기
지원 대학생들만 지원이 가능한 것으로 알고있다. 나는 평소에 코딩테스트에 관심도 많았고 방학이라서 이때다 싶어 주저도 없이 바로 지원했다. - 비전공자도 지원이 가능한데 전공자를 더 선호하는 것 같다. - 오픈톡방 얘기를 들어보니 1번 들었던 분들은 다 떨어지신 것 같다. 많은 분들에게 기회를 주려고 2번은 못듣게 하는듯..? 전반적인 진행 과정 이번 삼성 SDS 알고리즘 특강은 전부 온라인으로 진행되었다. (코로나 너는 진짜..😣) 120명 가량의 학생들이 한 시스템에 전부 다 들어와서 수업을 듣는 방식으로 진행된다! 어마어마하게 많은 사람들이 실시간 온라인으로 진행하다보니 뭔가 사건사고가 발생하거나 불편을 겪지 않을까 싶었는데 과정을 담당하시는 매니저님이 너무 깔끔하게 잘 진행해주셔서 별 탈 없이 진..