리액트로 간단한 웹 게임(구구단) 만들기제로초님의 강의를 참고하여 이해한 내용을 바탕으로스스로 다시 만들어보았다.함수 컴포넌트와 클래스형 컴포넌트 2가지로 동일한 구구단 게임을 만들어 볼 것이다.작성한 전체 jsx 코드는 다음과 같다.작성한 코드를 하나씩 살펴보며 어떤
jsx에서는 for문을 중괄호 안에 작성할 수 없다.똑같은 html을 반복적으로 사용할 때 반복문을 사용하면 중복 코드를 줄일 수 있다.리액트에서 반복문을 사용하는 방법을 알아보자.array 메소드인 map 함수를 사용하여 코드 반복을 실행할 수 있다.map은 배열 내
리액트의 조건부 렌더링은 자바스크립트와 동일한 방식으로 동작한다.if 또는 조건부 연산자(삼항연산자)와 같은 자바스크립트 연산자를 사용하여 리액트가 조건에 맞는 UI를 화면에 업데이트하도록 한다.props 값에 따라 다른 컴포넌트를 렌더링하는 방법이다.먼저 if문을 사
벨로그에 정리한 내용으로 리액트 1주차 복습6월 27일 ~ 7월 1일에 작성한 공부 노트 복습프로젝트 이름으로 fristApp 을 만드려고 했는데 대문자 사용이 불가하다는 에러 메시지가 떠서 first-app 으로 작명하였다.yarn이 설치되어 있다면 yarn star
리액트에서 객체를 함부로 바꾸지 마라. (불변성)자바스크립트 문법중에 array와 관련된 내장 함수를 먼저 살펴보자.바로 1번 그룹은 원본 배열을 직접적으로 수정할 것이고2번 그룹은 원본 배열을 수정하지 않고 새로운 배열을 만들어 반환할 것이다.가급적 원본 배열을 직접
props를 지정해서 보내지 않은 경우 기본값을 설정할 수 있다.MyComp라는 컴포넌트를 만들었다. 이 컴포넌트는 props를 받아서 props의 name을 렌더링해 보여줄 것이다.MyComp 컴포넌트에 name로 아이유를 전달했다.화면에 Hello! 아이유라고 나타
리액트에서 작성한 JSX는 Babel이 JSX를 javascript로 변환해준다.JSX에서 위와 같이 작성했다면 Babel은 이를 javascript로 다음과 같이 변경해 준다.조금 복잡해 보이지만 React의 createElement 라는 메서드를 사용하면 해당 태
useState 사용하여 컴포넌트 내에서 바뀌는 값을 관리할 수 있다.Hook을 통해 useState를 사용할 수 있는데 Hook은 React 16.8버전에 추가된 기능이다.클래스 컴포넌트를 사용하지 않아도 state를 관리할 수 있다.먼저, useState를 impo
리액트를 시작하기 위해서는 Node가 설치되어 있어야 하며 npm install로 리액트를 설치 후 create-react-app 명령어를 사용하여 프로젝트를 생성할 수 있다.프로젝트 생성이 완료되면 위와 같은 파일과 폴더명이 나타난다.완료 되었다면 터미널에서 npm
구조체란 서로 다른 자료형의 데이터를 하나의 그룹으로 묶은 자료형을 의미한다. C언어의 기본 타입을 가지고 새롭게 정의 한다고 하여 사용자 정의 타입이라고도 한다. 기본 타입만 가지고 나타내기 어려운 자료를 나타낼 때 사용한다.예를 들어, 학생이라는 구조체가 있다고 가
C의 단순 자료형 C에서 기본적으로 제공하는 자료형(Data Type)이다. 정수 자료형 short(2바이트) : -32,768 ~ 32,767 int(4바이트) : -2,147,483,648 ~ 2,147,483,647 long( > 참고 자료 [자료구조] #0
넓은 의미로 자료구조와 함께 컴퓨터 프로그램을 구성하는 한가지 요소이다. 컴퓨터 명령어들의 집합이라고도 볼 수 있다.프로그램이 자료와 연산으로 구성되어 있다면 알고리즘은 자료구조와 함께 프로그램을 구성하는 한가지 요소로 볼 수 있다.좁은 의미로는 어떠한 문제를 해결하기
프로그램 개발은 건물을 건축하는 것과 비슷하다.장난감 집이 초보 개발이라면 고층 아파트는 고급 개발과 같다. 초보 개발에서 고급 개발로 넘어가기 위해서는 자료구조가 필요하다. 초보자는 주먹구구 방식이지만, 고급 개발자는 체계적인 방법이 필요하기 때문이다.컴퓨터 프로그래
이틀 전에 혼자 드래그 앤 드롭 구현했을 때 동작은 잘 되는데 뭔가 아쉬운..? 느낌이 있어서 관련 영상 찾아서 따라 만들어보고 복습겸 다시 만들어보았다.list 이름의 변수를 선언하여 class가 list인 요소를 선택하였다. ul 태그가 선택될 것이다.let으로 선
이전에 get, post 요청하는 코드까지 작성했고이번에는 작성한 html의 form을 post했을 때 몽고DB에 저장 후, 몽고DB에 저장한 데이터를 다시 가져와서 HTML에 보여주는 것을 구현해보려 한다.express 라이브러리를 최신 버전으로 설치했기 때문에 bo
자바스크립트 복습 겸 드래그 앤 드롭 이벤트 구현 공부HTML과 CSS를 사용해 드래그할 요소와 드래그 박스를 만들었다.드래그 요소에는 draggable 속성을 작성해주면 된다.드래그 이벤트는 드래그 가능한 대상에서 발생할 수 있는 이벤트이다.dragstart드래그가
공부한 내용을 바탕으로 직접 구현해보기메인 페이지를 간단하게 디자인했다.홈에서 글쓰기 버튼을 누르면 /write 페이지로 이동되도록 코드를 작성했다.또, 사용자가 /write 페이지로 접속했을 때도 마찬가지로 get요청을 처리하도록 하였다.우선 wrtie 페이지 get
터미널에 npm init 명령어를 사용해서 package.json 파일을 먼저 만들어 주었다.npm install express하여 express 라이브러리를 설치했다.설치한 express 라이브러리를 require를 사용해 불러온 후 8000번 포트를 사용하도록 작성
vue에도 게임에서 순간이동과 같은 기능을 하는 텔레포트라는 기능이 존재한다. 작성하는 모든 코드와 내용은 결국 index.html에 id="app"을 가진 div 태그 안에 모든 내용이 작성되게 된다.App.vue 파일에 위와 같이 h1, h2 태그를 사용하여 간단하
컴포넌트를 자유자재로 손쉽게 사용할 수 있는 도구이다.prop이나 data, 이벤트 외에도 실질적인 템플릿 코드 조각을 통째로 보내서 화면에 보여줄 수 있는 유용한 기능이다.먼저, components 폴더 안에 slot 폴더를 만들고slot폴더 안에 CardView.v