출처 : 코어 자바스크립트 기본형(primitive type)참조형(reference)불변값가변값변수 : 변경 가능한 데이터가 담길 수 있는 공간식별자 : 변수의 이름 변수 선언 -> 메모리에 식별자 저장 -> undefined 할당 -> 기본형 데이터 할당 시 별도 공간에 데이터를 저장 -> 공간 주소를 변수의 값에 할당참조형 데이터는 내부 프로퍼티들을 위한 변수 영역을 별도로 확보해서 확보된 주소를 변수에 연결하고 확보한 변수 영역에 각 프로퍼티의 식별자를 저장하고 각 데이터를 별도의 공간에 저장해서 그 주소를 식별자들과 매칭 시킴참조형 데이터는 여러개의 프로퍼티(변수)를 모은 '그룹'-> 가변값으로 여기는 상황 발생이를 불변값으로 사용하고자 한다면 내부 프로퍼티들을 일일이 복사하면 가능은 함(깊은 ..
IT
키보드 이벤트 리스너는 document에서 전체적으로 관리한다. 익명함수에도 e 등 파라미터를 넣어 줄 수 있다. 모달 닫기 전, 꼭 현재 상태를 확인한 뒤 모달을 닫거나 다른 작업들을 처리해 주는것이 중요하다. document.addEventListener('keydown', function (e) { if (e.key == 'Escape' && !modal.classList.contains('hidden')) { // esc 키 눌렀을때, modal 에 hidden 이 없을 경우에 hiddenModal(); // SOMETHING TO DO.. } else if (e.key == 'Enter') {// 엔터키 눌렀을 때 hiddenModal(); // SOMETHING TO DO... } });
버튼이 3개 있을 때, 버튼 세개에 전부 클릭 이벤트를 주고자 한다면 반복문을 이용해서 처리해 줄 수 있다. app.js const showModal = document.querySelectorAll('.show-modal'); const modal = document.querySelector('.modal'); const closeBtn = document.querySelector('.close-modal'); const overlay = document.querySelector('.overlay'); for (let i = 0; i < 3; i++) { showModal[i].addEventListener('click', function () { modal.classList.remove('hidden..
useNavigate() 함수를 이용해서 페이징 처리하는 부분을 정리한다. const nav = useNavigate(); const onClick = () => { nav("/search"); } return ( 서치 페이지로 이동 ) 리엑트에서 동적 파라메터를 넘기는 방법은 useSearchParams 와 useParams를 이용할 수 있다. // path 페이징 처리 // 인자로 받아오게 처리
어제, 오늘은 페이지 라우터 처리와 캘린더 구현을 해보았다. 구현하고자 하는 기능에 도움이되는 모듈을 찾아 적용해보려고한다. 현재는, 오늘날짜 표시(파란색으로), 그리고 한글 날짜 표현까지 완료하였고, 추가적으로 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 이용하..
public class TwoDimension { public static void main(String[] args) { int[][] arr = { { 1, 2, 3 }, { 4, 5, 6 } }; for (int[] lang : arr) { for (int i : lang) { System.out.println(i); } System.out.println(); } } }