Bleeding edge

고민한 이유 보통 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. 각자 독..

프로젝트를 시작하게 된 계기 Notion prettier는 현재 진행하고 있는 오픈소스 프로젝트 팀원이 노션에 코드를 작성하면서 텝이나 스페이스바를 연타하는 것을 보면서, 노션에 프리티어를 적용하면 어떨까요? 라고 내가 팀원에게 물어보면서 그런게 있으면 당장 쓸 것 같아요 라는 이야기를 듣고나서 시작했다. 프로젝트 이름 정하기 Markdown helper 처음에는 이름이 Markdown helper라는 이름으로 프로젝트를 만들었는데, 다른 사람에게 프로젝트를 설명할 때 프로젝트 이름만으로는 프로젝트를 설명하는 것이 어려워서, 이름으로 프로젝트를 쉽게 설명하는 이름이 없을까 고민하다가 Notion에서 Prettier를 사용하니 Notion Prettier로 하는게 어떨까 하고 변경했다. (지은게 아니라 그..

문제점 자동완성의 keyword의 symbol을 나타내는 폰트에 문제가 있었다. 문제 원인 자동완성이 뜨기 이전까지는 볼 수 없는데.. 이 현상은 con와 같이 자동완성이 가능한 keyword가 있을 때 폰트를 request하면서 문제가 생긴다. 해결책 평범한 web에서는 아마 이러한 문제가 생기지 않았겠지만, chrome extension에서는 내가 웹주소에 폰트를 올릴 수 없기 떄문에 이러한 문제가 생길 수 있다. 이 문제를 node module에 있는 monaco editor에서 찾는다는 것은.. 잘못된 방법이고, 최종적으로 생성되는 파일의 e.exports=n.p+"b797181c93b3755f4fa1.ttf" 이 부분을 수정할 필요가 있었다. 이 파일이 실행될 경로에 자동으로 생성될 텍스트 파일..