FrontEnd
-
python not found after macOS update to MontereyFrontEnd 2022. 4. 24. 22:52
(혹시 1.65.0 이전 버전을 쓰고 있다면) VSCode를 업데이트하면 대부분의 오류가 해결된다. VSCode를 설치하자마자 추가하는 커맨드가 있다. 원하는 디렉토리에서 VSCode를 바로 실행할 수 있어서 자주 쓰는 커맨드. code . ps. 혹시 컴퓨터를 재시작할 때마다 code command를 다시 설정해줘야 했다면 이쪽이 답이다: https://github.com/microsoft/vscode/issues/42051 VSCode가 Downloads에서 돌아가고 있다면 PATH를 잡아줘도 소용이 없어서 이런 일이 발생한다. 그런데 macOS를 Monterey로 업데이트하고나니 이런 에러가 출력되고 동작하지 않는다. /usr/local/bin/code: line 6: python: command ..
-
React in JS BinFrontEnd/JavsScript 2022. 3. 2. 21:21
마크업을 간단히 테스트해볼 때 JS Bin을 자주 사용하는데, React를 사용하려면 boilerplate가 약간 필요하다. 리액트 세팅은 리액트 홈페이지에서 제공하는 방식을 따르면 편하다. https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html 위 경로의 HTML 텍스트를 JS Bin의 HTML 부분에 복사 붙여넣기하면 바로 편집이 가능하다. script 태그에서 바로 작성하는 것이 불편하다면 JavaScript 탭을 ES6 / Babel로 변경하고, script 태그 내부의 내용을 옮겨오면 된다. 버전이 크게 중요하지 않다면 JS Bin에서 자체적으로 추가하는 방법도 있다. 상단 Add..
-
바닐라코딩 10기 프렙, 부트캠프, 취직 후기FrontEnd/Bootcamp 2022. 1. 9. 22:45
친애하는 동기분의 멋진 후기를 보니 작년 이맘때쯤 프렙을 신청하면서 마음 졸였던 기억이 난다. 나 역시 바닐라코딩을 선택하기까지 고민을 꽤 했고 그때 최근 후기가 큰 도움이 됐기에, 내 경험도 누군가에게는 도움이 되지 않을까 싶어 적어본다. 내가 가장 궁금했던 것은 다들 힘들다는데 대체 얼마나 힘든지, 고비는 언제 오는지, 시간은 얼마나 투자해야 하는지, 어느 정도 수준이어야 진도를 따라갈 수 있는지, 정말 코스 중간에 떨어지는지 등 전체 플로우에 관한 것이 대부분이었다. 그래서 내가 그동안 어떤 과정을 거쳤는지를 시간 순으로 나열해보았다. 프렙 신청부터 부트캠프 시작까지의 기록은 개인 캘린더와 메일을 참조해서 복원했다. 부트캠프와 취업 과정은 상세하게 기록을 남겨두지 않아서(도저히 그럴 정신이 없었다...
-
GET google api access token (with gapi, no firebase)FrontEnd/Bootcamp 2021. 9. 24. 03:40
*** 이 포스팅은 작성자의 경험을 바탕으로 작성되었으며, 사실과 다른 부분이 있을 수 있습니다 *** 클라이언트 React, 서버 Node.js(Express)를 사용합니다. 요약 Google은 현재 인증 방법 업데이트 중. 로그인은 새로운 라이브러리 https://accounts.google.com/gsi/client (문서: https://developers.google.com/identity/gsi/web/guides/client-library), google api 접근을 위한 OAuth 2.0은 기존 라이브러리 https://apis.google.com/js/api.js 를 사용한다. (문서: https://developers.google.com/identity/protocols/oauth2)..
-
Base N(n진법)으로 변환하기FrontEnd/알고리즘 2021. 5. 23. 15:44
깃허브 페이지를 이용해 변환 페이지를 호스팅하고 있다: https://hayjo.github.io/Visualization-for-BaseN/ Intro 알고리즘 풀이를 하다보면 n진법을 다뤄야 할 때가 있는데, 가끔씩 필요하다보니 그새 원리를 잊어버릴 때가 많다. 매번 찾아보는 것도 일이라서 이참에 변환해주는 원리를 직접 표현해두기로 했다. 기본 로직 베이스로 삼은 것은 이쪽 자료. 자세한 설명은 네이버 지식백과 진법 변환 페이지에 잘 나와있다. 오른쪽의 2 * (2 * (2 * (2 * 0 + 1) + 1) + 0) + 1 수식을 단계별로 표현해주기로 한다. 풀어서 쓰면 이렇다. (12) + 1 2 * (6) + 1 (2 * (2 * 3) + 0) + 1 (2 * (2 * ((2) + 1) + 0) ..
-
비동기 흐름 정리 feat. Element.animate()FrontEnd/JavsScript 2021. 5. 3. 23:03
자바스크립트의 Async Flow에는 여러 가지가 있다. 각 flow는 주어진 작업을 병렬로 처리할 것이냐, 직렬로 처리할 것이냐, 인자는 언제 어떻게 넘길 것이냐 등에서 차이를 보이는데, 추상적인 개념이다보니 바로 와닿지 않아서 직접 시각화해보기로 했다. flow 설명은 understanding-node-js-async-flows-parallel-serial-waterfall-and-queues를 참고했고, node의 async 모듈을 이용했다. (큐와 우선순위 큐는 아직 이해가 부족해서 이번 포스팅에서는 생략한다.) 1. Parallel 독립적인 task 여러 개를 병렬적으로 수행하고, 모든 task가 완료되면 최종 callback을 호출한다. 최종 callback에는 각 task의 결과가 전달된다...
-
Throttle: 함수가 주기적으로 실행되는지 확인하기FrontEnd/JavsScript 2021. 4. 17. 00:21
명시적인 리턴값이 없는 경우, 함수가 의도대로 작동하는지를 어떻게 확인할 수 있을까 하는 의문이 생겼다. throttle은 함수와 delay를 인자로 받고, delay 동안에는 실행 요청이 들어오더라도 1회 이상 실행되지 않는 함수를 리턴해준다. 코드를 작성한 후 인자로 들어온 함수가 정말로 특정 시간 동안 실행되지 않는지 여부를 어떻게 확인할 수 있을까를 고민하다가 인자 함수가 실행되면 로그를 찍어주면 되겠다는 생각이 들었다. 잠깐 짚고 넘어가는 throttle과 debounce의 차이 (JavaScript) 쓰로틀링과 디바운싱 안녕하세요. 이번 시간에는 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 알아보겠습니다. 원래 예정에 없던 강좌이지만 요청을 받았기 때문에 써봅니다. 프..