분류 전체보기 썸네일형 리스트형 비전공자의 프로젝트 만들기) TicTacToe App (Class Type) TicTacToeApp React 공식 사이트에 있는 틱택톡 예제를 만들었다. 프로젝트에는 css내용은 웬만해서 적지 않을 예정이다. npx create-react-app tictactoe_app 우선 틱택톡 앱을 만들기 위해서 리액트 프로젝트를 만들어 주었다. 기본틀부터 작업하였다. App.js import './App.css'; function App() { return ( ); } export default App; 이제 컴포넌트를 생성해 app.js에 출력되게 만들 예정이다. src하위 폴더에 컴포넌트폴더를 생성 후 Board와 Square를 만들어준다. Square.js import React, { Component } from 'react' export default class Square e.. 더보기 비전공자의 프로젝트 만들기) Blog - MarkDown, NextJS, TypeScript, React, Remark, RemarkHtml 블로그 프로젝트 만들어보기 cna(create-next-app)에 TypeScript 템플릿을 적용해서 설치해주었다. markdown Markdown은 텍스트 기반의 마크업 언어로 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙에서 사용하는 ReadME.md 덕분인데 마크다운을 통해 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되었다. 예제 md파일은 NextJS 블로그 만들기에서 가져왔다. https://nextjs.org/learn/basics/data-fetching/b.. 더보기 비전공자의 공부일지 - TypeScript TypeScript???? 1. Type의 종류 Primitive tpyes String : 문자열을 나타낸다 Number : 숫자를 나타낸다. Boolean : true(참)와 false(거짓)을 나타낸다. null : 하나의 값을 가진다. null undefined : 하나의 값을 가진다. 초기화되지 않은 변수의 기본값 symbol : 고유한 상수의 값을 나타낸다. Object tpyes function : 함수를 나타낸다. array : 배열을 나타낸다. classes : 클래스를 나타낸다. object : 객체를 나타낸다. 1. TypeScript 추가 제공 type Any 프로젝트를 만들 때 잘 알지 못하는 타입을 표현해야 될 수도 있는데 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러.. 더보기 비전공자의 공부일지 - NextJS NextJS란 React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 리액트로 개발할 때 SPA(single page application)을 이용하며 CSR(client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)인데 CSR을 하면 첫 페이지에서 빈 html을 가져와 JS해석하여 화면을 구상하기 때문에 포털사이트에서 거의 노출되지 않는다. 하지만 NextJS에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다. 리액트에서도 SSR을 지원하지만 구현하기에 괸.. 더보기 비전공자의 공부일지 - Zustand 맛보기 Zustand란?? Zustand는 간단한 상태관리 솔루션이라고 한다. Zustand는 독일어로 State(상태)를 뜻하고 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다. 보일러 플레이트를 많이 최소화시켰다고 한다. 상용구 코드 감소 Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링 하고 구성 요소를 다시 렌더링 하지 않고도 상태 변경을 처리할 수 있는 경우가 많다. 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다. 이 부분에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야 하는 Redux와 달리 Zustand는 훨씬 쉽다. Hooks를 상용하여 상태를 상용한다. 컨.. 더보기 비전공자의 공부일지 - Recoil TodoList, 패스트캠퍼스 TodoList 만들기 일정을 등록하고 수정하고 삭제, 완료 기능 있는 todoList를 만들 계획이다. 이번에는 App.js에 atom을 만들지 않고 todoAtom.js 파일을 만들었다. todoAtom.js import { atom } from "recoil"; export const todoListState = atom({ key:'todoListState', default:[] }) 그리고 components 폴더에 TodoItemCreator.js를 만들어서 작업하였다. TodoItemCreator.js import React, { useState } from 'react' import { useSetRecoilState } from 'recoil'; import { todoListState .. 더보기 비전공자의 공부일지 - Recoil 이란? Recoil이란??? Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다. Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다. React에 offical 라이브러리는 아니라고 한다. 하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다. Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다. https://recoiljs.org/ko/docs/introduction/getting-st.. 더보기 비전공자의 공부일지 - Mobx todo앱 만들기 Mobx로 앱만들기 Mobx로 간단한 todo 앱을 만드는 프로젝트를 했다. 이번에는 TypeScript로 작업을 진행하였다. 아직 TypeScript에 대해 익숙하지 않아서 내용을 잘못 적을 때도 있다. CRA 할 때 --template typescript 해서 설치하였다. UI 세팅전에 todoStore을 만들었다. todoStore.tsx import { action, computed, makeObservable, observable } from "mobx"; interface TodoItem { id: number; title:string; completed:boolean } export default class TodoStore{ todos:TodoItem[] = [] constructor(){.. 더보기 이전 1 2 3 4 5 6 다음
