C-log

1. DOM(Document Object Model)이란? DOM은 웹 페이지의 구조를 노드의 상속 관계를 맺는 트리 구조로 이루어져 있습니다. 각 노드는 요소(element), 속성(attribute) 등을 나타내며, 부모-자식 관계에 따라 구성됩니다. JavaScript의 를 통해 `document` 객체를 통해 웹 페이지의 요소에 접근하여 동적으로 변경할 수 있습니다. 이러한 노드를 읽고 조작할 수 있으며, 이를 통해 웹 페이지는 브라우저가 이해할 수 있는 구조로 만들어지며, JavaScript를 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있습니다. keyword : 웹 페이지의 구조, 트리 구조로 이루어져 있다, 상속관계, 요소, 속성, js의 documnet 객체 2. DOM과 Virtua..

이제 나만의 시험지를 생성할 수 있는 페이지를 제작할 것이다. 모든 기능의 툴을 일일이 제작하는 방법도 있겠지만 라이브러리를 이용해서 빠르게 작업을 수행하면 좋게다고 판단을 했다. FE팀원이 알아봐준 결과 react-quill이라는 라이브러리가 정보와 자료가 많다고 추천을 해주었다. 그래서 이번 시간에는 react-qull 라이브러리를 알아보려고 한다. 우선 react-quill 라이브러릴 npm으로 설치하고 기본적인 세팅을 해보겠다. 기본적인 세팅을 아래와 같다. # setting react-quill import ReactQuill from "react-quill" export default function EditTestSplit() { return ( Test ) } 위와 같이 작성하고 브라우저로..

json-server api를 담당하고 있던 useEffect를 커스텀 훅으로 만들어 관리하기 위해서 분리하던 도중에 발생한 에러이다. Too many re-render 에러가 발생하는 이유는 대표적으론 uesEffect에 의존성 배열을 삽입하지 않았을 경우에 발생한다. 하지만 나의 경우 커스텀 훅에는 useEffect의 의존성 배열이 문제 없이 잘 삽입 되어 있다. 그렇다면 현재 커스텀 훅의 문제가 아니라 커스텀 훅을 불러오는 컴포넌트(LabExam)에 문제가 있다고 판단했다. 아래 코드는 나의 커스텀 훅이다. * useLabExamAxios.js import { useState, useEffect } from "react"; import axios from 'axios'; export default ..

# API란 무엇인지 설명해주세요. 웹 서비스가 제공하는 인터페이스를 의미한다. 주로 HTTP 프로토콜을 통해 요청(Request)과 응답(Response)을 주고받는다. 이를 통해 다른 서비스나 응용 프로그램이 해당 서비스의 기능을 활용할 수 있다. 예를 들어, 지도 서비스의 API를 사용하면 개발자는 지도 데이터를 가져오거나 지도를 표시하는 등의 기능을 자신의 웹 애플리케이션에 통합할 수 있다.

#setTimeout은 비동기 함수의 대표적인 함수이다. 그렇다면 setTimeout은 왜 비동기 함수인가? setTimeout함수는 일정 시간이 지난 후에 콜백 함수를 실행한다. 일정 시간이 지나는 동안 다른 함수나 코드들이 setTimeout을 기다리지 않고 바로 실행이 된다. 이는 동기적으로 작동하는 것이 아닌 비동기적으로 작동하는 것이다. ##이 외에도 다른 이유 더보기 비동기적 실행: setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행하도록 예약하는 역할을 한다. 따라서 setTimeout 함수가 호출되면 코드의 실행이 지연되고, 다음 코드 블록이 실행될 때까지 기다리지 않고 즉시 다음 코드가 실행된다. 블로킹하지 않음: setTimeout 함수는 콜백 함수를 예약한 후에도 프로..

기술 면접 때 받은 질문을 토대로 작성해 보았다. 굉장히 기초적인 기술을 물어보는데 습관적으로 사용하다보니 면접 때 놓치거나 명확히 기억하지 못하는 경우가 있었다. #콜백 함수란 무엇인가? 콜백 함수는 함수를 다른 함수에게 인자로 전달 되어 특정 상황이나 조건에 도달 하면 호출, 실행되는 함수이다. 즉, 콜백 함수는 다른 함수에게 작업을 의존하고, 그 작업이 완료되었을 때 해당 함수에게 결과를 알려줍니다. ## 콜백 함수는 비동기적인 작업을 처리한다. 더보기 ## 비동기 콜백함수는 비동기적인 작업을 처리하거나 이벤트 처리, 타이머 설정, http 요청 등과 같이 특정한 상황에서 실행되어야 하는 작업을 구현할 때 주로 사용된다. 콜백 함수는 비동기적인 특징을 제어하기 위함이다. 즉, 콜백 함수는 비동기 작..

* 대면 수업 내용 더보기 DI 의존성 주입 개념 복기 object Dependncies petOwner class 코드 참고 -> 생성자 기준으로 new를 통해서 객체를 생성해야한다. 즉 해당 클래스와 생성자는 밀접한 관계를 맺고 있다. 이를 좀 더 유연하게 하기 위해서 DI를 사용하면 된다. DI Bean Container를 통해서 cat과 dog를 생성하고 주입해서 관리하며 cat과 dog 모두를 소유 할 수 있다. 설정 xml config를 통해서 동작을 잘 한다. DI의 디자인 패턴 동적으로 주입을 한다. 컴파일마다가 아니라 onetime마다 이루어진다. 설정 하는 방법 -xml -java annotations -java-based configuration 스프링 컨테이너의 종류 -BeanFac..

최근 잦은 회의와 변동되는 api의 코드들이 많아 자주 push 하지 못했다. commit만 들어 났고 깃허브 잔디는 텅텅비어 있어서 아쉬움이 조금은 많이 남는다. api의 형태가 바뀌었다. 기존의 함수에서 이미지를 파싱하지 못하는 문제가 발생하였다. 그 이유는 api의 구조가 바뀌었기 때문이다. 우선 기존 함수와 변경된 함수의 차이를 살펴보면 아래와 같다. 기존 outside image를 렌더링하는 함수는 다음과 같다. 단순히 이미지의 image가 배열일 때 해당 api를 불러오는 방식이다. (아래 더보기로 이전 api의 형태를 확인해 보면서 비교하면 좋을 것 같다.) 더보기 "images": [ "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistoryFblo..