Bleeding edge

1, 2, 3 는 수정사항 4, 5 는 앞으로의 계획 1. 다른 페이지들의 z-index를 건들다보니 스위치쪽이 css상으로 안보이는 현상이 있어서 스위치 쪽에 z-index을 추가했다. z-index를 건들때는, 다른 주변에 어떤 것들이 변하는지 확인을 잘해야할꺼같다. 2. observer intersection을 사용하려고하는데.. 다음과같은.. 문법 요류(SyntaxError)가 나왔다. 저 위치에서 console.log를 쳐보니, 옵저버의 대상이 되는 엘리먼트 값이 null로 뜨기 때문이었다. 임시로 #app container로 박스를 잡고, 나중에, 스크롤 감지를 해야하는 박스를 추가한다음에 다시 수정해야겠다. 3. 전혀 생각치 못한 에러가 있었는데.. 깃허브에서 이미지 주소는.. 내가생각하던 ..

firestore에서 주어진 기능인, limit를 잘못사용하여서 시간이 너무 많이 소모되었다.. ㅠㅠ 우선 firestore의 limit을 한번 혹은, 똑같은 index 0부터 limit까지 출력하는데는 전혀 지장이 없지만, startAt이나 startAfter 와 같이, 몇 개 이후부터 보여줄것! 을 사용하려고하면, orderBy와 같이 기준을 만들어야 한다. 이때 주의해야할 것은 firestore내에서, 색인을 설정을 안하면 아래와 같은 error가 뜬다는 것이다. 사실 밑에 console.firebase.google ...를 누르고 색인 설정을 할 수가있는데.. 다른 메소드를 잘못사용한줄알고 이리저리 시도하다가 시간을 좀 많이 허비했다.. ㅠㅠ 지금 내가 사용하려고하는 startAt같은 경우, li..

만들다보니 너무 반복적인 내용이 너무 많이나와서.. 공부보다는 그냥 반복작업을 하는거 같아서 파이어 베이스에서 간단하게 카테고리별로 메뉴가 나오게하고, 무한스크롤을 넣을까.. 생각중이다.

For Frontent Favorites 일명, 프론트엔드를 위한 즐겨찾기 깃페이지를 만들려고 한다. 어떤 내용을 넣을까애 대해서는 일주일정도 고민을 했다. 그리고, 어떤식으로 만들까에 대해서도, 고민을 해야하는데, (지금 진행하고있는 IFBAEMIN에 대한 피드백이 어떤식으로 만들까를 너무 이리저리 움직여서 시간이 더 지연됬다고 생각한다) 이 고민하는데 일주일이 걸린거 같다. 1. 내가 이번에 다루고 싶은것은 JSON 파일 정리이다. 즉, 내가 필요한 JSON 파일을 업데이트하여, 사이트에 알맞게 뿌릴 것이다. 2. Button copy를 사용할 것이다. 사실 뭐 다른거 안들어가니? 라고 할 수도 있는데 이번프로젝트는, 내가 CSS 및 다른 JAVASCRIPT, HTML을 만들 때, 공부한다고 하긴 그..

1. extends HTMLElement with click 음.. 요기서 시간을 엄청 먹을줄은 몰랐는데.. custom element 에서, addeventlisener을 넣는데 자꾸 parameter 2에 대한 에러가 계속 떴다. 그래서 지금 내가 사용하고 있는 extends HTMLElement에 다른 적용법이 있나 검색하다가 connetedcallback에 onclick을 넣은 예제를 발견했다. export default class Login extends HTMLElement { connectedCallback() { this.innerHTML = ` `; this.querySelector('.remove').onclick = e => this.classList.toggle('closed'); ..

메인페이지 CSS를 어느정도 세팅을 다했다. 중간에 만든걸 주변사람에게 보여줬는데, 주소 설정은 되니?! 라고 이야기를 듣자말자 카카오에 있는 주소 api를 붙여야지 하고 했었는데, 작업을 before, after 을 두개 나누다보니 카카오에서 기존에 주던 예제들과는 다르게 id가 충돌이나서 살짝 애먹었다.. 흑.. 그리고 아무래도 parentElement를 사용을 하려고해도, 너무 상위쪽이라.. 쓰기도 어려워서 className을 넘겨줘도 되는 위치에서 값을 이동해서 마무리를 했다. 이전에, z-index가 높고 낮을때 문제가 생기던 것도 해결 할 수 있어서 좋았다.

를 사용하였을 때, auth.currentUser에 대한 값이 null이 나와서 계속 순서가 잘못됬나 하고 script의 순서를 바꾸다가 우연히 script app의 type을 module로 했다는 것을 보고 혹시나 몰라서 type="module"을 추가로 넣었더니 null로 잡히던 user가 제대로 작동했다 그래서 script type module이 뭔지 알아봤더니 브라우저가 모듈로 인식해야 import / export 를 사용할 수 있습니다. 라는 글을 읽게 되었다. https://2dubbing.tistory.com/83 javascript ES6 모듈(Module) # 모듈 ES6 에서 처음으로 모듈에 대한 표준이 도입되었습니다. ES5 까지 javascript 에는 모듈에 대한 표준이 없었습니다..

프로젝트에서 해보고픈 기술들과, 어떤걸 넣을지 방황을 살짝 하다보니, 어디에 뭘쓰는지 계획하는데 PUSH를 많이쓰는것 같다. 이건 아직 좀 무지해서 생기는 일에, 계획이 부족했다고도 반성할 수 있지만.. 아직 뭐에 뭘쓰는지 잘모르니까, 이번 기회에 언제 뭘 쓸 수 있는지 공부해 보면서 만들어 봐야겠다 이전에 사용한다고 했었던 COMPONENT는 황준일님의 것을 본따서 할까 했는데, 그냥 그파일 자체를 너무 쓰는 것 같아서.. 뭔가 react.js를 호출하는 느낌이 들다보니 차라리 js에서 제공해주는 것들을 모아서 만드는게 나을 꺼같다고 생각했다. shadow dom이라던지 아니면 다른 compnent 대체가 가능한 것들로 만들것 (메모오..) 그리고 황준일 님의 블로그에서는 component에 대해서도 ..

첫 번째 벽이 생겼다.. javascript 로 web component를 써보고 싶었는데, web component의 개념을 잘못 알고 있었던거같다. 내가 web component를 javascript의 개념은 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io 이 주소에서 ..