Yoonsang's Log

Amazon Culture

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

[JavaScript] 이터레이터와 제너레이터

이터레이터 정의 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..

[React] React 18 성능 개선 정리

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

[React] SSR(Server Side Rendering), CSR(Client Side Rendering), SSG(Static Site

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

브라우저 (Browser)

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

모던 자바스크립트 딥다이브 책읽기 스터디 후기

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

프로토타입 (Prototype)

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

Selecolor - 프론트엔드 게임 제작 챌린지

[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 아래에는 프로젝트 과정과 느낀점 및 개선할 점 등을 정리했다. 챌린지 소개 우선 챌린지에 대해 간단하게 소개하자면,..

프로퍼티(Property)

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태(value, writable, enumerable, configurable)를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. Object.getOwnPropertyDescriptor 메서드를 사용해서 PropertyDescriptor 객체를 통해 간접적으로 확인할 수 있다. 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 데이터 프로퍼티 (data property) 위에서 살펴보았던 value, writable, enumerable, configurable 프로퍼티 어트리뷰트가 데이터 프로퍼티에 속한다. Object.getOwnPropertyDescriptor 메서드를 사용해서 PropertyDescriptor 객체를 살..

AWS (Amazon Web Service) 클라우드 이해하기

프론트 개발자 입장에서 막연히 아 우리는 자체 서버를 쓰지 않고 AWS를 이용하는구나, EC2? S3? RDS? 뭐야 백엔드 개발자와 API로 통신만 해봤지 AWS 관련해서 얘기하는구나... 정도만 알겠지 알아들을 수가 없었다. 모든걸 다 물어봐가면서 할 수 없으니 공부해서 그들과 원활하게 소통하자. 글 작성은 2022년 1월 기준입니다. 시간이 지나 여러 개선사항들이 있을 수 있습니다. 클라우드 컴퓨팅 인터넷을 통해 필요한 리소스를 온디맨드로 제공하는 서비스를 클라우드 컴퓨팅이라고 한다. 클라우드 컴퓨팅을 사용하면 서버 컴퓨터 관리 등과 같은 인프라 관리에 대한 리소스를 비즈니스에 집중시킬 수 있다. 예를 들어, 한 쇼핑몰에서 블랙프라이데이에 엄청난 할인을 예고했다고 할때, 얼마나 많은 트래픽이 발생할..

스코프(Scope, 유효범위)

코드블록? 스코프? 블록 레벨 스코프? 함수 레벨 스코프? 강의를 듣거나 공식문서를 읽을때 흔히 보이는 키워드들이다. 코드블록과 스코프는 어떤점에서 차이가 있는건지, 블록 레벨과 함수 레벨 스코프는 어떤 차이가 있는지 확실한 이해가 없이 개발을 하고 있었고 "아 왜 에러가 뜨지" 하며 감으로 그리고 경험으로 고쳐가며 근본적인 문제를 놓쳐 왔던 것 같다. 앞서 작성했던 글들도 스코프에 대한 이해가 생기니 원리가 이해가 된다. 그리고 자바스크립트 엔진의 관점에서 값들이 어떻게 연결이 되어 있는지 스코프 체인을 통해 이해했다. 스코프를 통해 생각보다 많은 부분이 결정되고 있다. 그렇기 때문에 이해가 부족하면 자바스크립트의 다른 성격을 이해하는것이 힘들 수 있다. 추후 포스팅할 자바스크립트의 모든 코드의 평가와..

이펙티브 타입스크립트

자바스크립트의 자기 멋대로 추론해버리는 동적 타이핑이나 아주아주 많이많이 유연한 성격 등 여러가지 이유로 최근 타입스크립트가 주목받고 있다. 생각보다 타입에 의한 오류는 많이 일어나고 그 밖에도 여러가지의 오류를 사전에 커버가 가능한 든든한 타입스크립트를 공부하고자 한다. 책은 이펙티브 타입스크립트로 결정했다. 여러 현직 개발자분들께 추천받기도 했지만 아이템별로 되어 있는 부분이 각 아이템을 완료했을때의 사소한 보상심리를 만족시켜 오래 달릴 수 있는 동력의 연료가 되어줄 것이라 생각했다. 타입스크립트는 자바스크립트의 상위 개념이다. 즉, 모든 자바스크립트는 타입스크립트이다. 그렇지만 반대가 성립하지는 않는다. 모든 타입스크립트가 자바스크립트 일 수는 없다. 아무튼, 자바스크립트가 주는 매우 자유도가 높은..

호이스팅 (Hoisting)

호이스팅(Hoisting)은 자바스크립트에서 가장 유명한(?) 특징이다. 우선, Hoist 의 사전적 의미는 들어올리다, 게양하다 의 뜻이 있다. 국기 게양이 영어로 flag hosting 이라고 한다. 생각보다 실생활에 밀접한 영어 단어였던 호이스팅.. 사실 나는 학교수업에서 자바스크립트를 이용할때 처음 들어봤다. 아무튼 호이스팅을 이해하기 위해 예제를 먼저 살펴보자. console.log(score); var score; 모던 자바스크립트 딥다이브책 [예제 04-05] 음.. 이건 인터프리터 특성 상 위에서 아래로 한 줄씩 순차적으로 실행되어야 하니까 참조 에러(ReferenceError)가 발생해서 빨간색 좀 보겠군! 이라고 생각했지만 undefined가 출력이 된다. 즉, 잘 실행이 된다. 이번에..

[Swift] 함수

Swift의 함수 표현은 C언어 함수 표현부터 Objective-C의 복잡한 함수 스타일까지 굉장히 다양하고 유연하다. 함수 호출을 단순화하기 위해서 매개변수로 기본값을 제공할 수 있다. 모든 함수는 매개변수 유형과 반환 유형으로 나누어 진다. 하지만 다른 유형처럼 사용할 수 있다. 캡슐화를 위해 다른 함수 내에 작성할 수 있다. Swift에는 여러 최신 언어의 특징들이 포함되어 있다. 함수 정의 및 호출(Defining and Calling Functions) func 키워드와 함께 생성한다. -> 뒤에 오는 타입은 반환형의 타입이다. func greet(person: String) -> String { let greeting = "Hello, " + person + "!" return greeting..

[Swift] 제어 흐름

for-in, switch, while, if, tuple, ... 등 대부분의 문법이 익숙하다. 앞부분은 가볍게 읽고 넘어가면 될 듯하다. 조기 종료 (Early Exit) guard 문은 if 문과 다르게 else를 반드시 포함해야 한다. else 문에는 return , break, continue와 같은 반환하지 않는 함수나 메소드를 호출할 수 있다. [자료 출처] https://docs.swift.org/swift-book/LanguageGuide/ControlFlow.html Control Flow — The Swift Programming Language (Swift 5.5) Control Flow Swift provides a variety of control flow statements. ..

[Swift] 컬렉션 유형

Swift는 값 컬렉션을 저장하기 위해 배열, 집합, 딕셔너리 로 알려진 세가지 기본 컬렉션 유형을 제공한다. Array, Set, Dictionary 컬렉션의 가변성 (Mutability of Collections) 배열, 집합, 딕셔너리를 변수에 할당해서 생성하면 항목을 추가, 제거, 변경이 가능하다. 하지만 상수에 할당하였을 경우 변경할 수 없으며 크기와 내용을 변경할 수 없다. 배열(Arrays) 배열은 값을 순서가 있는 리스트와 같은 형식으로 값을 저장한다. 같은 값이 다른 위치에서 나타날 수 있다. 즉 중복을 허용한다. - Array - [Element] : 축약 형식 초기화 구문을 통해 빈 배열을 만들 수 있고 기본값을 넣어 배열을 만들 수 있다. var intArray: [Int] = []..

[Swift] 문자 및 문자열

Swift 는 String 타입으로 문자열을 나타낼 수 있다. (e.g. "Hello, World") C와 마찬가지로 String 타입의 문자열 각 문자 하나하나를 Character 타입으로 접근할 수 있다. String 유형은 Foundation 의 NSString 클래스와 연결된다. NSString 클래스는 Foundation에 속해져 있으므로 Foundation만 Import 하면 NSString에 접근할 수 있고 캐스팅 없이 String에 접근할 수 있다. 문자열 리터럴 (String Literals) String 코드 내에 문자열 리터럴로 미리 정의된 값을 할당할 수 있다. 즉 초기화 값을 줄 수 있다. let someStr = "문자열 초기화 가능" 또한 여러 줄로 값을 할당해줄 수도 있다. ..

[Swift] 기본 연산자

Swift의 연산자는 C와 같은 언어에서 이미 공통적으로 사용되고 있는 연산자를 지원한다. 특별하게 보였던 연산자는 a.. ), ~보다 크거나 같음 ( >= ) - ~보다 작음 ( < ), ~보다 작거나 같음 ( 1,2,3,4,5) 반개 구간 연산자 (a.. [2,3,4,5]) 논리 연산자 (Logical Operators) true or false 를 수정하거나 결합하는 연산자. NOT (!a) AND (a && b) OR (a || b) [자료 출처] https://docs.swift.org/swift-book/LanguageGuide/BasicOperators.html#//apple_ref/doc/uid/TP40014097-CH6-ID60 Basic Operators — The Swift Progr..

[Swift] 첫 시작과 계기, 기초

React Native로 iOS Share Extension(외부에서 공유하기)를 이용해 다른 앱에서 우리 앱으로 공유하게 하는 기능을 추가하기 위해 react-native-share-menu 라는 npm모듈을 이용해 적용하였다. 다른건 잘 되는데! 일부 앱(네이버, 핀터레스트 등)에서 제목이나 내용과 URL을 같이 내보내는 경우 앞에 text만 인식해서 URL을 무시하고 버려 버린다. 분명 배열같은 형태로 받아서 첫번째 아이템만 받아오는거니까 방식을 바꿔서 URL을 인식하게 하면 될 것 같은데.. Swift 소스를 보니 참 이래 저래 해봐도 안되네 안돼... 그래서 직접 Swift를 공부해서 이슈를 해결해보려고 한다. Swift iOS, macOS, watchOS 및 tvOS Application을 개..

모던자바스크립트 딥다이브

프론트엔드 개발자가 되겠다 마음 먹고도 6개월이 넘게 지났다. 아직 제대로 할 수 있는게 없는 것 같고 기본기가 부족한 느낌이 강하다. 학교 수업에서 간단하게 배운 JavaScript가 전부인 상태에서 React, React native 부터 하니까 본질적인 부분에서 많이 놓치는것이 많은 것 같다는 생각이 들었다. 아주 간단하게 구현이 가능한 것도 이미 오픈소스에 의존적으로 들여진 습관때문에 스스로 생각할 기회를 없애고 있었다. 이래선 안되겠다고 생각하고 있던 차에 NHN Cloud에서 열리는 컨퍼런스에 참여했다. 여러 세션이 있었는데 그 중 "결국 자바스크립트를 알아보기로 했다" 라는 주제의 세션을 인상깊게 보았고 기본기를 채우자고 결심했다. [유튜브 링크] https://youtu.be/HoqMPUk..

프론트엔드 개발자 성장 가이드 후기

Udemy에서 열리는 우테코 프론트엔드 강사님들께서 진행하시는 세션에 참여했다. 최근 여러 컨퍼런스들을 많이 들었지만 사실 가장 중요한 내 마음이 확실히 잡혀있지 않았는지 이번 세션이 많이 와닿았고 좋은 말이 많았다고 느낀 것 같다. 프론트엔드 개발자가 생각하는 고민들, 걱정되는 부분들에 많이 다루어주셨고 부담스럽게 느꼈던 부분들을 덜 수 있는 기회였고 학습 지향점을 찾을 수 있어 복잡했던 생각이 정리가 되는 세션이었다. 조금 더 흥미가 생기게 된 계기가 된 것 같아 알찬 시간이었고 머리속에서 떠나기 전에 꼭 글로 기록해놓고 싶은 소중한 이야기들이기 때문에 분명 다양한 측면에서 부딪히는 무언가 생긴다면 다시 이글로 돌아와 마음을 다잡을 수 있을 것이다. 아래에 도움이 되었던 내용들을 소감과 함께 리마인드..