Programming/Web 6

[Javascript] map에서 async/await을 사용하기

여느날과 같이, js로 코딩을 하던 날, 계속 버그가 잡히지 않던 코드가 있었다. 로직상 문제는 없는데, 비동기 작업들이 원하는 순서로 실행되지 않았다. 체크를 위해서 아래와 같이 console.log를 순서대로 적어놨다. const saveConsultSchedule = async () => { console.log(0) await tempAvailableTime.map(async (e) => { console.log(1) const res = await API.deleteConsultSchedule(e.scheduleId) console.log(2) return res }) console.log(3) } 분명히 async/await을 잘 걸었다고 생각했는데(과하면 과했지), console의 출력이 다..

Programming/Web 2022.08.29

[WEB] Virtual DOM이란?

현재 프론트 엔드 시장의 리더는? 프론트엔드 프레임워크(라이브러리) 시장은 react.js와 vue.js가 양분하는 형태로 변화하고 있다. 사장되고있는 angular는 정말로 더 이상 사용되지 않는 모습을 볼 수 있다. npm에서 살펴본 주간 다운로드수. react가 압도적으로 높고, 그 다음 vue가 따른다. angular와 svelte는 생각보다 더 다운로드 수가 적다. 확실히 react의 점유율이 압도적인 모습을 볼 수 있다. 요즘 떠오르는 svelte도 아직은 점유율이 매우 낮다. vue와 react는 분명히 다르지만, vue가 react의 개념을 많이 차용한 것이 사실이고, 이는 vue3의 composition api의 도입으로 react에게 한 발짝 더 가까워졌다. 이런 vue와 react가 ..

Programming/Web 2022.03.27

[Web, Nginx] "data url(base64 encoded) image" vs "image file" 그리고 nginx gzip

현 상황 집에 서버를 구축했기 때문에, 만들어 둔 블로그를 서버에 올리고 계속해서 다듬고 있다. 서버는 잘 올라갔는데 페이지 로딩 속도가 너무 느려서 무슨 일인가 보니.. 🐌 인터넷 속도가 너무 느리다... 대충 초당 1MB 밖에 안된다. 그래서 공유기를 거치지 않고 인터넷을 연결하니 초당 10MB는 나오더라(다행). 어쨌든 이 문제는 공유기를 교체하기로 했고, 공유기가 도착하기 전까지 사이트 성능이나 튜닝하기로 했다. 초당 1MB라니, 이렇게 좋은 실험 환경이 어디 있는가! 그래서 튜닝할 부분은? 블로그를 만들 때 계속해서 걱정하던 부분이 있는데, 바로 포스트에 들어갈 이미지였다. 이미지를 파일로 저장해서 url로 serving 하고 싶었지만, 현재 사용하고 있는 quill-editor로는 이를 편하게..

Programming/Web 2022.02.03

[Web] 검색을 위한 좋은 RESTful URL은 어떤걸까?

https://stackoverflow.com/questions/5020704/how-to-design-restful-search-filtering How to design RESTful search/filtering? I'm currently designing and implementing a RESTful API in PHP. However, I have been unsuccessful implementing my initial design. GET /users # list of users GET /user/1 # get user with id 1 POST /u... stackoverflow.com 이번에 백엔드 작업을 하면서 검색에 대한 url을 어떻게 만들지 고민이 생겼다. 카테고리 이동 겸 검색..

Programming/Web 2022.01.19

Mediapipe를 활용한 vision-depending-display 제작: 에러모음(업데이트중)

1. npm 을 사용하여 media-pipe 사용하기 설명에 들어가기에 앞서, media-pipe는 javascript를 별로 좋아하지 않는 것 같다는 필자의 생각을 먼저 말한다. (공식 문서도 없고 원본 코드도 찾을 수가 없다...) https://google.github.io/mediapipe/solutions/face_mesh.html#javascript-solution-api 위 링크로 들어가면 javascript 버전의 face_mesh 코드가 적혀져있다. 다만, CDN 사용법 기준으로 적혀져있기 때문에 조금 찝찝하기 때문에 설명에 적혀져있는 npm을 다운받아보았다. ...? 그리고 npm 코드를 어떤 식으로 사용해야하는지는 공식문서 어디에도 적혀져있지 않았다. 어쨌든 npm이 있다는건 동작하는..

Programming/Web 2021.09.19