React Redux useReducer(); 상태관리 함수인 useState 대신 useReducer를 사용할 것이다. 컴포넌트 상태 업데이트 로직을 컴포넌트 바깥이나 다른파일에 작성 후 불러올 수 있다. const [data, dispatch] = useReducer(reducer, []); 앱 컴포넌트안에 useReducer() 훅을 불러온다. reducer const reducer = (state, action) => { let newState = []; switch (action.type) { case 'INIT': { return action.data; } case 'CREATE': { const newItem = { ...action.data } newState = [newItem, ...s..

폰트 설정 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글폰트에 있는 나눔펜스크립트와 연성폰트를 사용한다 import style 내 url과 css font-family를 App.css에 등록해줬다 레이아웃 셋팅 모든 페이지에 반영되는 레이아웃 셋팅을 할 것이다. 흰색 메인 컨텐츠, 바탕 회색등의 모든 페이지에 공통되는 스타일을 추가할 것 React 앱은 index.js파일에서 앱 컴포넌트가 랜더링되는 JSX요소들을 아이디가 루트를 갖는 요소를 자식으로 가지면서(getElementById('root') 화면에 추가되는 원리. 그 증거로 요소 확인시 App컴포넌트는 ro..

Path Variable >> useParams React Router | useParams Declarative routing for React apps at any scale reactrouter.com URL 에 변수를 담아 보내는 것 현재는 Path 처리가 되어있지 않다 Path Variable 선언방법 /뒤에 콜론을 적어준다. 다만 이렇게 하면 이후에 /뒤에 아무것도 안적을때 No routes 오류가 뜨기때문에 예외처리하려면 콜론없는 Route를 지정해주는게 좋다 하지만 이번 프로젝트에서 id가 없는 일기는 존재하지 않으니 예외처리를 삭제해주었다 전달한 Path variable을 꺼내서 사용해보자 Diary 컴포넌트로 이동해 코드를 추가해줬다 import { useParams } from "re..

소프트웨어 공학(SE; Software Engineering) - 소프트웨어의 위기를 극복하기 위한 방안으로 연구된 학문 - 여러가지 방법론과 도구, 관리 기법들을 통해 소프트웨어의 품질과 생산성 향상이 목적 소프트웨어 생명주기(Software Life Cycle)? - 소프트웨어를 개발하기 위한 설계, 운용, 유지보수 등의 과정을 각 단계별로 나눈 것 폭포수 모형(Waterfall Model) - 이전 단계로 돌아갈 수 없다는 전제하에 각 단계를 확실히 매듭 짓고 그 결과를 철저하게 검토하여 승인과정을 거친 후 다음 단계를 진행하는 개발 방법론 - 가장 오래되고 폭넓게 사용된 전통적인 소프트웨어 생명주기모델으로 고전적 생명주기 모형이라고도 함 - 모형을 적용한 경험과 성공사례가 많음 - 각 단계가 끝난..

내 유튜브 구독 리스트중 하나인 노마드 코더 alpine.js => 경량 자바 스크립트 웹개발을 위한 제이쿼리 라고 생각하면 편하다 그리고 효과가 15개라 손에 금방 익힐 수 있다. 리액트 웹을 모두 만들기는 어렵고 가벼운 웹이 필요할 때 유용할 듯 Alpine.js Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. Alpine is a collection of 15 attributes, 6 properties, and 2 methods. There is no bette..