분류 전체보기 328

[Deep Dive] ES6 함수의 추가 기능 (화살표 함수, REST 파라미터, 매개변수 기본값)

✔️ 이번 정독을 통해 알게 된 것 화살표 함수 REST 파라미터 매개변수 기본값 ✔️ 화살표 함수 함수 표현식으로 정의해야 합니다. 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있습니다. // concise body const power = x => x ** 2; // 위 표현은 다음과 동일하다. // block body const power = x => { return x ** 2; }; power(2); // -> 4 단, 함수 몸체가 하나의 몸으로 구성된다 해도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다. const arrow = () => const x = 1; // SyntaxError: Unexpected token 'const' ..

[Deep Dive] ajax

✔️ 이번 정독을 통해 알게 된 것 Ajax란 무엇인가요? 🤔 Ajax란 무엇인가요? 🤓 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. ✔️ Ajax 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. (자바스크립트를 사용해서 HTTP 요청을 전송하려면 XMLHttpRequest 객체를..

[Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유

✔️ 이번 정독을 통해 알게 된 것 동기와 비동기에 대해서 설명해주세요. 테스크 큐가 무엇인가요? 이벤트 루프가 무엇인가요? 🤔 동기와 비동기에 대해서 설명해주세요. 🤓 동기 = 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 테스크가 종료할 때까지 이후 테스크들이 블로킹되는 단점이 있습니다. 비동기 = 현재 실행 중인 테스크가 종료되지 않은 상태라 해도 다음 테스크를 곧바로 실행하는 방식이라 블로킹이 발생하지 않습니다. 하지만 테스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 🤔 테스크 큐가 무엇인가요? 🤓 setTimeout, setInterval와 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역입니다. 🤔 이벤트 루프가 무엇인가요?..

[Deep Dive] REST API가 무엇인가요?

✔️ 이번 정독을 통해 알게 된 것 REST API가 무엇인가요? 🤔 REST API가 무엇인가요? 🤓 REST를 기반으로 서비스 API를 구현한 것을 의미하는데, 여기서 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐를 의미합니다. ✔️ REST의 의미 (REpresentational State Transfer) REST = HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이다. RESTfull = REST의 기본 원칙을 성실히 지킨 서비스 디자인을 'RESTfull'이라고 표현한다. REST API = REST를 기반으로 서비스 API를 구현한 것을 의미한다. ✔️ REST API의 구성 자원 resource, 행위 verb, ..

지속 가능한 개발자 되기 위한 이야기

강의자 : 모모 Heli Aaron kakaopay software engineer 카카오페이와 카카오뱅크의 차이점 카카오페이는 법적으로 금융회사가 아니다. 서비스 개발 조직과 플랫폼 개발 조직의 차이 공부는 하는데 성장했는지 잘 모르겠어요.. 개발 역량 강화를 위한 도서 - 리팩터링 2판 - 구글 엔지니어는 이렇게 일한다 성장은 두가지 관점에서 볼 수 있다. 비즈니스에서의 성장 : 회사 입장에서의 성장 (매출 확대, 비용 감소, 사업 확장) 개인의 성장 : 나의 목표 (풍부한 기술 경험, 깊이 있는 학습, 다양한 협업) 개인 성장을 위한 목표 설정 1. 최대한 많은 자료 수집하기 (채용 공고, 도서, 컨퍼런스, 깃헙 등등) 새로운 기술을 처음 배울때는 만들거나 제안한 사람의 글, 문서 위주로 학습하는 ..

[Deep Dive] DOM과 노드

✔️ 이번 정독을 통해 알게 된 것 DOM이란 무엇인가요? innerHTML의 단점은 무엇인가요? 🤔 DOM이란 무엇인가요? 🤓 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 🤔 innerHTML의 단점은 무엇인가요? 🤓 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약합니다. 또한 요소 노드의 기존 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하게 됩니다. ✔️ DOM이란? Document Object Model은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공..

vite 환경에서 기본 포트 설정하기, vite 환경에서 서버 자동으로 실행하는 방법

그동안 CRA(create-react-app)만을 사용하다가, 현직에서는 CRA보다 Vite를 더 많이 사용한다는 말에 Vite가 궁금해졌습니다. Vite는 esbuild를 사용해서 빌드 속도가 빠른 빌드 도구 입니다. 빠르다는 이야기에 바로 테스트를 해보았는데 CRA보다 체감상 정말 빨랐고, 바로 vite를 사용하게 되었습니다. //package.json "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, package.json에는 "dev"라는 명령어로 브라우저를 킬 수 있습니다. 그래서 npm run dev를 하면 아래와 같은 주소에 실행됩니다. 그런데 CRA환경과 다르게 자동으로 브라우저가 열리지 않고, c..

[Deep Dive] 브라우저의 렌더링 과정

✔️ 이번 정독을 통해 알게 된 것 파싱이 무엇인가요? 렌더링이 무엇인가요? 브라우저의 렌더링 과정? script 태그를 body 태그 최하단에 추가하는 이유 🤔 파싱이 무엇인가요? 🤓 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 과정을 말합니다. 🤔 렌더링이 무엇인가요? 🤓 HTML, CSS, JS로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력하는 것을 말합니다. 🤔 브라우저의 렌더링 과정? 🤓 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이..

vite에서 emotion css props 사용하기

✔️ 에러 코드 Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. 해석 = Component selectors는 @emotion/babel-plugin, the swc Emotion plugin, 또는 다른 Emotion-aware 컴파일러로만 사용가능합니다. ✔️ 에러가 나온 이유 vite 환경에서 emotion 라이브러리를 사용하는데 위와 같은 에러메세지가 나왔습니다. 😅 Component Selector는 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링..