- 전체보기(77)
- React(14)
- Springboot(9)
- next.js(7)
- web(7)
- typescript(6)
- SSR(5)
- JavaScript(5)
- Spring(5)
- frontend(4)
- spring mvc(4)
- git(4)
- nextjs(3)
- CSR(3)
- JSX(3)
- html(3)
- TOAST UI(2)
- rds(2)
- CSS(2)
- Backend(2)
- JWT(2)
- 정규화(2)
- jsp(2)
- elasticbeanstalk(2)
- Normalization(2)
- Markdown(2)
- MVC(2)
- js(2)
- sql(2)
- aws(2)
- Java(2)
- Computer Network(2)
- seo(2)
- ec2(2)
- 리액트(1)
- SpringSecurity(1)
- streaming(1)
- 미들웨어 프록시(1)
- 무료호스팅(1)
- 웹개발(1)
- yarn(1)
- security(1)
- internet(1)
- tsx(1)
- brand(1)
- springMVC(1)
- 서버(1)
- springboot3(1)
- Three-Tier architecture(1)
- oauth2(1)
- gradle(1)
- git init(1)
- ML(1)
- 렉시컬 스코프(1)
- setting(1)
- Debouncing(1)
- viewer(1)
- CORS(Cross-Origin Resource Sharing)(1)
- Generic(1)
- 인터넷(1)
- git 장점(1)
- 자바스크립트(1)
- error(1)
- dothome(1)
- any(1)
- REST API(1)
- Network Edge(1)
- IllegalArgumentException(1)
- 얄코(1)
- 클로저(1)
- CS(1)
- regex(1)
- interface(1)
- pnpm(1)
- react-google-login(1)
- mockApi(1)
- jquery(1)
- 닷홈(1)
- 함수종속성(1)
- git config(1)
- event bubbling(1)
- AI(1)
- DL(1)
- 대댓글 엔티티(1)
- useCallback(1)
- RequestBody(1)
- Request-Waterfalls(1)
- Mixed Content(1)
- sports(1)
- type(1)
- Spring boot(1)
- Form Tags(1)
- lexical scope(1)
- filezilla(1)
- infinite scroll(1)
- Reat(1)
- gitignore(1)
- javacript(1)
- components(1)
- Vercel(1)
- @RequiredArgsConstructor(1)
- 객체지향(1)
- redirect(1)
- cookie(1)
- use client(1)
- 일급객체(1)
- WorldCup(1)
- 대댓글(1)
- java16(1)
- CRUD(1)
- 한동대학교(1)
- TypeScript를(1)
- closure(1)
- Coding(1)
- MyBatis(1)
- Server Actions(1)
- nginx502(1)
- vscode(1)
- DispatcherServlet(1)
- 최적화(1)
- routing(1)
- 정규표현식(1)
- UserDetails(1)
- react-oauth/google(1)
- Branded Type(1)
- .eslintrc.json(1)
- AI & Sports(1)
- ManyToOne(1)
- OneToMany(1)
- Revalidate(1)
- computer networking(1)
- import(1)
- record(1)
- File System(1)
- link(1)
- npm(1)
- use-debounce(1)
- Autowired(1)
- runtime(1)
- stopPropagation(1)
- 함수의 종속성(1)
- http(1)
클로저에 대해서 설명해주세요 -자바스크립트-
모던 자바스크립트 Deep Dive 서적을 참고했습니다.사실 클로저는 자바스크립트 고유의 개념이 아니다. 클로저의 정의가 ECMAScript사양에 등장하지 않는다.MDN(신뢰할 수 있는 개발자 문서. 공식문서는 아님) 曰: “클로저는 함수와 그 함수가 선언된 렉시컬 환
자바스크립트 - 렉시컬 스코프(lexical scope) 빠르게 알아보기
모던 자바스크립트 Deep Dive 예시코드 참고자바스크립트에서 렉시컬 스코프는 "함수가 어디서 호출되는지"가 아니라 "함수가 어디서 정의되었는지"에 따라 상위 스코프가 결정되는 것을 말한다.먼저 첫 번째 코드를 보면:이 코드에서 함수 innerFunc는 전역에서 정의
자바스크립트 - 일급객체 빠르게 알아보기
JavaScript에서 "함수는 일급 객체이다"라는 개념을 설명하기 위해 작성.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.이름이
Mixed Content 에러 해결하기 (feat: Vercel Serverless Function)
HTTPS로 배포된 React 애플리케이션에서 HTTP API(서울시 문화행사 정보)를 호출하려고 할 때 Mixed Content 에러가 발생한다.하필 서울시 open api는 https 프로토콜을 제공하지 않기 때문에 (https로 변환하는 방법) 위 방법도 안먹힌다
미들웨어 프록시란?(CORS(Cross-Origin Resource Sharing), React)
업로드중..프록시는 클라이언트(브라우저)와 서버 사이에 중계 역할을 하는 서버입니다. 클라이언트가 특정 서버에 직접 요청을 보내지 않고, 중간에 위치한 프록시 서버가 요청을 대신 전달하고 그 응답을 다시 클라이언트로 보내는 방식입니다.미들웨어 프록시는 개발 환경에서 자
.eslintrc.json 모르면 기술면접 떨어짐
일단 죄송합니다. 작성일 기준으로 저는 기술면접 경험없습니다.그래도 일단 들어오셨으니 얕고 유용한 내용 가져가보세요. 프론트엔드 개발자에게 있어 코드의 품질과 일관성을 유지하는 것은 매우 중요합니다. 특히, 현업에서는 혼자 프로젝트를 진행하는 경우가 거의 없다는 것은
mockapi 사용법 with React-CSR(2024-2 OpenSourceStudio 수업 참고 자료)
mockapi를 사용법에 포커스를 맞춘 오픈소스 스튜디오(Open Source Studio) 02분반 실습용 참고자료입니다. 무료버전 사용하시면 됩니다. 클릭! => mockapi 사이트 접속'Get started' 버튼 눌러주세요.회원가입(저는 깃허브 sign in
2.2 The Web and HTTP
> (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고) 2.2.1 Overview of HTTP HTTP(HyperText Transfer Proto
TypeScript의 Branded Types으로 런타임 유형 안전성 개선하기
원문 작성자: Matías Hernández, 참고 링크: Improve Runtime Type Safety with Branded Types in TypeScript코드의 안전성과 신뢰성을 높이기 위해 타입스크립트를 사용한다는 것은 이미 잘 알려진 사실이다. 하지만
TypeScript에서 인터페이스와 타입의 차이, 장단점, 탄생배경
TypeScript에서 인터페이스(interface)와 타입(type)은 모두 객체의 형태와 구조를 정의하는 데 사용됨. 인터페이스는 TypeScript가 처음 설계될 때부터 있던 기능임. Java와 같은 객체 지향 언어의 영향을 받아 클래스와 연동되는 구조적인 정의가
Protocol Layers and Their Service Models (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고)
모든 내용과 이미지는 Computer Networking- A Top Down Approach-Pearson을 참고하였습니다.이번 글에서는 네트워크의 프로토콜 계층 구조와 서비스 모델을 다루며, 인터넷 프로토콜 스택과 OSI 모델에 대해 설명할 것임. 또한, 네트워크
Delay, Loss, and Throughput in Packet-Switched Networks (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고)
모든 내용과 이미지는 Computer Networking- A Top Down Approach-Pearson을 참고하였습니다. Chapter 1.4 패킷 스위칭 네트워크에서 지연, 손실, 그리고 처리량 (Delay, Loss, and Throughput) 인터넷을
The Network Core 네트워크 코어란? (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고)
모든 내용과 이미지는 Computer Networking- A Top Down Approach-Pearson을 참고하였습니다.네트워크 코어는 인터넷의 중심부로, 패킷 스위칭과 링크를 통해 엔드 시스템(컴퓨터, 스마트폰 등)을 연결하는 역할을 함. 쉽게 말해, 인터넷을
The Network Edge (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고)
모든 내용과 이미지는 Computer Networking- A Top Down Approach-Pearson을 참고하였습니다. Chapter 1.2 > 네트워크 엣지(Network Edge)와 액세스 네트워크 > 인터넷 구성 요소 중 하나인 네트워크 엣지(Net
인터넷이란? (James F. Kurose, Keith Ross - Computer Networking- A Top Down Approach-Pearson (2020) 교과서 참고)
모든 내용과 이미지는 Computer Networking- A Top Down Approach-Pearson을 참고하였습니다. 참 추상적이라 한번에 이해하려 애쓰지말고 아래 이미지에서 라우터의 역할만 알고 가자.지뢰같이 생긴것이 라우터(Router)데이터를 전달하는 중
Next.js 공식문서에서 알아보는 Revalidate와 Redirect의 중요성
공식문서 참고 Next.js에서는 데이터가 변경될 때 이를 최신 상태로 유지하기 위한 몇 가지 중요한 기능을 제공합니다. 이번 글에서는 Revalidate와 Redirect 기능에 대해 자세히 알아보겠습니다. 특히, 캐싱된 데이터를 최신 상태로 유지하고, 사용자를
Server Actions이란?
Server Actions는 Next.js 13에서 도입된 기능으로, 서버에서 실행되는 함수를 클라이언트 컴포넌트에서도 간편하게 호출할 수 있게 해준다. 이 기능은 Next.js의 새로운 App Router와 함께 사용되며, 서버에서만 실행되어야 하는 로직(예: 데이터
TypeScript 새롭게 접근해보기: 타입을 집합으로 이해하기
원문참고TypeScript의 타입 시스템을 이해하는 데 어려움을 겪고 있는 스타터에게 도움이 될 만한 접근 방식이 있다. 바로 TypeScript의 타입을 "집합(Set)"으로 생각하는 것이다. 이 방법은 TypeScript의 여러 기능을 더 쉽게 이해하고, 복잡한 타
use-debounce (feat: Next.js, Debouncing) 알아보기
공식문서 참고 >웹 애플리케이션에서 사용자 입력에 따라 실시간으로 데이터를 조회하거나 필터링해야 하는 경우가 많다. 예를 들어, 검색 창에 키워드를 입력하면 그에 맞는 결과를 실시간으로 보여주는 기능이 그렇다. 하.지.만 이때 발생할 수 있는 문제 중 하나는 사용
streaming이 뭐징? (Next.js)
streaming이 뭐징? 멜론인가? 스트리밍이란? > 스트리밍은 큰 데이터를 여러 작은 조각(chunk)으로 나누어 서버에서 클라이언트로 순차적으로 전송하는 기술이다. 즉, 모든 데이터가 한꺼번에 로드될 때까지 기다리지 않고, 준비된 부분부터 조금씩 화면에 보여줄