리액트15 만들면서 배우는 react, tic-tac-toe https://react.dev/learn/tutorial-tic-tac-toe#setup-for-the-tutorial Tutorial: Tic-Tac-Toe – React The library for web and native user interfaces react.dev 한글로 번역해서 보면 코드 네임과 문장이 뒤죽박죽 섞여 웬만하면 영어로 보는 것이 좋은 것 같다. 나는 영어로 보되, 모르는 단어가 있으면 그때 그때 찾아가면서 이해하고 넘어갔다. 이번에 만들어 본 것은 리액트 공식 사이트에서 tutorial로 만들어진 tic-tac-toe 게임 프로젝트이다. Code SandBox로도 실습이 가능하지만, 나는 GitHub에 학습 내용을 올리기 위해 VS Code를 이용해 실습했다. 어려운 부분들은.. 2023. 8. 19. 소플의 처음 만나는 리액트_실습final 소플의 처음 만나는 리액트_실습final 미니 블로그 기획하기 실습 기능 - 글 목록 보기 - 글 보기 기능(상세) - 댓글 보기 기능 - 글 작성 기능 - 댓글 작성 기능 컴포넌트가 많아서 프로젝트 폴더 구조 사진으로 대체! 글 작성하기 버튼과 댓글 작성하기 버튼은 실제로 기능을 하지 않는다. ** 마지막 빌드 작업에서 serve 에러가 나서 문제 확인 중이다. npx serve -s build 로 해결했다. 책의 모든 챕터가 다 끝이 났지만 앞으로 응용해서 여러가지를 만들어보며 빌드/배포까지 해봐야겠다. 2023. 8. 4. 소플의 처음 만난 리액트_실습13 소플의 처음 만난 리액트_실습13 styled-components - CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 - 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음 - 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정 styled-components를 사용하여 스타일링해보기 실습 import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey.. 2023. 8. 3. 소플의 처음 만난 리액트_실습12 소플의 처음 만난 리액트_실습12 컨텍스트란? - 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식 - 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음 - 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우 - Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트이 데이터를 읽을 수 있음 고려할 점 - 재사용성이 떨어짐 - 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면, 기존 방식대로 데이터를 전달하는 것이 더 적합 컨텍스트 API - React.createContext() 컨텍스트를 생성하기 위한 함수 컨텍스트 객체를 리턴 기본값으로 undefined.. 2023. 8. 3. 이전 1 2 3 4 다음 반응형
