CRA로 리액트 기본 프로젝트를 설치했다. npx create-react-app my-react-todo 필요한 라이브러리들인 Redux, Styled-Components, json-server를 추가로 설치했다. // redux 설치 npm install redux react-redux; // styled-components 설치 npm install --save styled-components // json-server 설치 npm install -g json-server 이후에 json-server는 아래와 같은 형태로 실행시킬 수 있다. 나는 data 폴더를 생성해서 data.json 파일을 생성해두고 이것을 사용하기로 했다. 이렇게 목업 서버를 사용할때 주의할 점은, 클라이언트 포트 번호와 다른..
study/React
과제로 리액트를 사용해 To-Do List를 만들어보기로 했다. 필수로 구현해야 하는 기능은 기본 CRUD 기능이다. 나는 기본 기능에 더해서 내가 하고싶은 기능을 일단 추가해보기로 했다. 📝 기획 내용 정리 모바일 퍼스트로 기획 필수 구현 기능 할일 등록(Create) 할일 조회(Read) - 할일이 없는 상태도 표시할것 할일 수정(Update) 할일 삭제(Delete) 추가 구현 기능 날짜 남은 할일 개수 표시 필터링 기능 - 전체보기, 완료한 할일만 보기, 완료되지 않은 할일만 보기 삭제 기능 추가 - 개별 할일 삭제, 완료된 할일만 삭제, 전체 할일 삭제 등록 기능 보완 - 완료/미완료 형태로 작성하거나 횟수 형태로 작성할 수 있게 하기 완료 결과 보기 - 주별 목표 실천 완료 결과, 월별 목표 ..
1. 이모지를 그대로 복사해서 붙여넣기 🙄 가장 간단한 방법 스크린리더도 이모티콘을 읽을 수 있음 하지만 때때로 이모티콘에는 이중적인 의미가 있을 수 있고, 이때 스크린 리더는 해당되는 의미를 정확하게 전하기 어려울 수 있다. 또한 전달한다고 하더라도 의미가 계속 변할 수 있기 때문에 지속적인 업데이트를 해야한다. 2. HTML 엔티티 기호 / 유니코드 식별자 형태로 작성하기 Unicode Character (U+1F436) Dog Face 🐶 16진수나 숫자 표현도 쉽게 찾을 수 있음 하지만 여전히 1번처럼 이중적인 의미가 손실될 수 있는 문제가 있음 이모지가 기호로 표시되어있을 경우 한번에 의미를 알기 어려움 3. DOM 요소로 이모티콘을 감싸기 🐕 이모지를 DOM요소로 감싸기 때문에 대체 텍스트를 ..
React와 HTML 사이에는 다르게 작동하는 몇가지 어트리뷰트들이 있다. 그래서 오늘은 다음 내용을 정리해보려고 한다. 1. className CSS class를 사용할때 React에서는 className으로 작성한다. // HTML HTML // React 2. htmlFor label 태그와 input 태그를 연결해줄때 HTML에서는 for 속성을 사용한다. 하지만 React에서는 for가 JavaScript 예약어이기때문에 htmlFor를 대신 사용한다. 전체선택 3. dangerouslySetInnerHTML 브라우저에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 공격에 쉽게 노출될수있기 때문에 위험하다. 따라서 설정해줄수는 있지만..
(1) Read, Create https://1ncomparable.tistory.com/204 [React] 바닐라 JS 게시판 리팩토링 (1) - Read, Create 바닐라 JS로 제작했었던 게시판을 리액트로 리팩토링해보기로 했다. 구현 목표는 아래와 같다. 🧱 구현 목표 바닐라 JS로 구현했었던 모든 기능에 더해 추가 기능 구현하기 게시글 목록 보기 게 1ncomparable.tistory.com (2) Delete, Updated https://1ncomparable.tistory.com/211 [React] 바닐라 JS 게시판 리팩토링 (2) - Delete, Update (1) Read, Create https://1ncomparable.tistory.com/204 [React] 바닐라 J..
(1) Read, Create https://1ncomparable.tistory.com/204 [React] 바닐라 JS 게시판 리팩토링 (1) - Read, Create 바닐라 JS로 제작했었던 게시판을 리액트로 리팩토링해보기로 했다. 구현 목표는 아래와 같다. 🧱 구현 목표 바닐라 JS로 구현했었던 모든 기능에 더해 추가 기능 구현하기 게시글 목록 보기 게 1ncomparable.tistory.com 💛 게시글 삭제하기 (Delete) 서버 라우터 (discussions.js) router.delete("/:id", deleteDiscussion); 컨트롤러 deleteDiscussion: (req, res) => { const idx = discussionsData.findIndex( (data)..
바닐라 JS로 제작했었던 게시판을 리액트로 리팩토링해보기로 했다. 구현 목표는 아래와 같다. 🧱 구현 목표 바닐라 JS로 구현했었던 모든 기능에 더해 추가 기능 구현하기 게시글 목록 보기 게시글 작성 게시글 삭제 게시글 수정 데이터를 직접 만든 서버와 연결해 받아오기 fetch로 데이터 받아오기 axios로 데이터 받아오기 파일 구조는 다음과 같이 설정했다. 한페이지라서 App.js 내부에 게시글 목록인 DiscussionList 컴포넌트가 들어가고, 그 내부에는 map으로 반복되어 뿌려질 Discussion 컴포넌트가 들어가게 되어있다. 게시글 입력폼과 state, 이벤트들은 최상위 컴포넌트인 App에 모두 작성하여 필요한 부분은 props로 내려주었다. ❤️ 게시글 목록 불러오기 (조회하기) App...
👀 현재까지 구현한 내용 영상 부트캠프 수업에서 리액트의 state와 props를 공부하게 되면서 해당 내용들을 사용하는 과제를 구현하게 되었다. 나는 과제를 혼자서 처음부터 끝까지 만들어보면서 공부한 것을 더 익히고 싶었고 해보고싶은 추가 기능들을 덧붙여서 구현해보기로 했다. 구현하기로 목표한 내용은 다음과 같다. 📚 목표 사이드바의 각 버튼을 클릭하면 해당하는 페이지로 이동하게 라우터 구현하기 트윗 목록이 보이는 페이지(Tweets.js)에서 더미데이터의 내용이 알맞게 보이게 하고 입력폼 만들기 사용자 페이지(MyPage.js)에는 (로그인했다고 가정하는)유저의 프로필이 보이게 하고, 더미데이터에서 해당 유저의 트윗만 보이게 하기 Tweets.js에서 입력폼에 내용 입력후 전송하면 목록에 트윗이 추가..
Fragment는 별도의 노드를 추가하지 않고 여러 태그를 그룹화 할 수 있는 요소이다. React는 JSX 문법을 사용하고, 두가지 이상의 태그는 무조건 하나의 태그로 감싸져야한다는 규칙이 있다. 아래 예시처럼 두가지 이상의 태그가 들어가게 되면 에러가 발생하게 된다. ❌ 잘못된 예 import React from 'react'; import Hello from './Hello'; import Bye from './Bye'; function App() { return ( ); } export default App; 그래서 이렇게 하나의 태그로 감싸줘야 한다. ⭕ 바른 예 import React from 'react'; import Hello from './Hello'; import Bye from '...
React 공식문서 value value 어트리뷰트는 , 와 컴포넌트에 의해 지원됩니다. 이를 이용해 컴포넌트의 값을 설정할 수 있습니다. 이는 제어 컴포넌트를 만드는 데 유용합니다. defaultValue는 비제어 컴포넌트에서 사용되는 동등한 의미를 가지는 어트리뷰트이며, 처음 마운트될 때 컴포넌트의 값을 설정합니다. https://reactjs-org-ko.netlify.app/docs/uncontrolled-components.html#%EA%B8%B0%EB%B3%B8%EA%B0%92-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0 React의 렌더링 라이프사이클에서는, 폼 엘리먼트에 지정된 value 어트리뷰트가 DOM의 값을 덮어쓸 것입니다. 반면 제어되지 않는 컴포넌트를 사용..
