ByteCraft

개요function ReviewList({ items, onDelete }) { return ( {items.map((item) => { return ( ); })} );}react 학습 중 items.map((item) => { 부분을 이해 하기 위해 .map()을 정리함. Array.prototype.map() 메서드JavaScript에서 배열의 각 요소를 순회하면서 주어진 콜백 함수를 적용한 결과를 새로운 배열로 반환하는 메서드입니다.원본 배열은 변경되지 않습니다. 문법const newArray = arr.map(callback(currentValue, index, array), t..

Session 레벨에서 autocommit 설정을 변경할 때는, 아래의 구문을 사용한다.• autocommit 설정값 확인show variables like 'autocommit%';• autocommit 설정 또는 해제SET AUTOCOMMIT = TRUE; --> 설정SET AUTOCOMMIT = FALSE; --> 해제• 트랜잭션 commit, rollbackCOMMIT;ROLLBACK;그리고 DB의 기본 autocommit 설정을 변경하기 원한다면, 아래의 설정을 추가해주면 된다.• /etc/my.cnf.d/server.cnf[mysqld]autocommit=0 --> autocommit 해제#settings.pyDATABASES = { 'default': { 'ENGINE..

(ChatGTP답변)"개발자"를 "SW Engineer"라고 부르는 것은 적절할 수 있습니다. 하지만 두 용어에는 약간의 차이가 있습니다:개발자 (Developer): 일반적으로 소프트웨어 개발을 하는 사람을 의미합니다. 소프트웨어의 설계, 구현, 테스트, 유지보수 등을 포함한 다양한 역할을 할 수 있습니다. 이 용어는 비교적 넓은 의미로, 코드 작성에 주로 집중하는 사람을 지칭할 때 사용됩니다.SW Engineer (Software Engineer): 소프트웨어 엔지니어는 개발뿐만 아니라 시스템 설계, 아키텍처, 효율성 및 확장성을 고려한 소프트웨어 개발 프로세스 전반을 다룹니다. 엔지니어라는 용어는 더 체계적이고 공학적인 접근을 강조하는 의미가 강합니다.따라서, **"SW Engineer"**는 **..

제너릭 뷰 ListCreateAPIView코드구분, 코드구분명으로 검색 조건 설정 변경전class CodeDevList(ListCreateAPIView): queryset = CodeDiv.objects.all() serializer_class = CodeDivSerializer def get_queryset(self): queryset = super().get_queryset() cd_div = self.request.query_params.get('cd_div') cd_div_nm = self.request.query_params.get('cd_div_nm') if cd_div and cd_div_nm: querys..

구조분해할당(Destructuring assignment)은 객체나 배열의 속성 또는 요소를 간단하고 직관적으로 추출하여 변수에 할당할 수 있게 해주는 JavaScript의 문법입니다. 이를 사용하면 코드의 가독성과 효율성을 높일 수 있습니다.1. 배열 구조분해할당배열의 요소를 변수로 쉽게 추출할 수 있습니다.const array = [1, 2, 3];// 구조분해할당const [a, b, c] = array;console.log(a); // 1console.log(b); // 2console.log(c); // 3기본값 설정배열의 값이 없을 경우 기본값을 설정할 수 있습니다.const array = [1];const [a, b = 10] = array;console.log(a); // 1console...

ContextProps DrillingContext.Provider리팩터링useContext구조 재설계와 Context 분리ContextReact Component Tree 전체를 대상으로 Data를 공급하는 기능Props Drilling 문제를 해결하기 위해 Context 사용ContextAPI는 Context를 만들고 다루는 React 기능 - React.createContext() : Context 생성 - MyContext.Provider : Context 배포 - useContext() : //App.jsimport React from "react";import { useMemo, useCallback, useReducer, useRef, useState } from "react";import ..

useCallback은 React Hook 중 하나로, 함수 컴포넌트에서 함수를 메모이제이션하는 데 사용됩니다. 이 Hook은 렌더링 시마다 새로 생성되는 함수를 방지하여 성능을 최적화하는데 도움을 줍니다. 주로 자식 컴포넌트에 함수를 전달할 때 불필요한 렌더링을 방지하는 데 유용합니다.기본 사용법import { useCallback } from 'react';const MyComponent = () => { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); // 빈 배열은 이 함수가 컴포넌트가 마운트될 때 한 번만 생성됨을 의미 return Click me;};의존성 배열useCallback의 두 번째..

React.memo는 React 컴포넌트의 성능 최적화를 위해 사용되는 고차 컴포넌트(Higher-Order Component, HOC)입니다. React.memo는 함수형 컴포넌트를 래핑하여 props가 변경되지 않는 경우 해당 컴포넌트를 다시 렌더링하지 않도록 최적화합니다.사용법import React from 'react';const MyComponent = ({ value }) => { console.log('MyComponent 렌더링'); return {value};};export default React.memo(MyComponent);주요 특징props 변화 감지기본적으로 React.memo는 얕은 비교(Shallow Comparison)를 통해 이전과 새로운 props를 비교합니다.pr..

useMemo는 React에서 제공하는 성능 최적화용 Hook입니다. 컴포넌트가 렌더링될 때 특정 값의 계산을 반복하지 않고, 종속성 배열에 명시된 값들이 변경되었을 때만 재계산되도록 합니다. 이를 통해 불필요한 연산을 방지하고 성능을 향상시킬 수 있습니다.기본 문법const memoizedValue = useMemo(() => { // 계산할 값 반환 return expensiveComputation(a, b);}, [a, b]);주요 특징의존성 배열(Dependencies)의존성 배열에 포함된 값들(a, b)이 변경될 때만 콜백 함수가 실행됩니다.배열이 비어 있으면([]), 처음 렌더링 시에만 계산됩니다.메모이제이션(Memoization)계산된 값을 저장해 두고, 의존성이 변하지 않으면 저장된 값..

[사전] shorthand : 속기, 약칭정의:JavaScript의 객체 리터럴(Object Literal)에서 키와 값의 이름이 동일할 때, 축약된 형태로 작성할 수 있는 문법입니다.특징:원래는 content: content처럼 키와 값을 명시적으로 작성해야 하지만, Property Shorthand를 사용하면 단순히 content라고만 적어도 됩니다.코드가 간결해지고 가독성이 좋아집니다.예시:const name = "지구별여행자";const age = 30;// Property Shorthand 사용 전const user1 = { name: name, age: age,};// Property Shorthand 사용 후const user2 = { name, age,};console.log(use..