흰둥씨의 개발장

next.js 14에서 진행중 문제 봉착...!"next": "14.2.4",//package-lock.json getToken()을 통해 사용자가 로그인중인지 아닌지 확인을 원했음(middleware.js)import { getToken } from 'next-auth/jwt';import { getServerSession } from 'next-auth/react';import { getSession } from 'next-auth/react';import { NextResponse } from 'next/server';export async function middleware(request) {const session = await getToken({ req: request });//const se..

이런 에러가 뜬다면... ?  layout의 body 태그 안에suppressHydrationWarning={true}속성을 추가하자위 속성은 Hydration 경고를 줄이는 것이라고 합니다.(= 작은일에 경고 때리지 마소)//(Root)layoutexport const metadata = { title: 'Create Next App', description: 'Generated by create next app',};export default function RootLayout({ children }) { return ( {children} );}브라우저 확장 프로그램(예: Grammarly, ColorZilla, LanguageTool 등)이 ..

자바스크립트는 싱글 스레드(=실행 창구가 하나다)이다. 그러니까 실행은 순서대로 되겠찌? 슬프게도 Nope... 그러나 웹 브라우저 (=자바스크립트 실행기) 작동방식에 의해 web APIs를 통한 비동기 실행이 가능하다. 비동기실행이란? 순차실행하다가 오래걸리는 연산을 만났다고 할 때, 기다렸다가 다음을 실행하는 것이 아니고, 일단 재껴두고 다음꺼 요청 넣음 웹 브라우저의 비동기 작업방식 짧게 요약 : 일단 오래 걸리는거 될때까지 webAPIs로 보내서 완료되면 큐->실행스택으로 올라오게 해서 실행하고, 오래걸리는거 저렇게 처리할동안 실행스택에서는 다음 코드를 실행요청 들어감 = webAPIs의 기능이 그런 편 (ex. setTimeout(), setInterval() 오래걸리는연산()-> 함수2() 순..

📡 웹의 동작 과정 🌐 1. 사용자가 브라우저에 URL을 입력 🌐 => 브라우저는 입력된 URL을 파싱해서 프로토콜(http, https), 도메인 경로등을 추출 2. 도메인 이름을 IP주소로 변환하기 위해 DNS서버에 요청 보내면서 브라우저는 반환된 IP주소로 TCP/IP 연결 시도함 (DNS조회와 TCP/IP연결을 동시에 병렬적으로, 비동기적으로 수행됨), 브라우저는 DNS 조회와 동시에 반환된 IP 주소를 사용하여 TCP/IP 연결을 시도하고, 동시에 HTTP request message를 생성하여 TCP 전송 계층에 전달함. (일반적으로 HTTP는 80번 포트 사용/ HTTPS는 443번 포트 사용) 3. HTTP request message에 headers를 추가해서 패킷을 생성함 4. 패킷은 ..

Component들을 조합하면서 생긴 문제점 : 데이터를 표시하기 위해서 상위 컴포넌트에서 하위컴포넌트까지 Props를 일일히 내려줘야 함 - 즉, 데이터가 필요한 지점까지 props를 넘겨줘야 하기 때문에 해당 데이터를 쓰지 않는 중간 컴포넌트에도 props를 일일히 넣어야 했음 - Props가 많아질수록 Model 이 계속 여기저기 누덕누덕 들어가는 것처럼 됨 위 구조의 문제를 해결하기위해 Flux패턴 이 나옴 Flux 패턴이란? - props로 Model이 분할되는 형태에서 Flux는 Store에서 상태를 관리하는 방식으로 변경됨 - View에서 action을 통해 데이터를 호출하면 dispatcher가 store에 데이터를 불러와 두고 그 값을 View에서 표시함 - Store라는 독립적인 상태 ..

MVVM패턴이란 ? MVC패턴에서 Model, View, Controller로 구성된 내용 중 Controller가 View Model로 바뀌어 만들어진 패턴 View Model이란? View부분을 추상화 한 계층으로 템플릿과 바인딩문법등을 사용해서 "선언적인 방식"을 취하여 여러 처리에 대해 하나의 액션으로 처리함 데이터 바인딩(뷰모델을 변경하면 뷰의 데이터도 변경되도록)처리도 해줌 MVVM아키텍처를 사용하게된 이유? -> Controller부분이 너무 방대해지고, 반복되는 부분들이 많아짐 -> 반복되는 부분은 미리 선언해두는 방식으로 개발하면 편하지 않을까? -> 반복되는 부분을 선언적인 방식(ex. jsx와 같이 약속된 선언을 바탕으로 개발)으로 변경함 -> 앵귤러, React, Vue...등 생겨..

MVC패턴 : App의 구성요소를 모델(Model), 뷰(View), 컨트롤러(Controller)로 구분한 패턴 - 장점 : 재사용성, 확장에 용이함 - 단점 : 애플리케이션 규모가 크고 복잡해질수록 모델-뷰 관계가 복잡해지는 경향있음 모델의 역할 ? 데이터 자체 -서버에서 온 데이터 등... 어디엔가 저장해둔 정보 (=> 장바구니안에 상품, 몇개담았는지 수량) 뷰의 역할 ? - user interface요소 (=> 장바구니를 어떻게 보여주는지에 대한 내용) - HTML + CSS로 그려진 화면단 관련 요소들 - 데이터를 별도로 저장하지 않음 컨트롤러의 역할 ? 모델과 뷰 사이 중간 다리 역할 - 뷰에서 변경된 내용이 있으면 컨트롤러에게 알려서 모델에서 저장, 갱신함 - 모델에서 변경된 내용이 있으면 ..

TCP / IP (Transmission Control Protocol / Internet Protocol) : 인터넷 통신을 위한 표준 프로토콜 ** IP 프로토콜에서 패킷 순서, 검증등이 안됨(IP 특징 : 비연결성 / 비신뢰성 / 흐름제어 오류복구기능 없음) -> 이를 해결하기 위한 프로토콜 : TCP/UDF (TCP특징 : 연결된상태에서 양종단간 신뢰성 있는 데이터 전달, 흐름제어함) IP는 데이터 배달을 처리하고, TCP는 패킷을 추적 및 관리함 OSI 7계층 (ISO) 장비 데이터흐름 프로토콜 TCP/IP 4계층 응용계층 데이터 TCP 계열 - HTTP(80) - FTP(데이터전달:20,제어전달:21) - SMTP(25) - TELNET(23) UDP 계열 - DNS(53) - SNMP (메시..

1. Single Responsibility Principle (단일 책임 원칙) - 각 모듈은 하나의 책임만을 담당해야 한다. 각 모듈은 변경되는 이유가 하나여야 한다. 하나의 함수가 하나의 동작만 하도록 설계하라는 원칙 (모듈을 설계할때는 빵공장을 세우는 것이아닌 '반죽하는 기계', '빵굽는 오븐'과 같이 각자의 역할을 하는 기계를 만드는 것) **설계할 때 고려사항이 뭐가 있을까? 하나의 책임맡고있니, 응집도높게, 결합도낮게, 우리 조직은 소통에 있어서 유연한가, 2. Open-closed Principle (개방-폐쇄 원칙) 확장하는 것에는 열려있고, 수정에는 닫혀있도록 한다. 기존코드를 변경하지 않고(closed), 새로운 코드를 추가하는 것(open)으로 기능 추가 할수있도록 설계해라. -> ..

소프트웨어 공학 : 품질 높은 소프트웨어를 개발하기 위한 학문 [개발단계] : - 계획(비용, 일정...) - 요구사항 분석(고객의 요구사항을 듣자, 과다한 것들은 협상) - 설계(어떻게 동작하는지 설계정의 - 디자인 / ) - 구현(스토리보드보고 실제 프로그램 코딩, 디버깅, 단위테스트진행) - 테스트(요구사항만족하는지) - 유지보수(문제수정, 발전) - 3R : 역공학(Reverse Engineering) , 재공학(Re-engineering), 재사용(Reuse) - 역공학 : 개발산출물분석을 통해 설계수준분석하여 문서화진행 - 재공학 : 유지보수를 통해 기존 소프트웨어를 해결(분석해서 재구성함-> 역공학-> 마이그레이션), 예방 유지보수 - 재사용 : 일부를 다른 프로젝트에 재사용함(합성중심 :..

재귀 Recursion ?  자기 자신을 호출하여 문제를 해결하는 프로그래밍                               더 작고 더 간단한 하위문제로 분할됨 (즉, 전체중 일부 하위문제해결법을 가지고 전체문제를 해결함)나의 경우에 재귀를 떠올릴때면 ? 생각나는 그림이 엘리베이터에 탔을 때 서로 마주본 거울 같은 느낌이다. 마주 본 거울은 계속 자신을 반사반사반사하면서 작아지고 어떤 한 점에 이른다. 재귀를 쓸 때 생각 할 것들1. Base case(종료조건)이 필요함 2. 자기 자신을 호출해야 하고 하위 문제를 결합하여 전체에 대한 해결책을 얻어야 함 (recursive case)3. 재귀 호출시 반드시 종료조건으로 수렴할 수 있도록 하는 조건 필요4. 호출할때마다 콜스텍을 쓰기 때문에 메모리..

프로젝트를 생성 할 폴더에서 터미널 실행 yarn create vite -> 생성할 프로젝트 이름 입력하면 프로젝트 폴더 생성됨 프로젝트 폴더에서 터미널 실행 yarn -> React 선택하고 -> Typescript 선택하면 끝!