전체 글53 자료구조 - 배열 (Array) 배열은 같은 타입의 순서가 있는 자료구조이다.- 배열은 동일한 타입의 원소들을 메모리상에 연속적으로 저장한다.- 각 원소들은 동일한 데이터 타입을 가지고 있다.- 배열은 크기를 가지고 있어서 배열에 데이터 원소가 얼마나 들어있는지 알 수 있다.- 특정 데이터가 배열의 어디에 있는지 알려주는 숫자인 인덱스가 있다.- 인덱스로 각 요소에 빠르게 접근할 수 있다. 컴퓨터는 배열을 할당할 때 어떤 메모리 주소에서 시작하는지 기록해 둔다. 그래서 시작 메모리 주소에서 얼마나 떨어져있는지로 배열의 값에 바로 바로 접근할 수 있다. 선형 검색 (linear search)메모리 주소에는 한 번에 접근할 수 있지만, 각 메모리 주소에 저장된 값은 쉽게 알 수 없다. 그래서 특정 값이 배열 안에 있는지 확인하려면 배열의 .. 2024. 7. 12. 자바스크립의 값과 참조값의 얕은 복사와 깊은 복사 undo & redo 구현중에 인스턴스 상태를 저장하는 코드를 작성해야 해서 얕은 복사와 깊은 복사를 좀 더 심도 있게 공부하고자 오랜만에 블로그를 켰다 ,, 먼저, 자바스크립트의 값은 원시값과 참조값 두 가지 데이터 타입으로 나뉜다. 원시값 Number String Null Undefined 참조값 Object Symbol 원시값은 기본 자료형(단순 데이터)을 의미한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되고, 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다. let a = 'b'; a = 'c' console.log(a) //'c' 원시값을 복사해서 다른 값을 입력할 경우, 원시값은 또 다른 독립적인 메모리 공간에 할당하기 때문에 기존 원시값을 저장한 변수에.. 2023. 6. 10. Template literals 구현 (2) - Web Component Web Component : 웹 컴포넌트는 JavaScript, CSS, HTML들을 컴포넌트화하기 위해 필요한 4개의 표준을 묶어서 부르는 이름이다. 웹 컴포넌트가 등장한 배경이 흥미로운데, 수 많은 자바스크립트 프레임워크들이 쏟아져 나왔을 때 구글은 프레임워크의 단점들을 보완하기 위해서는 브라우저 기능과 적절히 섞어 사용해야 가볍고 성능 좋은 APP을 만들 수 있다며 권유했다. 아무런 의심 없이 프레임워크를 사용하고 있던 나에게 적잖은 깨우침을 주었다랄까.. (!) 구글과 페이스북을 포함한 프레임워크 제작사들은 React vs Web Component가 아닌 Web Component With React, Angular, Ember의 뉘앙스로 글을 쓰고 있다고 한다. 프레임워크 Component와 비교.. 2023. 2. 14. Template literals 구현 (1) - Selection과 Range Template literals를 구현해 볼까 하고 시작한 일이 어언 2주 가까이 흘렀다. (말이 Template literals이지 멘션 기능과 흡사.) 시작할 때는 이렇게까지 시간이 오래 걸릴 줄 몰랐다. (당연함) 2주 동안 골머리를 싸맸기 때문에 꼭 아카이브로 남기고 싶었다. 내가 구현한 걸 간단히 설명하자면, 특정 구분자(#{)를 사용했을 때 div 태그 안에 span 태그를 추가하여 새로운 range를 만들고, 그 range안에 입력된 값에 대한 유효성 검사를 실시하고 오류가 있을 시 오류 메시지를 출력해 주는 기능이다. 위에 gif 이미지를 보면 알 수 있듯이 미리 정의해 둔 변수는 variable1과 variable2이다. variable1과 variable2가 아닐 경우 그리고 잘 못된 .. 2023. 2. 7. React Router ! react-router-dom@5.3.0 React Router - Router, Switch, Route import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; import Home from '../src/routes/Home'; import Detail from '../src/routes/Detail'; function App() { return } react-router-dom의 BrowserRouter, Switch, Route 태그를 통해 URL과 컴포넌트를 연결 한다. Route 태그의 path 속성에 URL을 적고 component에 import에서 불러온 컴포넌트를 집어 넣는다. React Router 적용은 보.. 2022. 11. 21. React Effect Hook useEffect ? useEffect 함수는 Component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 실행할 수 있도록 해주는 Hook이다. 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것. 사용 방법 * 기본 형태 : useEffect(function, deps) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열이 들어간다. 1. 함수 불러오기 import {useEffect} from 'react'; 2. Component가 Mount 됐을 때 실행 useEffect(()=>{ console.log('마운트 될때만 실행~');.. 2022. 11. 7. 이전 1 2 3 4 5 6 ··· 9 다음
