📚 TIL

아웃소싱 프로젝트 미리보기https://velog.io/@yeahzzl/TIL231205https://velog.io/@h0ngwon/%EB%82%B4%EB%B0%B0%EC%BA%A0-%EC%95%84%EC%9B%83%EC%86%8C%EC%8B%B1-

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject

클라이언트 상태 : UI 관련 일시적 데이터(e.g 폼 입력값)가 아닌,서버 상태: 서버에서 가져오는 데이터(e.g API 응답값)로캐싱, 동기화, 재검증 등이 필요한데 이를 관리하는 도구가 Tanstack Query!

https://developer.mozilla.org/ko/docs/Web/API/AbortController(실험적 기능이므로 호환성 확인 필요)AbortController 인터페이스는 하나 이상의 HTTP 요청을 취소할 수 있게 해주는 API로 signal

내가 공부량이 많아서 이상해지는 건 아닐 텐데...헛웃음이 너무 나와 깔깔~!!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString

TanstackQueryqueryFunctionContext

타입스크립트야 안녕새 출발은 언제나 경쾌함이라는 환각을 선사하지\~~

. Student 인터페이스 선언typescript코드 복사interface Student { name: string; age: number; scores: { korean: number; math: number; society: number;

type과 interface의 차이점을 모르겠는 상태로 쿡북 강의 보는 중!

https://www.typescriptlang.org/docs/handbook/type-compatibility.html

TypeScript 초기셋업https://www.typescriptlang.org/docs/handbook/type-compatibility.htmlyarn create vite my-vue-app --template react-tsVS Code 열고 폴더 열

npx create로 새 프로젝트를 생성할 때마다 오류가 난다. 저번에는 GPT한테 물어봐서 force가 들어가는 명령어로 캐시를 삭제해 해결할 수 있었지만, 매번 이럴 수는 없다. yarn은 명령어만 잘 쓰면 문제 없는 듯? 우선 yarn 사용할게여..

React Router Dom은 외부 라이브러리,Next.js는 프레임워크로서 어떻게 라우팅을 처리하는가?

느낌표 너무 제 눈 앞에 있는 거 아니에요?

Today I Learned that노트북은 주기적으로 재부팅해야 합니다.D드라이브도 잘 활용합시다.외장하드에 백업을 하면 더 좋습니다.시간은 쏜살같이 흐릅니다.

현재 오후 4:35디테일 페이지 전까지 어젯밤에 하고 잤는데아직도 디테일 페이지 진입 못 하고 있는 게 놀랍다.몇 개 되지도 않는 경로가 계속 헷갈리고발제 설명과 강의 설명이 다른 건지 내가 정신이 나간 건지삽질의 무한반복..!그래서 새로운 에러가 뜬 게 오히려 반갑다

Next.js 과제 코드 리뷰

1\. 이게 뭐지? < Card >는 아마도 별도로 정의된 리액트 컴포넌트일 가능성이 큽니다. < div >는 일반적인 HTML 요소입니다.{styles.post}는 CSS 모듈 문법입니다.styles는 CSS 모듈 파일을 import하여 사용하게 되며,

: 데이터를 미리 복사해 놓는 임시 장소.공간의 크기는 작지만, 데이터를 가져오는 속도가 빠른 것이 장점.웹 브라우저가 속도를 높이고 네트워크 비용을 아끼기 위해 사용.서버에 매번 데이터를 재요청하는 대신 저장해놓은 데이터를 유저에게 보여주는 것, 이렇게 캐시를 사용하

https://velog.io/@nab5m/Next-js-API-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

[Lighthouse] https://teamsparta.notion.site/React-5-Lighthouse-aca54b0d3c644d4daeea08503ab79515

https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr아래 설정을 안 하면 절!대! 안 된다고 합니당.

https://verysoyoung.tistory.com/10https://w-world.tistory.com/316https://velog.io/@fo_rdang/React.DispatchReact.SetStateActionstring

https://www.redhat.com/ko/topics/devops/what-is-ci-cdhttps://velog.io/@yu00hun/npm-ci

현업에서 기획에 손댈 일은 없다지만 현시점, 매우 중차대한 문제다.기능 구현에 대한 고민과 함께 컨셉/방향성을 잃어선 안 된다.UI/UX 관점에서 내 우리 프로젝트를 바라보면 길이 보일 수도 있다.도대체 라이브러리 검색은 어떻게 해야 잘하는 거지?3-1. 아니면 문구/

1\. 마이크로 프론트엔드 (Micro Frontends)마이크로 프론트엔드 아키텍처를 사용하면, 각 프론트엔드 애플리케이션을 별도의 프레임워크로 개발한 후, 이를 단일 애플리케이션으로 통합할 수 있습니다.예를 들어, Next.js 애플리케이션의 일부 페이지는 Reac

https://www.youtube.com/watch?v=Y1FbowQRcmI

완성은 아니지만 완료는 되어버린 최종프로젝트.처음 캠프에 합류하고, 이 과정을 통해 소중한 동기들을 얻어가게 될 거라는 말을 들었을 때는, 아 훈훈한 분위기 만들고 싶으신가 보다 했는데 그게 찐이었다 찐찐찐!실명을 언급하려니까 갑자기 조심스러운 마음이 든다.모두모두모두

노는 게 제일 좋아...힐링 타령 조금 뻔하지만 이번에는 진짜 치유되어서 돌아왔다!

https://inpa.tistory.com/entry/OOP-%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EA%B0%9C%EB%85%90%EA%B3%B

[Advanced Server Rendering] https://ifelseif.tistory.com/164 [Supabase Type 명령어 자동 한 줄 생성] https://inblog.ai/luke/supabase-typescript-%EC%82%AC%EC%9

https://medium.com/humanscape-tech/type-vs-interface-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-f36499b0de50https://www.totaltypescript.

8/13 TIL 코드 리뷰

Type Alias와 Interface를 비교하다가,기본 개념도 잘 안 잡혀있는데 혼란만 가중시키고 있는 것 같아우선 강의를 듣기로 한다!https://www.typescriptlang.org/docs/handbook/generics.html재사용 가능한 컴포

그러니까 interface는 extends 가능하고동명의 인터페이스를 merge할 수 있는데,https://www.totaltypescript.com/type-vs-interface-which-should-you-use 에선 디폴트로 type을 쓰되 exten

울적함을 공부로 승화시킬 수 있나?나는 그저 게으르게 시간을 보내고 싶은 핑계로 우울을 이용하고 있나?기분에 상관 없이 할일을 하는 방법은 무엇인가?반복된 좌절의 경험을 딛고 일어나,그럼에도 목표의식을 가지고 전진하는 사람이 되고 싶다면 어떻게 하나?동그랗게 뻥 뚫린

https://github.com/gyoogle/tech-interview-for-developerCS 정보 참고하기!

is fetching data inside useEffect an anti pattern?

공식문서에 다 나와있는데 읽지도 않고 무지성으로 코드 짠 나... 친절하게 알려주신 현업 개발자님의 자비...https://ko.react.dev/reference/react/useEffectEffect에서 직접 데이터 페칭 로직을 작성하면 나중에 캐싱 기능이

🥹 할일 리스트를 쓰는 것 ≠ 실제로 그 일을 하는 것☑️ useQuery vs useEffect 코드 비교useQuery 공부

https://stackoverflow.com/questions/29312123/how-does-the-double-exclamation-work-in-javascript값이 true일 때 !!true는 true,값이 false일 때 !!false는 false

➡️ 'users' 테이블에서 ➡️ 'nickname' 컬럼을 선택하고➡️ 'id' 컬럼이 userId와 같은 데이터를 가져와서 ➡️ 하나의 레코드 반환여기서 내가 아무 생각 없이 써오다가 궁금해진 건 eq의 정확한 의미.eq는 Supabase 쿼리에서 특정 조건을 설

🚨 중복 페칭 문제 (FetchUserData.tsx 실효성 X)🚨 provider로 children을 감싸자🚨 useContext vs 컴포넌트 트리 프롭스 전달데이터가 사용되는 모든 컴포넌트에서 매번 데이터를 가져오고 있었고,FetchUserData.tsx는

한 게 없는데 내일이 월요일이어서 초조한 건에 관하여 한 게 전혀 없는 것은 아니다. 적어도 뭐를 모르는지는 아는 상태로 발전했다. 일상의 소일거리들을 미루지 말자. 기분이 더 나빠진다. 체크리스트를 하나씩 지워나가면 된다. 누워서 영상 편집을 조금이라도 하면 굉장히

명시적으로 타입 지정as로 타입 단언

1\. FetchUserData.tsxuseQuery의 적절한 사용useContext vs 컴포넌트 트리 구조 (우선은 후자 선택)전체정보 다 렌더링하는 컴포넌트를 위한 페칭 훅닉네임만 렌더링하는 컴포넌트를 위한 개별 정보 페칭 훅레벨네임만 렌더링하는 컴포넌트를 위한

공식문서 정독 및 번역https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts

var : 쓰지 마세요let : 가변적 변수 선언, 재할당 가능, 코드 어디선가 이 변수의 값이 다르게 할당될 가능성const : 불변성 유지 변수 선언, 재할당 불가능, 근데 상수라고 불러야만 정확한 건가?var : 스코프 내 중복 선언 가능, 재할당 가능, 변수 선

렌더링이란 컴포넌트가 화면에 그려지는 과정을 말합니다.React에서는 JSX로 작성한 컴포넌트가 브라우저의 DOM에 실제 요소로 변환되는 것을 렌더링이라고 합니다.렌더링은 다음의 두 가지 경우에 발생합니다:초기 렌더링: 컴포넌트가 처음 생성되어 화면에 나타날 때.업데이

[ ] 모던 리액트 - useEffect [ ] useEffect 실행 순서 정리 [ ] Redux 핵심 개념 영상 [ ] 모던 리액트 - DOM과 브라우저 렌더링 과정

ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터 함수는 함수 호출자에게 함수 실행 제어권을 양도할 수 있다.: 일반 함수를 호출하면 제어권이 함수에게 넘어가고, 함수 코드를 일

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용. 하지만 전통적 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다.ES6에서는 비동기 처리를 위한

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택이라고도 부름)에 푸시되고, 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된

변수 호이스팅(variable hoisting) : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.변수 선언뿐 아니라 var, let, const, function\*, class 키워드로 선언하는 모든 식별자(변수, 함수, 클래스

모던 자바스크립트 - 프로미스 뒷부분 읽기GET, POST 글 마무리무한스크롤 코드모던 리액트 - DOM과 브라우저 렌더링 과정모던 리액트 - useEffectuseEffect 실행 순서 정리Redux 핵심 개념 영상

☑️ 모던 리액트 - 서버 사이드 렌더링 읽기모던 자바스크립트 - 프로미스 뒷부분 읽기☑️ GET, POST 글 마무리무한스크롤 코드모던 리액트 - useEffectuseEffect 실행 순서 정리Redux 핵심 개념 영상https://www.youtube.c

리액트 코드를 작성할 때 useState만큼이나 자주 쓰이는 훅이 바로 useEffect다.useEffect는 두 개의 인수를 받는데, 첫 번째는 콜백, 두 번째는 의존성 배열이다. 이 두 번째 의존성 배열의 값이 변경되면 첫 번째 인수인 콜백을 실행한다.클래스 컴포넌

모던 리액트 - 서버 사이드 렌더링 정리모던 자바스크립트 - 프로미스 뒷부분 읽기무한스크롤 코드useEffect 실행 순서 정리Redux 핵심 개념 영상https://www.youtube.com/watch?v=N9PT9iNTZAE&list=PLuHgQVnccG

전승 계층 프로토콜은, 네트워크 통신에서 송신자와 수신자 간의 데이터 전송을 효율적이고 안정적으로 관리하는 역할을 한다. OSI 7계층 모델의 4번째 계층에 해당하며, TCP/IP 모델에서도 중요한 부분을 담당한다.❓OSI 7계층 모델?❓TCP/IP 모델?데이터 분할

3-way 핸드셰이크는 TCP 연결을 설정하는 과정. 두 장치(클라이언트와 서버)가 서로 신뢰할 수 있는 연결을 시작하기 위해, 세 번의 메시지를 주고받는다.이 과정이 완료되어야 데이터 전송이 가능해진다.1\. SYN (Synchronization)클라이언트가 서버에게

HTTP와 HTTPS는 웹에서 데이터를 주고받는 프로토콜.둘은 데이터 전송 방식과 보안 수준에서 차이가 있다.HTTP는 클라이언트(브라우저)와 서버 간의 데이터를 전송하기 위해 사용하는 비보안 프로토콜.데이터가 암호화되지 않은 평문(Plain Text)으로 전송되기 때

쿠키 세션 웹스토리지

생각 안 하고 그냥 하는 법 좀 생각해 봐야겠다..🥴또 왜 이럴까?(계속) 여기저기 아프다.운동을 못/안 한다.안 하기의 관성식욕은 뻗치는데, 먹고 나서는 불쾌한 악순환돼지가되🐖할일 많고 체력 없어내 욕구 수준 : ㅎ헤 마라탕+꿔바로우 먹고 방구 뿡뿡🤪 갑자기 1

Redux로 리팩토링 영상https://www.youtube.com/watch?v=8EhmwDKSeJQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=7피그마 내용 카테고리피그마 검색 결과 UI, 검색 키워드 표시모던 리액트

소프트웨어 개발 코드에서 라이프사이클은, 주로 객체나 컴포넌트가 생성되고 소멸될 때까지 거치는 일련의 단계들을 의미한다. 이를 통해 각 객체 또는 컴포넌트의 상태 변화를 체계적으로 관리하고, 메모리 누수나 불필요한 자원 소모를 방지할 수 있다. 프레임워크(React,

React 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 라이프사이클은 주로 컴포넌트의 생성(Mount), 업데이트(Update), 소멸(Unmount) 단계에서 이루어진다.componentDidMount() : 컴포넌트가 마운트된 직후 호출된다. 비동기 요

과거 리액트 애플리케이션을 만들 때 Create React App(create-react-app)이 각광받았지만, 요즘은 서버 사이드 렌더링을 지원하는 Next.js 같은 프레임워크를 사용해 프로젝트를 만드는 것이 인기다.이에 따라, 리액트 개발자의 서버 사이드 렌더링

이거 컴파일과 인터프리터 개념도 같이 이해해서 설명하고 싶은데 지식 부족..! 타입스크립트는 자바스크립트가 런타임에 가서야 오류를 발생시키는 단점을 보완하기 위해, 코드 작성 시에 타입을 지정해서 안정성을 제고합니다.

자바스크립트느 HTML, ( 출처 : 모던 자바스크립트 Deep Dive, 이웅모, 위키북스 )

( 출처 : 모던 자바스크립트 Deep Dive, 이웅모, 위키북스 )

리액트 라이프사이클 메서드 내용 추가모던 리액트 - 서버 사이드 렌더링 정리모던 자바스크립트 - 디바운스, 스로틀 코드 추가피그마 내용 카테고리피그마 검색 결과 UI, 검색 키워드 표시코드 컨벤션 알아보기무한스크롤 코드useEffect 실행 순서 정리Redux 실전 7

constructor(props)는 클래스형 컴포넌트에서컴포넌트를 초기화할 때 사용.초기 state를 설정, props를 기반으로 초기 설정을 수행할 수 있다.이벤트 핸들러를 바인딩할 때 유용하다.React에서 constructor는 반드시 필요한 메서드는 아니다.많은

linked list 종류별 이미지 한국어로 달라고 했고저는 일침을 참을 수 없었어요알겠습니다!😅

오브젝트 스토리지(Object Storage)는 데이터를 파일이나 블록 단위가 아닌 오브젝트 단위로 저장하는 방식. 이때 각각의 오브젝트는 데이터(파일), 메타데이터(파일 관련 정보), 그리고 이를 식별할 수 있는 고유한 키(식별자)로 구성된다.오브젝트 스토리지는 주로

🌷핵심 웹 지표(Core Web Vital) 🪻부가 웹 지표

자바스크립트는 싱글 스레드에서 작동한다. 기본적으로 자바스크립트는 한 번에 하나의 작업만을, 동기 방식으로만 처리할 수 있다는 뜻이다. 동기(synchronous)란, 직렬 방식으로 작업을 처리하는 것을 의미하며, 이 요청이 시작된 이후에는 무조건 응답을 받은 이후에야

플레이스홀더백엔드 서버 세팅 확인모집글 카테고리 종류, 방식 정하기기획서 작성프론트 논의기술면접 1-4주차 내용 보강기술면접 1차 전체 회고 문제 정하기 리액트 라이프사이클 메서드 내용 추가코드 컨벤션 알아보기무한스크롤 코드useEffect 실행 순서 정리Redux 실

ERD는 Entity Relationship Diagram(엔티티 관계 다이어그램)의 약자입니다. 데이터베이스 설계 과정에서 사용되는 모델링 기법 중 하나로, 데이터베이스에 저장될 데이터 엔티티(entity)들과 엔티티 간의 관계(relationship)를 시각적으로

유튜브 영상들을 정말 조금 봤다.쿠키는 데이터가 들어있는 소듕한 그릇같은 것이고브라우저랑 서버랑 주고 받는다.그런데 그 안에 이제 보통의 민감한 (개인)정보는 세션ID의 모습으로, 구체적인 내용 없이 이동되고, 서버에서 세션ID를 보고 개인을 식별하는 거지.서버측에서

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, defined, 심벌, 객체 타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분한다. 이렇게 구부낳는 이유는 무엇일까? 근본적

What are "nullish" values?Nullish values in JavaScript are null and undefined. These values fall under falsy values but are more specifically referred

JavaScript에서 모든 객체는 프로토타입이라는 속성을 갖고 있다. 이 prototype은, 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 연결하는 일종의 틀이다. (딥다이브에는 슬롯이라고 써있었던 듯) 객체가 만들어질 때 해당 객체는 다른 객체의 속성

🛸 테스트 코드는 왜 만들까?⛲ 프론트엔드 단위 테스트 Part.1 이론편TDD(Test Driven Development)단위 테스트는 특정한 모듈 혹은 단위가 기능을 의도한 대로 올바르게 수행하고 있는지 확인하는 것으로, 테스트 중에서도 가장 기본이고 기저에 깔려

☑️ 기술면접 1차 전체 회고 문제 정하기 ☑️ useEffect 실행 순서 정리useEffect 실행 순서 읽기🎋 useEffect 실행 순서🩷 렌더링, 마운트 차이점 + 언마운트, useEffect, 클린업함수쿠키, 세션, 토큰 딕테이션9로 나눈 나머지자바 스크

비교 연산자 비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 겨과를 불리언 값으로 변환한다. 비교 연산자는 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다. 동등/일치 비교 연산자 동등 비교(loose eq

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는, DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propagation)라고 한다.ul 요소의 두 번째 자식인 li 요소를 클릭하면 클릭 이벤트가 발생한다. 이때 생성된 이벤트 객체는 이벤트를

9로 나눈 나머지쿠키, 세션, 토큰 영상 10:21~ 보기쿠키, 세션, 토큰 후반 딕테이션☑️ 자바 스크립트 딥다이브 - 이벤트 읽기자바 스크립트 딥다이브 - 이벤트 위임 타이핑프로토타입 영상 찾아보기자바 스크립트 딥다이브 - 프로토타입 읽기contextAPI, use

진짜 프로토타입 혼자 읽으면서 이해해보려다가 뇌가 너무 힘겨워해서동영상을 찾아보기로 했다. 생성자 함수까지 포함해 유려하게 설명은 못 해도대충 느낌만 알고 가기🥲🍭 이거보고 prototype 이해 못하면 강의접음

첫 번째 인수로 this로 사용할 객체를 전달하고, 이후에는 함수에 전달할 매개변수들을 순서대로 나열합니다.javascript코드 복사function greet(greeting, punctuation) { console.log(greeting + ", " + th

( 출처 : 모던 자바스크립트 Deep Dive, 이웅모, 위키북스 )

9로 나눈 나머지쿠키, 세션, 토큰 영상 10:21~ 보기쿠키, 세션, 토큰 후반 딕테이션자바 스크립트 딥다이브 - 프로토타입 읽기☑️ 자바 스크립트 딥다이브 - this 읽기자바 스크립트 딥다이브 - this 타이핑자바 스크립트 딥다이브 - 이벤트 마저 읽기conte

[ ] 9로 나눈 나머지 [ ] 쿠키, 세션, 토큰 영상 10:21~ 보기 [ ] 쿠키, 세션, 토큰 후반 딕테이션 [ ] 자바 스크립트 딥다이브 - 프로토타입 읽기 ☑️ 자바 스크립트 딥다이브 - this 타이핑 [ ] 자바 스크립트 딥다이브 - 이벤트 마저 읽기 [ ] cva 강의 보기 ☑️ Jira 사용법 영상 보기 ☑️ Jira, Agile 아티클...

사소하고 놀라운 발견(?) ts확장자 파일에서 선언한 const 상수 식별자는 중복이 안 돼? 블록 스코프라고 오류 뜨는데

라쿠나 - 춤을 춰요 랑 설 - 열기구 비슷하다...이 데자뷰의 정체를 밝혀내서 아주 조금 속시원하다.그리고 어제 오늘 카페에서 술냄새가 너무 나서 지긋지긋하다.지난 회의 내용 정리✅ PH-4 코드 구상, 기능 정리깃허브 잔디 오류 해결자바스크립트 딥다이브 실행 컨텍스

지난 회의 내용 정리인간 JS 엔진 되기 ➡️ 보는 중https://www.youtube.com/watch?v=eXQQipdastk&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3자바스크립트 딥다이브 스코프 마저 읽기자바스크립트 딥다이브

Console Error :A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined

모임 제출 시 들어가는 인풋들을 인터페이스로 지정, 각각 인풋값을 ref로 관리,TanstackQuery의 createMutation.mutate(newMeetup)을 통해새 모임을 생성하는데, newMeetup에 아래와 같은 오류가 발생한다.'{ name: React

한 페이지에서 데이터 통신 두 번 하는 코드 쓰기 너무 싫어서 괴로운데,(뭔가 길어지고 지저분해지고 통제를 벗어나는 것 같고...! 서버에 부담이 얼마나 될지는 백엔드분께 질문 드려봐야 알겠지만, 실질적인 지표보다는 그냥 느낌이 별로^ㅇ^)appliaction/json

클래스는 객체지향 프로그래밍(OOP)의 기본 단위로, 데이터와 메서드(데이터를 처리하는 함수)를 묶는 청사진. 클래스를 통해 새로운 객체(인스턴스)를 생성할 수 있다.클래스를 기반으로 생성된 객체를 인스턴스라고 한다. 각 인스턴스는 클래스의 구조를 따르지만 독립적인 값

인풋 자체가 제출돼 버렸어?ConosleMeetupForm.tsx:163Submitted startedAt: <input id=​"startedAt" type=​"date" required name=​"startedAt">​

파일이나 추가 필드 여부와 무관하게 통용되는 HTML form 전송 방식.폼을 쉽게 보내도록 도와주는 객체로, FormData 객체는 HTML 폼 데이터를 나타낸다.fetch 등의 네트워크 메서드가 FormData 객체를 받는 것이 FormData의 특징.이때 브라우저

🦊 What is the .current in a React ref?나와 같은 궁금증을 가진 외국인 선생님 고마워요!

현재 코드에서 파일 선택 시, 파일 이름이 화면의 파일 선택 버튼 오른쪽에 표시되는 이유는 브라우저에서 기본적으로 제공하는 <input type="file"> 요소의 동작 때문입니다.이유:HTML 표준 동작:<input type="file">은 파일을 선택할

슬럼프가 왔다는 건 노력했다는 어쩌고..스스로의 노력을 인정하고 그 때문에 세미 슬럼프가 왔다(자주 오고 가긴 한다)고 말하는 것이, 아직도 조금은 남우세스럽다. 지난날의 내가 오늘날의 나이기도 하기에, "니가 뭐 그렇게 대단히 노력했어?"라고 다그치는 목소리도 희미하

JS 기술면접 4주차 글 정리9로 나눈 나머지 풀기codeit TanstackQuery내 피드 구현하기자주 쓰는 옵션과 리턴값로딩과 에러 처리 구현하기useMutation으로 데이터 추가하기useMutation 콜백으로 데이터 바로 업데이트하기

우선 순위를 모르겠어요!그냥 임시로 스케쥴에 따라 나열해보겠습니다.아 그리고 TIL 포스팅에서 todo list 따로 빼야 하는데 ㅎㅎㅎ때로는 내용이 엮여있어서 칼같이 분리하기가 애매하다.JS 기술면접 종료클로저 영상 보기클로저 영상 내용 정리렉시컬 스코프 영상 보기렉

If your query function depends on a variable, include it in your query key.Since query keys uniquely describe the data they are fetching, they should

좋은 질문이에요! React.StrictMode가 적용된 환경에서 useEffect만 특별히 2번 실행되는 것은 아닙니다. 엄밀히 말하면 StrictMode는 일부 React 함수나 훅들의 동작을 더 엄격하게 검사하는 목적을 가지고 있습니다. 그 결과 특정 상황에서는

onSuccess에서는 왜 매개변수로 data를 사용해?previousMeetupData를 사용하면 안돼?ChatGPT : onSuccess 콜백에서는 매개변수로 data를 사용하는 것이 올바른 접근 방식입니다. 이유를 아래에서 설명합니다.onSuccess 콜백의 동

https://velog.io/@bwj0509/REACT-Input-%ED%83%9C%EA%B7%B8%EC%9D%98-value-defaultValue%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

useEffect 실행 순서 탐구 블로그 글RTKpersistcodeit TanstackQuery

프록시는 자바스크립트 객체를 감싸는 래퍼(wrapper)다.ES6에 도입된 자바스크립트의 내장 객체(Proxy 객체)를 의미하며, 객체를 감싸 객체에 대한 접근이나 조작을 가로채 특정 동작을 수행할 수 있게 한다.immer는 프록시를 사용하여 상태 객체를 임시로 "가변

ChatGPT의 말:ChatGPTFlux 아키텍처와 상반되거나 다른 아키텍처 개념으로는 다음과 같은 것들이 있습니다. 각 개념은 데이터 흐름 방식이나 상태 관리 방식에서 Flux와 다른 점이 있습니다.MVC (Model-View-Controller)설명MVC는 애플리케

선언적 코드(declarative code)는 "어떻게(how)"가 아니라 "무엇을(what)" 해야 하는지를 기술하는 코드를 의미한다. 즉, 과정을 상세히 지시하기보다는, 원하는 결과를 표현하는 방식.명령형 코드개발자가 실행 과정을 상세히 지시해야 한다. 각 단계를

React.lazy는 React에서 코드 스플리팅(Code Splitting)을 구현하기 위한 함수입니다. 동적으로 컴포넌트를 로드할 때 사용되며, 애플리케이션 초기 로딩 시간을 줄이고 필요할 때만 코드를 가져옵니다.코드 스플리팅이란?코드 스플리팅은 애플리케이션 코드를

Next.js는 React 기반의 프레임워크로 SPA의 특징인 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)을 혼합하여 활용할 수 있도록 돕는 강력한 도구이다. 페이지를 서버에서 미리 렌더링하여 클라이언트에 HTML

Concurrent Rendering은 React 18에서 도입된 새로운 렌더링 메커니즘으로,React가 여러 버전의 UI를 동시에 준비하고 중요도에 따라 렌더링을 조절할 수 있게 하는 기능이다.렌더링 중단 가능: 더 중요한 업데이트가 발생하면 진행 중인 렌더링을 중단

정의를 알면서도, 나도 모르게 SPA와 CSR 개념을 동의어처럼 혼용하고 있었다. 결론적으로 팀원에게 혼란을 주어 소통이 한 단계 더뎌졌다. 물론 두 개념이 밀접하게 연관되어 있긴 하지만, 그런 만큼 뭉뚱그리지 않고 명확하게 정리한 후에 잘 사용할 필요를 느껴, 짚고

프리렌더링(Pre-rendering)은 웹 페이지의 HTML을 미리 생성해두는 기술이다. 주로 SPA의 SEO 문제를 해결하기 위해 사용한다.빌드 시점에 애플리케이션의 각 경로(route)에 대한 HTML을 미리 생성하는 프로세스실제 요청이 들어오기 전에 정적 HTML

https://brunch.co.kr/@tigrisdesign/3

마크업 언어는 문서나 데이터의 구조를 표현하기 위한 컴퓨터 언어이다. 텍스트에 태그(tag)를 추가하여 문서의 구조와 표현 방식을 정의한다.대표적인 마크업 언어HTML (HyperText Markup Language): 웹 페이지를 만드는 데 사용되는 가장 기본적인 마

🟩 함수형 프로그래밍명령형 프로그래밍 (Imperative Programming)프로그램의 상태를 변경하는 명령문들의 순서를 자세히 기술"어떻게(How) 할 것인가"에 초점javascriptCopy// 명령형 방식으로 배열의 모든 요소 두 배로 만들기const num

import { useMutation, useQuery } from "@tanstack/react-query";import React, { useEffect, useState } from "react";import { useNavigate } from "react-ro

기술면접 준비 중 리액트는 효율적인 알고리즘을 사용해 이전 가상 돔과 현재 가상 돔의 변경 사항을 비교한다고 읽었다. 이게 뭘 가리키고 어떻게 동작하는지 궁금해졌다.React는 Reconciliation이라고 불리는 과정에서O(n) 복잡도를 가진 휴리스틱 알고리즘을 사

탠스택 쿼리 없이 직접 구현할 때의 캐시스토어를 설명해드리겠습니다.캐시스토어는 개발자가 직접 만드는 전역 상태 저장소입니다. 구현 방식은 크게 세 가지로 나눌 수 있습니다:메모리 저장 방식JavaScript 객체나 Map을 전역 변수로 선언하여 사용앱이 실행되는 동안만

유난히 머리에 안 들어오는 기본 개념이 몇 있다.지능이 모자라면 반복해야지.1, 2는 같고 3은 다른 건가? 3을 사용할 때는 매개변수를 전달할 수 없고?➡️ 1과 2는 다르고, 1과 3이 같은 방식이다.onClick={(e) => {handleClick(e)}onCl

개발자가 작성한 소스 코드를 기계어(machine code) 또는 중간 코드(intermediate code)로 변환하는 과정이다.예를 들어, C++ 소스코드(.cpp)를 컴파일하면 목적 파일(.obj)이 생성된다컴파일러는 코드의 문법적 오류를 검사하고, 최적화를 수행

🌍 웹 접근성 표준 (WCAG)W3C가 정한 웹 콘텐츠 접근성 가이드라인(WCAG, Web Content Accessibility Guidelines)을 따르는 것이 중요하다.이 가이드라인은 지각 가능(Perceivable), 운용 가능(Operable), 이해 가능

월드 와이드 웹 컨소시엄(W3C)은 웹 기술의 표준을 개발하고 유지하는 국제 기구로,HTML, CSS, JavaScript, 웹 접근성 등의 웹 기술을 표준화.다양한 브라우저 및 디바이스에서 일관된 웹 환경을 제공.웹 접근성(Accessibility)과 사용성을 보장.

최신 기능을 지원하지 않는 브라우저에서도 해당 기능을 사용할 수 있도록 하는 코드 또는 스크립트. 즉, 구형 브라우저가 최신 JavaScript 기능을 이해할 수 있도록 "대체 코드"를 제공하는 역할을 한다.웹 개발에서는 최신 기술(예: fetch, Promise, E

dialog란? 주로 사용자의 주의가 필요한 중요한 정보나 액션을 보여줄 때 사용되는 팝업 형태의 UI 요소이다. 사용 1. 확인 Dialog (Confirmation Dialog) 사용자가 중요한 작업을 수행하기 전에 한 번 더 확인하는 용도 게시글/파일 삭제 결제 진행 중요한 설정 변경 2. 폼 Dialog (Form Dialog) 사용자 입력이 ...

네, 괜찮습니다! 두 방법 모두 유효하며 결과적으로는 동일합니다:git push --set-upstream origin badge-edit-uxfix브랜치를 푸시하면서 동시에 upstream 브랜치를 설정이후에는 간단히 git push만으로도 푸시 가능git push

넥스트JS 서버를 3001 포트에서 실행하고 싶으시군요. 포트를 임시로 변경하는 방법은 다음과 같습니다:npm run dev -- -p 3001이 명령어를 사용하면 package.json을 수정하지 않고도 3001 포트에서 서버를 실행할 수 있습니다. 명령어 뒤의 --

Tailwind CSS에서 py-6은 padding-top과 padding-bottom을 각각 1.5rem 만큼 주는 클래스.1rem은 일반적으로 16px이므로1.5rem = 24px따라서 py-6은padding-top: 24pxpadding-bottom: 24px총

https://stackoverflow.com/questions/54880669/react-domexception-failed-to-execute-removechild-on-node-the-node-to-be-re?newreg=368dd3a7d48e4f5390

네, Lighthouse 결과에서 "페이지 로드가 너무 느려 시간 제한 내에 완료되지 않았습니다"라는 메시지는 페이지 로딩 성능에 문제가 있다는 것을 나타냅니다.이 메시지가 의미하는 것시간 제한 초과: Lighthouse는 페이지 분석 시 일정 시간(보통 30-60초)

const ThumbnailItem = ({ id }: Meetup\["id"]) 틀림!=> { 코드에서 에러가 나는 이유는 타입 지정 방식이 잘못되었기 때문입니다.문제의 원인은 다음과 같습니다:Meetup"id"는 number 타입을 의미합니다. 즉, 단일 값의 타입

이 이슈를 해결해 드리겠습니다. 코드와 오류 메시지를 보니, thumbnail.image에 접근하려 할 때 "Cannot read properties of undefined" 오류가 발생하고 있습니다. 무슨 일이 일어나고 있는지 분석해 보겠습니다:이 오류는 컴포넌트가

MeetupForm에서 새 모임을 생성할 때, id가 포함된 인터페이스 Meetup을 타입으로 쓰고 있었다. 그런데 id?: number가 다른 컴포넌트에서 오류를 일으켜 물음표를 지웠더니 이제 NewMeetup에서 오류가 난다.나머지 요소는 다 동일한데, id만 없는

isPublic: isPublicRef.current?.checked와isPublic: isPublicRef.current?.checked || false의 차이점은undefined 값을 처리하는 방식에 있다.TypeScript에서 옵셔널 체이닝 연산자(?.)를 사용하

https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery공식 문서에는 이렇게 쓰라고 나와있다.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

http://localhost:3000/에 접속할 때 보여지는 파일은 app/page.tsx인데, 이 파일에서는 MainPage 컴포넌트를 직접 임포트해서 사용하고 있습니다. 이 방식은 Next.js의 레이아웃 시스템을 우회하게 됩니다.문제 원인app/page

갑자기 지능 훅 떨어지면서 어리둥절\~\~~저 난리 치지 않고 이모지는 그냥 "" 안에 넣어서 쓰시면 됩니다 하하..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sortcompareFunction이 제공되지 않으면 요소를 문자열로 변환하고유니 코드 코드 포인트 순서로 문

플홀 메인페이지 정렬, 필터 구현 중.sortType은 필수 파라미터이자 queryKey로 들어가는 반면,(sortType과 setSortType을 RTK로 전역 상태 관리하여, ThumbnailArea와 SortArea가 분리되어 있지만 한 페이지에서 렌더링되며 정렬

동일 옵션 버튼 (예를 들면 서울을 두 번 연속 클릭)이 한 번 더 클릭됐을 시 서울이 해제되게 만들고 싶었다. 즉 옵션 내용과 클릭되는 내용을 비교해서 무효화 로직을 넣고 싶었는데, 생각나는 게 event.target.value밖에 없었고 문법을 잘 모르겠는 거다.

근데 여기서 categories의 내용들을 또 배열안에 넣어서 다시 정의할 필요가 있어? 기존 타입을 가져와서 그냥 쓰면 안돼? 문법을 잘 모르겠네편집좋은 질문입니다. 타입 정의만 가져와서는 실제 값의 배열을 얻을 수 없습니다. 타입스크립트의 타입 정보는 컴파일 시간에

현재 코드 방식(${BASE_URL}/api/v1/user/me/meetup?${queryParams.toString()}&page=${page}&size=${size})도 기능적으로는 작동하겠지만, 권장되는 방식은 아닙니다. 이 방식의 문제는:queryParams에

Interface MemberDeleteModalProps { meetupId: MyMeetupItem\['id']; // MyMeetupItem의 id 타입만 사용 } 이부분을 아예 안 쓰고 직접 MyMeetupItem'id'로 타입을 지정해주면 안 돼? 새로 int

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMapArray 인스턴스의 flatMap() 메서드는 배열의 각 요소에 주어진 콜백 함수를 적용한 다음

네, 정확합니다! 아주 정확하게 이해하셨습니다. 🥹🥹🥹🥹🥹🥹🥹클로드랑 나랑 내 머리끄덩이 잡고 나아가는 중

TypeScript에서 catch 블록의 error 변수는기본적으로 unknown 타입으로 처리되기 때문에 발생한 오류.TypeScript의 타입 안전성을 위해 error.message에 직접 접근할 수 없다.any로 타입 지정하면 오류는 사라지지만 영 아리까리하다.

handleNameLengthChange 함수의 event 객체 흐름handleNameLengthChange 함수가 event 객체를 매개변수로 받는 과정과 흐름을 순차적으로 설명하겠습니다.1\. 이벤트 객체의 생성먼저, 사용자가 입력 필드에 무언가를 입력(키보드 타이

https://tailwindcss.com/docs/hover-focus-and-other-statesvariant로 조건을 표기한 뒤 css를 입력하면 바로 조건부로 스타일이 적용된다. 예를 들어 hover시 배경색 bg-sky-700은 이렇게 입력 hove

middleware.ts는 서버 사이드에서 실행된다.변경 사항이 있으면 서버를 껐다 켜야 한다.브라우저 콘솔이 아닌 코드 터미널에 로그가 뜬다.클라이언트 사이드에서 실행되는 브라우저 전용 함수(예를 들면alert)를 사용할 수 없다.getUSer함수는 Cookies에

날짜 유효성 검사를 실행하는데,내 눈에는 두 값이 같아서 통과되어야 할 함수가 alert을 띄우는 상황 발견.previousStartDate와 inputDate가 같은 날짜인데도===나 ==로 비교하면 결과는 false각자 타입은 objecttoString()으로 변환

내 말은 style={{ objectFit: 'fill' }} 이 부분을 아예 안 쓰니까 이미지 비율이 왜곡되면서 꽉 차던데, 그건 뭐때문이야아, 이제 이해했어요! 제가 틀렸네요.Next.js Image 컴포넌트의 fill 속성을 사용할 때 objectFit을 지정하지

로그인하지 않은 유저도 광고글 전체를 볼 수 있게 하자.백엔드에서 조회 로직을 수정해주었는데 왜 401 unauthorized가 뜨지?내 GET 요청 코드가 그대로이기 때문!BE분이 보내준 답변GPT 왈 : 일반적인 관행 (권장 방식)은 헤더에 Authorizatio

(fetch 등 API) 함수 선언을 분리해뒀는데, 이 함수 내부가 아니라함수를 호출하는 컴포넌트에서 try catch문을 사용해 에러처리를 따로 하는 것이통상적이다!!!try-catch를 안 쓴 이유는 에러 처리 방식의 차이 때문입니다.try-catch를 쓰는 경우:

meetup.service.ts:111 Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read at getMeetupPresignedUrl (m

내가 이걸 2년도 훨씬 전에 생활코딩 봤던 시절에 접했는데,아직도 숙지가 안 되어있는 게 레전드

방법 1: index를 사용한 조건부 클래스 (추천)방법 2: 템플릿 리터럴로 더 간단하게방법 3: clsx나 classnames 라이브러리 사용 (더 깔끔)방법 4: CSS 선택자 사용 (가장 깔끔하지만 제한적)추천: Tailwind의 last: 수정자를 사용하는 방

: 브라우저 내장 CSS 표준 함수(clamp(), calc(), min(), max() 등).순수 CSS에서, 그리고 tailwind에서 \[]로 임의값을 넣어 사용한다.clamp(최솟값, 선호값, 최댓값)동작 원리:선호값을 기본으로 사용선호값이 최솟값보다 작으면 →

SEO(LCP)지금 엉망진창임unoptimized={false/true}는 개발 환경에서 최적화 확인 어려움위 설정에 따라 LCP 요소가 바뀜근데 이게 priority={index===0} 적용 후 결과값임LCP 요소가 콘솔과 라이트하우스에서 다르게 나옴로고에 prio

event.target.value and ref.current.value are two distinct methods for accessing the value of an HTML input element, primarily within a React context.

그럼 이 부분 다음에 가령, 4단계, headhuntings, like, place, 경기 라는 쿼리키로 호출한다면 이것은 데이터B에 경기 부분만 교체되는 거야? 아니면 새로운 데이터C를 전체 다 가져오는 거야?☀️ 답은, 새로운 데이터C를 전체 다 가져옵니다실제 캐시

tailwind.config.ts 수정하는 건 v3 버전(구버전)이고v4이다.

div 태그여서 요소가 그냥 위 아래로 배치되고 있었는데flex 적용하면 옆으로 넓게

외워 쓸 내용이 아니라는 사실, 알고 있지만 그냥 암기됐으면 좋겠다. 하나하나 더듬더듬 타이핑/수정하는 내가 답답스러워욥차라리 영어 단어 100개를 외우라면 외우겠..hover - 마우스 오버 시focus - 포커스 시active - 활성화 시disabled - 비활성

1\. HTML 파싱 → DOM 생성태그마다 노드가 생성됨.2\. CSS 파싱 → CSSOM 생성스타일 시트 내용을 트리 구조로 만듦.3\. DOM + CSSOM = Render Tree 생성각 요소가 어떤 스타일을 적용받는지 결정.4\. Layout(배치)각 요소가

https://velog.io/@vlmbuyd/UI-%EA%B3%84%EC%B8%B5-%EC%84%A4%EA%B3%84-FSD-Atomic-Design-Pattern-%EC%A0%81%EC%9A%A9%EA%B8%B0-2a3rothv

lowpoly origami

Test Suites는 테스트 파일 수 tests는 테스트 코드 수라고 생각하시면 됩니다.지금 caculator.test.js와 sum.js 파일 2개 -> test suites실제 내부의 테스트 코드 총 3개

기업에서 이렇게 말할 때는 보통,"개발 환경으로 Visual Studio를 쓰고, UI는 WinForms 기반이다"라는 뜻.IDE(도구): Visual StudioUI 프레임워크: WinForms✔ WinForms 기본 기능만으로는 부족한 기능들이 있어서✔ WinFor