미어캣의 필기장

안녕하세요 미어캣입니다. 제가 공부한 내용들을 보면 DOM을 간략하게나마 정의한 부분들이 있긴하지만 앞으로 있어 기본이지만 알아야는 할 것 같아서 기록에 남겨두려고 합니다. 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하지만, 인터랙티브한 기능(동적인 구현)을 하고자 한다면 자바스크립트와 DOM을 반드시 써야합니다. DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. ➡️ 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당 DOM..

안녕하세요 미어캣입니다. 오늘은 React에 대해서 글을 작성해보려고합니다. 원래는 Vue.js를 공부하고 있었습니다. 기본적인건 사용할 줄알고 강의도 여러번 들어 계속해서 Nuxt 프레임워크로 넘어갈려는 찰나에, 실제 실무에서는 React가 압도적으로 많이 쓰이고 있어 겸사겸사 React도 공부를 하고있습니다. 코드적으로는 조금씩 늘려가고 있긴한데 아직 React는 무엇이다? 라는 명사적으로는 애매한 부분이 있어서 글을 끄적여 봅니다. GPT에서는 React를 뭐라고 할까요? React : Facebook에서 개발한 JavaScript 라이브러리라고 정의하고 있습니다. Features : 가상 DOM : 가상의 DOM을 사용하여 빠르고 효율적인 UI를 업데이트(전체 DOM을 업데이트하는 대신 변경된 부..

안녕하세요 미어캣입니다. 웹 애플리케이션을 만들고 랜더링하는 과정에서 CSR과 SSR으로 나뉩니다. 처음에 프로젝트를 받았을 때에는 이런 내용에 대해서는 전무한 상태였지만 시간이 지나면서 필요한 지식을 채우고자 해당 부분들을 공부하게 되었습니다 저는 SSR, CSR를 SPA는 어떤 관계일까의 질문에서 너무 헷갈렸지만 MPA라는 단어를 보고 조금은 쉽게 이해 할 수 있었습니다. SSR과 CSR 보기 이전에 SPA와 MPA에 대한 이해가 필요할 것 같습니다. SPA; Single Page Application 하나의 페이지로 구성된 웹 애플리케이션 한번의 한 페이지만 로드 되고, 페이지간 동적으로 데이터를 로드하며 UI를 업데이트하는 방식 주로 JavaScript 프레임워크/라이브러리를 사용하며 (React..

안녕하세요 미어캣입니다. 😺 vue.js를 공부하면서 예전에 들었던 강의와 요즘 듣고 있는 강의의 차이점은 바로 ES6 문법을 적용한 방식이라고 생각합니다. 최근에는 저 역시 변수/함수 선언 시에 const나 let을 사용하고 있습니다. 근데 기존의 var과 어떤 차이가 있는지 ES6문법과 ES5의 문법의 차이가 어떤지 대~충은 느낌으로는 체감하고 있겠지만 정확하게는 모른다고 생각해서 한 번 알아보는 시간을 가졌습니다.(대충은 싫어요) 그래서 오늘은 ES6문법의 특징과 변수 선언 방식에 차이가 어떤지에 대해서 알아보도록 하겠습니다. var, let, const의 차이점을 비교하기 전에 ES6가 먼지 알아보았습니다. ES6 : ECMA Script 2015 JavaScript의 표준화된 버전인 ECMASc..

안녕하세요 미어캣입니다. 요즘 일/공부 의 무한 굴레에 있어 바쁘지만 알찬 하루 하루를 보내고 있습니다. 코드적인 스킬도 중요하지만 누군가에게 설명하고 할 때에 CS 지식도 굉장히 중요하다고 생각해서 틈틈히 시간나면 기록하려고 합니다. 오늘은 HTTP API 통신을 사용할 때 주로 쓰이는 Ajax, Axios, Fetch에 대한 정리를 하려고합니다. Ajax Asynchronous JavaScript And XML : Ajax는 JavaScript에서 비동기 HTTP 통신이 가능한 기술 비동기 HTTP 통신이란 : response와 request를 비동기 식으로 다를 수 있다 동기 : 순차적으로 작업을 실행하고, 작업이 완료되기를 기다렸다 다음 작업을 실행, 작업이 끝나기를 기다리는 동안 다른 작업은 대..

안녕하세요 미어캣입니다. 오늘은 프로그래머스 기초문제 첫 번 째로 나오는 음수 문제를 풀어보도록 하겠습니다. 문제 설명 : 정수 리스트 num_list가 주어질 때, 첫 번째로 나오는 음수의 인덱스를 return 하도록 하는 soulution 함수를 작성하시오, 음수가 없다면 -1 을 return 합니다. 제한 사항 : 5 { /* filter로 찾은 값을 배열로 리턴하기 때문에 배열의 첫번째값을 리턴, indexOf를 통해 값이 없을 경우 -1 을 리턴 */ let newArr = arr.filter((c) => { if(c < 0) { return c } }) return arr.indexOf(newArr[0]); } filter는 조건에 만족하는 인덱스 값을 배열로 리턴하게 됩니다. 이때 첫 번째로..

안녕하세요 미어캣입니다. 오늘은 프로그래머스 기초문제 문자열의 뒤의 n 글자 문제를 풀어보도록하겠습니다. 문제설명 : 문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string과 뒤의 n 글자로 이루어진 문자열을 return 하는 solution 함수를 작성하시오. 제한사항 : my_string은 숫자와 알파벳으로 이루어져 있음 1

안녕하세요 미어캣입니다. 오늘은 프로그래머스 기초문제 글자 이어 붙여 문자열 만들기 문제를 풀어보도록 하겠습니다. 문제를 풀기에 앞서 그동안 제가 항상 제한사항에 대해서 if문을 통해 주었었는데 의문이 되어 알아보니 코딩플랫폼에서 제한사항을 주는 이유가 있었습니다. 다음과 같은 이유 때문에 문제가 출제자가 권장하는 코드로 풀이되고자 코딩플랫폼에서 입력의 제한사항을 준다고 합니다.! 시간복잡도 : 알고리즘이 해결되는데 걸리는 시간의 상한 공간복잡도 : 알고리즘이 해결되는데 필요한 메모리의 상한 따라서 제가 하는 방식처럼 입력의 제한사항을 줄 필요가 없습니다,!!!! 문제설명 : 문자열 my_string과 정수 배열 index_list가 매개변수로 주어질 때, my_string의 index_list의 원소들..

안녕하세요 미어캣입니다. 오늘은 프로그래머스 기초문제 카운트 업 문제를 풀어보도록 하겠습니다. 문제설명 : 정수 start_num과 end_num가 주어질 때, start_num부터 end_num까지의 숫자를 차례로 담은 리스트를 return 하도록 하는 solution 함수를 완성하시오. 제한사항 : 0

안녕하세요 미어캣입니다. 오늘은 프로그래머스 기초문제 마지막 두 원소 문제를 풀어보도록 하겠습니다. 문제설명 : 정수 리스트 num_list가 주어질 때, 마지막 원소가 그 전 원소보다 크면 마지막 원소에서 그 전 원소를 뺀 값을, 마지막 원소가 그 전 원소봐 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solution 함수를 완성하시오. 제한사항 : 2