Age of Discovery

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

비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로..

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

드디어 해결했다.. 문제가 안풀릴수록 단순하게 생각할 필요가 있는데 고민이 꼬리에 꼬리를 물다보니 스스로 어렵게 꼬아버린 느낌이다. 의도했던 건 단지 리스트가 하나씩 사라지게 하고싶었을 뿐인데 먼 길을 돌아왔다. 위 사진 각각의 리스트가 1부터 5까지의 value를 가지고 있는게 보인다. 이 리스트 하나하나에 보이지 않는 index값을 부여하기 위해 생성 될 때 마다 현재 리스트 배열의 길이에 +1을 index값으로 지정해줬으니 1부터 5까지의 value를 갖고있는 리스트의 index도 매칭되어 1부터 5까지 순서대로 하나씩 가지고 있다. 저기서 만약 3을 지운다면 1,2,4,5가 남고 index도 1,2,4,5가 남는데 이 상태에서 input창에 하나를 추가로 입력하면 배열이 4개남아있으니 index가..

리액트 공부하다보니 말랑말랑한 바닐라 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태그 그리고 버튼을 ..

​ 할일 완료시 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..

Update 함수는 위 사진과 같이 작동한다. ​ ​ ​ function change_input_onclick(id, event) { // 1. 해당 노드의 정보 받기. // 2. 그 노드를 인풋 텍스트로 바꾸기 // 3. 버튼도 이제 수정완료로 바꾸기. !! 온클릭 이벤트 제대로 연결줘야함 let Edit_button = document.createElement('button'); let new_input = document.createElement('input'); let current_input = document.querySelector('.new_input'); let event_parent = event.target.parentElement; let thirdNode = event_parent..

Delete_onclick 함수는 다음과 같이 작동한다. ​ ​ function delete_onclick(id, event) { // 1. 해당 노드의 정보 받기 // 2. 비동기 통신 보내기 // 3. 성공하면 해당 노드 지우기. //4. 실패하면 안되게 하기 axios({ url: `/todos/delete/`, 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 eve..

HTML파일에 장고템플릿을 입혀서 사용해야했고 덕분에 장고템플릿 사용법을 아주 약간 익혀야했다. (자바스크립트와 유사했고 구글이 있기 때문에 수월했다.) ​ 다음은 장고템플릿을 입힌 HTML 소스코드이다. 추후 나올 자바스크립트 소스코드를 보다 쉽게 이해하게하기 위해 첨부한다. ​ To do 오늘 할 일 {% csrf_token %} Add {% for i in todolist %} {% if i.is_completed == True %} {{i.todo}} {% else %} {{i.todo}} {% endif %} {% endfor %} ​ ​ ​ ​ ​ ​ 자세한 동작원리는 잘 모르지만 백과 연동하기 위해서는 HTML파일을 동적으로 만들어 줄 필요가 있다. 장고템플릿 for문을 통해서 데이터를 전달..

대부분의 개발자 지망생들이 으레 그렇듯 나 역시 첫 프로젝트를 To-Do-List로 완성했다 ​ 어느정도 자바스크립트를 배웠다고 생각하고 호기롭게 시작했으나 프로젝트를 진행하면서 배운 것들이 훨씬 많았다고 단언할 수 있겠다. ​ ​ 백엔드 개발자로 일하시는 분을 대학교 지인을 통해 알게 돼서 투두리스트를 만드려면 도와줄테니 백이랑 연동해서 해보는게 어떻겠냐는 질문에 둘도없는 기회라 생각했고 바로 시작하게 됐다. ​ ​ 비동기통신으로 연결한 자바스크립트 To-Do-List ​ ​ 완성된 모습을 먼저 보이자면 위와 같다. CRUD 기본기를 다지는데에 이만한 프로그램이 있을까 싶을 정도로 간소하지만 알차게 구성된 프로젝트다. ​ 투두리스트를 만들면서 JS뿐만 아니라 ​ CLI 사용법 서버통신에 대한 약간의 이..

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