개발

잘못된 내용이 있다면 알려주시면 감사하겠습니다.이전 글: https://so-tired.tistory.com/336서론요즘 HTML + CSS + Javascript로 순수하게 프론트엔드 개발을 하는 사람은 드물 것이다.그 대신 라이브러리나 프레임워크를 이용한다. (차후, 그냥 통합하여 프레임워크라 하겠다.) 왜? 어떤 이유가 있어서일까?그 이유로는 생산성 증대, 대규모 프로젝트 관리 용이, 성능 등등.. 여러 가지 일 것이다. 그런데 프레임워크를 써서 개발하는게 순수하게 Vanilla JS로 개발하는 것보다 좋을까? 이번엔 프레임워크가 렌더링에 주는 이점에 대해서 한 번 알아보자.프레임워크가 렌더링에 주는 이점DOM은 동적 UI 변경에 최적화 되어있지 않다우리는 프론트 개발을 하면서 DOM을 조회하기도..

잘못된 내용이 있다면 알려주시면 감사하겠습니다.다음 글: https://so-tired.tistory.com/337서론최근에 웹 성능 최적화에 관심이 생기게 되었다. 그래서 React DevTools의 Highlight Updates 기능을 통해서 페이지의 렌더링을 개선하려던 와중, 해당 페이지의 상태가 변했을 때 상태를 사용하지 않는 정적인 컴포넌트에 하이라이트가 되는 이슈가 있었다. 사실 Highlight Updates 기능은 렌더 함수 실행 여부를 감지하기 때문에, 정적 컴포넌트에 변화가 없어도 변화 여부를 체크하기 위해 렌더 함수는 호출되기 때문에 하이라이트가 되는 것이 당연했다.  하지만 문득 아래와 같은 생각이 들었다. "React를 통해 구현은 잘하고 있지만, 그 내부에서 일어나는 일들에 대..

문제가끔 프론트엔드에서 실시간으로 입력을 받아 검색어에 따른 추천 검색어나 자동완성을 제공해줘야 하는 상황이 있다.이를 구현할 때 여러번 동일한 문제를 마주친 적이 있는데, 바로 입력값이 바뀜에 따라 api 요청을 하게 되면 너무 많은 api 요청이 발생한다는 점이다.위의 프로젝트에서 검색창에 "선릉역"을 검색하면, "ㅅ,서,선,ㄹ,르,릉,ㅇ,여,역"과 같이 9번의 api 요청이 발생하게 된다. 물론 바로바로 값을 받아 기능을 수행하면 좋겠지만, 다음과 같은 애로사항이 있을 수 있다.유료 api의 경우 비용이 많이 발생함.너무 빠른 타자로 입력할 시 깜빡임이나 이전 결과값이 나올 수 있음.검색과 관련한 다른 기능과 비동기의 타이밍이 안맞아서 잠재적인 에러가 발생할 수 있음.위 3가지의 사항 모두 실제로 ..

오늘 아침 5시부터 잘 돌아가고 있던 서비스의 api가 동작하지 않는 일이 일어났다.그래서 해당 기업의 대표님 한테서 연락이 와있어서 출근하기 전 빠르게 원인을 알아보려고 했는데, 내 웨일 브라우저에서는 에러가 발생하지 않았다.  웹 빌더의 배포과정에서 에러가 난걸까? 하고 여러가지 계정을 통해 확인해보았지만 에러는 발생하지 않았다.그래서 회사에서 차분히 대표님의 브라우저나 계정을 확인해보고 테스트 해 보았는데 try-catch로 예외 처리를 해둔 에러문구가 발생했다.(정말 예외 처리의 중요성을 다시한번..ㅠㅠ) 크롬 브라우저에서 아래와 같은 에러가 발생하고 있었는데 구글링을 잠깐 해보니 SSL이 만료되어서 발생하는 에러인 것 같았다.GET "https://api~~" NET::ERR_CERT_DATE_..

웹 에이전시를 다니다 보니 클라이언트의 요구사항과 재정에 따라 프로젝트의 기술스택을 정하는 것이 효율적인 개발에 있어 중요하다고 생각하게 되었다. 회사를 운영하는 관점에서는 더욱 중요하겠지만, 개인적인 프로젝트를 할 때에도 빠른 배포가 목적이라면 기획자의 요구사항에 가장 적합한 기술스택을 선정해 진행하는 것이 옳다고 생각한다. 이전에는 Nuxt.js를 쓰면 CSR, SSR, SEO 다 대응 가능하니까 무조건적으로 좋은 기술을 쓰는게 좋지 않은가? 라고 생각했었다. 하지만 다양한 기술을 지원한다는 것은 그것들을 핸들링 하기 위한 배경지식이 마련되어 있어야 한다는 것을 느꼈다. 배경지식 없이 일단 진행하기엔 차후 에러를 일으킬 가능성과 삽질을 하게될 가능성이 높아지기 때문이다. 이러한 부분은 개발 속도와 단..

Webflow를 통해 애니메이션을 제작중 Scroll into view 트리거가 생각대로 동작하지 않는 경우가 있었다.구글링을 통해서도 잘 나오지 않는 에러여서 공유하면 좋을 것 같아 글을 써본다. 내가 제작해야 할 애니메이션 효과는 아래와 같았다.이벤트 트리거가 전부 보여지면 애니메이션을 실행시킴페이지를 넘기면 특정 애니메이션의 그림이 그려짐이전 페이지로 돌아갈 경우 그려진 애니메이션이 사라짐 처음엔 단순히 Scroll into view를 이용해서 유저의 뷰포트 내에 페이지가 들어오면 애니메이션을 실행시키면 되겠다고 생각했다. Webflow의 Scroll into view 애니메이션에는 두 개의 트리거가 있다.When scrolled into view: 뷰에 해당 요소가 진입했을때 실행시킴.When s..

최근에 나에게 일어난 트러블인데 이와 관련된 글이 잘 보이지 않아 비슷한 고민을 하고 있는 사람들을 위해 글을 남겨두려고 한다. 이 글을 찾은 사람들 중 다음과 같은 상황이라면 도움이 될 수도 있을 것 같다.usage of memory가 가득찼다!배포만 하고 가만히 두었는데 메모리 용량이 가득찼다!No space left on device 에러가 발생한다!진짜 프로젝트를 하면서 정말 시간을 많이 잡아 먹었던 부분이어서 꼭 글로 남겨야겠다고 생각했다. (잘못된 글일수도 있으니 참고만 해주시고 지적이나 조언 해주시면 감사하겠습니다!)최근들어 이전의 개발한 서비스들의 유지보수를 하고 다시 빌드를 하려고 할 때, "no space left on devide" 라는 에러가 뜨면서 빌드가 되지 않았다. 해당 프로젝..

React, Vue 같은 라이브러리나 프레임워크들을 쓰는 목적은 여러가지가 있겠지만 하나의 페이지에서 데이터를 동적으로 변경하기 위함(SPA)도 있을 것 이다. Vue에 대해 공부하던 중 Vue는 일반 객체를 제외한 반응형 객체들은 변경사항을 추적하기 위해 Proxy 객체로 변환한다는 사실을 알게 되었고 관련된 개념이 모자라 간단히 정리해보려고 한다.반응성 (Reactivity)Vue 공식 문서에선 반응성(Reactivity)에 대해, "변경"에 대한 제어를 선언적으로 수행하는 프로그래밍 패러다임이라고 나와 있다. 간단히 말해 내부에서 변경을 어떤식으로 이루어지게 하는지보다 해당 방식을 통해 변경을 이뤄지게 하겠다에 대해 중점이 맞춰진 방식이란 말이다. (여기서 선언형 프로그래밍이 이해가 되지 않는다면..