본문 바로가기

분류 전체보기

(57)
parameter와 argument의 차이 파라미터(parameter) 함수 선언시 사용되는 변수. 함수가 선언될 때 그 안에서 사용할 값을 받기위한 변수라고 할 수 있다. 파라미터는 함수의 본문 내에서 변수처럼 사용되며, 함수가 호출될 때 해당 파라미터 위치에 전달된 인자 값을 가지게 된다. 인자(argument) 함수를 호출할 때 전달하는 실제 값. 이 값은 함수가 호출될 때 해당 함수의 파라미터에 복사되거나 참조로 전달된다. 간단히 요약하면, 파라미터는 함수 선언의 일부이며 변수의 역할을 하지만 인자는 함수 호출에 사용되며 파라미터에 할당되는 실제 값을 나타낸다. 아래는 간단한 예제이다. function sum(a, b) { return a + b; } 위의 함수에서 a와 b는 파라미터이다. 함수 sum 내부에서 사용되는 변수이며, 함수가 ..
호이스팅(Hoisting)과 TDZ(Temporal Dead Zone) 호이스팅이란? 자바스크립트에서 특정한 동작 방식을 설명하는 용어. 이는 변수나 함수의 선언을 그 스코프의 가장 상단으로 '끌어올려' 주는 특성을 의미. 이러한 호이스팅은 변수 선언(var)과 함수 선언식에 적용되며, 그 결과로 인해 선언 전에도 해당 변수나 함수를 참조하거나 호출할 수 있다. TDZ란? let과 const로 선언된 변수가 호이스팅되더라도, 그들이 선언된 지점까지의 코드에서 그들을 참조할 수 없는 영역, 즉 일시적 사각지대를 의미. 이 영역에서 변수를 참조하려고 시도하면 참조 에러(ReferenceError)가 발생한다. 이러한 특성은 의도치 않은 변수 참조를 방지하고, 코드의 안전성을 높이는 데 도움을 준다. 변수 선언에 있어서 호이스팅의 동작 방식은 선언된 변수를 스코프의 최상단으로 끌..
RESTful API RESTful API란? HTTP 프로토콜을 이용하여 웹 서비스를 제공하는 아키텍처 스타일. 각 API는 서버에 저장된 데이터와 상호작용하는 방법을 정의함. HTTP 메서드(GET, POST, PUT, PATCH, DELETE 등)를 사용하여 CRUD(Create, Read, Update, Delete) 작업을 수행한다. GET: 서버에서 데이터를 조회합니다. POST: 서버에 새로운 데이터를 생성합니다. PUT: 서버의 기존 데이터를 전체적으로 수정합니다. PATCH: 서버의 기존 데이터를 부분적으로 수정합니다. DELETE: 서버의 데이터를 삭제합니다. RESTful API와 대조적인 웹 서비스 아키텍처? SOAP(Simple Object Access Protocol): SOAP는 HTTP 뿐만 아니..
웹페이지가 브라우저에 랜더링 되는 과정 일반적인 웹페이지를 랜더링 하는 과정은 아래와 같다. 요청 단계(Request): 사용자가 웹 주소(URL)를 입력하면, 브라우저는 해당 서버에 HTTP 요청을 보낸다. HTML 파싱 단계: 서버로부터 받은 HTML 문서를 파싱하고, 이를 바탕으로 DOM(Document Object Model) 트리를 구축한다. CSS 파싱 단계: 별도의 CSS 파일과 HTML 내에 포함된 CSS 스타일을 파싱하여 CSSOM(CSS Object Model) 트리를 만든다. 렌더 트리 생성 단계: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 만듭니다. 렌더 트리는 실제 화면에 표시될 노드들만을 포함한다. 레이아웃 단계: 각 노드가 화면의 어디에 위치해야 하는지 계산하는 단계. 페인트 단계: 레이아웃 단계에서 계산..
인스타그램 클론 코딩 우선적으로 가장 많은 차이를 느낀 것은 퍼블리싱의 차이였다. 기존의 프로젝트에서는 자유롭게 본인의 재량껏 디자인을 할 수 있었다면 기존에 있는 서비스의 클론 코딩을 할 때에는 확실한 가이드라인이 존재했기에 기준점을 지키며 코딩하는게 어렵게 느껴졌다. 그리고 막연하게 다른 서비스들을 둘러 볼 때 '이건 이렇게 하면 더 좋을 것 같은데?' 같은 생각도 서비스를 기획했던 사람들이 괜히 현재의 방식을 채택한 것이 아니구나 싶었다.
미니프로젝트를 마치며 커스텀 월드컵을 마치며 회고를 해보자면 전체적으로 아쉬운 마음이 많이 들었다. 생각보다 기능을 구현하고 테스트를 해보던 과정들의 시간이 짧아 목표로 했던 것을 마무리하지 못했다는 것이 가장 괴로웠다. 단순한 게시판 기능이뿐이 아니라 월드컵의 게임 기능을 구현하면서 많은 것을 배웠다. 악시오스, 토큰, 이미지를 호출하고 저장하는 것 등 생각하지 못했던 방법들을 알아가는 과정이 매우 좋았다.
Axios Axios는 JavaScript에서 널리 사용되는 오픈 소스 라이브러리로, 웹 브라우저와 Node.js 환경에서 HTTP 요청을 쉽게 만들고 처리할 수 있게 해준다. Axios는 Promise를 기반으로 한 비동기 처리를 사용하며, RESTful API와 통신할 때 주로 사용된다. 다양한 HTTP 메서드 (GET, POST, PUT, DELETE 등)를 지원하며, JSON 데이터 처리 및 요청/응답 인터셉터와 같은 고급 기능을 제공. 주요 기능 Promise 기반: 비동기 HTTP 요청을 간편하게 처리할 수 있습니다. 브라우저 및 Node.js 지원: 클라이언트와 서버 모두에서 사용 가능합니다. 요청/응답 인터셉터: 요청이나 응답을 가로채서 필요한 처리를 수행할 수 있습니다. 요청 취소: 이미 시작된 요..
라이프사이클(클래스형 vs 함수형), react hooks React에서는 주로 두 가지 유형의 컴포넌트를 사용 클래스형 컴포넌트(Class Components): 클래스형 컴포넌트는 ES6 클래스를 사용하여 정의되며, React.Component를 상속받는다. 라이프사이클 메소드를 사용할 수 있으며, 내부 상태를 가질 수 있다. 클래스형 컴포넌트의 주요 라이프사이클 메소드는 다음과 같다. constructor: 컴포넌트 생성 시 호출 componentDidMount: 컴포넌트가 DOM에 마운트 된 직후 호출 componentDidUpdate: 컴포넌트가 업데이트 된 후 호출 componentWillUnmount: 컴포넌트가 언마운트되고 파괴되기 직전 호출 shouldComponentUpdate: 컴포넌트가 업데이트되기 전 호출, false를 반환하면 해당 업데..