공부(TIL)44 개발일지 13일차 issue1: key 값 인식 오류key={reply.id}를 추가했는데 이런 오류가 생겼다.알아보니, 쪽지 모달창을 ReplyComponent에 연결하던 중 return 값을 을 묶어줬더니, key={reply.id}를 인식하지 못하는 것이었다. 즉 React에서 리스트를 렌더링할 때 각 요소에 key prop을 제공해야한다는 규칙 위반인 것이다.를 제거했더니 오류가 해결되었다.return ( (dropDownRefs.current[reply.id] = el)}> 내용 );issue2: 컴포넌트 scss 적용 오류아래와 같이 scss를 적용시켰는데 다른 곳에서는 멀쩡하게 적용되던 것이 ReplyComponent에서만 적용인 안된다..modal-background { position: fixe.. 2024. 7. 7. 개발일지 12일차 issue: 드롭다운과 쪽지 모달창의 충돌1. 드롭다운 버튼 클릭 시, 쪽지 모달창이 열리는 문제 발생import React, { useState } from 'react';import { useNavigate } from 'react-router-dom';import MsgModal from "./MsgModal";const BoardDropDown = ({ id, onSelect }) => { const navigate = useNavigate(); const [openMsgModal, setOpenMsgModal] = useState(false); const handleModifyButtonClick = () => { navigate(`/board/modify/${id}.. 2024. 7. 6. 개발일지 5~11일차 issue: 리액트 객체 화면 출력 불가이 오류는 보통 React에서 발생하는데, React는 JSX나 JSX를 반환하는 함수를 통해 컴포넌트를 렌더링해야 합니다. JavaScript 객체를 직접적으로 렌더링하는 것은 지원하지 않습니다.구체적으로 "Objects are not valid as a React child (found: object with keys {content})"라는 오류 메시지는 { content }와 같은 객체를 직접적으로 자식 컴포넌트로 전달하려고 시도했을 때 발생합니다.const handleClovaSummary = async () => { try { const summarized = await summary(id, { title: board.title, conten.. 2024. 7. 5. Router(React Router Library) 📢 배운 내용 : Router(React Router Library)npm install --save react-router-dom 1️⃣ WhatSPA(Single Page Application)를 구현하는 방법.1개의 HTML 페이지를 사용하되, 다른 주소에 동적으로 업데이트한 다른 화면을 보여 준다.리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않다.2️⃣ ElementsRoutes: Route를 감싼다.Route: 주소와 컴포넌트를 연결한다.Link: 태그와 다르게, 다른 컴포넌트 이동 시 화면 Refresh가 안된다.(화면상 컴포넌트 초기화 X) BrowserRouter: Routef를 상요하는 하위 영역 전체를 반드시 감싼다.HashRouter: 사용자가 어떤 주소로 들어와도, 처.. 2024. 5. 29. SPA(Single Page Application) 📢 배운 내용 : SPA(Single Page Application) 1️⃣ What1개의 HTML 페이지로 사용자가 상호 작용할 때마다 페이지를 다시 로드하지 않고, 자바스크립트를 통해 컨텐츠를 동적으로 업데이트하는 애플리케이션주로 React, Angular, Vue.js와 같은 프레임워크와 React Router와 같은 라우팅 라이브러리로 구현된다.2️⃣ How브라우저가 HTML(View)를 담당: 브라우저는 처음 로드할 때 모든 필요한 리소스를 로드하고, 사용자와의 인터랙션이 발생하면 해당 부분만 자바스크립트를 사용하여 업데이트한다.동적 데이터 로드: 새로운 데이터가 필요하면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다.3️⃣ Why전통적인 웹 페이지의 문.. 2024. 5. 29. no such file or directory, lstat '..\AppData\Roaming\npm' create-react-app을 사용하여 새로운 React 프로젝트를 생성하던 중에 오류 메시지에 따르면 npm이 '..\AppData\Roaming\npm' 디렉토리를 찾을 수 없다고 떴다. npm 버전을 확인해보니, 10.5.2 버전으로 확인이 됬고, cash clean도 했다. 그래서 이렇게 해보라고 도와주셔서 했더니 리액트 프로젝트 생성 완료 2024. 5. 17. error: Attempt to recreate a file for type..... Querydsl 활용해서 동적 쿼리를 구현하던 도중에, 이런 오류가 발생했다.Querydsl이 BaseEntity에 대한 Q 타입을 이미 생성했으며 다시 생성하려고 시도하고 있기 때문에 발생했다고 하는데... Querydsl은 자동으로 엔티티에 대한 Q 타입을 생성하는데, 이미 생성된 경우 다시 생성하려고 하면 충돌이 발생한다고 한다. 해결 방법은 chatgpt와 블로그를 통해 아래와 같이 5가지로 추릴 수 있었다.1. Querydsl의 Q 타입 생성 설정 변경: Querydsl이 BaseEntity에 대한 Q 타입을 생성하지 않도록 설정을 변경2. BaseEntity에서 Querydsl 타입 생성 제외: BaseEntity 클래스에 @QuerySupertype 어노테이션을 추가3. Querydsl 타입.. 2024. 5. 7. ORA-00942: table or view does not exist 오류 보고 -ORA-00942: table or view does not exist00942. 00000 - "table or view%s does not exist"*Cause: The specified table or view did not exist, or a synonym pointed to a table or view that did not exist. To find existing user tables and views, query the ALL_TABLES and ALL_VIEWS data dictionary views. Certain privileges may be required to access the tab.. 2024. 4. 29. [컴퓨터 구조] 메모리(Meomory) ❗️Review : 메모리 ▶️ 주기억장치, 메인 메모리 ▶️ '현재 실행'되는 프로그램의 명령어와 데이터를 저장하는 부품 ▶️ 프로그램이 실행되기 위해서는 프로그램의 명령어와 데이터가 메모리 안에 있어야 함 ▶️ 즉 실행되는 프로그램의 명령어와 데이터를 저장함 ▶️ 상대적으로 가격이 비쌈 1️⃣ RAM(Random Access Memory): 컴퓨터 전원이 꺼지면 저장된 내용을 잃음(휘발성 저장장치) 2️⃣ ROM(Read Only Memotry): 컴퓨터 전원이 꺼져도 저장된 내용이 존재함(비휘발성 저장장치) (+) 주소: 명령어와 데이터가 저장되어 있는 메모리 내 위치를 나타내는 값, 일반적으로 컴퓨터가 명령어와 데이터를 찾거나 저장할 때 사용됨 ❗️Review : 인터럽트(interrrupt) ▶.. 2024. 4. 19. 이전 1 2 3 4 5 다음
