본문 바로가기

전체 글178

웹사이트 성능보고 점수 F받았네;; CSS/HTML으로만 구성된 정적웹사이트를 구성했다!!드디어 !!! netlify로 배포하고 휴대폰으로 테스트해보는데 와... 느려도 이렇게 느려터질 수가 있나...세상에 너무 어이없어서 이 사이트에서 속도 테스트를 해봤다. https://gtmetrix.com/ 근데 F;;놀랍지도 않다. 내가 살면서 이렇게 오래걸리는 웹사이트는 처음봤다. 참나 베트남가서 인터넷했을때도 이렇게 느리진 않았다.. 아이고 웹사이트에 이미지를..다 고화질로 넣고싶은 욕심때문에 너무 무리했나보다. 빨리 이미지파일 손봐야지 흑흑 https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently Make your website faster and save.. 2023. 2. 17.
[React]컴포넌트 파일 생성하기 데이터 파일, 컴포넌트 생성 파일을 따로 생성해서 아~주 간단한 거 구현해보는 시간!! 컴포넌트 : 갯수가 많거나 변동이 잦은 데이터 조절을 위해서 ..쉽게말하면 축약어 설정해주기 정도로 이해하면 될지 않을까.. props: 부모에서 자식 컴포넌트 사이에 데이터 이동을 위한 것!! 형제요소끼리 안됨. 자식->부모 안됨. 무조건 부모-> 자식만 가능 먼저 소스코드부터 보시죠 //App.js import logo from './logo.svg'; import 'bootstrap/dist/css/bootstrap.min.css'; import { useState } from 'react'; import { Button, Navbar, Container, Nav, Row, Col} from 'react-boot.. 2023. 2. 9.
[React]Component 문법, 동적 UI, map 함수 HTML양이 너~무 많아서 깔쌈하게 코드를 짜고 싶을 때 사용. Component 를 만들면 관리가 편해지기때문에 ~ 반복출현하는 HTML 덩어리들 자주 변경되는 HTML UI들 다른 페이지 만들 때도 컴포넌트로 만듦 하지만 많이 만들면 state 사용시 복잡해짐 상위 component에서 만든state를 쓰려면 props 문법을 이용해야함. Component를 만들 때 대문자로 시작으로 해야함!! Component 사용하려면?? 1.함수만들고 이름짓기 2. 축약을 원하는 HTML 넣기 3. 원하는 곳에서 return 소괄호안에 있는 건 태그하나로 묶여야한다. return 안에는 한개의 태그만 들어갈 수 있음!!!!!!! return()내부에 혹시 div 태그가 필요없다면 의미없는 div 태그 대신 태그.. 2023. 2. 7.
[React]useState() 함수 useState()함수 : 자료를 일시적으로 저장하는 함수!! 변수랑 뭐가 다르냐면!! 보관한 데이터로 데이터바인딩을 했을때~ 데이터가 변경되면!! 해당 HTML이 재렌더링 된다. JS처럼 일일이 코드 안짜도 됨. 그냥 변수는 데이터가 바뀌어도 재렌더링 되지 않음. 배열의 데이터들을 변수로 쉽게 저장할 수 있는 자바스크립트의 destructuring 문법을 이용한 것!! 예를들어 let array = ['Han', 20] 이라는 배열에 변수를 생성하고 싶다면 let [name, age] = ['Han', 20] 이렇게 코드를 짜는것이 destructuring 문법 같은 원리로 useState() 함수를 호출하면 [data1, data2]가 생성되는데 저기에 각 변수를 생성하는것. 매일 발행되는 기사처럼 .. 2023. 2. 4.
[React]아주 간단한 JSX 문법+ 딱 세 개 있음 JSX 문법이 간단하다는게 아니라.. 게시글이 매우 간단.. 우선 JSX는 JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. 정식 문법은 아니다. 그리고 JSX문법 덕분에 우리가 HTML을 js로 쓸 수 있는것! 고맙다 JSX야! css는 똑같이 적용하면 된다. createElement() JSX를 사용하면 JavaScript로 HTML 요소를 작성 하고 appendChild()메서드 없이 DOM에 배치할 수 있다. JSX는 HTML 태그를 react 요소로 변환해준다. 이건 JSX문법을 사용했을 때 const myElement = I Love JSX!; const root = ReactDOM.createRoot(document.getElementById('ro.. 2023. 2. 4.
[React]js파일에서 HTML자동완성 설정하기 feat.Emmet Emmet은 HTML과 CSS의 작성의 시간을 단축 시켜주는 에디터 확장기능. (자동완성 해줌ㅋ) HTML/CSS에서는 잘 작동을 하지만 js파일에선 작동을 안하는데... 이때 F1 버튼을 누르고 저 괄호 안에다가 "emmet.includeLanguages": { "javascript": "javascriptreact" }, 이거 복붙해서 저장 (ctrl + s) 짠 이제 잘 나온다. 저 코드가 뭔데 ... 작동을 하게 해주지? Emmet은 다른 언어에 대한 정보가 없어서 우리가 직접 설정해야 한다고 한다.. 알고가면 좋은 단어 : include - 포함하다 코드를 직역하면..에멧아... 자바스크립트를 포함해다오..라고 대놓고 요구를 하네.. 이런 직관적인 코드 아주 환영한다. 출처: https://co.. 2023. 2. 4.
[JavaScript]async async는 말입니다. 비동기처리 패턴 중 하나. Promise패턴과 같은 역할을 함! https://hans-j.tistory.com/147 [JavaScript]웹개발시 자주 사용하는 메서드들 JavaScript로 HTML 내용 변경하기 주의해야할 점! getElementById는 Element로! s가 없다. 근데 다른 메서드들은 모두 s가 있다. 이유는! Id는 중복사용이 안되기때문에 하나일 수 밖에 없기 떄문!!! 주의합시 hans-j.tistory.com 여기 중간에 Promise설명 써둠ㅋ 짧게 말하면 Promise라는 객체는 비동기작업 (순차적으로 진행되지 않는 작업)에 대한 성공과 실패에 대한 결과를 미리 정해놓음. 또한 Promise패턴은 new Promise()이렇게 선언을 해주어야 .. 2023. 2. 3.
[VScode]노드몬 실행이 안 될 때 ! -스크랩 https://prefer2.tistory.com/entry/error-VSCode-%EC%98%A4%EB%A5%98%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%9D%8C [error] VSCode 오류(이 시스템에서 스크립트를 실행할 수 없으므로 ~ps1 파일을 로드할 수 없음) nodem.. 2023. 2. 1.
[JavaScript]웹개발시 자주 사용하는 메서드들 JavaScript로 HTML 내용 변경하기 주의해야할 점! getElementById는 s가 없다. 근데 다른 메서드들은 모두 s가 있다. 이유는! Id는 중복사용이 안되기때문에 하나일 수 밖에 없Da. 주의합시다. 버튼 누르면 HTML내용 바꾸기 click하면 내가 설정한 함수가 실행됨!! JSON에서 값 받아오기 + Promise패턴 백틱!!을 사용해서 레이아웃 잡아주고 forEach로 배열의 길이만큼 레이아웃을 추가/append 해준다. 해당 메서드가 이행해서 data를 받아오면! products 변수에 = data.products를 담아두도록 명령. then() 메서드는 Promise (en-US)를 리턴하고 두 개의 콜백 함수를 인수로 받음. 하나는 Promise가 이행했을 때, 다른 하나는 .. 2023. 2. 1.
[JavaScript]로컬스토리지 브라우저의 저장공간 중 하나인 로컬스토리지(Local Storage) Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능) Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움) Cookies (유저 로그인정보 저장공간) Cache Storage (html css js img 파일 저장해두는 공간) Local Storage에는 문자, 숫자만 key : value 형태로 저장 할 수 있다. 총 용량은 5MB Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 초기화된다. 유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능 사용 예 ) 쇼핑몰 .. 2023. 1. 30.
[JavaScript]DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 요약하자면 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한걸 DOM이라고 부름. 문서 객체 모델 (Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, met.. 2023. 1. 30.
[JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용 배! 열! 이! 란! 이름과 인덱스로 참조되는 정렬된 값의 집합 자세한 설명은 넘어가고 바로 예시로 고고. 문자 정렬 (A-Z,가-하 오름차순) **sort함수는 원본을 변형시키니 주의!- //어레이는 변수명 어레이.sort(); 숫자 정렬(오름차 순) 어레이.sort( function (a,b) { return a - b; } ); console.log(어레이); return 오른쪽이 양수면 a를 오른쪽으로 보냄. return 오른쪽이 음수면 b를 오른쪽으로 보냄. 숫자 정렬(내림차 순) 어레이.sort( function (a,b) { return b - a; } ); console.log(어레이); 배열의 객체들을 값 오름차순으로 정렬한 예제 let products = [ { id: 0, price:.. 2023. 1. 30.
[JavaScript]Ajax란? AJAX = Asynchronous JavaScript And XML 비동기 JavaScript 및 XML AJAX is not a programming language. AJAX는 웹 서버와 데이터를 뒤에서 교환함으로써 웹 페이지를 비동기적으로 업데이트할 수 있도록 한다. 즉, 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있습니다. Ajax는 서버와 데이터주고받는 법 중 하나인데 새로고침 없이 GET, POST를 요청하는 기능!! 서버와 유저는 문자자료만 주고 받을 수 있음. 따라서 Object, array를 보내고 싶으면 따옴표로 감싸서 문자처럼 JSON으로 변환하여 보내줌. '{ "price" : 5000 }' //JSON 예제 근데!! 이런건 JQuery로 요청하면 자동 변.. 2023. 1. 29.
[JavaScript]이벤트 버블링 Event bubbling 이벤트 버블링은 이벤트가 가장 안쪽의 대상 요소에서 먼저 트리거된 다음 가장 바깥쪽 DOM 요소 또는 문서 개체에 도달할 때까지 동일한 중첩 계층에서 대상 요소의 상위 요소에서 연속적으로 트리거되는 DOM 이벤트 전파 유형 /출처: 위키피디아 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상 /출처:코딩애플 예를 들어 이벤트버블링 예제 위의 코드에서 span태그의 요소를 클릭하면 브라우저는 사용자가 클릭을 총 3번 했다고 인지함. 이유는 이벤트 버블링때문에 이렇게!! 세개를 인식한다. *이벤트 버블링은 항상 일어나는 현상* 해결방법! document.querySelector('.클래스명').addEventListener('click', fun.. 2023. 1. 28.
[JavaScript]Jquery +사용법 긴~ JS 코드를 깔쌈하게 줄여주는 천사같은 라이브러리 Jquery!!! 구글 검색창에 Jquery CDN 검색!! https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 접.속 CDN코드 복붙!! 설.. 2023. 1. 25.
[JavaScript]addEventListner EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 https://hans-j.tistory.com/138 [HTML]자바스크립트로 객체 불러오기 getElementById / getElementByClassName 함수!! Id나 class 명으로 요소 불러오는 역할을 한다. 쟤네를 이용해서 객체를 호출할 것. 둘의 차이점은!! Id는 중복을 허용하지 않는다. Class는 중복을 허용하기 때문 hans-j.tistory.com 위의 게시글에서는 저런식으로 onclick을 요소마다 일일이 써줬지만 이제는 script로 어떤 동작을 하면! 내가 원하는 함수가 실행되도록!!! addEvenetListener() 메서드를.. 2023. 1. 25.
[HTML]자바스크립트로 객체 불러오기 getElementById / getElementByClassName 함수!! Id나 class 명으로 요소 불러오는 역할을 한다. 쟤네를 이용해서 객체를 호출할 것. 둘의 차이점은!! Id는 중복을 허용하지 않는다. ** Id와 class는 이름이 같아도 된다. 그래도 똑같이 안 할거다..내가 헷갈리니깐..** https://stackoverflow.com/questions/3253775/css-class-and-id-with-the-same-name CSS class and id with the same name Is there anything wrong with having a css class and id with the same name? Like .footer for the article/po.. 2023. 1. 25.
[CSS]Grid Grid CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템. (flex와 비슷하지만 작은 요소들을 배치하는 것에 좀 더 유용함) columns, rows로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 gutters라고 부름. HTML에는 이렇게 div로 모눈종이 역할을 하는 공간들을 만들어줘야한다. Flexbox와 마찬가지로 컨테이너의 직계 자식 전체가 그리드 아이템이 됨. .container { display: grid; } 200픽셀 칼럼 3개를 추가한 예제 .container { display: grid; grid-template-columns: 200px 200px 200px; } fr 단위를 사용하여 그리드 행과 열을 가변적으로 조정 .container { d.. 2023. 1. 23.
[CSS]애니메이션 효과 주기 keyframe,transition 같은 속성들을 이용해서 애니메이션 효과를 줄 수 있다 ex)메뉴판 나타나기, 마우스 올리면 button 움직이기 /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); tran.. 2023. 1. 23.
[CSS]SASS +사용법 CSS 전처리 언어인 SASS CSS와 달리 조건문,반복문,변수,함수가 존재함 따라서 반복적인 부분이 쉽게 처리가 가능하다. 개이득 SASS는 CSS로 컴파일되거나 해석될 프리프로세서 스크립팅 언어. SCSS가 기존의 CSS 구문 위에 구축된 SASS의 주요 구문인 반면, SassScript는 그 자체로 스크립트 언어. CSS(Cascaded Style Sheets)와 같은 세미콜론과 괄호를 사용. SASS와 SCSS는 서로 가져올 수 있다. SASS는 실제로 수학과 변수 지원으로 CSS를 더 강력하게 만든다. SASS와 SCSS의 주요 차이점. SASS는 원본 구문이 필요할 때 사용되며, SCSS에는 코드 구문이 필요하지 않다. SASS는 엄격한 들여쓰기를 따르며, SCSS는 엄격한 들여쓰기가 없다. .. 2023. 1. 23.
[CSS]pseudo-elements(의사요소),ShadowDOM pseudo요소.. 발음은 수도라고 한다... (어려운 영어의 세계) 선택한 요소의 특정 부분을 스타일 지정할 수 있는 키워드. 앞에 콜론 두 개를 붙이는 것을 기억하자!! [pseudo class(:)와 구별하기 위해서 두 개 적용] 속성 요소들은 아래와 같다. (시범적 단계인 것은 제외함 , ::grammar-error, ::spelling error, ::target-text 속성들) ::after /*맨 마지막 부분에 특정 요소(글자, display 등) 추가*/ ::backdrop /* 뷰포트가 생성되면 특정 요소 추가 */ ::before /*맨 앞 부분에 특정 요소 추가*/ ::cue /*전체 신호 집합에 특정 요소 적용 ex) 비디오 - 홈페이지에 접속하자마자 예상치 못하게 영상이 재생되는.. 2023. 1. 22.
[HTML]Font Awesome 아이콘 넣기 사용 방법은 두 가지 1. 다운로드 받아서 사용 https://fontawesome.com/v5/download Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 그리고 head 태그에 아래 링크 복붙~ 2. CDN 이용 간편하지만 FontAwesome 사이트가 다운되면 이 폰트들이 적용된 웹사이트에도 영향이 간다. head태그에 아래코드 복붙~ 적용 방법은 아래로 동일하다! 그리고 FontAwesome 5버전 페이지의 icon메뉴로 들어간 후 https://.. 2023. 1. 19.
[CSS]IE 이전버전과 호환하기 display : flex는 Internet Explorer 10 이하!!부터는 지원이 안.된.다 IE7~9버전을 사용하는 유저들도 있기에 호환이 되도록 수정을 해.야.된.다 어떻게 깨지는 지 확인하려면 윈도우10일 경우 : 검색창에서 internet explorer를 검색 윈도우11일 경우 : internet explorer 11 버전 설치 그 다음 아무튼 인터넷 익스플로러 11버전을 킨 후 마우스 우클릭 - 검사를 누르면 크롬 개발자 도구와 유사한 메뉴들이 뜸, 거기서 에뮬레이션 탭으로 들어가면 예전 IE 브라우저에서 미리볼 수 있다. 이를 해결하기 위해서는 IE를 위한 CSS파일을 만들어야된다!! 이것을 head태그에 적용 (태그 첨부순서는 가장 마지막 줄이 좋음, 하단에 적용된 태그일수록 우선순위.. 2023. 1. 19.
[HTML] 반응형 레이아웃 + 미디어쿼리,flexbox 반응형 웹을 만들 때 head 태그에 들어가야할 내용 안 넣는다면 산에서 노 젓는거랑 똑같은 상황. 미디어쿼리 @media screen and (max-width: 1200px){ .main-title { font-size: 20px; } } //대부분 css파일 가장 하단에 적음 //브라우저 폭이 1200px이하일 경우 해당 폰트사이즈를 적용한다는 코드 여러개 적기 가능 @media screen and (max-width: 1200px){ .main-title { font-size: 30px; } } @media screen and (max-width: 768px){ .main-title { font-size: 20px; } } 위처럼 스타일이 중복된다면 더 하단에 있는것이 우선 적용됨. 보통 기재 순.. 2023. 1. 19.
[HTML]단위 단위 이름 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 길이 단위 상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있음. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있음. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있다. em 요소의 글꼴 크기. /부모 요소 ex 요소 글.. 2023. 1. 19.
[자료구조]스택 스택 LIFO(Last In First Out)이라는 개념을 가진 선형 자료구조다. 프링글스 통을 생각하면 된다. 스택을 구현하기 위해서는 스택의 상단에만 있는 요소에 접근할 수 있기 때문에 마지막으로 삽입되는 요소인 스택의 상단에 대한 포인터를 유지해야 한다. push() : 요소를 스택에 삽입 begin if stack is full return endif else increment top stack[top] assign value end else end procedure pop() : 스택에서 요소를 제거 begin if stack is empty return endif else store value of stack[top] decrement top return value end else end p.. 2023. 1. 18.
[자료구조]연결리스트 연결 리스트는 각 요소를 포인터로 연결하여 관리하는 선형 자료구조다. 각 요소는 노드라고 부르며 데이터영역과 포인터 영역으로 구성된다. 메모리가 허용하는 한 요소를 제한없이 추가할 수 있다. 탐색은 O(n)이 소요된다. 요소를 추가하거나 제거할 때는 O(1)이 소요된다. Sinlgy LInked List, Doubly linked List, Circular Linked List가 존재한다. 추가와 삭제가반복되는 로직이면 배열(순차적리스트) 대신 연결리스트가 더욱 적합하다. https://hans-j.tistory.com/121 [알고리즘]배열(순차리스트) 배열 (Array) 연관된 데이터를 연속적인 형태로 구성된 주고를 가진다. 배열에 포함된 원소는 순서대로 번호(index)가 붙는다. 배열의 크기는 고.. 2023. 1. 18.
[알고리즘]시간 복잡도 계산 복잡도 이론에서 시간 복잡도는 문제를 해결하는데 걸리는 시간과 입력의 함수 관계를 가리킨다. 컴퓨터과학에서 알고리즘의 시간복잡도는 입력을 나타내는 문자열 길이의 함수로서 작동하는 알고리즘을 취해 시간을 정량화하는 것이다.- 위키백과 점근 표기법(asymptotic notation)은 어떤 함수의 증가 양상을 다른 함수와의 비교로 표현하는 수론과 해석학의 방법이다. 알고리즘의 복잡도를 단순화할 때나 무한급수의 뒷부분을 간소화할 때 쓰인다. 빅 O 표기법 : 최악의 실행 시간을 표기 빅 오메가(Ω) 표기법 : 최상의 실행 시간을 표기 빅 세타(Θ) 표기법 : 평균 실행 시간을 표기 https://ko.wikipedia.org/wiki/%EC%A0%90%EA%B7%BC_%ED%91%9C%EA%B8%B0%.. 2023. 1. 18.
자료구조와 알고리즘의 차이점은? 자료구조 : Data Stucture 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미. 또한, 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미. 메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있다. 일차원인 컴퓨터 메모리를 현실에 대응되도록 구조를 만든 것 ex)줄서기, 예매 데이터 구조의 예시 선형 데이터 구조: Linked List, Stack, Queue, Array. 계층적 데이터 구조: 트리, 힙, 트리. 기타 데이터 구조: 해시맵, 그래프, 행렬. 상황에 맞는 자료구조를 선택하는 것이 중요하다!! 알.. 2023. 1. 18.
[자료구조]배열(순차리스트) 배열 (Array) 연관된 데이터를 연속적인 형태로 구성된 주고를 가진다. 배열에 포함된 원소는 순서대로 번호(index)가 붙는다. 배열의 크기는 고정되어 있지 않고 가변적인 것을 명심하자!! index가 number가 아니어도 된다. 자바스크립트의 Array는 HashMap에 가깝다. 배열은 객체로 분류되기 때문에 객체처럼 사용이 가능하다. (하지만 추천하지는 않음) 추가와 삭제가 반복되는 로직이라면 배열 사용은 권장되지 않는다. 배열은 요소를 추가/삭제하고 앞으로 당기고/ 뒤로 미루는데 선형시간이 소요된다.O(n) 배열의 크기는 고정되어 있지 않고 가변적인 것을 명심하자!! index가 number가 아니어도 된다. 배열은 탐색이 많은경우에 유용함. //배열 생성 let arr1 = []; cons.. 2023. 1. 18.

티스토리툴바