JS (44) 썸네일형 리스트형 7. 페이지 라우팅 라우터와 라우팅 네트워크에서 정보를 주고 받기 위해서는 여러 개의 네트워트 간에 데이터를 전달하는 방법과 경로를 정해주어야 한다. 중간에서 이러한 역할을 수행하는 장치가 '라우터(Router)'이다. 라우터는 여러 개의 네트워크 사이에서 데이터를 적절하게 전달하고 길을 안내하는 역할을 한다. 라우터는 네트워크 간에 데이터 패킷을 전송하는데 사용되며, 각 패킷은 목적지의 IP주소를 가지고 있다. 라우터는 이 목적지의 IP주소를 확인하여 해당 패킷을 어떤 인터페이스로 전송해야하는 지 결정한다 이를 위해 라우터는 라우팅 테이블을 유지하고, 이 테이블에 따라 패킷을 최적의 경로로 안내한다. 이때 라우터가 데이터 패킷을 적절하게 전달하고 길을 안내하는 모든 일련의 과정을 '라우팅(Routing)'이라고 한다. 즉.. 🏃♀️ 목표 다이어리 - 글 작성 / 수정 필요한 기능 1. 날짜, 주제 선택 2. 목표 추가 버튼 누르면 목표가 리스트로 화면에 출력 + 수정 가능 3. 일기 작성 4. 모두 선택 및 작성 완료 후 작성완료 버튼을 누르면 데이터에 추가되며 홈화면으로 돌아감. 4. 작성 취소를 누르면 작성 내용 모두 리셋되고 홈화면으로 돌아감 다이어리에는 글 새로 작성과 수정이 있는데, 모두 똑같은 form을 가지고 있고 수정의 경우 초기 데이터값과 전달되는 함수만 다른 것이다. 그러니 Editor 컴포넌트로 분리하여 두 페이지에서 모두 사용할 수 있다. 1. 날짜 선택 // 날짜 형식 변환 const getStringDate = (date) => { return date.toISOString().slice(0, 10) } const DiaryEditor =().. 🏃♀️ 목표 다이어리 만들기 - 홈화면 Header 만들기 헤더에는 3개의 섹션이 있다. 1. 가운데 : 초기화면은 오늘의 날짜가 나온다. 2. 왼쪽 : 월이 -1 된다. 3. 오른쪽 : 월이 +1 된다. Home.js const Home = () => { // context로 데이터 받아오기 const diaryList = useContext(DiaryStateContext); // 헤더 날짜 // 날짜를 저장할 State const [curDate, setCurDate] = useState(new Date()); // 헤더에 나타날 날짜 (javaScript에서는 月월 표현할 때 0부터 시작하기 때문에 +1을 해주어야 이번달이 나옴) const headText = `${curDate.getFullYear()}년 ${curDate.getMo.. 🏃♀️ 목표 다이어리 만들기 - 기획 및 기초 세팅 기능 1. HOME 화면 - 月별로 작성된 목표를 확인할 수 있다. - 각 목표 아이템은 작성한 날짜, 주제, 목표, 메모(코멘트)가 나타나고 체크된 목표에 따라 달성률을 표시한다. - 새로운 목표 작성 버튼 - ...을 누르면 수정 및 삭제가 가능하다. 2. 상세조회 - 작성한 내용을 볼 수 있다. - 버튼을 누르면 목표 완료/취소가 가능하다. - 달성률에 따라 막대기가 변한다. - ...을 누르면 수정 및 삭제가 가능하다. 3. 작성 및 수정 - 날짜를 선택할 수 있다. - 주제를 선택할 수 있다. - 목표추가 버튼을 누르면 목표를 작성할 수 있다. - 메모, 코멘트, 일기 등을 작성할 수 있는 공간이 있다. - 작성을 취소할 수 있다.(홈화면으로 이동) 4. 메모 아이템 구성 - Id - 주제 : .. 📝 메모앱 업그레이드 현재 App 컴포넌트에는 onCreate, onDelete, onEdit 3가지의 상태변화 함수가 존재한다. 이 함수들은 App 컴포넌트 내에만 존재했어야 하는데, 이유는 기존의 상태를 참조했어야 하기 때문이다. function App() { const [data, setData] = useState([]); const onCreate = () => { // 중략 setData((data)=>[newItem, ...data]); } const onDelete = () => { // 중략 setData((data)=> data.filter((it)=>it.id !== targetId)); } const onEdit = () => { // 중략 setData((data) => data.map((it) => .. 📝 메모앱 최적화하기 React Hooks 리액트에서 제공하는 여러 메서드들은 원래 클래스형 컴포넌트에서만 사용이 가능하다. 그러나 클래스형 컴포넌트는 중복 코드, 문법의 복잡성, 가독성의 문제 등 여러 단점이 있어 리액트 팀에서도 공식적으로 비추천하고 있으며, 메모앱에서 사용했듯 함수형 컴포넌트를 사용하는 것이 좋다. // 클래스형 컴포넌트 class MemoEditor extends Component { ... } // 함수형 컴포넌트 const MemoEditor = () => { ... } 하지만, 메모앱에서 사용했던 상태를 관리하는 State 또한 클래스형 컴포넌트에서만 사용할 수 있는 메서드이나, 'useState'를 사용하여 상태를 관리해왔다. 이는, 'use' 키워드를 사용하여 클래스형 컴포넌트에서 사용 가능.. 📝 간단한 메모앱 만들기 컴포넌트 MemoEditor: 메모를 입력 MemoBoard: 메모가 나타날 공간 MemoItem: 각각의 메모 1. 메모 작성하기 MemoEditor.js - State를 사용하여 입력된 값들을 저장 const [state, setState] = useState({ subject : "", title : "", content : "", }); - 내용 입력 시 setState할 함수 생성 const handleChangeState = (e) => { setState({ ...state, [e.target.name] : e.target.value }); } 각각의 입력폼에 onChange={handleChangeState} 를 입력하여 해당 요소가 변화할 때 호출 될 함수를 만들었다. event를 매개변.. 6. React 프로젝트 만들기 React에서 사용 가능한 다양한 패키지가 들어가 있는 패키지를 다운받을 수 있다. npx create-react-app 만들 폴더 이름 --use --npm 그럼 이렇게 폴더가 생성된다. 1. node_modules : 다운 받은 패키지에 포함되어 있는 모듈들을 모아둔 폴더 (용량이 크고 다시 다운을 받을 수 있기 때문에 깃이나 드라이브에 올릴 시에는 제외하고 올리는 것이 좋다.) 2. public: 프로젝트의 빌드 결과물이 위치하는 디렉토리로, 웹 앱의 정적 파일을 포함하며 브라우저에 의해 직접 접근될 수 있다. - ~~.ico : 브라우저 탭에 나타나는 로고 - index.html : React의 컴포넌트들을 위치할 html파일 - manifest.json: 사용자 홈 화면의 추가될 때의 아이콘, .. 이전 1 2 3 4 5 6 다음
