Irene88

🔍 filter() 부분 자세히 해석배열.filter(조건) 배열에서 조건에 맞는 항목만 남긴다조건에 맞지 않는 항목은 제거됨 예제: 숫자 배열에서 3 제거const numbers = [1, 2, 3, 4];const filtered = numbers.filter(n => n !== 3);console.log(filtered); // [1, 2, 4] *위 내용은 챗GPT 답변을 토대로 작성되었습니다.

✨ fetch 브라우저에 내장된 기본 API입니다. 별도 설치 없이 바로 사용 가능.Promise 기반으로 작동해요.기본적으로 fetch는 요청이 실패해도 (ex: HTTP 404, 500 에러) reject되지 않고, 성공한 것으로 간주합니다. → 직접 response.ok 등을 체크해야 해요.응답 데이터를 .json(), .text()처럼 명시적으로 파싱해야 해요.구식 브라우저에서는 (ex: IE) **폴리필(polyfill)**이 필요할 수 있어요.예시fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('네트워크 응답에 문제가 있어요!'); } return ..

리액트 사용할때 그냥 생각없이 사용했었는데, 이번에 열심히 그 개념과 내용들을 찾아보고 정리를 해둔다. 🎨 styled-components란?styled-components는CSS를 JavaScript 안에 작성할 수 있게 해주는 라이브러리즉, CSS 파일 따로 안 만들고,컴포넌트 안에서 바로 스타일을 적용할 수 있다.✅ 특징:컴포넌트 단위로 스타일을 묶을 수 있어 → 코드 깔끔클래스 이름 충돌 걱정 없음 → 자동으로 고유 클래스 생성props로 스타일 제어 가능 → 동적인 스타일 만들기 쉬움 🛠️ 설치 방법Next.js 프로젝트에 styled-components 설치하려면:yarn add styled-components(이번 개인 실습용 프로젝트는 그냥 yarn으로 프로젝트를 설치했다.) (또는 ..

보통 백엔드와 프론트엔드 프로젝트 구축할 때 포트번호가 별도로 나뉜다.챗GPT에 너무나 궁금해서..백엔드와 프론트엔드 포트번호를 동일하게 설정하면 안되는지... 물어봤다. "백엔드 포트랑 프론트엔드 포트 똑같이 해도 돼?" 🎯 결론부터 말할게❌ 프론트엔드랑 백엔드는 포트를 똑같이 쓰면 안 돼.항상 서로 다른 포트를 써야 해.✨ 이유포트는 컴퓨터 안에서 '주소' 같은 거야.하나의 포트에는 하나의 프로그램만 연결될 수 있어.예를 들어 3000번 포트에 프론트엔드가 이미 서버를 열었다면,거기에 백엔드 서버를 또 띄우려고 하면 충돌나서 에러 터진다.프론트와 백엔드는 '다른 프로그램'이야.Next.js 개발서버 (yarn dev)는 자체 HTTP 서버를 연다.Node.js (Express) 서버도 또 다른..

여러 고민끝에 작은 프로젝트를 혼자서 해보기로 했다.막연히 유튜브의 동영상 강의들 쫓아 만들기보다는 차라리... 챗GPT로 서로 소통하면서 그리고 혼자서도 공부를 찾아가면서 만드는게 낫다는 판단이 들었다.그래서 어제 밤을 새서 어떤걸 만들까 하다가 간단한 게시판을 만들어보기로 했다.기반은 NodeJS로 백엔드를 NextJS로 프론트엔드를 그리고 DB는 익숙한 SQL Server (MS SQL)로 결정하고 만들기로 했다.어제 NodeJS와 NextJS 프로젝트를 각각 생성하고 기본적인 설정만 해 두었다. 만들다가 생각해보니 DB도 만들어야 했다. 그래서 만들었다.CREATE DATABASE feedDB SQL Server를 실무로 1년이상 사용해서 오라클보다 더 편했다.그리고 어제 내내 게시판을 위한 테이..

🌍 CORS가 뭔가?CORS는 '다른 출처(Origin) 간의 리소스 공유'를 허용할지 말지 서버가 결정하는 정책이야.웹 브라우저는 보안 때문에 기본적으로, 다른 출처(Origin) 에 요청을 보내는 걸 차단한다.여기서 "출처(Origin)"는 다음 3가지를 합쳐: 프로토콜 + 도메인 + 포트예시:https://example.com:443 과http://example.com:80 은 다른 출처야 (프로토콜이 다름).https://api.example.com 은 도메인 자체가 다르니까 당연히 다른 출처고. 📦 예를 들어볼게너의 프론트엔드 (Next.js, React 등)가http://localhost:3000에서 동작 중인데,서버(API) 가http://localhost:8080 에 있다면,서로 포트번..

🧠 Node.js란?Node.js ="JavaScript를 브라우저가 아니라 서버에서도 실행할 수 있게 만든 기술"(자바스크립트 런타임 환경)한 문장으로 정리하면: ✅ Node.js는 브라우저 밖에서도 자바스크립트를 돌릴 수 있게 해주는 엔진 🎯 Node.js를 왜 만들었을까?원래 JavaScript는오직 브라우저 안에서만 작동했다.웹페이지에 인터랙티브한 동작을 주기 위해서만 사용.그런데 사람들이 생각한 거야:"어? 자바스크립트가 이렇게 빠르고 편한데,브라우저 말고 서버에서도 쓸 수 있으면 개꿀 아냐?"그래서 나온 게 Node.js야. 🔥 Node.js의 특징특징설명비동기 & 이벤트 기반요청이 들어와도 기다리지 않고, 바로 다음 작업 실행싱글 스레드기본적으로 하나의 스레드로 동작 (가볍고 빠름)..

이전에 작업한 코드를 다시 되짚어 보면서 useCallback과 useMemo의 개념을 정리해본다.경고 사항을 수정하려고 하니... 챗GPT의 도움 받아서 결국 수정을 했다. 🧠 useCallback vs useMemo 개념 정리 🔥 진짜 간단하게 비유하자면useCallback : "내가 만든 함수 기억해둬!"useMemo : "내가 계산한 결과 기억해둬!" ✨ 각각 조금 더 자세히📌 useCallback✅ 무엇?"함수"를 기억해서 매번 새로 만들지 않고, 필요할 때만 새로 만들겠다는 뜻.const memoizedFunction = useCallback(() => { console.log('나는 기억된 함수야');}, [dependency1, dependency2]); dependency(의존..

객체와 배열의 **구조 분해 할당(Destructuring Assignment)**은 ES6에서 도입된 문법으로, 객체나 배열에서 값을 추출하여 변수에 쉽게 할당할 수 있도록 도와준다.  1. 배열 구조 분해 할당 배열의 구조 분해 할당을 사용하면 배열의 요소를 개별 변수로 쉽게 할당할 수 있어. 🔹 기본 예제 const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3배열의 순서대로 변수를 할당하게 돼.  🔹 필요 없는 값 무시하기 const numbers = [10, 20, 30, 40];const [first, , third] = numbers;console.log(fi..

🚀 재귀(Recursion)란?재귀는 함수가 자기 자신을 호출하는 방식즉, 어떤 문제를 같은 구조의 더 작은 문제로 나누어 해결하는 방식이다.  📌 재귀의 기본 구조 function recursiveFunction() { // 1️⃣ 종료 조건 (Base Case) if (조건) { return; // 재귀를 멈추는 조건 } // 2️⃣ 재귀 호출 (Recursive Case) recursiveFunction(); // 자기 자신을 호출}✅ 중요한 개념:반드시 종료 조건(Base Case)이 있어야 한다!종료 조건이 없으면 함수가 무한히 실행되어 **스택 오버플로우(Stack Overflow)**가 발생한다 🔥 예제 1: 1부터 n까지 출력하는 재귀 함수function printN..