깃허브 블로그 만든다고 퇴근하고 맨날 삽질한것같다. 이젠 그만하고 일할 때 필요한것들 공부해야겠다.... 요즘 블로그 만드는것을 포함해서 거의 하루도 안쉬고 공부하고 있다. 취준때도 이 정도는 아니었는데... 아무래도 내가 해야 할 공부가 명확해지다 보니까 방향이 잡혀서 그런것같다. 이대로 최소 1년은 죽은듯이 공부해봐야지.... 뭐 공부한다곤 하지만 자주 먹고 다니기도 했다. 어디껀지 기억안나는데 맛있다. 구의에 있는 라멘다이야 라는 곳이다. 여기두 꽤 맛있었음.... 주말에 한번 더 가야지 ㅎㅎ 요거슨 코스트코의 애플파이.... 꿀맛이다. (두개 이상 먹으면 좀...질림) 천호의 스파게티스토리... 낫배드하다. 스파게티생각날때 오면 갠춘한듯? 그냥저냥 먹을만함 집에 빵이 쌓여간다.... 내가 반 이상..
마포역에 오면 꼭 가는 곳이다. 일상 블로그로 전환하고 첫 글! 글을 작성하기 전에 밝히자면, 나는 우동에 미쳐있다. 정확히는 면에 미쳐있긴하지만... 그 중에서 우동을 정~말 좋아한다. 떡볶이 먹으면 살 찐다더니 난 우동때문에 살 찌게 생겼다. (이미 뚱뚱하지만...) 여튼! 본론으로 들어가자! 쪼끔 구석에 있다. 생각해보니까 메뉴판을 안찍었네... 메뉴는 명란버터우동 자루우동 붓카게우동 카레우동 니꾸우동 굴우동 (계절메뉴) 납작우동 돈카츠 정도가 있다. 그 중에 나는 니꾸우동, 카레우동, 붓카게우동, 납작우동, 돈카츠 정도를 먹어봤다. 일단 이 집의 시그니처 메뉴는 납작우동이다. 진 짜 맛 있 다 말이 뭐가 필요한가. 사진 간다. 말 대신 사진으로 설명 끝 저 고운 떼깔을 보라... 자신이 우동을 좋..
지금 사용하는 이 티스토리를 일상 블로그로 전환하고, 기술 블로그로 깃허브 블로그를 만드는 중이다. 그런데 값을 복사하려고 전개연산자를 사용하는데 뭔가 이상했다. 이 코드의 출력 값은 무엇이 나올까? const obj1 = { a : 1, b : 2, } const obj2 = {...obj1}; console.log(obj1 === obj2); // ? 답은 false다. 뭐 당연한거다. 전개연산자로 분해했다가 다시 만들었으니 참조가 풀린 것이다. 이렇게 보면 마치 깊은 복사가 된 것 같지만... 사실은 가장 겉부분만 깊은 복사가 이루어진 상태다. 이번엔 내부 값까지 확인해보자. const obj1 = { a : 1, b : 2 }; const obj2 = {...obj1}; console.log(ob..
최근에 자바스크립트에서 replaceAll을 지원하기 시작했다. 하지만 그건 어디까지나 브라우저에서 제공하는거고.... node는 얄짤없다. replace에 정규식을 쓰도록 하자..... 추가사항 (2022-05-04) Node v15부터 replaceAll을 지원한다!
페이지이동 이걸 몰라서 한참 헤맸다... 왜 안되나 했네 @click이 아니라 @click.native로 작성해주어야 한다.
이번 과제를 진행하면서 배운 것들을 기록하려 한다. Express는 Node를 위한 웹 프레임워크이다. (라이브러리가 아니다. 주의!) node가 설치되어 있다는 가정하에 진행하겠다. 1. package.json 파일 생성 npm init or npm init -y 위의 명령어들 중 하나를 Terminal에 작성해주면 package.json이 생성된다. -y 를 붙여주면 자동으로 package.json을 작성해준다. package.json는 프로젝트의 패키지 목록을 관리하고 추가 스크립트를 작성하는 파일이다. package.json를 다루려면 내용이 너무 길어지므로 일단 생략하겠다. (해당 프로젝트에 사용하는 설정, 플러그인 등이 무엇인지 기록해두는 곳이라고 보면 된다.) 2. express 설치 npm..
Web Storage란? 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공하는 API Web Storage의 종류 Web Storage는 sessionStorage, localStorage 두 가지가 있는데, 이름 그대로 세션과 로컬에서 동작한다. 또한 Window 객체를 통해 사용할 수 있다. ex) Window.sessionStorage, Window.localStorage sessionStorage 페이지 세션에 한정해서, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다. 데이터를 절대로 서버로 전송하지 않는다. 저장 공간이 쿠키보다 크다. (최대 5MB) localStorage 유효기간 없이 데이터를 저장하고, Javascript를 사용하거나 캐시 또는 로컬 저..
이벤트 위임 (Event Delegation) 이벤트 위임이란 동적으로 하위 노드를 생성하고 삭제할 때, 상위 노드가 하위 노드들의 이벤트를 직접 탐지하고 관리하는, 디자인 패턴 중 위임 패턴을 뜻한다. 같은 이벤트를 노드 개수만큼 걸어주는 대신, 상위 노드에게 이벤트를 걸어주는 것이다. 이해가 안될 수도 있어 예제를 준비했다. 이벤트 버블링이나 캡처링을 알고 이벤트 위임을 공부하는 것이 맞지만, 일단 실전부터 해보자. 코드 예제 위의 예제처럼 parent라는 div에 child를 1000개 만들었다고 해보자. child 버튼에 이벤트를 걸어주고 싶다면 class 선택자를 이용해서 반복문으로 1000개의 요소에 이벤트를 생성해주면 된다. javascript 실행 이후 button이 1000개가 있다면 이..
text-overflow : 텍스트가 영역을 넘어가면 어떻게 할지 결정해줌 [display : -webkit-box] => 아래 속성들을 사용하기 위해 작성해줌 -webkit-line-clamp : 영역 내의 최대 라인 수를 결정한다. -webkit-box-orient : 영역 박스 내의 정렬 방향을 정해줌 div { overflow: hidden; /* 영역 밖으로 나간 컨텐츠를 안보이게 숨겨줌 */ text-overflow: ellipsis /* 영역 밖의 텍스트를 말줄임으로 표시해줌 */ display: -webkit-box -webkit-line-clamp : 3; /* 3줄만 나타냄 */ -webkit-box-orient : veritcal /* 정렬을 수직으로 해줌 */ }
요즘 자바스크립트로 Component를 직접 구현하고 있다. 구글링으로 다들 어떻게 했는지 찾아보는데 다들 addEventListener를 사용할 때 querySelector를 사용하더라. "getElementById나 getElementsByClass는 왜 사용안하지...?" 라는 생각이 들어서 직접 사용해보았다. Uncaught TypeError: this.target.getElementById is not a function at Template.setEvent (Template.js:16) at new Component (Components.js:8) at Template._createSuperInternal (app.js:28) at new Template (Template.js:3) at in..
코틀린을 배워보며 안드로이드 앱을 만드는 와중에 기본으로 제공했었다는 kotlin-android-extensions 라는 플러그인이 더 이상 기본 제공이 되지 않는다고 한다. 그래서인지 자동으로 작동되지가 않더라. (처음에 이유를 몰라서 삽질 좀 함....) 구글링해보니 편하긴 하지만 좋은 플러그인이 아니라고 한다. (왜..?) 여튼... 안드로이드 4.1 버전부터는 'kotlin-android-extensions'가 기본적으로 제공되지 않는다고 한다. 왜 더 이상 사용하지 않을까? kotlin-android-extensions은 findViewById의 반복적인 작업을 제거하려고 만들어졌고, 내부적인 캐시를 통해 재사용성을 높인다고 한다. 하지만 RecyclerView의 ViewHolder에서는 그렇지..
카카오맵 API를 호출하면 아래와 같은 에러들이 뜬다. 구글링을 해본 결과 안드로이드P (api 28) 부터는 보안정책이 강화되어 HTTP 트래픽을 차단한다고 한다. 우리는 항상 에러 내용을 구글링하지만, 구글링하기 전에 에러 내용부터 파악할 필요가 있다. (요즘 특히 느낀다... 읽어보면 대강 파악이 됨) Cleartext HTTP traffic to ot1.maps.daum-img.net not permitted 음... Cleartext HTTP traffic이 허가되지 않았다고 한다. 그럼 뭐 허용해주면 될텐데, 찾아보니 이런 방법이 있다고 한다. 1. android:usesCleartextTraffic="true" AndroidManifest.xml의 에 android:usesCleartextT..
