728x90 반응형 Learn to Code62 웹 성능 개선을 위한 브라우저 작동 원리 이해 웹 성능 개선에 관해 공부를 하다가, 성능 개선 방법을 떠올리기 위해선 우선적으로 브라우저의 작동 원리에 대한 이해가 선행되어야 한다는 것을 깨닫게 되었다. 그러다 마주치게 된 것이 MDN의 "Populating the page: how browsers work"인데, 내용이 너무 좋아서 모든 페이지의 내용을 워드바이워드 읽어가며 공부했다. 본 포스팅은 이 글을 메인 레퍼런스로 공부하며 기록한 내용을 각색한 것이며, 글을 읽고 브라우저 작동 순서로부터 얻을 수 있는 성능 개선에 관한 나름의 인사이트를 정리한 글이다. 대기시간 && 싱글 스레드 브라우저 대기시간(latency)와 싱글 스레드(Single-threaded) 브라우저는 웹 성능을 이해하는데 있어서 가장 중요한 두 가지 요소이다. 클라이언트에서.. 2021. 8. 24. [JS] 즉시실행함수(IIFE)란? 자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다. 각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?! Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현) 말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불.. 2021. 8. 19. [JS] event loop이란? 자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까? 이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다. 이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 .. 2021. 8. 18. Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 2021. 8. 18. [JS] Javascript (ES6+) 자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른.. 2021. 8. 10. [TS] 타입스크립트 설치부터 데이터 타입 명시까지 🌱 타입스크립트 노트 깃헙 노트: src - index.ts 파이널 프로젝트를 개발하면서, 유달리 에러가 여러 번 발생했던 경우가 있었다. 바로 서버에서 가져온 유저 데이터를 기반으로 To-do list를 렌더링해야할 때 자꾸 우리 애가 not a function 이라던가 cannot get 0 of undefined라던가 에러가 뜨는 것이다. 분명히 코드 상으로 보았을 때 우리 애는 not a function일리가 없고 undefined 일리가 없는데 도대체 왜 이러나 싶었는데... 두둥 문제의 원인은 서버에서 받는 데이터의 데이터 타입과 클라이언트 쪽에서 작성한 데이터의 데이터 타입이 서로 달라서, 내가 찾는 프로퍼티가 없다거나 인덱스가 없다거나 하던 일이 계속 발생했던 것이다. 파이널 프로젝트 이전.. 2021. 7. 30. 코드스테이츠 수료 완료! 추가 공부 및 파이널 프로젝트 보완 계획 어느덧 코드스테이츠의 소프트웨어 엔지니어링 과정을 모두 끝내고 수료를 해버렸다. 아직 시작한지 얼마 되지도 않은 것 같은데 벌써 5개월이 흘렀다니...!!! (이러니 내가 안늙어) 이번주 금요일 (그저께) 수료식을 마치고 앞으로에 대해 여러가지 계획을 세웠다. 주니어 개발자로써 이제 막 커리어를 시작하려다보니, 듬성듬성 더 채울 수 있을 것 같은 부분들이 스스로 느껴졌기 때문이다. 애초에 코드스테이츠의 프로그램을 시작하게 된 것도 독학으로 시작한 개발 공부의 틈새에 군데군데 존재할 수 밖에 없는 틈들을 매꾸고 그 외 +@까지 얻기 위해 시작한 것이었고, 그렇기에 나에게 있어 틈 찾기(?)와 매꾸기(?)는 너무 자연스러운 일이다. 여러가지 계획이 있는데, 그 중 가장 중요한 두가지는 CS 기초 지식 쌓기와.. 2021. 7. 25. [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagaksagak-client/wiki 발표자료: https://drive.google.com/file/d/1bcdIMkNRRMhKfTnFa8Q-156mqki6uf8V/view 세오GitHub: https://github.com/ksyksy815 이번 포스트에선 이제 막 마무리짓게 된 실시간 멀티유저 화상채팅 기능을 구현한 파이널 프로젝트에 대해서 소개하고자 한다. 📃 개요 사람들마다 공부 스타일은 모두 다르다. 어떤 사람들은 아주 조용한 곳에서 혼자 있을 때 엄청 집중을 잘하고, 어떤 사람들은 카페나 도서관같은.. 2021. 7. 21. [회고] 첫 프로젝트: 임금님귀(King'sEars)! 비밀을 말하고 싶어 마음이 답답한 이들을 위한 플랫폼 약 3개월 반 정도의 코드스테이츠 소프트웨어 엔지니어링 과정을 모두 수행하고, 드디어 첫 프로젝트를 완료했다. 2주 동안 진행되는 프로젝트라고 했지만, 사실 초기 인트로와 기획 등의 회의 시간이 많았기 때문에 실제 코딩을 한 기간은 5일 정도밖에 되지 않았기에 빠듯한 일정이라고 할 수 있었다. 우리팀의 팀원 분들은 개개인이 뛰어난 슈퍼플레이어라서 별 어려움 없이 수월하게 프로젝트를 진행할 수 있었다. 사실, '비밀'과 관련된 아주 짤막한 준 소셜미디어 아이디어가 있다고 했을 때 우리 팀원 분들이 받아들여주실까, 프로젝트 사이즈로 너무 작은 것은 아닌가 걱정이 되었지만 모두들 너무 흔쾌히 진행하자고 해주셔서 너무 고마웠다. 이번 포스팅에선 우리가 만든 첫 작품이 어떤 서비스인지 소개하고, 어떤 동기로 본 .. 2021. 6. 21. [React] 커스텀 훅(Custom Hook)을 사용한 간단한 회원가입 페이지 만들기 React Hook 등장 배경 리액트에서 훅(Hook)이란 함수 컴포넌트에서 리액트의 기능들을 사용하게 해주는 함수이다. 훅은 2019년 2월 16일에 나온 React 16.8부터 사용이 가능하게 되었기 때문에, 리액트가 처음 출시된 2013년 5월부터 2019년까지 약 6년 동안은 리액트의 여러 기능들을 사용하기 위해선 함수 컴포넌트가 아닌 클래스 컴포넌트만을 사용해야한다는 제약이 있었다. 클래스 컴포넌트는 코드를 작성함에 있어서 직관적이지 못하거나 코드를 길게 만드는 요소들이 상당히 많이 있었다. 예를 들어, 똑같은 기능의 코드임에도 불구하고 컴포넌트의 생명주기(lifecycle) 메소드에 맞추어 따로 작성을 해서 로직이 분리되는 경우가 발생한다던가, 아니면 메소드를 사용하기 위해 끊임없이 bind(.. 2021. 6. 5. [CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events ) 나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다. 구현된 모습 How-To 위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다: 1. 배경을 오버 사이즈로 크게 만든다. 2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다. 즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다. CSS 태그 하나가 화면을 가.. 2021. 6. 4. [CSS] 마우스 스크롤 시 자동으로 스냅(snap)되게 하기 (scroll-snap-type & scroll-snap-align) 간혹 웹사이트들을 구경하다보면, 마우스 스크롤 시 자연스럽게 - 마치 다음 페이지로 넘어가는 것처럼 - 다음 페이지의 맨 윗부분이 y = 0 인 부분으로 스냅(snap)되는 것을 볼 수 있다. 뭔가 대단한 기술이 들어간 것인가?!라고 생각했지만, 아주 간단한 CSS로 구현 가능하다는 것을 알게 되었다. 바로 scroll-snap-type과 scroll-snap-align이다. 동작되는 모습 마우스 스크롤을 하면, 원하는 다음 화면을 가득히 똑! 떨어지게 보여준다. // How-To 1단계: 페이지 엘리먼트들을 만든다. 영상의 예시같은 경우 리액트로 만든 것이여서, Home이라는 컴포넌트 안에 className이 home-sections인 을 여러개 반복해서 만들어주었다. 이 하나가 width와 heigh.. 2021. 6. 3. 이전 1 2 3 4 5 6 다음 728x90 반응형
