Age of Discovery

날짜 내용 이름 2024.02.02 초판 발행 위르겐 들어가기 전 코딩테스트를 위한 알고리즘 공부를 하면서 단순 배열을 이용했을 때는 시간초과로 테스트케이스에 통과 못했지만 다른 분들의 코드를 참고하여 set, map 객체를 썼을 때 통과되는 경험을 한 후 딥다이브로 공부한 부분을 요약하려고 한다. Set 객체란? Set 객체의 생성 요소 개수 확인 요소 추가 요소 존재 여부 확인 요소 삭제 요소 일괄 삭제 요소 순회 Set 객체란? Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 아래와 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 1. Set 객체..

자바스크립트에 딥다이브하기 위해 집에 고이 모셔두었던 모던 자바스크립트 Deep Dive를 다시 꺼냈다. 최근 들어 나는 공부가 많이 필요한 사람이다. 또한 깊게 공부해야 하는 사람이다. 라는 생각에 사로잡혀 있었는데 실천으로 옮기려고 한다. 그렇게 생각할만한 큰 계기가 있었지만 그 계기를 자세히 설명하기보다는 앞으로의 계획을 실천하는 데에 의의를 두고 싶다. 이 책을 읽기만 하면 재미없을 것 같고 기억에서도 금방 휘발될 예정이라 티스토리에 기록하려고 한다. 처음부터 끝까지 정독하는 것보다는 공부하는 동안 헷갈리거나 중요한 개념들 위주의 챕터부터 읽은 후 정리하겠다.

let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b); 위 코드를 실행해보고 주석을 해제한 후 왜 에러가 나는지 봐보자. 위 코드를 실행해보니 다음과 같은 결과가 출력됐다. 전역변수에 이미 선언된 변수가 있다하더라고 함수안에서 같은 변수를 새로 선언하고 할당하면 초기화되어 함수안에서만 사용할 수 있는 새로운 변수가 생성된다. 그리하여 console.log(b); hi(); console.log(b); 첫째 콘솔로그와 둘째 콘솔로그는 전역변수에 있는 값이 출력되고 hi() 함수를 실행했을 땐 그 안에서 할당된 변수가 출력되..

JS에서 함수를 선언하는 방법은 두 가지가 있다. function step_1 () {} 위와 같이 선언하는 방법은 함수선언문이고 let step_1 = function () {} 위의 함수 선언은 함수표현식이다. 두 함수 전부 기능은 동일하다. 다만 호이스팅의 영향을 받는지 안받는지의 차이가 있다. 함수 표현식먼저 살펴보자 바로 전 글에서 var와 let의 호이스팅에 대해 알아보았는데 이번 함수표현식에서도 같은 원리가 적용된다. var step_1 = function () { console.log('위르겐') } step_1() let step_2 = function () { console.log('위르겐') } step_2() 위 두 함수는 각각 var와 let으로 함수를 작성했으나 문제 없이 작동된..

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다. ​ function 함수(){ console.log(이름); var 이름 = 'Klopp'; } 이런 함수를 만들었다고 가정할 때 함수를 실행하면 콘솔에 이름이라는 정의되지않은 변수가 먼저 찍혀야하니 에러가 떠야한다. (원래대로라면) ​ 하지만 에러대신 undefined가 뜬다 ​ 그 이유는 function 함수(){ var 이름; console.log(이름); 이름 = 'Klopp'; } 자바스크립트라는 문법은 호이스팅이 일어나기 때문에 위의 함수처럼 인식을 하고 위에서부터 읽어내려간다. 그럼 var 이름;

이전 글에서 얕은복사와 깊은복사에 대해 간략하게 알아봤는데 이번엔 불변 객체를 만드는 법에 대해서 알아보자 let a = { name: 'ryu', hobbies: ['football', 'piano']} a.name = 'kim' console.log(a) // let a = { name: 'kim', hobbies: ['football', 'piano']} a라는 객체가 있는데 이름을 kim으로 바꿔준 후 다시 a를 출력하면 당연하게도 kim이라는 name을 가지고있는 a객체를 반환한다. 하지만 let a = { name: 'ryu', hobbies: ['football', 'piano']} Object.freeze(a) a.name = 'kim' console.log(a) // let a = { n..

원시형데이터와 참조형데이터에 대해 알아보았다. 이번엔 참조형데이터의 얕은 복사와 깊은 복사에 대해 알아보자 // Object의 얕은 복사 let object = {a:0, b:0, c:0} let object2 = object console.log(object.a, object2.a) // 0, 0 object2.a = 3 console.log(object.a, object2.a) // 3, 3 // 배열의 얕은 복사 const a = [1, 2, 3, 4]; const b = a; b[3] = 3 console.log(a) // 1, 2, 3, 3 console.log(b) // 1, 2, 3, 3 위 코드와 같이 object라는 객체에 데이터를 할당한 다음 object2라는 객체에 object를 할당..

원시자료형과 참조자료형 두 가지 데이터 타입이 존재한다. 원시자료형 기본자료형이라고도 불린다. 단 '하나'의 정보만 가지고 있다. number : 3.141592 string : 'Jurgen’ boolean : true & false undefined : 변수가 정의되지 않았거나 값이 없다. null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다. symbol 참조자료형 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다. 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다. 배열 – Array : [0,1,2,3,4] 객체 – Object {name : “Hana..

자바스크립트의 undefined와 null은 비슷하지만 다르다. undefined는 undefined라는 자료형을 가지고 있으며 null은 null이라는 자료형을 또 따로 가지고 있다. 그래서 콘솔창에 자료형을 명시해주는 typeof를 사용해보면 undefined의 타입은 undefined라고 나오고 null은 null이라는 자료형이 나와야하는데 쌩뚱맞게 object가 출몰한다. 이건 아직까지 고쳐지지 않고 있는 자바스크립트 초기버전의 버그이다. 정확히는 고칠생각이 없는 버그이다. 그 이유는 JS의 하나의 타입을 바꿔버리면 전 세계 수많은 프로젝트에 오류가 생길 위험성이 있고 더욱 더 웃긴 답변은 이런 자잘한 버그를 고치지 않는 것이 '자바스크립트의 정신'이라고 한다. JS는 정말 간지나는 언어다. 그럼..

프론트엔드 개발자를 목표로 한다면 자바스크립트(이하 JS)를 갈고 닦고 다듬어야한다. JS의 고유한 특성과 다른 언어들이랑은 다른 동작원리까지 현재 [자바스크립트란?]의 카테고리에 시리즈로 정리해보려고 한다. JS는 자바, C언어와는 다르게 '융통성'을 가지고 있다. 개발자들이 좀 더 편하게 사용할 수 있고 타자를 한 글자라도 덜 칠 수 있도록 해주는 언어이다. 변수선언을 예로 들어보자 아래의 코드는 JAVA의 변수선언이다. i라는 변수에 100을 할당해준다. int i=100; let, var, const를 무시하고 극단적으로 비교해보자면 JS는 아래와 같이 i = 100 간단명료하게 사용할 수 있다. (물론 이렇게 사용하는 개발자는 없다.) 또한 자료형을 비교할 때에 특히 고유의 특성이 드러난다. 1..

로컬스토리지란 무엇일까?? 사용자의 개인 브라우저에 저장하는 임시저장소이며 간단한 데이터를 담고 빼올 수 있어서 매우 편하며 반영구적이다. 로그인할 때도 개인 브라우저에 비번이랑 아이디를 저장해놓은다음 다음에 접속할 때 또 귀찮게 로그인을 안해도 자동으로 로그인이 되는 좋은 기능을 가지고 있다. 로컬 짱! 그럼 JS를 이용해 로컬스토리지에 데이터를 저장하고 빼와서 사용해보자. 아주 간단하게 할 것이다. 원리만 알면 된다! const local_data = 'data' const local_obj = [ { name : '강해상', age : 35 } ] const use_local = () => { localStorage.setItem(local_data, local_obj); } local_data라는..

const arr = [5, 12, 8, 130, 44]; const array2 = arr.findIndex( (element) => element > 20 ) console.log(array2) // 출력값은 3 축구선수를 영입하려다가 findIndex함수의 필요성을 느껴서 공부 후 포스팅한다. arr이라는 변수 안에 5가지의 숫자들이 있는데 이 각각의 값들은 element라고 지칭하겠다. array2라는 변수에는 arr이라는 배열 뒤에 findIndex를 붙인 후 콜백함수를 사용한다. findIndex의 파라미터는 element라고 임의로 칭하겠다. (파라미터이름은 어떤걸로 지어도 상관없다. 다만 의미를 제대로 부여해주는 것이 좋다.) 여기서의 element는 arr 배열의 각각의 값들이다 5나 1..

리액트 공부하다보니 말랑말랑한 바닐라 JS가 그리워져서 아주 간단한 랜덤이미지게임 하나 만들어 봤다. 호스팅 한 후 활동하고 있는 리버풀 팬카페에 배포했는데 반응이 아주 뜨거웠다 ^^ (그 이유는 아래에서 설명하겠다) . 멈춤 버튼을 누르면 랜덤으로 돌아가는 이미지가 멈추면서 한 사진이 고정되는 흔하디 흔한 랜덤게임이다. HTML과 CSS는 간단하니 생략하고 JS 코드를 첨부하겠다. const button2 = document.querySelector('.color-10'); const real_img = document.querySelector('.real-img'); const p_tag = document.querySelector('.div-p'); CSS로 꾸며준 버튼과 img태그 그리고 버튼을 ..

todolist를 대부분 로컬스토리지에 저장해서 배열비교로 클라이언트가 볼 수 있게 구현하는거같은데 ​ 로컬스토리지 하위호환인 쿠키를 사용해보면 어떨까 싶어서 도전해봤다. ​ 구글링을 아무리해봐도 투두리스트를 쿠키로 구현하는 사람은 없는것 같고 왠지 도전하는 사람이 내가 최초인거 같아 흥분된다. ​ 아직 만드는중이지만 로컬에 저장하는법보다 쿠키로 저장하는 방법 자체가 조금 까다로워서 생각보다 시간이 걸린다. ​ 조급해 하지말자 급한불부터 끄자

​ 할일 완료시 Done 함수를 이용한다. ​ function done_onclick(id, event) { axios({ url: `/todos/done/`, method: 'post', headers: { "content-type": "application/json", 'X-CSRFToken': getCsrfToken(), }, data: { 'id': id, }, }) .then(function(response) { let result = response.data['is_success'] if (result === true) { let event_target = event.target; let parent = event.target.parentElement; let parent1 = parent.p..