본문 바로가기

Daily/Today I Learned89

201229_TIL 🍎 오늘 배운 것 ✔️ Underbar ~Part2 Javascript 라이브러리 중 배열, 객체를 다루는 Underscore.js의 함수들을 하나하나 직접 구현해봤다. 하루종일 하드 트레이닝한 덕분에 쓸 때마다 헷갈리던 forEach나 map, reduce 같은 배열 내장 메서드의 원리를 이해하고, 사용하는 데 자신감이 좀 생긴 것 같다..! ✔️ sort() 내장 메서드 sort()는 배열 요소들을 적절하게 정렬한 후, 그 배열을 반환한다. arr.sort([compareFunction]) 와 같은 방식으로 사용하는데, 정렬 순서를 정의하는 함수인 compareFunction은 생략 가능하다. 이 함수가 생략되면 배열의 요소들은 문자열로 취급되어 유니코드를 기준으로 정렬된다. compareFuncti.. 2020. 12. 30.
201228_TIL 🍎 오늘 한 것 ✔️ twittler - 랜덤 데이터 불러오기 Math.random()을 이용하면 난수를 생성할 수 있고, Math.random() * (max - min)) + min 으로 난수 생성 범위를 지정할 수 있으며, Math.floor로 그 범위를 정수로 지정할 수 있었다. 이렇게 만든 난수를 배열의 인덱스로 사용해서, 기존의 데이터 배열에서 랜덤 데이터를 추출해 불러오도록 만들었다. ✔️ twittler - 좋아요, 싫어요 버튼 추가 새로 업로드되는 게시물에 있는 버튼은 클래스명이 겹쳐 작동하지 않는 문제가 있었다. 어제부터 여러 시도를 해보다가 결국 selectorAll과 반복문을 사용해 해결했다. selectorAll은 선택된 요소들을 배열 형태로 반환해주기 때문에, 반복문을 사용하면 .. 2020. 12. 29.
201227_TIL 🍎 오늘 한 것 ✔️ twittler 좋아요, 싫어요 버튼 추가하기 각 게시물들에 좋아요, 싫어요 버튼을 추가했다. HTML, CSS 까지는 마치고 Javascript를 통해 새 게시물이 등록될 때마다 버튼이 함께 생성되고, 게시물의 데이터 객체에도 좋아요개수, 싫어요개수를 세는 속성을 추가하는 것 까지 마쳤다. 그런데 event.target을 썼을 때 클래스명을 모든 버튼들이 공유해버려서 타겟 설정이 안되는 문제가 있었다. 이 부분을 마저 개선하는 중이다. 아래와 같은 시도들을 우선 해봤고, 세 번째 시도는 내일 마저 해보려고 한다 시도 1. 각각의 버튼에 id값이 추가된 클래스를 추가로 부여하기 (btn1, btn2 ...) 시도 2. selectorAll로 반환된 배열, 반복문을 이용하기 시도 3... 2020. 12. 28.
201224_TIL 🍎 오늘 한 것 ✔️ 회원가입 유효성 검사 회원 가입 창을 만들어, 아이디와 비밀번호를 원하는 형식(8자리 이상, 특수문자/숫자/영문 포함 등)에 맞춰 입력하는 경우에만 회원가입이 완료되고, 아닌 경우에는 피드백을 해주는 유효성 검사 페이지를 만들었다. 조건은 특정한 형식을 만족시켜야 했기 때문에 정규표현식을 이용해 작성했다. 다시 입력하라고 피드백을 주는 부분은 classList.add와 classList.remove 를 이용해 피드백용 스타일이 적용된 클래스를 추가했다가 제거하는 식으로 작성했다. ✔️ twittler 실시간 업로드 원래는 하드코딩으로 html에서 하나하나 입력하는 식으로 게시글들을 작성해뒀어서 실제로는 아무것도 실행되지 않는 목업파일에 불과했다. 오늘은 객체 형식의 데이터를 이용해 .. 2020. 12. 25.
201223_TIL 🍎 오늘 배운 것 ✔️ Javascript 데이터 구조 이해하기 자바스크립트의 전반적인 데이터 구조를 이해하려고 변수 개념부터 차근차근 정리했다. 사실 변수는 정말 기초적인 개념이라 생각하고 대충만 알고 넘어갔는데, Javascript에 대해 깊게 알아갈수록 변수의 동작 원리와 관련된 복잡한 개념들을 마주하게 되는 것 같기도 하고, 변수는 ㅇㅇ이다! 라고 한마디로 어떻게 설명해야 할지 잘 모르겠어서 다시 정리해야할 필요성을 느꼈다. 이를 바탕으로 데이터 타입, 복사 과정에 대해서도 다시 공부했는데 확실히 각각 알았던 개념들이 합쳐지는 느낌이었다. ✔️ Primitive, Reference Type는 사실 모두 참조형 원래 '기본형은 값을 복사, 참조형은 주소값을 복사'한다고 배웠는데, 사실 더 엄밀하게 .. 2020. 12. 24.
201222_TIL 🍎 오늘 배운 것 ✔️ 가독성 좋은 코드 작성법 요새 코드를 누가 봐도 직관적으로 이해할 수 있고, 읽기 편하도록 하려면 어떤 식으로 작성해야 하는 지에 대해 고민하고 있었는데, 드디어 오늘 이 주제에 대해 공부하게 되었다. 물론 딱 정해진 방식이 있는게 아니라 사람마다 취향이 반영되기도 하고, 좀 달라도 모두 정상적으로 작동하기 때문에 지장은 없다. 하지만 협업이 필수적인 개발자에게 있어서, 빠르게 읽을 수 있는 깔끔한 코드는 소통 과정에서 생기는 비용을 줄여준다. 가이드 라인들을 보니까 지금까지 써왔던 습관들 중에서도 고칠 것들이 있어서 오늘 코드를 작성할 때는 반영해보려고 노력했다. 🙌🏻 ✔️ Coplit (Algorithm Basic) 20문제 풀기 알고리즘 문제를 쭉 풀어보면서 지금까지 배웠던 .. 2020. 12. 23.
201221_TIL 🍎 오늘 배운 것 ✔️ 일급객체, 고차함수 일급객체 = 변수에 할당 가능(함수표현식), 다른함수의 parameter로 전달 가능, 다른함수의 결과로 return 가능 고차함수 = 함수를 parameter로 받거나, 함수를 return하는 함수 ✔️ 내장 고차함수 : filter, map, reduce filter = 특정 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환하는 메서드 map = 배열의 모든 요소에 동일한 함수를 적용해 새로운 배열로 반환하는 메서드 reduce = 누산기에 계산을 누적한 하나의 결과값을 할당해 반환하는 메서드 ✔️ 삼항 조건 연산자 condition? exprIfTrue : exprIfFalse 형태로 사용한다. condition(조건)이 true이면, exprIfTru.. 2020. 12. 22.
201218_TIL 🍎 오늘 한 일 ✔️ Twittler 목업 구현 Javascript없이 HTML, CSS로만 웹페이지 목업을 구현했다. twitter와 비슷하게 만들어보고자 했는데, 하다보니 새로 알게된 개념들이 많아서 기억할만한 개념들은 따로 블로깅해두었다. 이번에는 대부분 flex로 구현했는데, 다음 프로젝트에서는 grid도 좀 더 익혀서 사용해봐야겠다. 얼른 Javascript도 적용해서 진짜로 작동하게 만들고싶다!!! 🍎 기억할 것 ✔️outline:none; input등 입력을 받는 태그를 누를때 생기는 윤곽선 제거해주는 속성 ✔️box-sizing : border-box; box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 기본적으로 요소에 border가 있는 경우, 요소의 widt.. 2020. 12. 19.
201217_TIL 🍎 오늘 배운 것 ✔️ Selector의 다양한 종류와 쓰임 기본적인 class, id 셀렉터 외에도 속성에 조건을 걸어 선택하는 셀렉터, 여러개의 셀렉터를 혼합해서 만든 셀렉터를 사용하는 방법에 대해 공부했다. 지금까지는 무리없었지만 웹페이지에 요소들이 이것저것 복잡하게 추가되면, 원하는 곳만 딱 선택해서 디자인하는 것이 쉽지않을 것 같다. 하위 선택자와 자식 선택자, 인접 형제와 일반 형제...비슷비슷한 개념들이 있어서 헷갈리기도 했지만 셀렉터을 잘 활용하면 분명 도움이 될 것 같다. ✔️BEM(Block-Element-Modifier), Atomic CSS 방법론 웹페이지의 와이어프레임을 설계하면서, class나 id의 이름을 잘 지어두면 협업하는 다른 사람들이 봤을 때도 어떤 역할을 하는 요소인지.. 2020. 12. 18.
201216_TIL 🍎 오늘 배운 것 ✔️ Command Line Interface(CLI), 명령어 자주 사용하는 명령어들에 대해 배우고, GUI를 이용하는 대신 CLI만을 이용해 위치를 이동해 파일을 생성하고, 편집해봤다. .code 명령어를 이용해 VSCode 에디터를 통해 편집하기도 했다. 아직 완전히 익숙해지지 않아서 불편한 점이 있기는 하지만, 빨리 익숙해지기 위해 최대한 GUI 대신 CLI를 사용해보도록 해야겠다. 예전에 뭔가를 설치하다가 에러가 나서 검색해보고 그대로 따라한 적이 있었는데, 그 때 sudo 명령어를 썼던 기억이 난다. 그 때는 뭔지도 모르고 따라 치기만 했었는데, sudo의 su가 super user을 의미한다는 것, 그리고 관리자 권한으로 실행하는 것이기 때문에 최대한 사용을 지양해야한다는 .. 2020. 12. 17.
201215_TIL 🍎 오늘 한 일 ✔️ Primitive Type, Reference Type 공부/정리 데이터의 저장과 관련된 Primitive Type, Reference Type에 대해 공부했다. ===에 대해 공부하면서 깊은 복사와 얕은 복사에 대해서도 궁금했는데 이 두가지 Type의 차이점을 이해함으로써 정리가 되었다. ✔️ Scope, Closure 개념 공부 선언한 변수가 대체 어디서부터 어디까지 사용될 수 있는지 헷갈렸는데 Scope에 대해 공부하면서 정확하게 알게 되었다. 그리고 덕분에 let, const, var 개념도 연장선으로 확실하게 이해할 수 있었다. 사실 대충만 알고 있어서 모르겠을 때는 let만 거의 사용하곤 했는데 이제는 이유를 알고 상황에 맞게 사용할 수 있을 것 같은 자신감(?)이 생겼다.. 2020. 12. 16.
201214_TIL 🍎 오늘 한 일 ✔️ Javascript 배열(Array), 객체(Object) 공부 배열과 객체 모두 여러개의 요소들을 한 번에 다룰 수 있기 때문에, 이 두 가지를 좀 더 능숙하게(?) 사용할 줄 알게 되면 전보다 훨씬 간결하고 관리하기 쉬운 코드를 작성할 수 있을 것 같은 느낌이 든다. ✔️ 실용주의 프로그래머 읽기 - 다른 누군가와 '시너지'를 내고싶다면 가벼운 요구를 하거나 호기심을 이끌어냄으로써 참여하도록 만들어야 한다. (변화의 촉매가 되기) - 많은 사용자들은 완벽한 프로그램을 위해 일 년을 기다리느니, 차라리 오늘 당장 좀 불편한 소프트웨어를 사용하고 싶어 한다. 그렇다고 너무 엉망이어서는 안된다. '적당히' 언제 멈춰야 하는지 아는 것은 중요하다! - 지식에 대한 투자가 언제나 최고의 .. 2020. 12. 15.
반응형

티스토리툴바