본문 바로가기

시작179

230224 - React TicTacToe(틱택토) 게임 만들기 오늘 내가 배운 것 1. 틱택토 게임 만들기 1. TicTacToe(틱택토) 게임 만들기 React 공식 홈페이지 내 자습서에 나와 있는 코드를 그대로 따라 치면 다음과 같은 결과가 나온다. 히스토리까지 저장을 해서 되돌리기도 가능하다. 1번 코드 확인하기 더보기 HTML CSS body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px so.. 2023. 2. 24.
230223 - React this 바인딩, Counter 만들기, list 만들기 오늘 내가 배운 것 1. 카운터 만들기 2. componentDidMount, state를 이용하여 loading 구현하기 3. loading 후 증감 하는 버튼 만들기 4. 배열로 들어온 데이터 렌더하는 방법 (List) 5. this 바인딩하는 방법 1. 카운터 만들기 +버튼을 누르면 increment 함수를 이용해서 상태를 +1 해주고, -버튼을 누르면 decrement 함수를 이용해서 상태가 -1 된다. 처음 랜더 했을 경우 초기값이 10이 뜨는데 어떤 순서에 의해서 10이 되는지를 알아야 한다. 실행되자마자 10으로 세팅되는 것이 아니다. 1-1. 최초 실행 순서 constructor()가 실행되면서 상태의 number는 0인 상태가 된다. number가 0 인 상태로 render()가 실행된다.. 2023. 2. 23.
230222 - React Comment 만들기 오늘 내가 배운 것 1. React를 이용하기 위한 기본 세팅 2. Component, 트리구조 3. HTML과 JSX에서의 class 4. React - props 1. React를 이용하기 위한 기본 세팅 HTML의 head안에 리액트 CDN 링크를 작성한다. 그리고 body 안에 리액트로 작성할 영역을 root로 설정해 준다. 위와 같이 설정하게 되면 script 영역에서 만드는 내용은 `div#root` 안에 작성된다. (당연히 script 부분은 따로 파일로 만들 수 있다.) 2. Component, 트리구조 오늘의 목표는 Comment CRUD 중에 C, R 부분이다. 이 부분을 HTML로 만드려고 했을 때 구역을 나눠서 HTML구조를 짜게 될 텐데, HTML의 구조를 보면 아래의 사진의 좌측.. 2023. 2. 22.
230221 - React (리액트) 기초 오늘 내가 배운 것 1. 브라우저 렌더링 과정 2. 브라우저 렌더와 React 3. React 4. JSX 5. DOM / React / JSX를 이용한 React 문법 비교 1. 브라우저 렌더링 과정 여태까지는 화면을 꾸밀 때 `javascript`를 이용하여 HTML을 조작했다. (DOM) 브라우저 렌더링 과정 (응답을 받고 화면에 보이기 직전 시점이다.) HTML을 그릴 때 아래와 같은 과정을 거친다. 1. 응답이 오면, 응답 바디에 있는 HTML 내용을 파싱 한다. 2. 파싱 이후 트리를 만든다. 3. 표현준비를 한다. (사이즈 정렬... 등등..) 4. Render가 된다. 2. 브라우저 렌더와 React DOM을 이용하여 화면을 그리는 과정이 매우 불편하고 귀찮았다. (엘리먼트를 만들고 inn.. 2023. 2. 21.
230220 - 프로젝트 발표 및 회고 3주간 진행했던 프로젝트가 마무리 됐다. 목차 1. 시연 내용 1-1. 메인페이지 1-2. 로그인 페이지 1-3. 채팅 기능 1-4. 인기 게시글, 인기 멤버 ( 랭킹 기능 ) 1-5. 알림 기능 1-6. 게시판 CRUD 1-7. 댓글 기능 1-8. 좋아요 기능 1-9. 리스트 페이지 1-10. 검색기능 1-11. 나의 반응 페이지 1-12. 에러 처리 1-13. 배포 2. 회고 1. 시연 1-1. 메인 페이지 메인 페이지 진입 시 게시판 데이터를 랜덤으로 불러와서 카드에 하나씩 보여준다. 각 카드의 사진이나 제목을 통해서 view 페이지로 이동 가능하다. 카드의 하단부 클릭 시 게시글의 정보를 간단하게 볼 수 있다. 1-2. 로그인 페이지 회원가입 시 ID와 Nickname을 input 이벤트를 통해 .. 2023. 2. 21.
230213~230219 Project 2 - 3주차 PROJECT 2 프로젝트 기간 : 2023.01.30 ~ 2023.02.19 프로젝트 내용 : 더보기 사용자페이지 1. 회원가입 로컬 회원가입 API를 이용한 회원가입 2. 메인페이지 로그인 카테고리 리스트 게시물 리스트 검색기능 3. 게시물 리스트 대표이미지 해당 게시물 좋아요 및 좋아요 취소 해쉬태그 댓글 4. 게시물 등록 카테고리 대표이미지 5장 컨텐츠 내용 해쉬태그를 N개만큼 등록 5. 게시물 보기 게시물 보기 게시물에 게시자 정보 게시물에 해당하는 댓글 6. 채팅기능 전체 채팅 기능 구현 7. 검색기능 사용자는 제목, 글내용, 해쉬태그 내용에 따른 검색이 가능하다 사용자 검색시 해당 사용자의 프로필 정보 / 등록 게시물을 볼 수 있음 8. 랭킹기능(선택사항) 사용자 별 point 랭크 10위 .. 2023. 2. 21.
728x90

티스토리툴바