Tasha's devlog

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 기능 하나를 구현해 내는 데는 생각보다 손이 많이 간다. 코딩은 문제를 해결하는 방법을 배운다는 말이 이해가 간다. ​ 연구할 때 주제를 선정하고, 해당 분석 방법을 고르고, 적용하고 해석했던 것처럼 폼을 만드는 것도 보이게 하고, 입력이 가능하게 하고, 그것을 저장하게 하고, 어떤 언어를 사용해서 어떻게 보이게 할지(인사말)도 정해야 한다. ​ 확실한 것은 내가 무엇을 원하는지를 명확하게 알아야 한다는 사실이다. 이번 강의에서 처음 써 보는 태그인데 말 그대로 폼, 입력 양식을 의미한다. 로그인 창, 회원가입 폼이 해당되기에 앞으로 많이 사용할 것 같다. ​ 은 전체 양식으로 화면에 나타나지 않기에, 실제..

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ ​ 시계를 만드는 방법은 수십 가지이고(어쩌면 수백일지도), 개인마다 다르게 코드를 짠다. ​ 강의를 바탕으로, 매초 변화하는 "00:00:00"형태를 만들었다. (이미 10 미만은 앞에 0이 붙도록) 아무래도 읽기 편하려면 1. "13시"보다는 "1시"가 직관적이기에 12가 넘어가면 자연스럽게 "01"로 바뀌는 것, 2. a.m.과 p.m. 을 넣는 것을 어떻게 구현할지 고민했다. ​ new Date() 가 어떤 함수인지는 아직 모르겠지만, 뭐.. 돌아가면 된 거니까. ​ 외워서 바로 짜지는 못하더라도, 찾아서 응용하는 것이 코딩에 핵심이기에 이 정도로 만족한다. ​ 이전 강의에서 ``(백 틱)으로 str..

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 하나의 content에 여러 개의 기능들(예, 클릭 시 글자 색 변경, 컨텐츠 위에 마우스 커서 유지 등)을 따로 className을 부여하여 할당하면 어떤 것은 자동으로 뒤로(원래의 상태로) 돌아가지 않는다. ​ 따라서 classList를 사용하여 객체에 포함된 함수인 methods를 활용한다. add(), remove()가 자주 사용된다. 이때, 상태를 일일이 if (className === )로 부여하지 않아도 된다. 클래스를 답은 변수(hasClass)를 하나 만들고, 클릭해서 색이 변경되면 할당된 변수인 "CLICKED_CLASS"를 사라지게 하고, 사라지면 다시 추가되게 하는 함수 인 것이다. c..

... 장작 이틀 동안 고생하면서, 왜 JS가 적용이 안 되는지 고민했다. ​ 강의도 중간부터 못 들으면서 말이다. ​ 덕분에 오랜만에, 문제를 해결해 보겠다고 다양한 시도를 했다. ​ 구글, 유튜브 검색, Normad Coder와 Stack Over Flow 커뮤니티에 글도 남기고, 다행히 SOF가 나를 살렸다. 살려지는 경험(?)은 언제나 쪽팔리면서도 즐겁달까. 묻고 답해주는 커뮤니티가 활성화 된 개발 분야로 넘어오길 잘 했다는 생각이 오늘도 든다. ​ (ps. 문제의 원인은 ^^ 오타.. oh gosh..) ​ 기술 블로그의 첫 글은, 또 이 방법을 잊을 미래의 나와, 같은 문제를 겪을 다른 분들을 위해서 쓴다. ​ JS or CSS가 웹페이지에 적용이 안 될 때 ​ 1. 오타 확인 ​ 2. 캐시 ..

// "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ 오랜만에.. 데이터 구조.. 정처기도 따야 하는데.. 요새 정말.. 너무 게으르다. Hash Tables 매우 중요한 자료구조 Key Value System을 이용하여 자료를 정리. 예, 사전 ; 단어를 찾고 = key, 해당 단어의 뜻과 설명 = value ​ array는 선형 검색이라서 오래걸림. --> O(n) => name을 하나씩 비교해야 해서 n수가 증가하면 오래걸림 ​ hash table은 key랑 value만 있어서 --> O(1) => 어떤 메뉴를 찾아도 소요되는 스텝은 1개 array보다 엄청 빠름. array보다 value로만 작업하는 걸 선호함. true가 value가 되는 것 그러면 태국 찾는데 딱 1스..

/ "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ Big O는 알고리즘의 퍼포먼스를 이해하기 쉽게 효율적으로 작성하는 방법 but, 모든 알고리즘을 완벽하게 설명 x 같은 Big O를 갖더라도 퍼포먼스는 매우 다를 수 있음. ​ sorting 정렬: 뭔가를 정리하는 것 이진 검색처럼 빠른 검색을 하려면 무조건 배열을 "정렬"해야 함 buble, seleciton, insertion이 가장 빠른 정렬은 아니지만 일단 쉬운 것들임. 실제로 사람들이 정렬하는 방법과 유사함. 시간 복잡도 계산도 쉬움 ​ ​ 1. Buble Sort 버블 정렬 사실 딱히 좋은 알고리즘이 아니라서 많이 사용 x 근데 이해하기 좋음 맨 앞에 2개의 아이템을 선택하고, 그 2개 값을 비교함. 만약에 L, R..

// "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ Big O notation(표기법) ​ 알고리즘의 스피드를 표현하는 방식. 빠르다, 느리다, 초로 표현 x --> 완료까지 걸리는 절차(steps)의 수 so, 적을 수록 좋음. 예, linear search는 순서대로 해서, 10개면 10step 필요. => input size = N --> N steps => 선형 검색의 시간 복잡도 = O(N) ​ 1. Constant Time (상수 시간) => O(1) Array =["kimchi1", "pizza2", ... ,"galbi100"]; def print_first(arr): print(arr[0]) //kimchi1 이 코드는 배열의 수가 10개든 100개든 무조건 1..

// "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ 데이터 구조를 선택하는 것처럼 어떤 알고리즘을 선택할 지도 고민해야 함. 그 합이 중요하니까. 알고리즘은 작업을 실행하기 위한 단계의 리스트! 레시피처럼 시간 복잡도에 따라서 적은 step이 언제나 better ​ Search Algorithm Binary Search & Linear Search 검색을 최대한 빨리하는 것이 목적. ​ ​ Linear Search(선형 검색 알고리즘) 검색에서 가장 자연스러운 것, 어느 배열에서나 쓸 수 있음. 1번 아이템부터 순서대로 목표를 찾음. but, 최악의 시나리오는 찾는 항목이 배열에 끝에 있거나, 배열에 아예 없는 경우 => 배열이 커질수록 선형 검색을 하는 시간이 길어짐. => ..

// "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ time complexity, 시간복잡도 데이터 구조의 오퍼레이션 또는 알고리즘이 얼마나 빠르고 느린지 측정하는 방법. 초나 분같은 실제 시간 단위의 측정이 아님. 얼마나 많은 단계step이 있는 지로 측정하는 것. so, 단계가 적을수록 빠름! 만약 어떤 오퍼레이션이 5단계만 요구되면, 20단계가 요구되는 알고리즘보다 훌륭한 것. ​ meomory 메모리 관점에서 데이터를 보자. 2종류. volatile(휘발성) vs. non-volatile(비휘발성) 메모리 non-volatile(비휘발성) 메모리: 하드 드라이브 같은 것. 껐다가 켜도 데이터가 계속 있음. volatile(휘발성) 메모리: 램(RAM, random acc..

// "Normad Coder의 알고리즘과 데이터 구조 강의" 듣는 중// ​ 알고리즘(algorithm) = 여러 지시문의 합 부대 찌개 요리의 알고리즘(순서)와 같이 빠르고 효율적으로 만들어주는 지시문의 합이다. 예, path finder algorithm --> 네비게이션, compression algorithm --> 이미지를 손상없이 어떻게 압축하는 지 so, 내 코드에 가장 적합한 알고리즘을 적용한다면 더 좋을 듯. 데이터 구조(data structure) = 데이터를 정리하는 것 너무 종류가 많아서 언제, 어떻게, 정확하게 쓸 수 있는 지가 속도와 효율성을 높여줌. 예, linked list vs. arrays 4가지 상황을 염두 할 것: search, read , insert, delete..