본문 바로가기
틱태토3. 컴포넌트 작성(1) 목표: 3*3 보드판 렌더 및 props 전달을 통해 각각의 버튼에 인덱스 값 나타내기 각각의 버튼을 식별할 수 있는 index를 Board 컴포넌트에서 Square 컴포넌트로 전달하기 브라우저를 통해 렌더 및 props 전달 여부 확인 이전에 생성하였던 컴포넌트 안에 내용을 작성해보자 https://yellow-w.tistory.com/222 2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크 yellow-w.tistory.com 이전 글에서 보았던 명세대로, Game 컴포넌트에서 Board .. 2022. 4. 21.
틱택토2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크게 두 가지 영역으로 나뉨 승자 또는 다음 선수를 나타내는 영역 Square 컴포넌트의 각각의 버튼을 포함하는 board-row 영역*3 Square 컴포넌트는 클릭 시, 버튼의 내부에 클릭한 플레이어를 표시하는 버튼 엘리먼트를 가짐 게임의 규칙 플레이어 중 승자가 생기면 게임은 종료된다. 이미 한번 클릭된 버튼은 재클릭할 수 없으며, 플레이는 되돌릴 수 없다. 2022. 4. 21.
틱택토1. 레이아웃 및 CSS 셋팅 리액트 공식 홈페이지의 자습서 부분에 있는 'TicTacToe 게임'을 완성해보자! 우선, 이번 게시글에서는 기본 레이아웃 및 css를 셋팅해보자! 두 파일을 동일한 디렉토리에 생성하면 된다! 1. game.html 헤드 부분에 react/reactDOM/babel CDN과 css link 작성 완료 바디 부분에 root라는 id를 가진 div 생성하여 ReactDOM의 렌더 메서드에 작성 Game/Board/Square라는 3개의 컴포넌트 생성 2. game.css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both;.. 2022. 4. 21.
webpack4. config(2) - Entry & Context 목차 entry란? 객체 문법 간단 문법 context 1. entry란? 어플리케이션 번들 처리를 시작할 지점 만약 엔트리가 배열로 전달될 시, 배열의 모든 항목이 처리됨 동적으로 로드된 모듈은 엔트리 포인트가 아님 HTML 페이징 하나당 하나의 엔트리 포인트를 가짐 SPA: 하나의 엔트리 포인트 MPA: 다중의 엔트리 포인트 2. entry 객체를 작성하는 문법1 - 객체 문법 재사용 가능하며 configurations의 다른 부분들과 결합 가능 주로 환경, 타겟 설정, 런타임 별로 관심사를 분리하기 위해 사용되는 방법이며 이후 webpack-merge와 같은 도구로 합병(merge)됨 플러그인에 의해 생성된 진입점만 존재한다면 entry로 빈 객체만을 넘겨도 됨 2-1. 속성 (1) dependOn.. 2022. 4. 19.
webpack4. config(1) 1. configuration 설정을 위해 configuration file을 반드시 작성해야 하는 것은 아니다. 웹팩은 프로젝트의 진입점을 src/index.js로, 출력물의 경로를 dist/main.js로 가정한다.(디폴트) 프로젝트 기능을 확장시키고자 할 때, root 폴더 안에 webpack.config.js 파일을 생성하면 웹팩이 자동적으로 사용 웹팩은 plugins 기본값이 적용된 후 configuration 기본값을 적용함 2. 상황에 따라 다른 설정 파일을 사용할 경우, 2-1. package.json에 작성하는 방법 "scripts": { "build": "webpack --config prod.config.js" } 2-2. 커맨드 라인으로 작성하는 방법 $ npx webpack --c.. 2022. 4. 19.
webpack3. 수업 내용 [ 수정중 ] 목차 하드코딩 moment 라이브러리 사용 webpack 및 webpacli + moment 사용 미션: 1초마다 시간이 1초씩 증가하는 코드를 작성해보자. 방법1. 하드코딩 아래와 같이 Date() 메서드와 새로운 객체를 생성하는 new 키워드를 작성하면 된다. 방법2. moment 라이브러리 사용 위의 복잡해보이는 코드는 moment라는 라이브러리를 사용해서 간편하게 작성 가능하다 우선 라이브러리를 설치하는 커맨드를 입력해서 moment를 설치해보자 1. 모멘트 라이브러리 설치 $ npm install moment 2. 코드 작성 방법3. webpack + moment 라이브러리 사용 위의 코드를 webpack을 사용해서 한꺼번에 처리해보자 1. webpack과 webpack-cli 설치 $ npm .. 2022. 4. 19.
webpack2. 개념 목차 웹팩이란? 웹팩을 이해하기 위한 핵심 개념(entry / output / loaders / plugin / mode / browser compatibility ) 진입점(entry point) 출력(output) 로더(loaders) 플러그인(plugin) 모드(mode) 브라우저 호환성(browser compatibility) 환경(environment) 1. 웹팩이란? 웹팩은 모던 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 웹팩이 어플리케이션을 다룰 때, 내부적으로 하나 또는 다수의 entry points로부터 dependency graph를 만든다. 프로젝트에 필요한 모든 모듈을, 컨텐츠를 제공할 정적 자산 인 번들로 결합 2. 웹팩을 이해하기 위한 핵심 개념 진입(Entry) 출력(O.. 2022. 4. 18.
webpack1. 모듈과 추상화 목차 모듈 추상화(abstraction) 개념 웹팩 모듈 웹팩에서 지원하는 모듈의 유형들 1. 모듈 1-1. 모듈방식 프로그래밍 모듈방식 프로그래밍에서 개발자들은 프로그램들을 모듈이라고 불리는 개별 기능상의 덩어리들로 쪼갠다. 각각의 모듈은 검증생성, 디버깅, 세부 사항 테스트하기 등 완전한 프로그램보다 더 작은 표면을 가진다. 잘 작성된 모듈은 완전한 추상화와 캡슐 경계를 제공하며, 각각의 모듈들은 전체 어플리케이션 내에서 논리적으로 일관적인 디자인과 명확한 목적을 가지게 된다. 1-2. 모듈의 특성 식별가능한 유일한 이름을 가짐 독립적으로 컴파일됨 독립적인 기능을 가져야 함 다른 프로그램 또는 다른 모듈에서 사용 가능 모듈 자체로서 재사용 가능 2. 추상화 (Abstraction) 2-1. 추상화 개.. 2022. 4. 18.
React6. state와 불변성 목차 state란? 클래스 컴포넌트에 로컬 state 추가하기 state 업데이트 하향식 데이터 흐름 불변성 개념 1. state? 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다는 규칙을 위반하지 않고도 사용자의 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경 가능 2. 클래스 컴포넌트에 로컬 state 추가하기 render() 메서드 호출 class constructor()메서드 호출하여 state 초기화 후 props를 기본 constructor에 전달 class Clock extends React.Component{ constructor(props){ super(props); this.state = {date: new Date().. 2022. 4. 14.

티스토리툴바