티스토리

잔잔한 물결로 파도 만들기

검색하기

블로그 홈

잔잔한 물결로 파도 만들기

hyuga.tistory.com/m

온라인 메모장

구독자: 2

방명록 방문하기

주요 글 목록

IT 회사의 개발조직 - 느낀 점 IT 개발 조직의 일원이라면 UX와 DX를 모두 고려해야 한다.- UX -> 사용자 경험 -> 유입 및 리텐션 상승 -> 매출 증대- DX -> 개발 생산성 -> 비용 감축 && 더 다양한 시도와 빠른 이터레이션으로 장기적 매출 증대 도모- UX와 DX는 상충되기도 한다. UX를 위해 무거운 라이브러리를 도입했다가 DX가 훼손되는 경우가 그 예이다. 이런 경우에는 정답이 없다. Trade off를 잘 비교해보되, 비슷하다면 UX의 손을 들어주고 이에 수반되는 기술적 챌린지는 문제해결능력을 발휘해서 해소한다. 업무 방식- 워터폴 방식 vs 애자일 방식- 워터폴: 기획 > 기획 리뷰 > 디자인 > 디자인 리뷰 > 개발- 애자일: 왔다갔다 빠른 피드백루프[GPT: IT 서비스 환경에서는 종종 하이브리드 방식이.. 공감수 9 댓글수 3 2024. 11. 4.
월간 회고 | 24.07. 업무 목록1. 위클리 발표- Prefetch 방법: Nuxt가 제공하는 useAsyncData vs Tanstack Query 비교- useQuery로 데이터 prefetching하여 SEO 개선하기 2. [Asset 페이지, Research 콘텐츠 페이지]에 스크롤 반응형 앵커 도입/개선3. [모바일 앱] 내 Webview의 CSS 버그 개선- 리서치/이벤트 섹션에서 상단 메뉴 탭이 고정되지 않는 문제였음. 4. [Asset 페이지] 자산 커뮤니티 게시판 phase 1 개발 및 운영 배포- 커뮤니티 페이지 분리 및 레이아웃 작업- 커뮤니티 페이지 상단 배너 도입(리서치 배너, Analytics Module)- 기능 관련 API 모델 구현 및 API 연동- 게시판 및 게시글 내부 댓글 시스템 개선- U.. 공감수 0 댓글수 0 2024. 8. 3.
월간 회고 | 24.06. 무슨 일을 했나?온보딩 (Onboarding) - 2주- Vue 공부- Nuxt 공부- 우리팀 프로젝트 구조 파악 첫 업무 (알림센터 2차 개선) - 2주- 뷰 쿼리 활용해서 API 요청 캐싱- 스타일링- 무한 스크롤 구현 배운 점FE 마크업, 언어스타일링- 스타일링 레이아웃 잡는 법 (1. flex만 잘 사용하면 끝난다, 2. margin 말고 padding과 gap 사용 (서로 개입 못하게))- 레이어 개념 (css alpha blend, mix-blend-mode, 알파 채널, 게임 픽셀 쉐이터, 해골책)- (vue) deep 속성- 마스크 속성- 숫자 고정값, % 는 가능한 CSS에 포함되지 않는게 좋다. - 믹스인(mixin) (SCSS)- CSS Nesting (SCSS)- 다양한 CSS 속성.. 공감수 1 댓글수 0 2024. 6. 29.
TypeScript | Return 타입 명시, Function 타입 명시, 콜백함수 타입 명시 Return 타입 명시매개변수 받는 괄호 오른쪽에 콜론(:) 찍고 return 타입 명시 가능.// 올바른 return 타입 설정const combine = (arg1: number, arg2: number): number => { return arg1 + arg2}// 에러const combine = (arg1: number, arg2: number): String => { return arg1 + arg2}console.log(combine(1, 2)) void 타입자바 등 다른 프로그래밍 언어에는 있는 반환타입이다. 자바스크립트에는 void가 없었지만 타입스크립트에서 추가되었다.void는 return 값이 없는 경우이다.// void 타입 - return 값이 없음 (엄밀히 말하면, 기.. 공감수 0 댓글수 0 2024. 6. 9.
Frontend 개발자 | 첫 회사, 첫 일주일 출근 후기 첫 회사에 출근한지 일주일이 지났다. 정신없고 기빨리고 신기하고 재미있는 시간이었다ㅎㅎ 그냥 매순간이 황송하고..😭😭 내가 과연 이 회사에서 1인분을 할 수 있을까 싶기도 하고.. 아직 회사 건물에 드나드는게 어색하고 막 그렇다. 작년엔 아무것도 모르던 내가 이젠 개발자라니??? 내가 프로젝트에 가담한다니?? 다음은 첫 일주일동안 느낀 감상들이다. 1. 또 다시 강남이구나 회사생활을 많이는 안해봤지만, 인턴 등 계약직을 포함해서 늘 강남, 선릉, 압구정 쪽 근방으로 출퇴근을 했었다. 현 회사도 강남역에 바로 붙어있고 그래서 매일 아침 출근할 때마다 데자뷰같은 느낌이 든다. 늘 느끼지만 강남역엔 사람이 참 많다. 어지러워서 싫어하지만 또 사람 구경하는 맛도 있다. 새삼 반 년 전에는 경기도 기숙사에 .. 공감수 1 댓글수 3 2024. 6. 1.
TypeScript | 기초 설정, 기본 데이터타입 기초 설정기본 셋팅1. npm 설치해당 프로젝트에 npm init 해서 node.js 설치 2. lite server 의존성 설치 (optional)npm install --save-dev lite-server 의존성 설정(package.json) 들어가서 "start" 명령어에 lite-server 등록하기 * 컴파일 하는 방법TS 컴파일 명령어tsc 파일명// tsc app.ts 그럼 ts 파일이 컴파일되어 js 파일이 생성된다. 만약 IDE 단에서 오류를 발견했다고 하더라도 컴파일 자체를 막진 않는다. 따라서 컴파일 하기 전에 에러가 있는지 잘 확인하고 고친 후에 컴파일을 해야 한다. 안그러면 오류가 있는 버전의 JS 파일이 도출된다. 데이터타입TS는 JS의 슈퍼셋. 즉 JS의 기존 데이터타입을 다.. 공감수 0 댓글수 0 2024. 5. 26.
CSR vs SSR - 로드되는 HTML 파일의 내용 비교 CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다. 실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋 CSR 웹사이트 [개발자 도구 - 네트워크 탭 - HTML 파일] 선택HTTP 헤더 포함 다양한 정보들이 나온다. 우클릭하고 [소스 패널에서 열기] 클릭 그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다. 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 .. 공감수 0 댓글수 0 2024. 4. 26.
JavaScript | 실행 컨텍스트 (3) - 클로저 인터넷에서 클로저의 정의를 둘러보다보면 잘 이해가 가지 않는다. 굉장히 모호하게 서술되어있기 때문이다. 개념 자체가 모호해서 그런 것일 거다. 내가 책에서 이해한 방식대로 한번 정리하는 것이 필요할 것 같다. 클로저를 활용하는 방식은 다양한데, 솔직히 말하면 내가 아직 거기까지 다루기엔 시기상조인 것 같다. 그래서 이번에는 클로저가 어떤 개념인지를 명확히 이해하는 것에만 초점을 맞추려고 한다. 클로저(Closure)란? 클로저에 대한 서술은 저자마다 상이한데, 코어 자바스크립트 저자에 따르면 그나마 다음 문장들이 잘 정의한 것에 가깝다고 한다. 클로저는 함수를 선언할 때 만들어지는, 유효범위가 사라진 후에도 호출할 수 있는 함수 - , p116 클로저는 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는.. 공감수 0 댓글수 0 2024. 3. 29.
JavaScript | 실행 컨텍스트 (2) - This 바인딩 앞서 실행 컨텍스트의 구성 요소 중 ThisBinding도 있다고 하였다. 이는 this 키워드가 무엇을 가리킬지를 나타내는 정보이다. 코드를 짜다보면 지금 내가 호출하는 this가 무엇을 가리킬지가 머릿속에 그려져야 하는데, 자바스크립트의 this를 공부해보면 참 줏대가 없는 놈이라고 느낀다. 많은 사람들이 그럴 것이다. 특정 함수가 호출될 때 실행 컨텍스트가 형성되는데, 이때 어떤 상황이냐에 따라서 this에 다른 대상이 바인딩된다. 그 패턴에 대해서 알아보자. 선정리 후설명 전역 공간에서의 this 전역 객체를 가리킨다. (브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체) 메서드 호출에서의 this 메서드가 적용되는 객체를 가리킨다. (즉, 점(.) 앞에 붙어있는 .. 공감수 0 댓글수 0 2024. 3. 29.
JavaScript | V8 엔진의 메모리 관리 처음 JavaScript를 공부했던 1월에 자바스크립트의 동작 구조를 간단히 살펴본 바 있다. 직전 포스팅에서는 실행 컨텍스트 개념을 정리하였다. 그리고 최근에는 가비지 컬렉션(Garbage Collection)의 기본적인 개념에 대해서 살펴보았다. 이 두 개념에서 조금 더 나아가서, JavaScript에서 메모리 관리가 어떻게 이루어지는지를 전반적으로 알아보도록 하자! (잠깐 복습) 기본적으로 콜 스택(Call Stack)은 현재 실행 중인 함수의 실행 컨텍스트들을 쌓는 공간이다. [실행 컨텍스트 복습] 각 함수 호출은 실행 컨텍스트(Execution Context)라는 단위로 콜 스택에 쌓이게 된다. 실행 컨텍스트는 해당 함수의 실행에 필요한 모든 정보를 포함하는데, 여기에는 - 변수 환경(Varia.. 공감수 0 댓글수 0 2024. 3. 27.
JavaScript | 실행 컨텍스트 (1) - 실행 컨텍스트, 호이스팅, 스코프 1. 실행 컨텍스트(Execution Context) 실행 컨텍스트란? 흔히 JS의 동작원리를 그릴 때 콜 스택에 함수가 쌓이는 식으로 표현하는데, 그 쌓이는 것이 실행 컨텍스트이다. 지금 실행할 스크립트에 대한, 여러가지 필요한 정보(환경)를 객체에 담은 것이라고 보면 된다. 각 실행 컨텍스트는 변수 객체(Variable Object), 스코프 체인(Scope Chain), 그리고 this에 대한 정보를 포함한다. 실행 컨텍스트는 자바스크립트 엔진의 가장 핵심적인 부분 중 하나로, 스코프, 호이스팅, 클로저 같은 자바스크립트의 주요 동작 원리의 기반이 되는 개념이다. 실행 컨텍스트의 생성 실행 컨텍스트는 우선 1) 전역 실행 컨텍스트(Global Execution Context), 2) 함수 실행 컨텍.. 공감수 0 댓글수 0 2024. 3. 26.
[자바의 정석 스터디] Ch3. 연산자/ Ch4. 조건문과 반복문 연산자와 피연산자연산자: 연산을 수행하는 기호 (+, -, *, /)피연산자: 연산자의 연산수행 대상모든 연산자는 연산결과를 반환한다.즉, 연산결과를 반환하지 않으면 연산자가 아니다.예를 들어, () 괄호는 연산자가 아니다. </p.. 공감수 0 댓글수 0 2024. 3. 25.
가비지 컬렉션(Garbage Collection) 최근 면접에서 가비지 컬렉션에 대한 질문을 받았다. 동적 메모리 할당을 공부할 적에 잠깐 본 적이 있는 주제라 기초적인 수준의 답변은 했으나, 짧은 경험상 GC에 대해서 제대로 들여다본 적이 없었다는 생각이 들어 아쉬웠다. 특히 '자바스크립트에서도 GC가 존재하는가?' 라는 질문을 주셨을 때, 자바스크립트를 다뤘으면서도 한번도 이를 고민해본 적이 없다는 점을 반성하게 되었다. '코드를 짜면서 free를 해준 기억은 없기에 엔진 내부적으로 GC가 동작하지 않을까 생각한다' 정도의 답변을 했으나, 이 기회에 제대로 알아야겠다는 생각을 하게 되었다. 해당 내용은 아래 포스팅에 마저 기록! JavaScript | V8 엔진의 메모리 관리 1. 가비지 컬렉션이란? 가비지 컬렉션(GC)은 동적 메모리 관리의 한 형.. 공감수 0 댓글수 0 2024. 3. 24.
리액트에서 useEffect를 처리하는 과정 (프로젝트 교훈) 이번 프로젝트에서 어려웠던 점 중 하나는 리액트 내부의 코드 실행 순서를 제대로 이해하지 못하고 있다는 것이었는데, 그로 인해 겪은 시행착오 덕에 여러가지를 배울 수 있었다. 나름 유의미했던 러닝포인트 하나를 기록해두고자 한다. 문제 상황 우리 프로젝트는 사용자가 작업실을 만들고 그 안에서 플레이하는 형식이기 때문에, API 통신이나 소켓 통신을 활용하는 많은 기능에서 사용자가 어떤 작업실에서 요청을 하는지를 식별해야 했다. 때문에 spaceId(해당 작업실의 UUID)를 요청시 함께 주는 방식으로 설계하였다. 그런데 간헐적으로 HTTP 통신과 소켓 통신을 이용하는 몇몇 기능들이 동작하지 않는 문제가 발생하였고, 확인해보니 spaceId에 계속 null 값이 담겨서 서버에 가는 현상이 있었다. 당시 내 .. 공감수 0 댓글수 1 2024. 3. 15.
[자바의 정석 스터디] Ch.2 변수 변수의 종류는 클래스 변수, 인스턴스 변수, 지역 변수가 있다.지역변수는 0으로 초기화되지 않기 때문에, 읽기 전에 값을 꼭 초기화해야 한다.직관적으로 표현하면, 지역변수에 값을 할당하지 않고 출력하거나 호출하면 에러가 발생. 클래스나 인스턴스 변수는 특정 값을 할당해주지 않고, 선언만 한 다음 바로 불러도 0으로 초기화 된 상태.<l.. 공감수 0 댓글수 0 2024. 3. 8.
크래프톤 정글 수료 후기 개발자가 되겠다며 독학을 6개월, 그러다가 크래프톤 정글이라는 곳을 알게되었고 운명(?)을 느꼈다. 어찌어찌 합격한 당시에는 정말 간절했고 기뻤지만, 한편으로는 꽤나 막막하기도 했다. 합숙이 큰 메리트라고 느끼긴 했지만 10월부터 2월까지(약 5개월) 낯선 장소에서 유배 생활을 하는 게 쉬운 일은 아니기 때문이다. 그래도 어쩌다보니 겨울은 지나가고, 나는 다시 사회에 나왔다.👏👏이렇게 또 하나의 챕터가 끝이 났다.개인적인 회고는 매 커리큘럼마다 적어왔다. 1주차 회고 (알고리즘, 자료구조 1)2주차 회고 (알고리즘, 자료구조 2)3주차 회고 (알고리즘, 자료구조 3)4주차 회고 (RB-Tree Lab)5주차 회고 (Malloc Lab)6주차 회고 (Proxy Lab)PintOS 회고 1PintOS.. 공감수 2 댓글수 4 2024. 3. 5.
Week 14-18. 최종 프로젝트(나만무) 회고 2/24(토)에 나만무 최종 발표를 했다. 그동안 잠시 휴식도 취하고, 이력서 초안도 작성하느라 뒤늦게 후기를 작성한다. 결론부터 얘기하자면, 나만무는 정글 생활 중 가장 기억에 남을 하이라이트 기간이었다. 정말 힘들었고 가끔은 외면하고 때려치고도 싶었지만, 꽤 그럴싸한 프로그램이 탄생했을 때의 보람과 최종 발표 후의 뿌듯함은 정말.. 이루 말할 수 없다. 그리고, '당분간 몇 년은 개발자로 살아도 되겠네!' 라는 확신을 갖게 해준 고마운 과정이었다. 감사해요 정글~ 아직 제대로된 프로젝트 경험도 없고, 백엔드/프론트엔드 조차 결정하지 않았던 나는 나만무 직전에 '사람에 대한 이해가 중요한 직군'이라는 동기의 말에 이끌려 프론트엔드를 선택하게 되었다. 그리고 이번 프로젝트를 경험하면서 프론트엔드에 큰.. 공감수 1 댓글수 1 2024. 2. 29.
Week 12~13. 기술스택 학습 기간 회고 이번 기수부터 추가된 '실력 다지기' 기간이 끝났다. 해당 기간은 프론트엔드/백엔드에 주로 쓰이는 웹 프레임워크를 2주동안 자율적으로 학습하는 시간이다. 나는 프론트엔드에 흥미를 느꼈기 때문에 HTML, CSS에 대한 복습부터 자바스크립트, 리액트에 대한 학습을 진행했다. 하루에 대략 15~16시간을 학습했지만, 그럼에도 2주라는 기간이 이 지식들을 충분히 익히기에는 많이 부족하다고 생각한다. 그래서 어떻게 하면 이 기간을 의미있게 쓸 수 있을까에 대해서 많이 고민했다. 결국 2주간 최대한 이해도를 높여서 프로젝트에 들어가는 것이 목적이었기에, 노레퍼런스/노기획/노디자인의 CRUD 게시판을 만들면서 리액트 프레임워크 활용법에 대해 고민하고 익숙해지는 것에만 대부분의 에너지를 썼다. 결과물로 나온 게시판.. 공감수 2 댓글수 1 2024. 1. 10.
JavaScript | 스프레드 연산자, forEach, map 기본 개념 만일 다음과 같은 코드가 있다면, const str = 'abcde'; [...str].map((e)=>console.log(e)); [...str].forEach((e)=>console.log(e)); map을 이용한 출력문과 forEach를 이용한 출력문은 각각 같은 결과를 낼 것이다. a b c d e 여기에 쓰인 스프레드 연산자, map 함수, forEach 함수는 자바스크립트 개발에서 아주 유용하게 쓰이는 것들이다. 스프레드 연산자 [... OO]에 대하여 [... OO] 구문에서 '...'에 해당하는 부분은 자바스크립트에서 '스프레드(spread) 연산자'라고 불린다. 이 연산자는 이터러블(iterable) 객체의 개별 요소를 분리하여, 각 개별 요소들을 새로운 배열에 담아 반환한다. 위 예제.. 공감수 0 댓글수 1 2024. 1. 9.
네트워크 | TCP/IP Updated 모델 (5계층 모델) 이전에 TCP/IP 모델 이론에 대해서 공부한 적이 있다.네트워크 모델 | (1) OSI 모델, TCP/IP 모델 개요네트워크 모델 | (5) 데이터 단위와 흐름 이해하기<a style="color: #0070d1;" href="https://hyuga.tistory.. 공감수 0 댓글수 0 2024. 1. 6.
React | 컴포넌트의 생명주기, useEffect Life cycle: 마운팅 - 업데이트 - 언마운팅 Mount: 컴포넌트가 화면에 나타나는 것 Update: 컴포넌트가 업데이트되어 리렌더되는 것 Unmount: 컴포넌트가 화면에서 사라지는 것 useEffect로 생명주기 핸들링하기 리액트는 라이프 사이클마다 실행할 수 있는 메서드를 가지고 있는데, 이들은 함수형이 아니라 클래스형 컴포넌트에서만 사용할 수 있다. componentDidMount componentDidUpdate componentWillUnmount 그러나 앞서 배웠듯 이러한 메서드들은 리액트 훅을 통해 함수형 컴포넌트에서도 사용 가능해졌다. 컴포넌트 생명주기를 핸들링하는 기능은 useEffect 라는 훅을 통해 구현된다. 첫번째 파라미터에는 콜백함수(Clean-up 함수)가 들어간다... 공감수 0 댓글수 2 2024. 1. 5.
JavaScript | JS 엔진과 런타임 환경의 구조 (스택, 힙, 이벤트루프 ..) 자바스크립트는 싱글 스레드 언어로 설계되었다. 그러나 Blocking I/O를 효율적으로 처리하기 위해 비동기 처리를 가능케 하는 여러 메커니즘과 함께 동작한다. 이러한 메커니즘은 자바스크립트 엔진(V8 엔진 등)과 런타임 환경(대부분의 경우 웹 브라우저, 또는 Node.js 같은 서버 사이드 환경)에 의해 제공된다. 이들을 포함한 자바스크립트의 핵심 구성 요소에는 콜 스택, 힙, 이벤트 루프, 태스크 큐(또는 이벤트 큐)가 있으며, 추가적으로 마이크로태스크 큐와 웹 API도 중요한 역할을 한다. 시간관계상 더 자세한 내용은 다음에 학습하기로 하고, 오늘은 오버뷰만 해보도록 하자! 1. 자바스크립트 엔진 내부 구성요소 자바스크립트 엔진(대표적으로 크롬의 V8) 내부의 구성요소로는 콜 스택, 힙이 있다. .. 공감수 0 댓글수 0 2024. 1. 4.
AWS 클라우드 서비스 교육 필기 AWS General Immersion Day 포지션 소개 Solution Architects: 엔터프라이즈에서 서비스 런칭할 때 AWS 상 아키텍쳐 조언 Technical Account Manager: 기업에서 발생하는 각종 이슈들 조언 AWS 글로벌 인프라 대체로 가까운 리전, 가용영역(AZ)에 서비스 연결 하나의 가용영역(AZ)이 뻑나도 문제 없게 설계. 데이터센터 뿐 아니라 글로벌 네트워크도 갖고 있음. 가용 영역(AZ)은 AWS 리전에서 중복 전력, 네트워킹 및 연결을 지원하는 하나 이상의 개별 데이터 센터입니다. AZ를 사용하면 단일 데이터 센터보다 더 높은 가용성, 내결함성 및 확장성을 갖춘 프로덕션 애플리케이션과 데이터베이스를 운영할 수 있습니다. 서브넷에서 실행되는 애플리케이션을 여러 A.. 공감수 0 댓글수 1 2024. 1. 4.
React | State(상태) 관리, Props 전달의 기본 개념 State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제를 .. 공감수 0 댓글수 0 2024. 1. 2.
React | 리액트 프로젝트의 기본 실행구조 분석 드디어 리액트 라이브러리를 익힐 때가 왔다! 처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다. 그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다. 그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보면, 보이.. 공감수 0 댓글수 1 2024. 1. 2.
JavaScript | 비동기 처리 | async & await 키워드 비동기 처리 발전과정 요약 현대의 프론트엔드 개발에서 비동기 프로그래밍은 필수적이다. 서비스는 사용자의 요청에 신속하게 응답하고, 동시에 백그라운드에서 데이터를 로드하고 처리하는 등의 복잡한 작업을 수행해야 하기 때문이다. 초기의 자바스크립트에서는 이러한 비동기 작업을 주로 콜백 함수를 통해 처리했다. 그러나 서비스의 규모가 커지고 로직이 복잡할수록 콜백 지옥이라는 부작용이 발생했으며, 이는 가독성 저하와 유지 보수 난이도 상승으로 이어졌다. 이러한 문제를 해결하기 위해 ES6(ECMAscript 2015)에서 Promise가 도입되었다. Promise를 통해 비동기 작업 완료 실행될 작업을 연기하는 것이 수월해졌고(Promise 객체 리턴값을 변수에 담은 후에 나중에 활용하는 식으로), 또한 체이닝을 .. 공감수 0 댓글수 1 2024. 1. 1.
JavaScript | 비동기 처리 | Promise 객체 동기 처리, 비동기 처리 자바스크립트는 기본적으로 싱글 스레드 언어이다. 따라서 하나의 작업 흐름을 따라 처리한다. 그러므로 이전 작업이 진행 중이라면, 다음 작업을 수행하지 않고 기다린다. 이를 동기적 방식, 혹은 blocking 방식 이라고 부른다. 이렇게 했을 때의 문제점이 있는데, 바로 실행 시간이 긴 하나의 함수를 뒤의 함수가 계속해서 기다리는 경우가 생긴다는 것이다. CPU 스케줄링에서 FIFO 방식의 부작용을 그대로 상상하면 된다. 사용자 경험을 위한 언어인 자바스크립트 특성상 이는 치명적인 단점이다. 따라서 비동기적 방식, Non-blocking 방식이 도입되었다. 싱글 스레드이지만 마치 병렬처리를 하는듯한 착시를 일으키자는 것! 비동기식 프로그래밍에서는 특정 작업이 백그라운드에서 실행되며.. 공감수 0 댓글수 0 2024. 1. 1.
JavaScript | V8 엔진과 런타임 환경의 기본 개념 자바스크립트 런타임 환경 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 1) 브라우저와 2) 브라우저 밖(Node.js) 으로 구분할 수 있다. 본래 브라우저가 자바스크립트의 고향이고, Node.js 덕에 브라우저 밖에서도 자바스크립트를 구동할 수 있게 되었다. 1. 웹 브라우저 웹 브라우저는 자바스크립트의 가장 전통적인 런타임 환경이다. 여기서 자바스크립트의 목적은 HTML과 CSS로 된 정적인 웹 페이지를 동적 웹 페이지로 조작할 수 있도록 하는 것이다. (대표적으로 이벤트 처리, 실시간 화면 전환, 시각 효과 등) 이를 위해 브라우저 내에는 자바스크립트 코드를 파싱하는 자바스크립트 엔진이 내장되었는데, 이 엔진은 파싱 외에도 DOM API, 이벤트 핸들링, AJAX 통.. 공감수 0 댓글수 0 2024. 1. 1.
Web API 이해하기 (BOM, DOM) Web API 브라우저는 WEB API (= DOM + BOM)을 제공한다. 이는 자바스크립트 자체의 기능이나 문법이 아니라, 프로그래밍 언어로 웹페이지를 조작할 수 있도록 브라우저에서 제공하는 기능이다. BOM (Browser Object Model) BOM(Browser Object Model): 브라우저 자체를 다루기 위한 API 잘 보면 WEB API의 모든 것들이 window라는 객체의 하위 집합임을 확인할 수 있다. window 객체는 다양한 객체를 포함하고 있다. window.location window.navigator window.screen window.history .. 등 이 window 객체들의 집합을 BOM(Browser Object Model) 이라고 한다. 이들은 다양한 기능.. 공감수 0 댓글수 1 2023. 12. 28.
Week 10~11. PintOS 프로젝트 회고 오늘로써 크래프톤 정글에서의 핀토스 과정이 마무리됐다. 👏👏 프로젝트 중에 VM이 가장 어렵다고 정평이 나있었는데, 역시나 가장 어려웠다.. ㅋㅋㅋ 개인적으로 코로나에 걸려 공백이 좀 있었고, 그 체력과 멘탈에서의 후유증이 3번째 프로젝트까지 넘어와 좀 힘들었던 것 같다. 마치 배터리가 금방 방전되는 것 같은 기분..? 그래도 막판에는 다시 몰입할 정도로 회복되어서 다행이었다. 핀토스 과정에서 많은 것을 얻었다. 아쉬움이 일절 없다면 거짓말이지만, 그래도 이전의 나에 비하면 프로그램을 대하는 태도가 많이 달라졌다고 느낀다. 가장 큰 건 두려움이 한 층 걷힌 것 같다. 또한 주변에서 잘 해내는 친구들을 보면서 앞으로 나는 어떻게 프로그래밍을 해야 하는가에 대해서도 많이 생각해볼 수 있었다. 이 기억과 감흥.. 공감수 0 댓글수 1 2023. 12. 28.

문의안내

티스토리
로그인
고객센터

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