나의 개발일지

시작하기** 주의 : node.js 가 설치되어 있어야 한다 **  터미널에서 아래의 npm 명령어로 설치 (설치하지 않는다! 글 아래 에러 확인)npm install -g react-native-cli 설치 및 버전 확인 (실행되지 않는다면 바로 밑에 에러 해결 확인)react-native -v   🚨에러 발생 및 해결 react-native-cli 대신 이제는 npx react-native를 사용하는 것이 권장된다고 한다. react-native-cli 패키지는 더 이상 업데이트되지 않으며, 대신 npx react-native를 사용해 React Native 명령을 실행하는 것이 더 안정적이다npx react-native -v   JDK 설치하기https://www.oracle.com/java/te..

HLS HTTP 라이브 스트리밍 또는 HLS는 인터넷을 통해 소비자에게 미디어 콘텐츠를 제공하는 데 사용되는 스트리밍 프로토콜이다. 널리 사용되는 스트리밍 프로토콜이며 비디오 콘텐츠 스트리밍에 널리 사용된다.  HLS의 주요 특징 1. 적응형 비트 전송률 스트리밍(Adaptive Streaming) : HLS는 네트워크 상태에 따라 동적으로 비트레이트를 변경하여 최적의 영상 품질을 제공한다. 서버는 다양한 해상도와 비트레이트의 동영상 세그먼트를 저장하고, 클라이언트는 현재의 네트워크 상태에 적합한 세그먼트를 선택하여 재생한다. 비트 전송률 스트리밍(ABR) 적응 스트리밍 프로토콜 중에서 눈에 띄는 HLS의 기능입니다. 스트리밍 도중에도 네트워크 상태에 따라 비디오 품질을 조정할 수 있는 기능입니다. 따라..

클로저란 함수와 함수가 선언되었을 때의 렉시컬 환경의 조합클로저란, 자신이 선언된 당시의 환경을 기억하는 함수 클로저란, 생명 주기가 끝난 외부 함수의 변수에 접근할 수 있는 내부 함수 function closure() { var name = heewon"; // name은 클로저에 의해 생성된 지역 변수 function displayName() { // displayName() 은 내부 함수이며, 클로저다. console.log(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName();}closure(); clousure()은 지역 변수 name과 함수 displayName()을 생성 displayName()은 clousure() 안에 정의된 내부함수이며 ..

WebSocket | WebRTC 개념, 차이점 및 등장배경 우선 HTTP에 대한 개념부터 알아야 한다.HTTP는 브라우저가 서버에게 요청(request)을 보내면 서버는 확인 후 브라우저에게 응답(response)을 준다.이때 서버가 브라우저에게 데이터를 보낼 수 있는 것은 무조건 브라우저가 request를 했을 때만 가능하다.서버가 그냥 브라우저에게 뭘 보낼 수가 없다!우리가 만약 오직 HTTP만을 이용하여 채팅을 만든다면 새로운 메세지를 확인할 때, 계속해서 새로고침을 해야할 것이다. 이러한 문제점을 해결하기 위해 WebSocket이 생겨나게 되었다.웹 소켓 프로토콜은 http와 다르다. request,  response가 있는 것이 아니라 open-close로 커넥션이 이루어져 있다. WebSoc..

DevOps Development (개발) + Operations (운영) 단절된 개발과 운영간 프로세스를 Seamless하게 연결하고 자동화 방법을 통해 효율성을 극대화하는 방법 ( 사용자에게 안전성과 신속성을 제공하기 위해 ) DevOps의 핵심요소 [ CAMS ] Culture | 문화 팀의 경계를 완화하고 협업 수준 향상 / 조직의 사일로화 현상을 경계해야 한다 부서별 데이터가 통합되지 않아서 회사 전체 데이터를 통합해 인사이트를 얻기 곤란 비즈니스 목표에 맞춘 원활한 커뮤니케이션과 협업 문화가 중요하다 ** 사일로(Silo) : 곡식이나 사료를 저장해 두는 굴뚝 모양의 창고로, 각 사일로에는 동일한 내용물만 저장한다. 다른 부서와는 담을 쌓고, 자기부서의 이익만 추구하는 것! Automation..

✔️ 문제 정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. ✔️ 제한사항 1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 1,000 0 ≤ n ≤ 1,000 ✔️ 입출력 예 설명 1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 1,000 0 ≤ n ≤ 1,000 💡나의 풀이 function solution(array, n) { var answer = 0; for (let i = 0; i < array.length; i++) { if (array[i] === n) { // 배열의 현재 요소가 n과 같으면 answer++; // answer를 1 증가 } } retur..

✔️ 문제 군 전략가 머쓱이는 전쟁 중 적군이 다음과 같은 암호 체계를 사용한다는 것을 알아냈습니다. 암호화된 문자열 cipher를 주고받습니다. 그 문자열에서 code의 배수 번째 글자만 진짜 암호입니다. 문자열 cipher와 정수 code가 매개변수로 주어질 때 해독된 암호 문자열을 return하도록 solution 함수를 완성해주세요. ✔️ 제한사항 1 ≤ cipher의 길이 ≤ 1,000 1 ≤ code ≤ cipher의 길이 cipher는 소문자와 공백으로만 구성되어 있습니다. 공백도 하나의 문자로 취급합니다. ✔️ 입출력 예 설명 입출력 예 #1 "dfjardstddetckdaccccdegk" 의 4번째, 8번째, 12번째, 16번째, 20번째, 24번째 글자를 합친 "attack"을 retu..

이벤트 버블링(Event bubbling) 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 위 그림에서 보면 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window까지 이벤트를 전파하는 것이다. 마치 거품처럼! span 태그를 누르면 span -> p -> div -> main -> body 가 차례대로 콘솔에 찍힌다. 버블링을 마주하고 싶지 않다면?! 버블링을 강제로 중단시키는 방법도 존재한다. 이벤트 객체의 메서드인 event.stopPropagation()을 사용하면 된다. 하지만 꼭 필요한 경우를 제외하고는 버블링을 막아선 안된다. 아키텍처를 잘 고..

props와 state의 차이 Props와 State는 모두 컴포넌트의 데이터를 다루는 데 사용하며 일반 Javascript 객체이다 목적과 사용 방법에 차이점이 존재한다. React에서 불변성을 지키는 이유 불변성이란? 불변성의 사전적 의미는 값이나 상태를 변경할 수 없는 것을 의미 원시데이터 ( Boolean, Number, String, null, undefined, Symbol ) --> 불변성이 있다 원시데이터가 아닌 데이터( Object, Array, Function ) --> 불변성이 없다 원시데이터 불변성의 예시 1. 변수 a는 ‘data1’ 에서 ‘data2’로 변경 2. 총 2개의 메모리 영역 사용 ( 실제 메모리영역에는 ‘data1’, ‘data2’ 둘 다 존재 ) 3. 메모리 영역에..

복습이 필요할 것 같아서 별코딩의 비동기 시리즈 공부 시작! //로그인 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'와 같은 동적 라우트에서 해당..

✔️ 문제 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

Page Router와 다른 점 가장 큰 변화는 페이지 라우팅 방식이다. Page Router는 Next.js의 기본 라우터로서, 각자의 파일이 'pages' 디렉토리 내에 위치하는 경우 자동으로 라우트가 생성된다. 예를 들어, 'pages/about.js' 파일이 있다면, 이는 '/about' URL로 접근할 수 있게 된다. ( 정적인 페이지 구조 ) App Router는 Next.js의 동적 라우팅 시스템으로서, 런타임에 URL 경로를 결정할 수 있다. '[param].js'와 같은 파일 형식으로 파일을 생성하면, 'param' 부분은 URL의 일부로 대체될 수 있다. 'pages.posts/[id].js' 파일이 있다면 '/posts/1' , '/posts/abc'와 같은 다양한 URL로 접근이 가..