나의 개발일지

복습이 필요할 것 같아서 별코딩의 비동기 시리즈 공부 시작! //로그인 function login(username, callback) { setTimeout(() => { callback(username); }, 1000); } // login("희원", (username) => { // console.log(`${username}님, 안녕하세요`); // }); //장바구니에 넣기 function addToCart(product, callback) { setTimeout(() => { callback(product); }, 1000); } // addToCart("감자", (product) => { // console.log(`${product}를 장바구나에 넣었습니다.`); // }); //결제하기 ..

Get, Post의 차이 GET 데이터 조회를 목적으로 하며, HTTP header URL에 Query String 형태로 데이터를 전송하는 방식 url에 데이터를 담기에 길이가 제한적이며 보안에 취약하다. POST 데이터 추가 목적으로 사용되며 HTTP Body에 데이터를 추가하여 전송하는 방식 GET 방식보다 데이터 크기를 크게 할 수 있으며 보안적으로 더 나음 속도가 GET 방식보다 비교적 느림 웹 동작 방식 사용자는 브라우저에 URL을 입력 브라우저는 DNS를 통해 서버의 진짜 주소를 찾음 HTTP 프로토콜을 사용해 HTTP 요청 메세지 생성 TCP / IP 연결을 통해 HTTP 요청이 서버로 전송 서버는 HTTP 프로토콜을 활용해 HTTP 응답 메세지 생성 TCP / IP 연결을 통해 요청한 컴..

호이스팅 (Hoisting) hoisting 의 사전적 의미 : 끌어 올리기, 들어올려 나르기. 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상 단순하게 설명하자면 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 '끌어올려~~'진 듯한 현상이다. 포인트는 물리적으로 '끌어올려'지는 것이 아니라 자바스크립트 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ..

Data Fetching React에서 일반적으로 data를 fetching 하는 방법 "use client"; import { useEffect, useState } from "react"; export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch( "https://nomad-movies.nomadcoders.workers.dev/movies" ); const json = await response.json(); setMovies(..

도메인(Domain)과 네임서버, DNS 도메인이란 인터넷 주소를 언급할 때 흔히 도네임 또는 도메임 이름이라고 한다. 도메인은 웹사이트의 위치를 나타낸다. 예를 들어 도메인 이름 "google.com"은 IP 주소 "142.250.196.142"를 가리킨다. 도메인과 URL의 차이점 웹 주소라고 하는 URL에는 사이트 도메인 이름과 전송 프로토콜 및 경로 등의 정보가 포함되어 있다. 네임서버란 해당 도메인에 매핑되는 ip주소로 변환해주는 것 ex) abcd.com => 123.123.123.123 DNS란 Domain Name System의 약자로 도메인 이름을 IP 주소로 바꿔주는 역할을 하는 시스템 계층이다. 일종의 전화번호부 같은 역할이다. 이로 인해 우리는 숫자로 되어 있는 IP 주소를 기억하지..

Route groups 사용 방법 : 폴더 이름을 ( ) 괄호로 묶어주기 라우트 그룹의 이름 지정은 조직화를 위한 것이외에는 특별한 의미가 없으며 URL 경로에 영향을 주지 않는다. 라우트 그룹을 포함하는 라우트는 다른 라우트와 동일한 URL 경로로 해석되어서는 안된다. 예를 들어, 라우트 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 해석되어 오류가 발생할 수 있다. 최상위 레이아웃(layout.js 파일)이 없는 상태에서 여러 개의 루트 레이아웃을 사용하는 경우, page.js 파일은 라우트 그룹 중 하나에 정의되어야 한다. 예를 들어, app/(marketing)/page.js와 같은 형식이다...

TCP와 UDP의 차이점 연결 지향성: TCP(Transmission Control Protocol): 연결 지향적인 프로토콜로, 통신하기 전에 연결을 설정하고, 통신이 끝나면 연결을 해제한다. 이는 데이터를 신뢰성 있게 전송하고 수신 확인을 통해 데이터 손실을 방지한다. UDP(User Datagram Protocol): 비연결 지향적인 프로토콜로, 데이터를 전송하기 전에 연결을 설정하지 않는다. 따라서 속도가 빠르지만, 데이터 전송 중 손실이 발생할 수 있다. 신뢰성: TCP: 데이터 전송 중에 손실이나 오류가 발생하면 재전송을 통해 신뢰성 있는 데이터 전송을 보장한다. UDP: 데이터 전송 중에 오류가 발생하더라도 재전송을 하지 않는다. 따라서 손실이나 오류가 발생할 수 있다. 헤더 크기: TCP:..

useRef에 대해 설명해주세요. useRef는 React에서 참조(ref)를 생성하고 관리하기 위한 React Hook중 하나입니다. useRef를 사용하면 컴포넌트 내부에서 생성한 변수나 DOM 요소에 대한 참조를 생성하고, 이를 다른 곳에서 사용할 수 있습니다. useRef는 DOM 요소에 직접 접근할 때 사용할 수도 있지만, 그 외에도 여러 상황에서 유용합니다. useRef를 사용하여 생성한 참조는 컴포넌트가 리렌더링될 때마다 새로 생성되지 않으며, 기존에 생성한 참조를 그대로 유지합니다. useRef를 사용하는 상황으로는 다음과 같은 것들이 있습니다. 1) DOM 요소에 직접 접근해야 하는 경우 예를 들어, 특정 DOM 요소의 크기나 위치를 측정하거나, 입력 폼의 값을 가져오거나, 스크롤 위치를..

app > layout.tsx import Navigation from "../components/navigation"; export default function RootLayout({children}: {children: React.ReactNode;}) { return ( {children} ); } layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다. layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다. 만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면 about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다. export default function RootLayout({ children, }: { ..

자바스크립트에서 비동기 처리는 왜 필요할까? 자바스크립트는 동기적인 언어이다. 즉, 코드 하나하나가 처리되면서 지연시간이 발생하면 이후의 태스크들은 무아지경으로 블로킹이 되어진다. 서버에 데이터를 요청하는 등, 대기 시간이 긴 작업의 경우에는 무아지경의 지연시간을 해소하기 위해 병렬적인 함수 실행을 해야하는데, 이때 나오는 개념이 비동기처리이다. 비동기 처리 방식에는 Promise와 Async · Await 방식을 사용한다. 서버에서 데이터를 가져오는 경우, 응답 값을 받기 위해 보통 자바스크립트에서 비동기 처리 방식인 Promise, Async · Await 방식을 사용한다. 두 방식의 용도는 같지만 분명 다른 점이 존재한다. Async · Await 방식은 Promise에 비해 가독성이 좋고, 문법이..

Rest의 정의 Representation State Transfer의 약자 자원의 이름(표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 구체적인 개념은 HTTP URL을 통해 자원(resource)을 명시하고, HTTP Method(post, get, put, delete)를 통해 해당 자원에 대한 CRUD operation*를 적용하는 것을 의미한다. 즉 REST는 자원 기반 구조(ROA) 설계의 중심에 resource가 있고 HTTP Method를 통해 resource를 처리하도록 설계된 아키텍쳐를 의미한다. * CRUD Operation Create : 생성(POST) Read : 조회(GET) Update : 수정(PUT) Delete : 삭제(DELETE) HEA..

라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다. 컴포넌트는 생성(mounting) ➡️ 업데이트(updating) ➡️ 제거(unmounting)의 생명주기를 갖는다. 리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 1. class component 생명주기 마운트(mount) 컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 한다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다. constructor constructor(props) { super(props); this.state = { counter: 0 }; // this.setState() 호출은 X } 컴포넌트 ..

레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술이다. 레이지 로딩을 적용하게 되면 최초 페이지 로딩 시간을 개선하고 최초 데이터 전달 양을 감소시키는 것이다 웹페이지를 로딩하는 기존 방식은 리소스들을 한 번에 받는 것인데 로딩 시간이 더욱 길어지고 사용자 경험을 하향시키는 것이다. 레이지 로딩은 주로 이미지와 영상들에 적용이 되고, 유저가 스크롤을 내려서 해당 이미지가 뷰포트에 들어오게 될 경우, 자비스크립트가 그 플레이스 홀더를 대체하면서 제대로된 사이즈의 이미지를 로딩하게 되는 것이다. 우선 lazy Loading을 사용하기 위해 라이브러리를 설치한다. https://www.npmjs.com/packag..

✔️ 문제 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

✔️ 문제 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. ✔️ 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크..

✔️ 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. ✔️ 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. ✔️ 입출력 예 participant completion return ["leo"..

Link 태그는 클라이언트 사이드 네비게이션을 제공해준다. import Link from "next/link"; export default function Navigation() { return ( Home About Us ); } import Navigation from "../components/navigation"; export default function Page() { return ( Hello! ); } usePathname을 통해 현재 path에 해당하는 페이지 표시를 해줄 것이다 import { usePathname } from "next/navigation"; export default function Navigation() { const path = usePathname(); cons..

✔️ 문제 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 1. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 2. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 3. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. ✔️ 제한사항 array의 길이는 1 이상 ..

Not-Found Next.js는 기본적으로 페이지가 존재하지 않을 경우, 404 페이지가 출력된다. 하지만 에러페이지를 custom할 수 있다. Next.js에서 명시한 규칙의 파일명 not-found.tsx 파일을 만들어 사용하면 된다. 아무 주소를 입력했을 때 내가 설정한 문구가 뜬다. Global not-found와 Local not-found Global not-found : 말그대로 전체적인 범위에 대해 적용되는 404페이지이다. 'app/not-found.tsx'로 위에서 만든 것이 Global not-found이다. Local not-found : 특정 라우트 내에서만 적용되는 404페이지이다 앱 전체 범위 뿐만 아니라 '/pages/posts/[id].tsx'와 같은 동적 라우트에서 해당..