프로그래밍 끄적끄적

지난번에 만든 Todolist를 응용하여 NoteApp을 만들어보았습니다. todolist와 다른 점은 todolist는 한 페이지에서 작동하지만 Note App은 react-router-dom을 활용하여 다른 페이지에서 입력을 받고 메인 페이지에서 출력을 해주도록 하였습니다. 또한 검색 기능을 만들어 메모를 검색할 수 있도록 하였습니다. App.js title 이라는 state를 만들어주고 localstorage를 이용하여 초기화되지 않도록 해줍니다. title state는 메모 리스트를 담을 state입니다. 나중에 add.js components에 props를 이용하여 값을 전달해줄 것입니다. searchinfo state를 만들어주고 이 state는 검색을 위한 state이므로 초기값은 비어둡니다..

가장 기본적인 토이 프로젝트 To Do List를 만들어보았습니다. 주요 기능은 할 일 추가 및 삭제 현재 시간 표시 localstorage를 이용해서 페이지를 이동하거나 나가도 저장이 되도록 하였습니다. Todo.js 먼저 React hooks 인 useState를 이용해서 todo state를 추가해줍니다. 여기서 localstorage를 사용해서 페이지를 나가거나 이동하여도 state가 초기화되지 않도록 해줍니다. 또한 input 태그에서 value 값을 받아오기 위해서 something이라는 state도 만들어줍니다. 먼저 할 일 목록을 추가해주기 위해서 input 태그를 만들어줍니다. input 태그를 만든 후 onChange 를 넣어주어 input value 가 변할 때마다 즉, input 태..

🎬 Intro 저번에 만든 날씨 정보 제공 페이지에 이어 이번에는 영화 순위 정보를 제공해주는 페이지를 React를 이용해서 만들었습니다. 주 방법은 axios를 이용하여 API를 제공받아 화면에 출력하는 것입니다. App.js moviedata , date , inputdate라는 이름을 가진 State를 만들어줍니다. moviedata는 axios를 이용하여 받아온 정보들을 넣어둘 state이고 date는 날짜 정보를 넣어둘 state , inputdate는 input 태그에 날짜를 입력할 때 사용할 state입니다. 먼저 useEffect와 axios를 이용하여 날짜 정보를 받아옵니다. 이때 date state를 이용하여 API 주소 뒤에 붙여줍니다. 기본적으로 date state의 초기값은 202..

🌡️ Intro 날씨 정보 API를 이용한 날씨 정보를 검색하면 보여주는 페이지를 리액트로 구현했습니다. App.js 먼저 main과 city 라는 state를 만들어줍니다. main이라는 state는 axios를 이용하여 받아온 데이터를 저장하는 state이고 city라는 state는 검색에 이용되는 state입니다. openweathermap.org 사이트에서 오픈 API를 이용하여 axios로 날씨 정보를 받아 main이라는 state에 넣어줍니다. React Hooks 인 useEffect를 이용하여 component가 화면에 렌더링 될 때 받아올수 있도록 해줍니다. 그 후 dependency 배열 값에 city를 넣어주어 검색하는 값이 바뀔 때마다 다시 렌더링 될 수 있도록 설정합니다. 이제 A..