Bleeding edge

고민한 이유 Single Page Application을 만들다가, 서버에서 모든 Single Page Application에 대한 초기 정보를 저장하는 것이 너무 부담되어서, Local Storage에서 초기 State를 관리하기로 하였다. 이 문제를 해결하기 위해 만났던 문제들 nextjs에서 localStorage is not defined 이 문제는 nextjs에서는 window가 undefined인 순간이 있을 수 있는 nextjs에서 나올 수 있는 케이스로 해결 방법은 심플하다(단지 언제 undefined 인지 시점을 지정하는게 타이트할수록 번거로울 수 있다..) function App(){ if(typeof window==="undefined") return //...localStorage에..

문제가 생기는 이유 특히 싱글페이지로 웹을 개발하는 경우에 많이 만날 수 있는데, 100vh를 적용하면 모바일에 알맞지 않게 나오는 현상이 있다. 이 이유는 device의 높이를 잡을 때 주소창과 같은 dynamic한 요소들 때문에 생긴다. 해결책? 사실 인터넷을 검색하면, webkit fill이나 100%를 이용해서 해결하는 방법과 자바스크립트를 이용해서 vh를 지속적으로 변화시키는 방법이 있는데, 이 방법들은 너무 번거로워서 항상 귀찮았었는데, 요번에 검색을 하다가 새로운 방법을 찾게되었다. dvh, svh https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/ Incoming: ..

https://allwais.tistory.com/2 로컬에서 npm 패키지 배포하기 서론 react-wai를 보면 이게 배포하면 문제없나? 라고 테스트하기 위해 package.json에서 몇 가지 변경사항만 수정해서 다시 재배포를 한 적이 있다. 사실 이런 설정만 건드리는 것은 publish가 되어서는 allwais.tistory.com (allwais에서 react-wai에 참여한 다른 분들의 개발자 노트도 보실 수있습니다!) 서론 react-wai를 보면 이게 배포하면 문제없나? 라고 테스트하기 위해 package.json에서 몇 가지 변경사항만 수정해서 다시 재배포를 한 적이 있다. 사실 이런 설정만 건드리는 것은 publish가 되어서는 안된다고 생각이 되었지만, 방법을 몰라서 접어두었었다. 최..

효율성을 요구하는 코딩테스트 문제를 풀다보면 키를 지우는 일이 많은 경우 Object를 사용하면 시간 초과가 나오지만 ,Map을 사용하면 시간초과가 안나오는 경우가 있습니다. Map이 성능이 더 좋다인데 왜 그런지와, Map이 Object보다 더 좋은 이유에 대해서 그리고 Object의 기능을 Map에서는 이렇게 사용한다는 것을 보여준다는 글이니 한번 읽어봅시다! https://velog.io/@surim014/use-maps-more-and-objects-less [번역] 객체 대신 Map을 더 사용해보기 이 글에서는 자바스크립트의 객체 대신 Map을 활용하는 대안에 대해 소개하고 있습니다. velog.io

고민하게 된 계기 git을 CLI를 이용하면서, push를 할 때마다 브랜치 이름을 입력하는 것이 너무 번거로웠다. 그래서 현재 브랜치에 push를 해야하는 경우에 간단하게 push하는 방법에 대한 것을 알아보았다. 어떤 방법을 사용할까? git push git push 뒤에 아무 브랜치 이름도 안넣는 경우 현재 branch로 push하게 하도록 옵션을 바꾸는 방법 extension vs code에 extension을 이용해서 해결하는 방법 cli 1와 같은 방법중에서 current의 브랜치를 직접 지정하는 방법 오늘 이 글에서는 이 방법중에서 1번 방법에 대해 알아보자 git push.default option nothing 명시적으로 Refspec이 제공되지 않는 한 어떤 것도 푸시하지 않습니다.(오..

고민한 이유 보통 before이나 after에는 background-image에 이미지 파일만 사용하여 처리를 많이한다. 하지만 이미지를 올리기 힘든 경우에는 어떻게 처리하는게 좋을까? SVG Tag 이미 이미지 파일 없이 우리는 svg tag를 이용하여 html에 벡터를 사용해본 사람이 많을 것이라고 생각한다. javascript에서 createURLObject를 이용하면 없는 파일을 텍스트로 만드는 것처럼 CSS에서도 이런 방법이 있지 않을까? SVG URL-encoder https://yoksel.github.io/url-encoder/ 이 페이지에 들어가면, svg를 URL-encoder로 바꾸어 주는 기능이 있다. 이것을 이용하면 요런 svg Element를 사이트에서 변환하면 Ready for..

이 주제를 공부한 이유 개발자 커뮤니티 슬랙에서, 브라우저에서 txt나 zip와 같은 파일을 open할 수 있는 지에 대한 질문이 올라왔다. 이 질문을 읽었을 때 브라우저에서는 로컬에 파일이 접근이 안되지 않나..? 근데 어떤 웹들을 보면 또 접근이 가능하게 구현한 것 같은데? 재밌어 보여서 시작했다.. 접근 방법 1. 파일을 어떻게 열까? 가장 먼저 생각나는 방법으로 window.open을 사용하였다! Not allowed to load local resource: 역시 브라우저에서는, load local resource에 대해 접근을 막고 있었다.. 2. Mdn에서 정의하는 window.open을 보자 MDN의 window.load를 보면 첫 번째 파라미터가 URL or path라는 것을 볼 수 있다..

이전에 Context API를 선택했던 이유 전역상태를 관리하는 파일을 최대한 가볍게 하고 싶어서, 이미 내장되어있고, 자주 바꾸지 않기 때문에 Context API를 사용 했었는데 지금 고민해보니 굳이 Context API에 대해 다시 한번 고민을 하게 되었다. 다시 고민하게 된 이유 1. 내정되면 가벼운가? 번들링을 이용하면 필요한 함수만 불러 오기 때문에 Context API가 리액트에 있다고 하더라도 Context API를 사용하지 않는다면 Context API는 사용되고 있지 않았을 것이다 즉 Context API를 사용한 것과 만일 바꾸게 될 새로운 전역 변수 함수에 대해서 고민해보면 React(ContextAPI를 제외한 일부) + Context API + BOJ React(ContextAP..

이 글은 Github의 web editor를 이용하여 pull request를 로컬로 가져오는 방법을 소개하는 글입니다. Pull request를 Git command로 가져오는 방법은 구글에 Git request 로컬로 쉽게 와 같은 키워드를 검색하면 찾을 수 있다. 진행방법 요약 Step 1. Web editor 열기 Step 2. Terminal 열기 Step 3. 다음에 대한 작업 계속하기 Step 4. 리포지토리를 로컬로 복제하고 데스크톱에서 열기 Step 5. Visaul studio Code로 실행 Step 6. Select as Repository Destination (저장할 폴더 클릭하기) 글을 작성하게 된 계기 이전에 진행했었던 팀프로젝트와는 다른 특징이 세개가 있었다. 1. 각자 독..