react

🐶 리액트(React)를 이용해 이모지 빙고게임 만들기 🐶 노마드 코더 슬랙을 둘러보던 중, 빙고 게임을 과제로 만드시던 분이 빙고 검증에 대한 구현을 질문하셨다. 처음에는 Codesandbox에 돌아가는 코드를 만들어서 보여드리면 어떨까 생각하다가, "내 사이드 프로젝트로 좋을 것 같은데?"라는 생각에 바로 당일 빙고게임 사이드 프로젝트 작업을 시작했다. 컴포턴트(Component)화 시작하기에 앞서 생각났던 프로젝트가 바로 리액트 공식 문서에서 제공하는 튜토리얼인 틱택토 게임이었다. Board와 Squrare로 컴포넌트화 되어있던게 빙고에 적용하기 딱이였고, 똑같이 Board와 Square라는 컴포넌트를 만들어서 진행했다. 함수구현 빙고에서 구현해야할 함수는 다음과 같다. 1. 특정 칸 클릭시 해당 ..

🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..

커뮤니티 형태의 사이트를 만든다면, 글 작성 및 댓글 작성을 구현 할 때 필연적으로 고민하게 되는 부분 어떤 WYSIWYG를 쓸 까? 그런 분들에게 추천드릴만한 제가 직접 사용해 본 React에 맞는 WYSIWYG에 대해서 설명해보겠습니다. WYSIWYG(위지위그)란? 모두 대문자로 이루어졌으니 무언가의 약어라는 뜻인데, 바로 'What You See Is What You Get, 보는 대로 얻는다'라는 뜻으로 말 그대로 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. - 위키피디아 커뮤니티 형태의 사이트에서는 글을 작성하는 곳에서 이 위지위그 에디터들이 사용됩니다. 간단하게 글자를 굵게 만드는 것부터, 이미지 삽입, 동영상 삽입, 특정 정보 삽입까지 복잡한 역할..