티스토리

세오토리

검색하기

블로그 홈

세오토리

seo-tory.tistory.com/m

Frontend Developer | React | Next.js | TailwindCSS

구독자: 17

방명록 방문하기

728x90

반응형

주요 글 목록

[디자인패턴] 자바스크립트로 옵저버패턴(Observer pattern) 구현하기 옵저버 패턴은 Subject라 불리는 객체가 옵저버라 불리는 디펜던트들을 유지하고, 상태 변화가 생겼을 때 이들에게 상황을 알리는 경우를 의미한다. 이 패턴은 한 객체의 액션을 다른 객체에 업데이트시켜야하는 상황에서 특히 유용하다. 아래는 자바스크립트로 구현한 예시이다. UI나 로그 시스템 객체는 Character 객체의 변화를 알고 싶어한다. Character의 HP가 바뀌면, 옵저버인 UI가 이에 대해 알아야하고, 변경된 HP를 보여줘야 한다. 1. Subject 인터페이스를 만들고, 이걸 사용해서 Character 클래스로 만든다class Subject { addObserver(observer) { throw new Error("You must implement addObserver met.. 공감수 1 댓글수 0 2024. 6. 24.
[디자인패턴] 자바스크립트로 전략 패턴(Strategy Pattern) 구현하기 1. 전략패턴(Strategy Pattern)이란?전략 패턴(Strategy Pattern)은 객체의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략(알고리즘)을 객체화하여 동적으로 행위를 변경할 수 있게 해주는 디자인 패턴이다. 이 패턴은 여러 알고리즘을 하나의 추상적인 인터페이스로 묶어 알고리즘군을 정의하고, 각 알고리즘을 구체적인 전략 클래스로 캡슐화하여 필요에 따라 서로 교체 가능하게 만든다. 이를 통해 클라이언트는 알고리즘의 내부 구조를 알 필요 없이 유연하게 알고리즘을 변경할 수 있다. 알고리즘군이란?- 동일한 기능을 수행하지만 다른 방식으로 구현된 알고리즘들의 모음 예)- "정렬"이라는 동일한 문제를 해결하는 알고리즘 군 안에는 버블정렬, 삽입정렬, 퀵정렬, 병합정렬 등이 있다.- 이 알.. 공감수 0 댓글수 1 2024. 6. 11.
[디자인패턴] React + Tanstack Query 서비스 레이어 패턴으로 구조짜기 현 회사 프로젝트는 React + Next.js (v.13, app routing)으로 구성해놨다. Tanstack Query도 주요하게 사용하는데, 비즈니스 로직과 UI 컴포넌트, 그리고 그 중간 어딘가에 관여하는 코드들을 어떻게 정리하면 좋을까 열심히 찾아보다가 서비스 레이어 패턴(Service Layer Pattern)에 근접하게 정착하게 되었다. 서비스 레이어 패턴이란?서비스 레이어 패턴(Service Layer Pattern)이란 앱의 데이터 처리와 관련된 로직을 여러 레이어로 분리하여 구조화한 패턴이다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 각 레이어가 특정한 책임을 갖도록 만든다. 리액트에 적용하기: 최대 4개의 레이어1. Layer 1: 순수 네트워크 호출이 레이어는 네트워크 .. 공감수 1 댓글수 0 2024. 6. 3.
[디자인패턴] 요즘 가장 핫한 프론트엔드 디자인패턴: Feature Sliced Design (번역) 원본: https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj Feature-Sliced Design: The Best Frontend ArchitectureIntroduction Frontend developers often face a problem related to application architecture....dev.to 개요프론트엔드 개발을 할 때 앱 내 구조에 관한 문제는 흔히 발생한다. 확장성이 있으면서 디펜던시가 강하지 않으며 앱 모듈 간 높은 응집력이 기반이되는 구조의 사용이 요구되기 때문이다. 본 글은 저자가 생각하기에 리액트에서 선택할 수 있는 최고의 옵션인 Feature-Sliced De.. 공감수 2 댓글수 2 2024. 6. 3.
[Next.js] 브라우저 캐싱 문제 해결 방법 next.config에 generateBuildId를 추가한다 // next.config.js module.exports = { generateBuildId: async () => { return new Date().toISOString(); }, }; 프로젝트를 빌드할 때, 빌드 날짜와 시간을 기반으로 새로운 build ID가 생성된다. 새로 업데이트된 웹앱을 배포할 때, Next.js에 의해서 이 새로운 build ID가 에셋들(eg. JS, CSS 파일 등의 URL)에 사용된다. 유저가 웹사이트를 방문하면, 유저의 브라우저가 에셋 URL의 일부로써 새로운 build ID를 전달받게 된다. 이 브라우저는 새로운 build ID와 함께 에셋들을 받게 된다. 미래에 웹앱이 업데이트되면, 새로운 build.. 공감수 0 댓글수 0 2023. 10. 20.
[Next.js] 버전 13+으로 업데이트하기 요즘 pages 디렉토리를 사용한 Next.js 이전 버전의 프로젝트에서 Next.js 13+@ 버전으로 이동하는 작업을 하고 있다. 사실 이전 작업 방법에 대해선 Next.js Docs에 잘써있는데, 그래도 한번 쓱 번역하면서 직접 처음부터 끝까지 글을 한번 쭉 보면 머리에 더 쏙쏙 박히는 것 같아서 한글로 대충 번역을 했다. 근데 이걸 또 공유해달라는 친구가 있어서 정말 러프하게 내가 보려고 대충 쓴 글이지만 블로그에 기록으로 남기려고 한다. 업데이트하는 방법은, 페이지 단위로 아래 글에 적힌 번호 순서대로 쓱쓱 따라가면 된다. 1. npm install next@latest ㄱㄱㄱ 2. src/안에 app 디렉토리를 만든다. 3. Root Layout 폴더를 만든다 - app/layout.tsx e.. 공감수 0 댓글수 0 2023. 10. 7.
[React] 커스텀훅(Custom Hook) Custom hook이란?React의 커스텀 훅(custom hook)은 리액트의 함수형 컴포넌트에서 상태 또는 사이드 이펙트가 있는 로직을 재사용하기 위해 캡슐화할 수 있는 특정 네이밍 규칙을 따르는 함수이다. 커스텀훅을 사용하면 복잡한 로직을 재사용가능한 함수로 만들어버릴 수 있는데, 이렇게 할 경우 코드가 깰끔해지고 컴포넌트 내 관심사 분리를 유지하기 쉬워진다. 일반 함수 vs. 커스텀훅커스텀훅 또한 함수라고 했는데, 그렇다면 일반 함수와 커스텀 훅의 차이는 무엇일까? 1. 네이밍 규칙커스텀훅들은 "use"라는 이름으로 시작해야 한다(예: useFetchData). 이를 통해 리액트가 이 친구가 커스텀훅이라는걸 알 수 있게 되고, 리액트 내부에서 진행되는 특정 최적화 작업의 대상이 될 수 있다... 공감수 0 댓글수 0 2023. 8. 16.
TCP와 UDP TCP(Transmission Control Protocol) UDP(User Datagram Protocol) TCP와 UDP는 OSI 모델 4계층인 전송 계층에 속하는 프로토콜들이다. 같은 transport protocol이지만 이 두 프로토콜엔 차이가 존재한다. OSI 4계층, Transport Layer 4계층은 목적지 단말 안에서 동작하는 여러 애플리케이션 프로세스 중 통신해야 할 목적지 프로세스를 정확히 찾아가고, 패킷 순서가 바뀌지 않도록 잘 조합해 원래 데이터를 잘 만들어내기 위한 역할을 한다. TCP(Transmission Control Protocol) TCP는 네트워크상으로 데이터를 전송할 때 사용되는 신뢰성있는(reliable) 연결 기반(connection-oriented) 프로토.. 공감수 0 댓글수 0 2023. 8. 15.
클라이언트 사이드 렌더링 vs. 서버 사이드 렌더링 (CSR vs. SSR) CSR과 SSR이란 CSR과 SSR은 클라이언트-서버 아키텍처 상 웹페이지를 렌더링할 수 있는 두가지 다른 방법을 뜻한다. CSR의 경우, 페이지 렌더링의 대다수는 클라이언트 쪽에서 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용해 진행된다. 클라이언트의 브라우저는 자바스크립트 코드를 다운로드 하고, 그 이후 브라우저에 컨텐츠를 동적으로 렌더링하기 위해 API 호출 등을 한다. 이러한 접근법은 더욱 인터렉티브하고 다이나믹한 유저 경험을 만들 수 있다는 장점이 있으며, 페이지 전체를 로딩할 필요 없이 특정 부분만 업데이트 된다는 장점이 있다. 반면, SSR의 경우엔 서버가 HTML 컨텐츠의 렌더링을 완성하여 클라이언트의 브라우저로 보낸다. 브라우저는 완전히 렌더링된 HTML을.. 공감수 0 댓글수 0 2023. 8. 3.
이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(event bubbling)은 웹 개발에서 사용되는 필수 개념 중 하나다. 이벤트가 발생했을 때, 해당 이벤트가 DOM 구조를 통해 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 특정 요소에서 버튼 클릭과 같은 이벤트가 발생하면, 그 이벤트는 그 특정 엘리먼트에서만 트리거되는게 아니라 이벤트가 발생한 요소의 부모 요소들과 document의 루트까지 트리거된다. 이벤트 버블링에 대한 이해는 효과적이면서 유지하기 쉬운 프론트엔드 앱을 개발하는데 필수적이다. 특히나 유저 인터페이스가 복잡하고 인터렉션 가능한 요소가 많은 프로젝트일 수록 그 효과가 더 커지기 때문에 미리미리 공부해두면 좋다. 이벤트 전파(Propagation)의 3단계 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3.. 공감수 0 댓글수 0 2023. 7. 27.
레이지로딩(lazy loading)이란? 레이지로딩 (lazy loading)이란? 레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미한다. 레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것이다. 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한번에 받는 것이다. 이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감된다. 이러한 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 것이다. 레이지 로딩을 적용.. 공감수 3 댓글수 0 2023. 7. 27.
[JS] 이벤트룹 (Event loop), 힙(Heap), 콜 스텍(Call stack) * 본 포스팅은 이벤트 룹이 무엇인지 공부하고 정리한 내용을 재작성한 것입니다. 자바스크립트 런타임 환경의 동작 원리를 이해할 때 빼놓을 수 없는 주제가 바로 이벤트룹(event loop)이다. 이 이벤트룹의 존재로 인하여 자바스크립트 엔진이 싱글 스레드(single-thread)임에도 불구하고 브라우저 또는 Node.js와 같은 환경에서 마치 멀티 스레드로 동작하는 것과 같은 효과를 낼 수 있게 되는 것이다. 이벤트룹(Event loop)이란? 이벤트룹(Event loop)은 자바스크립트 런타임 환경에 포함되어 있는 기능 중 하나로, (1) 자바스크립트 엔진 내 콜 스택(Call stack)이 비어있고(2) 런타임 환경 내 이벤트큐(Event queue(task queue 또는 message queue.. 공감수 2 댓글수 2 2021. 11. 18.
HTTP/1.1 vs. HTTP/2 이전 포스팅에 HTTP에 관한 전반적인 개요를 공부하고 정리하였으나, HTTP의 발전 중 큰 변화가 있었던 HTTP/2가 이전 버전과 어떻게 다른지에 대하여선 공부하지 않았었다. 그래서 이번 포스팅엔 HTTP/2가 HTTP/1.1과 비교해서 어떤 점들이 다른지 돌아보고 정리한 내용을 담으려고 한다. 이전글: 2021.10.01 - [Learn to Code] - HTTP란? HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생 seo-tory.tistory.com 개요 HTTP/1.1은 90년대에 나온 버전으로, 20년도 더 된 아주 .. 공감수 4 댓글수 1 2021. 10. 24.
[JS] apply, call, bind apply(), call(), 그리고 bind()는 모두 함수의 프로토타입 메소드이다. apply, call, 그리고 bind... 함수 프로토타입 메소드로 존재한다는 것은 알고 있었지만 실상 많이 써보지 못해서 사용법을 숙지하지 못하고 있던 함수들이었다. 그나마 bind 같은 경우엔 리액트의 class component에서 필수로 사용해줘야 하는 메소드라서 몇 번 사용해봤지만, 그 리액트에서 마저도 class component가 아닌 function component만 계속 사용해왔기에 사용법을 잊고 있었다. 🥲 그렇게 어느덧 이 셋은 나의 기억 속에서 잊혀진 메소드들이 되어버렸다... 하지만 최근 이 셋을 다시 돌아봐야겠다는 굳은 결심(!!!)이 들었고, 다시 한번 이들을 활용할 수 있는 능력을 각성.. 공감수 0 댓글수 0 2021. 10. 21.
[JS] 클래스(class): 정적 메소드(static method)와 프로토타입 메소드(prototype method)의 차이 클래스(Class)는 ES6에서 도입된 기능이다. class 키워드를 사용하여 정의하며, 내부 몸체에 3가지 종류의 메소드를 사용할 수 있다. 이 세가지 종류가 바로 생성자, 프로토타입 메소드, 그리고 정적 메소드이다. class Character { // 1. 생성자 constructor(name) { this.name = name this.level = 1 this.job = "adventurer" } // 2. 프로토타입 메소드 introduce() { return `Hello, I'm ${this.name} and my level is ${this.level}.` } // 3. 정적 메소드 static complain() { return `Oh man! What is that smell?` } }.. 공감수 6 댓글수 1 2021. 10. 4.
[TIL] 갑자기 달력이 만들고 싶어졌다 (바닐라JS) 오늘도 Pinterest에서 예쁜 UI가 없나 찾아보다가 캘린더를 봤다. 그리고 갑자기 달력이 만들고 싶어졌다! 그래서 바닐라 자바스크립트로 달력을 만들었다. 🌱 Github Vanilla Javascript Calendar 위 핀터레스트 이미지와 비슷하게 아래와 같이 만들었다: 회색과 핑크의 조합은 진리이기 때문에 오늘의 날짜는 핑크색으로 표시되도록 했다. 날짜 위에 마우스를 올리면 핑크색으로 표시가 된다. prev와 next를 클릭하면 이전 달 또는 다음 달의 캘린더를 볼 수 있다. 추가하고 싶은 사항들 - 달별 컬러 적용 - 투두리스트와 합치기 공감수 2 댓글수 0 2021. 10. 3.
[JS] 정규표현식 (2) 최근에 코딩테스트를 보았는데, 이메일 유효성 검사를 구현해야했었다. 그런데 문제는... 정규표현식을 안써본지 너무 오래되서 도대체 기억이 나지 않는다는 것이었다 ㅠ_ㅠ.... 시간은 흐르지, 기억은 안나지, 게다가 시험 시작하고 15분 이후부터 왜 그렇게 화장실은 가고 싶은지 ㅠ_ㅠ... 총체적 난국에 그냥 코드로 길게 풀어서 구현하고 얼른 submit한 뒤 화장실로 달려갔었다. (코딩테스트 과정을 녹화해야 했는데 나의 시급함이 정말 말그대로 15분부터 영상에 그대로 나왔다...ㅋㅋㅋ....ㅋㅋㅜㅜ...🥲) 그래서 이번 기회에, 다음에 비슷한 문제를 또 겪게 되더라도 화장실 급함의 정도가 얼마나 위대한지에 영향받지 않고 정규표현식을 예쁘게 작성할 수 있게 되기 위해 다시 한번 정규 표현식을 되돌아보려고 .. 공감수 0 댓글수 0 2021. 10. 2.
[JS] 제너레이터란(Generator)?! 최근 한 인터뷰에서 자바스크립트의 yield를 알고 있는지 물어보셨다. 그런데 너무 당황스럽게도 6개월이 넘는 자바스크립트 공부 기간 동안 yield라는 키워드는 단 한번도 들어본적이 없었다!!!! (왜냐!! 왜 때문이냐!!?? 나란 개발자는나쁜 개발자더냐??) 🥲 그래서 인터뷰가 끝나자마자 yield를 검색해보았더니... yield 키워드는 제너레이터 함수를 멈추거나 다시 시작하게 하는데 사용되는 키워드라고 한다. 이 한 줄 설명을 보고 내가 yield 키워드를 못들어봤던 이유를 클리어하게 알게 되었다. 왜냐면 난 제너레이터 함수가 뭔지도 모르기 때문이다 🥲. (멈추거나 다시 시작하게 하는 대상이 무엇인지도 모르는데 그 키워드를 어찌 알았겠어...) 그래서 제너레이터 함수가 무엇인지부터 이해하고 그 이.. 공감수 1 댓글수 0 2021. 10. 2.
HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생하는 데이터 교환 행위의 근간이라고 할 수 있다. HTTP는 클라이언트-서버 프로토콜이며, 이는 즉 데이터를 받는 측 - 주로 웹 브라우저 - 가 요청을 시작하는 측이라는 것을 뜻한다. 클라이언트로부터 전송된 메시지는 요청(request)라고 부르고, 서버가 그에 대한 답변으로 보낸 메시지는 응답(response)라고 부른다. 클라이언트는 주로 웹 브라우저이지만, 구글 검색 크롤러 같은 로봇일 수도 있다. HTTP는 1990년대 초반에 디자인되었고, 그 이후로 꾸준히 발전해왔다. HTTP는 TCP.. 공감수 4 댓글수 0 2021. 10. 1.
[JS] 스코프(Scope)란? 스코프(Scope)란? 스코프란 변수 이름이나 함수 이름과 같은 식별자(identifier)의 수명을 결정하고 확인할 수 있는 범위를 뜻한다. 변수나 함수와 같은 모든 식별자들은 어느 위치에서 선언되었느냐에 따라 다른 코드가 자신을 참조할 수 있는지 여부가 결정되며, 이를 스코프라고 하는 것이다. 즉, 스코프는 변수나 함수가 유효할 수 있는 범위를 뜻하는데, 그렇기 때문에 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙으로 작용한다. 이와 같이 특정 시점에서 참조할 변수를 결정하는 것을 식별자 결정(identifier resolution)이라고 한다. 식별자(Intentifier) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 (출처). 스코프의 종류 스코프는 전역(global)과 지역(.. 공감수 0 댓글수 0 2021. 9. 30.
[JS] 웹팩(Webpack)과 바벨(Babel): 바닐라 자바스크립트에 처음부터 적용시켜보기 최근 바닐라 자바스크립트로 과제를 만들 기회가 있었다. 요즘 계속 React를 많이 사용했었기 때문에 JSX의 편리함에 익숙해져있던 편이었지만 다행히도 바닐라 자바스크립트를 사용해서 코딩하는 것 자체는 별 어려움이 없었다. 다만, 계속 create-react-app으로 만들어진 프로젝트들을 했었기 때문에 한번도 Webpack이나 Babel을 직접 인스톨해본 적이 없다는 것을 새삼스레 깨달았다. 그래서 이번 기회에, 아주 옛날 HTML, CSS, 그리고 자바스크립트를 혼자 공부했던 시절 진행했던 Front-End Mentor의 챌린지 과제 중 하나에다가 시험삼아 Webpack과 Babel을 인스톨해보고 설정을 직접하는 연습을 해보려고 한다. 오늘의 실험 대상은 무려 작년(!?)에 만들었던, 정말 내 Git.. 공감수 4 댓글수 2 2021. 9. 9.
[프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 공감수 1 댓글수 0 2021. 9. 1.
[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 공감수 0 댓글수 1 2021. 8. 26.
[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들을 업데이트하고 있다. Hoxy 프로젝트가 뭐였는지 궁금하시다면... ☺️ >>> 2021.07.21 - [Learn to Code] - [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagak.. 공감수 0 댓글수 0 2021. 8. 25.
웹 성능 개선을 위한 브라우저 작동 원리 이해 웹 성능 개선에 관해 공부를 하다가, 성능 개선 방법을 떠올리기 위해선 우선적으로 브라우저의 작동 원리에 대한 이해가 선행되어야 한다는 것을 깨닫게 되었다. 그러다 마주치게 된 것이 MDN의 "Populating the page: how browsers work"인데, 내용이 너무 좋아서 모든 페이지의 내용을 워드바이워드 읽어가며 공부했다. 본 포스팅은 이 글을 메인 레퍼런스로 공부하며 기록한 내용을 각색한 것이며, 글을 읽고 브라우저 작동 순서로부터 얻을 수 있는 성능 개선에 관한 나름의 인사이트를 정리한 글이다. 대기시간 && 싱글 스레드 브라우저 대기시간(latency)와 싱글 스레드(Single-threaded) 브라우저는 웹 성능을 이해하는데 있어서 가장 중요한 두 가지 요소이다. 클라이언트에서.. 공감수 3 댓글수 1 2021. 8. 24.
[JS] 즉시실행함수(IIFE)란? 자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다. 각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?! Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현) 말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불.. 공감수 0 댓글수 0 2021. 8. 19.
[JS] event loop이란? 자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까? 이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다. 이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 .. 공감수 0 댓글수 0 2021. 8. 18.
Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 공감수 0 댓글수 0 2021. 8. 18.
[JS] Javascript (ES6+) 자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른.. 공감수 0 댓글수 0 2021. 8. 10.
[TS] 타입스크립트 설치부터 데이터 타입 명시까지 🌱 타입스크립트 노트 깃헙 노트: src - index.ts 파이널 프로젝트를 개발하면서, 유달리 에러가 여러 번 발생했던 경우가 있었다. 바로 서버에서 가져온 유저 데이터를 기반으로 To-do list를 렌더링해야할 때 자꾸 우리 애가 not a function 이라던가 cannot get 0 of undefined라던가 에러가 뜨는 것이다. 분명히 코드 상으로 보았을 때 우리 애는 not a function일리가 없고 undefined 일리가 없는데 도대체 왜 이러나 싶었는데... 두둥 문제의 원인은 서버에서 받는 데이터의 데이터 타입과 클라이언트 쪽에서 작성한 데이터의 데이터 타입이 서로 달라서, 내가 찾는 프로퍼티가 없다거나 인덱스가 없다거나 하던 일이 계속 발생했던 것이다. 파이널 프로젝트 이전.. 공감수 0 댓글수 0 2021. 7. 30.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.