나의 개발일지

시작하기** 주의 : 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}를 장바구나에 넣었습니다.`); // }); //결제하기 ..