Yoonsang's Log

AWS를 공부하면서 회사의 본질적인 부분부터 배울점이 많다는 것을 알게 되었다. 회사의 문화와 태도가 직원 뿐만 아니라 고객들이 더욱 만족할 수 있고 좋은 이미지로 생각 할 수 있다는 것은 쉬운 일이 아니다. Amazon Web Service가 세상에 이루어 낸 변화들과 직원들의 마음가짐들이 다른 회사와는 다르다는 것을 명확히 알기 위해 회사의 문화에 대해 알아보았다. Innovation 혁신은 사물, 생각, 진행 상황 및 서비스에 대한 점진적인 혹은 급진적인 변화를 일컫는 말이다. Jeff Bezos가 엄청나게 완성도 높은 혁신을 이루어 낸 Amazon이라는 회사를 만들 수 있었던 이유는 아래 4가지에 있다. - Culture - Mechanism - Architecture - Organization ..

AWS 2023. 1. 21. 18:18

이터레이터 정의 ES6부터는 Array, Set, Map 등을 순회하기 위한 이터레이션 프로토콜(iteration protocol)이라는 것이 도입되었다. 아래 예제 코드를 살펴보면, const array = [1,2,3] for(let i = 0; i 1,2,3 } const set = new Set([1,2,3]) for(let i = 0; i undefined, undefined, undefined } const map = new Map(['a', 1], ['b', 2], ['c',3]) for(let i = 0; i < 3; i++) { console.lo..

JavaScript & TypeScript 2023. 1. 21. 15:47

Concurrent Mode React 앱이 빠른 반응속도를 유지하고 사용자 장치 및 네트워크 속도에 적절하게 맞추는 기능 집합체 차단과 인터럽트 렌더링 Git과 같은 버전 관리 툴이 있기 전에는 브랜치라는 개념이 없어서 협업에 어려움이 있었음. React에서 업데이트 렌더링(새로운 DOM 노드 생성 및 컴포넌트 내 코드 실행)을 시작하면 이 작업은 방해받지 않는다. 즉, 렌더링을 차단할 수 있다. Concurrent Mode에서는 렌더링은 차단되지 않지만 인터럽트가 가능하다. 차단 필터링을 예로 들어, 목록 필터를 입력하고 모든 키를 누를 때마다 버벅거림이 있었다면 이를 debouce나 throttle 기법 등을 통해 해결할 수 있었지만 이들은 최적이 아니다. 버벅거리는 원리를 알아보면, 일단 렌더링이..

WEB 2022. 6. 2. 22:34

React를 사용하면서 Next.js에 대해 알게 되었다. Next.js를 사용하니 참 편했다. 페이지 라우팅을 페이지 폴더에 이름 맞춰서 넣기만 하면, 알잘딱깔센... (이럴 때 쓰는 게 맞나 ㅎㅎ) 뭐 SSR? 서버 사이드 렌더링? SEO? 검색 엔진 최적화? 잘 해준다고 하는데, 그게 뭐죠? 라고 물어봤을 때 대답할 자신이 없다. 그래서 오늘 확실하게 정리해보려 한다. SSR(Server Side Rendering) 서버에서 렌더링 준비하는 것을 허용하여 클라이언트에게 전체 웹페이지의 구성을 빠르게 전달할 수 있다. 그림을 보고 이해해보자. SSR 구조의 웹 페이지가 구성되어 있을 때, 클라이언트가 해당 웹 페이지에 들어가는 상황이라면, 서버는 HTML과 CSS을 파싱하여 HTML이 렌더링 될 수 ..

WEB 2022. 4. 24. 21:41

브라우저는 요즘 사람들이 가장 많이 사용하는 소프트웨어일 것이다. 대부분이 크롬과 같은 크로미엄 기반의 브라우저를 사용하고 있다. 빠른 속도를 만들어내지 못하고 모바일 생태계에서 살아남지 못한 인터넷 익스플로러의 시대가 끝나고 2012년 이후로 크롬의 시대가 왔다. 아래 그림은 StatCounter 브라우저 통계에 따른 2021.03 ~ 2022.03까지의 브라우저 점유율이다. 크롬이 약 65%로 대부분을 점유하고 있고, 그 뒤를 사파리가 약 19%정도 점유하고 있다. 그 뒤를 Firefox나 Edge가 3~4% 정도로 점유하고 있다. 인터넷 익스플로러가 저~ 아래에 있긴 하다. 오늘은 브라우저에 대해 알아보고 브라우저가 렌더링 되는 과정에 대해 포스팅하려 한다. 브라우저의 구성요소 우선 브라우저의 구성..

WEB 2022. 4. 14. 19:03

모던 자바스크립트 딥다이브 책 읽기 스터디를 2021년 12월 31일부터 2022년 3월 21일까지 약 3개월 간 진행하여 완료했다. 이번 포스팅에서는 스터디를 진행하면서 느낀점과 늘 스터디 구성원으로만 참여하다가 처음으로 스터디를 기획하면서 어떤 부분이 개선되어야 할지에 대해 적어보려고 한다. 스터디 기획 모던자바스크립트 딥다이브 모던자바스크립트 딥다이브 프론트엔드 개발자가 되겠다 마음 먹고도 6개월이 넘게 지났다. 아직 제대로 할 수 있는게 없는 것 같고 기본기가 부족한 느낌이 강하다. 학교 수업에서 간단하게 배운 JavaScript가 전부인 상태에 yanggak.tistory.com 스터디를 처음 시작하려고 계획할 때 이전에 작성한 블로그 포스팅인데, JavaScript 배경 지식이 부족하다고 생각..

JavaScript & TypeScript 2022. 3. 30. 03:33

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트의 클래스(ES6 이후)는 프로토타입 기반 패턴을 활용해서 클래스 기반 객체지향 언어(C++, JAVA 등)를 사용하는 것처럼 제공된다. 클래스에 관한 내용은 클래스 포스팅에서 자세히 다루고, 오늘은 클래스 기반 객체지향 언어보다 훨씬 강력한 객체지향 프로그래밍 능력을 가진 프로토타입이 무엇인지 살펴보자. 그리고 어떠한 프로퍼티를 검색하면 MDN 등에서 Object.prototype.~~ 과 같이 prototype 객체 내부에 있는 프로퍼티를 자주 보았을 텐데 어떤 프로퍼티는 prototype 객체가 아니기도 해서 헷갈렸던 적이 있는데 그 부분도 자세히 살펴보자! 프로토타입 체인 ..

JavaScript & TypeScript 2022. 3. 1. 01:44

[React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 Numble에서 열리는 2월 4일부터 2월 13일까지 10일간 게임을 만드는 챌린지에 참여했다. 지인들이 참여하는게 재밌어보이길래 참여했는데 하필 딱 2월 4일부터 다른 일정이 겹쳐서 시간이 많이 부족했다. 조금 급하게 개발한 감이 있지만 게임은 성공적으로 완성했고, 일단 무엇보다 재밌다.. 제작한 게임 링크 : https://selecolor.vercel.app Selecolor | Home Select a different color box. Very simple game! selecolor.vercel.app 아래에는 프로젝트 과정과 느낀점 및 개선할 점 등을 정리했다. 챌린지 소개 우선 챌린지에 대해 간단하게 소개하자면,..

WEB 2022. 2. 13. 22:05