useNavigate() 함수를 이용해서 페이징 처리하는 부분을 정리한다. const nav = useNavigate(); const onClick = () => { nav("/search"); } return ( 서치 페이지로 이동 ) 리엑트에서 동적 파라메터를 넘기는 방법은 useSearchParams 와 useParams를 이용할 수 있다. // path 페이징 처리 // 인자로 받아오게 처리
IT/Node.js
어제, 오늘은 페이지 라우터 처리와 캘린더 구현을 해보았다. 구현하고자 하는 기능에 도움이되는 모듈을 찾아 적용해보려고한다. 현재는, 오늘날짜 표시(파란색으로), 그리고 한글 날짜 표현까지 완료하였고, 추가적으로 DB와 연동하여 CRUD를 구축해서 실제 데일리 페이지에서는 스케쥴 관리를 하고, 월간 캘린더에서는 해당 스케쥴 및 체크리스트를 불러와 확인할 수 있는 정도의 어플리케이션으로 구축해보려고 한다. 개발기한은 이번달 말까지로 예상중이고, 디자인적으로 잘 뽑아서 한번 실제 앱스토어에 등록까지 해보고싶다. 하루 8시간씩 투자해서 전업 취준생을 지향하는중.
오늘은 todo 어플리케이션에 스케쥴을 추가하여 todo 및 데일리 스케쥴을 함께 관리할 수 있는 어플리케이션을 개발해보았다. 이전 todo 리스트 구현 내용 링크를 첨부한다. https://mingnol2.tistory.com/207 [React Native] 반려동물 케어 Todo 어플리케이션 개발 리액트 네이티브를 이용하여 안드로이드와 IOS 를 둘 다 지원하는 크로스플랫폼 TodoList를 만들어 보았다. 기존 어플리케이션과 차별화되는 점으로 OO의 성장일기 라고 헤더 타이틀을 지어 보았고 mingnol2.tistory.com 홈화면 > 오늘의 날짜와 오늘 해야할 스케쥴을 보여준다. 또한 하단부에는 기한이 없는 투두리스트를 생성하거나, 수정, 삭제 및 체크를 하여 관리할 수 있다. 하단부 Add ..
리액트 네이티브를 이용하여 안드로이드와 IOS 를 둘 다 지원하는 크로스플랫폼 TodoList를 만들어 보았다. 기존 어플리케이션과 차별화되는 점으로 OO의 성장일기 라고 헤더 타이틀을 지어 보았고, 매일 케어 해야하는 목록들을 신규 작성하거나, 삭제 할수 있으며, 해당 내용을 완료했을 경우 체크 표시까지 기능을 넣어 보았다. React 와 조금 다르게 접근하여 데이터를 불러오는 과정이 필요해서, 한번 헤맸지만 구글 신의 도움으로 모달창에서도 입력받아 신규 목록을 넣어 줄 수 있다. React Native에서는 변경되는 입력값들을 아래와 같이 가지고 올 수 있다. setContent(e.nativeEvent.text); 추가적으로 사진기능과, 검색기능도 넣어봤는데 아직 상세 페이지는 없어서, 페이징 단위..
useState - 새로운 State를 생성 State를 업데이트 시키는 함수 제공 > 컴포넌트 내부에 State 관리 로직을 작성해야함 // use useState 방식 import { useState } from "react"; export default function A(){ const [count, setCount] = useState(0); const onDecrease = () => { setCount (count - 1); } const onIncrease = () => { setCount (count + 1); } return ( {count} - + ); } useReducer - 새로운 State를 생성 (동일) - State를 업데이트 시키는 함수 제공( 동일) > 컴포넌트 외부에 ..
대다수 Javascript 라이브러리를 구동시킬 수 있는 구동기 역할. > node.js 설치 및 버전 확인 node version -> 18 ~ 20 으로 선택 npm(node package manager) node.js의 패키지를 관리해 주는 도구 npm version -> 9~ 1-2. 프로젝트 생성 및 package 파일 내에서 스크립트 이용 방법으로 js 파일을 실행시킬 수 있다. 1-3. node.js 모듈 시스템 활용하기 기능별로 파일을 나눠서 개발하게 됨 Module System? - 모듈을 만들고 불러와 사용할 수 있도록 도와주는 시스템 1. Common JS 모듈 시스템(이하 CJS) module.exports로 객체를 내보내게됨 2. ES 모듈 시스템(이하 ESM) export 이용하..
Part 3. Node.js를 사용한 웹개발 CHAPTER 06 http모듈 HTTP란? HTTP(HyperText Transfer Protocol) TCP/IP 기반의 프로토콜 : 페이지 전달 프로토콜 / 파일 전송 프로토콜 Node.js의 http모듈 가장 기본적인 웹 모듈 HTTP웹 서버와 클라이언트를 생성하는 것과 관련된 모든 기능을 담당 Node.js로 웹서버를 개발하자! http 모듈의 사용법 http 모듈의 응용으로 웹서버 기능을 구현 개념 설명 요청 웹페이지에 접속하려는 요청 응답 요청을 받아 이를 처리하는 작업 http모듈 HTTP웹서버와 관련된 기능 server객체 웹서버를 생성하는데 필요한 객체 response객체 응답메세지 작성시 request 이벤트 리스너의 두번째 매개변수 req..
CHATPER 4 기본 내장 모듈 문서의 사용 방법을 익히는 것이 가장 중요! ? 무엇을 배울까 기본모듈 사용법 Node.js문서를 보고 사용하는 방법 Node.js가 제공하는 동기와 비동기 방식의 차이를 fs 모듈로 알아보기 꼭 알아둘 개념 > Node.js 문서 - Node.js의 주요기능 설명하는 문서 url 모듈 - 인터넷 주소를 다루는데 사용 Query String 모듈 - URL객체의 쿼리를 다루는데 사용 Util 모듈 - Node.js의 보조기능 crypto 모듈 - 해시생성과 암호화 File System 모듈 - 파일을 다루는데 사용 4.1 os 모듈 메서드이름 설명 hostname() 운영체제 호스트이름 type() 운영체제 이름 platform() 운영체제 플랫폼 arch() 아키텍쳐 ..
CHAPTER03 Node.js의 전역 객체 전역객체? 모듈? Node.js 가 제공하는 전역객체를 알아봅니다. 모듈을 만드는 기본적인 방법을 알아봅니다. 개념 설명 전역변수/객체 프로그램 전체에서 사용할수 있는 변수와 객체를 의미 process 객체 프로그램과 관련된 정보를 나타내는 객체이며, 웹브라우저에서 작동하는 자바스크립트에 존재하지 않는 Node.js 만이 가진 객체 모듈 모듈은 기능을 쉽게 사용하고자 메서드와 속성을 미리 정의해 모아놓은것 export 객체 모듈을 생성할때 사용 3.1 전역변수 자바스크립트의 최상위 객체는 window - Node.js 는 window 객체가 존재하지 않음 문자열 자료형의 전역변수 __filename //현재 실행중인 코드의 파일 경로를 나타냄 __dirname..
CHATPER02 Node.js 개발환경 구축 2.1 LTS 버전 vs Current 버전 LTS : 안정적 Current : 새로운 버전(안정적이지 않을 수 있음) 2.2 설치 https://nodejs.org/ko/ 기본적인 명령어 윈도우 cd 폴더명 //특정폴더로 이동 dir // 현재 폴더에 있는 내용을 출력우분투 cd 폴더명 //특정폴더로 이동 ls // 현재 폴더에 있는 내용을 출력 sudo // 다른 사용자의 보안권한과 관련된 프로그램 구동~~~2.5 첫번째 Node.js 애플리케이션