본문 바로가기
반응형
IE로 접속 시 알림창(alert) 띄우기 IE에 대해 좋은 감정을 가진 개발자가 몇이나 될까? 나도 조금이나마 직접 경험을 해보니 왜 IE 사라져라 IE를 골칫덩이로 생각하는지 알게되었다. 다행히 나는 IE가 사라지고 있는 시대에 살고 있다. 선배 개발자분들 덕분에 많은 부분이 추상화 되어 있어(바벨) 고생을 덜 했지만 라이브러리 사용에 제약이 있기도 했고, CSS 최신 구문을 사용하다가(e.g. , min(), padding-inline, clip-path 등) IE가 지원을 안해서 예전 구문으로 전부 바꾼 적도 있었다. 그런데 이제 MS가 공식적으로 2022년 6월 15일부터 IE11 지원을 종료함에 따라, 회사에서도 이걸 인지하여 알림창을 통해 다른 브라우저를 사용하는 것으로 권장하기로 했다. IE로 접속 했는지 확인하기 - User Ag.. 2022. 4. 29.
배포 자동화? CI/CD가 무엇일까? 회사에서 프론트엔드 개발 환경에 대해 고민하고 구축해볼 기회가 생겼다. 그러던 중에 팀원들 전체에 도움이 될 수 있는 배포 자동화, CI/CD에 대해 공부하게 되었다. 해당 개념에 대해 알아보고 이해하는 시간을 가져보자. 어쩌다 배포 자동화, CI/CD가 생기게 된 것일까? 반복되고 지루한 절차들은 자동화를 하고 싶다. 보통 배포하는 과정은 고정적이고 변경된 코드를 적용하기 위한 잦은 배포는 생각보다 시간을 많이 소비할 수 있다. 즉 개발자의 리소스가 비효율적으로 활용되기 때문에 배포 자동화 시스템이 필요하다. 배포 자동화 시스템에서의 CI/CD CI(Continuous Integration, 지속적 통합) CI/CD의 'CI'는 개발자를 위한 자동화 프로세스인 지속적 통합(Continuous Integ.. 2021. 12. 9.
Image Lazy Loading 기법으로 웹 성능 최적화하기 초기 로딩 시간을 단축해주는 Image Lazy Loading 기법 현재 화면에 보여지지 않는 이미지들은 lazy loading 처리를 통해 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상 시킬 수 있다. image lazy loading 기법은 무엇인지, 그리고 해당 기법을 IntersectionObserver API를 사용한 예시를 보면서 알아보자. Image Lazy Loading이란? 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 하게 만드는 기법 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미룬다 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위'란 의미에 기반한다. lazy loading을 다루는 방식은 페이지 내의 거의 모든 리.. 2021. 10. 30.
CSR과 SSR 이해하기 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 어떤 회사는 CSR을 사용하고, 어떤 회사는 SSR을 사용한다. 또 어떤 회사는 둘의 방식을 섞어서 사용하기도 한다. 각기 다른 방식을 사용하는 이유와 장단점들 그리고 어떻게 하면 더 좋게 개선할 수 있을까 등을 알아보자. 먼저 웹 트렌드와 역사(SPA 시대까지)를 살펴보면서 해당 방식이 등장하게 된 이유를 살펴보자. 웹의 역사(SPA 시대까지) 1990년대 중반 - 정적 웹 사이트들 1990년대 중반까지는 모두 정적 웹 사이트들(Static Sites)이었다. 이미 잘 만들어진 HTML 문서들이 만들어져 있고, 사용자가 브라우저에서 해당 사이트에 접속하면 서버에 이미 배포되어져 있는 HTML 문서를 받아와서 보여주는 방식이다. 예를 들어 .. 2021. 10. 15.
HTTP 이해하기 나는 HTTP 통신에 대해 알고 있을까? 프로그래밍 공부를 하다보면 자주 접하는 단어지만 모호한 개념만 안 채로 찝찝하게 지나치는 경우가 있다. 그 중 하나가 HTTP이다. 그리고 내 머리는 며칠 내에 까먹을 것이 분명하다..! 어떻게 인터넷상에서 정보를 공유할 수 있을까? 🌐 당시 저는 우리가 정보를 다루는 방식에 새로운 틀을 짜보고 싶었습니다. 그래서 고안해 냈던 것이 월드와이드웹(WWW)이었죠. - Tim Berners-Lee · TED2009 HTTP(HyperText Transfer Protocol)에 대해 알기 전에 우리가 인터넷상에서 정보를 공유하는 방식에 대해 먼저 알아보자. 우리가 인터넷에 연결이 되어 있다면 웹이라는 거대한 서비스 공간에서 서로의 정보를 공유할 수 있다. 그 이유는 웹이.. 2021. 9. 13.
304 Not Modified 이해하기 HTTP 상태코드를 공부하던 중, 내 포트폴리오 사이트의 상태코드를 확인해보니 304가 뜨는 것을 확인했다. 왜 200번대의 성공 상태코드가 아닌 300번대의 리다이렉션 상태코드가 뜬 것일까? 304 not modified란 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐시*된 자원을 사용하도록 권하는 상태코드다. 간단히 말하면 서버에서 요청된 자원을 재전송할 필요가 없음을 나타내는 것이다. 클라이언트가 캐시된 자원을 사용하게 하게 되면 연결을 통해 다시 전체 자원을 전송하는 것보다 효율적이다. 💡 HTTP는 성공(200번대)인 경우라도 요청의 결과가 변경될 수 있는 조건부 요청(conditional requests)을 갖고 있다. 이런 요청으로 캐시의 내용과 쓸데없는 제어를 검증 및 제한하고 다운로.. 2021. 9. 9.
포스트맨(Postman) 사용법과 다운로드(feat. 유튜브 API) 모바일 개발, 프론트엔드, 백엔드 모두 유용하게 쓰이는 API 개발 툴인 포스트맨을 사용해보자. 개발 하기전 테스트용으로도 사용 가능하고 변수 설정을 통해 편하고 보기 좋게 관리할 수가 있다. 또한 컬렉션에 내가 사용했던 API들을 모아 볼 수 있어서 따로 홈페이지를 재방문 할 필요 없이 재사용 가능한 API를 만들 수 있다. API 부자가 되어보자! 포스트맨(Postman) 사용하기 🚀 01. 포스트맨 다운로드 간단하게 구글에 포스트맨 다운로드를 검색하면 사이트에 접속해 앱을 설치할 수 있다. 그냥 웹에서 사용이 가능하지만 자주 사용하는 만큼 어플리케이션으로 다운로드 받아 편하게 사용하는 것을 추천한다. 먼저 가입을 해야하고 운영체제에 맞는 파일을 다운로드 및 설치를 해준다. 02. 앱 실행과 새로운 .. 2021. 8. 8.
반응형