자바자바자바자바

모달 구현 중 props로 useState를 전달하는 과정에서 에러가 발생했다. 우선 컴포넌트 구조는 QnA상세페이지(부모) > 신고모달(자식) 이다.    const [isAnswer, setIsAnswer] = useState(false); const [isBookMark, setIsBookMark] = useState(false); //신고 모달 useState const [isReport, setIsReport] = useState(false); const toggleIsAnswer = () => { setIsAnswer(!isAnswer); } const toggleBookMark = () => { setIsBookMark(!isBookMark); }//모달 On/Of..

Promise란? Promise는 비동기 함수가 반환하는 객체이다. 함수의 성공(resolve) 또는 실패(reject) 상태를 알려준다. 콜백 함수를 직접 호출하는 방법 대신, Promise로 콜백함수를 호출할 수 있다. 이러한 특징 때문에 Promise를 사용하게 된다면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고, 에러도 어디서 발생했는지 발견하기 쉽다. Promise는 세 개의 상태를 가진다.대기(Pending): 비동기 함수가 아직 시작하지 않은 상태성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태실패(Rejected): 비동기 함수가 실패한 상태Promise가 대기상태에서 상태가 바뀌면 then(),catch() 함수를 사용해서 성공,실패의 Promise를 각각..

router를 사용하여 동적 라우팅을 하는 경우에 파라미터 값이 필요할 때가 있다. routes: [ { path: "/", name: "home", component: HelloWorld, }, { path: "/dm-rooms", name: "dm-roomList", component: () => import("../components/DirectMsgList.vue"), }, { path: "/dm-rooms/:room_id", name: "dm-room", component: () => import("../components/DirectMsg.vue"), }, ],3번째 path 부분..

뷰 스터디를 진행하면서 검색기능을 추가하기로 했다. 처음엔 App.vue에 SearchTodo 컴포넌트를 추가하고 SearchTodo 컴포넌트에선 검색 input에 입력된 데이터를 dispatch를 통해 action으로 넘겨준 뒤 mutation에서 keyword를 넘겨받아 키워드를 filter메서드를 통해 걸러주기만 하면 된다고 생각했다.  SearchTodo.vue    Todo.js SEARCH_TODO(state, keyword) { if (keyword) { const search = state.todos.filter(state.todos.text.include(keyword)); state.todos = search; } else { s..

프로젝트를 진행 중 네이버지도 API를 사용하는 페이지를 담당하게 되었다.외부 API를 사용하는 건 처음이라 문제점이 많을 거라고 생각은 했지만 생각보다 더 오랜 기간동안 붙잡고 있었다. 그 중에서도 지도를 사용하는 페이지를 초기 진입시 지도 랜더링이 되긴 하지만, 에러가 발생하는 문제로 꽤나 고생을 하고있었다.  초기 코드지도const testMap = () => { let lat = 37.359531; let lng = 127.1052133; let map: naver.maps.Map; useEffect(() => { const location = new naver.maps.LatLng(lat, lng); //지도 그리기 map = new n..

React Component?  -리액트로 만들어진 앱을 이루는 최소한의 단위-MVC의 V(View)를 독립적으로 구성하여 재사용 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있음(유지보수 굳)-데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수-컴포넌트 이름은 항상 대문자 시작해야함.(소문자는 DOM태그로 취급하기 때문)  props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다.    컴포넌트의 종류  1)함수형 컴포넌트 (Stateless Functional Component) 가장 간단하게 컴포넌트를 정의하는 방법은 JS 함수를 작성하는 것이다.JS함수를 선언하듯이 function으로 컴포넌트..

영속성 컨텍스트  영속성 컨텍스트란 엔티티를 영구 저장하는 환경 이라는 뜻이다. 애플리케이션과 DB 사이에서 객체를 보관하는 가상의 DB같은 역할을 한다. 엔티티 매니저를 통해 엔티티를 저장하거나 조회하면 엔티티 매니저는 영속선 컨텍스트에 엔티티를 보관하고 관리한다. em.persist(member); //엔티티 매니저를 사용해 회원 엔티티를 영속선 컨텍스트에 저장한다는 의미.    영속성 컨텍스트의 특징 -엔티티 매니저를 생성할 때 하나 만들어진다.-엔티티 매니저를 통해서 영속성 컨텍스트에 접근하고 관리할 수 있다. 영속선 컨텍스트의 식별자 값-엔티티를 식별자 값으로 구분한다. 따라서 영속 상태는 식별자 값이 반드시 있어야 한다. 영속성 컨텍스트와 DB 저장-JPA는 보통 트랜잭션을 커밋하는 순간 영속..

Spring Data JPA 우선 ORM을 알아야한다.object-relational mapping은 자바의 객체와 데이터베이스를 연결하는 프로그래밍 기법. 예를 들어 DB에 age,name 컬럼에 20, 홍길동 이라는 값이 들어있다고 생각해보자. 이것을 자바에서 사용하려면 어떻게 해야할까?보통의 경우 SQL이라는 언어로 데이터를 꺼내 사용한다. 그러면 SQL을 새로 공부해야하니 골치가 아프다,,, 하지만 ORM이 있다면 데이터베이스의 값을 마치 객체처럼 사용가능하다.쉽게 말해 SQL을 전혀 몰라도 자바 언어로만 DB에 접근해서 원하는 데이터를 받아올 수 있다. ( 내가 지금 해야하는 것들...! /로그인,회원가입,게임포인트....)  장점과 단점 장점 SQL을 직접 작성하지 않고 현재 사용하는 언어로 ..

컬렉션 프레임워크 컬렉션 프레임워크란? 자바는 널리 알려져 있는 자료구조(Data Source)를 사용해서 객체들을 효율적으로 추가, 삭제, 검색할 수 있도록 인터페이스와 구현 클래스를 java.util 패키지에서 제공한다. 이들을 총칭해서 컬렉션 프레임워크(Collection Framework)라고 부른다. 간단설명으로 컬렉션 : 객체의 저장을 뜻함. 프레임 워크 : 사용 방법을 정해놓은 라이브러리를 말함. 컬렉션 프레임워크 장점 1.인터페이스와 다형성을 이용한 객체지향적 설계를 통해 표준화되어 있기 때문에, 사용법을 익히기도 쉽고 재사용성이 높다. 2. 데이터 구조 및 알고리즘 고성능 구현을 제공하여 프로그램의 성능과 품질을 향상시킨다. 3.관련 없는 API 간의 상호 운용성을 제공한다. 4.이미 구..

예외 처리 예외 클래스 자바에서는 하드웨어의 오동작 또는 고장으로 인해 응용프로그램 실행 오류 발생하는 것을 에러(error)이라고 한다. 그리고 에러 이외에 프로그램 자체에서 발생하는 오류는 예외(exception)라고 부른다. 예외(exception)란 사용자의 잘못된 조작 또는 개발자의 잘못된 코딩으로 인해 발생하는 프로그램 오류를 말한다. 예외는 예외 처리를 통해 프로그램을 종료하지 않고 정상 실행 상태가 유지되도록 할 수 있다. 자바는 예외가 발생할 가능성이 높은 코드를 컴파일 할 때 예외 처리 유무를 확인한다. 만약 예외 처리 코드가 없다면 컴파일이 되지 않는다. 예외와 예외 클래스 예외에는 두 가지 종류가 있다. 하나는 일반 예외(exception)이고, 다른 하나는 실행 예외(runtime..