동기(Synchronous)와 비동기(Asynchronous)의 차이 동기 : 동기는 말 그대로 동시에 일어난다는 뜻. 요청과 그 결과가 동시에 일어난다. 쉽게 말해 한 작업이 끝날 때까지 그 작업만 해야한다는 뜻이다. 비효율적임. (ex. 카페 직원이 1명 뿐이라 커피가 나와야 다음 사람이 주문을 할 수 있다.) 비동기 : 동시에 일어나지 않는다. 한 작업이 끝날 때까지 주구장창 기다리는 것이 아니라 다른 작업을 하면서 기다릴 수 있다. 효율적임. (ex. 카페 직원이 500억명 있어 여러 주문을 한 번에 처리할 수 있다.) 콜백(Callback) 함수 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있다. 하지만 자바스크립트에서는 출력값이 없고 그 대신에 콜백 함수를 입력받는 함수들이 많이 있..

배포 자동화 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것 시간 절약 및 휴먼 에러(실수) 방지 가능 Source - 원격 저장소의 소스 코드에 변경 사항이 일어날 경우, 감지하고 다음 단계로 전달 Build - Source에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공 Deploy - Build에서 받은 것을 실제 서비스에 반영 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식 Code - 개발자가 코드 저장소에 Push Build - 코드 저장소에서 가져와 테스트 후 빌드한다. Test - 빌드 결과물이 다른 컴포넌트와 잘 통합되는지 확인 모든 코드 변화를 하나의 레포지토리에서 관리함. ..

▶ 최적화 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다. ▶ 최적화의 필요성 및 효과 1. 이탈률 감소 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다. 페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈한다고 하는데, 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다. 2. 전환율 증가 이탈률이 줄어들면 전환율이 높아질 확률이 커지는데, 전환율은 웹사이트를 방문한 사용자 중 회원가입, ..

GraphQL 페이스북에서 만든 쿼리 언어 만족도 및 인지도 굉장히 높음 Graph + Query Language의 줄임말 GraphQL은 그래프로 생각하기에서부터 출발한다. 마인드맵과 유사한 데이터 구조 그래프는 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조 하나의 점인 Node 또는 정점과 하나의 선인 간선으로 이루어져 있고, 각 노드간의 간선을 통해 특정한 순서에 따라 그래프를 재귀적으로 탐색 할 수 있다. GraphQL에서는 모든 데이터가 그래프 형태로 연결되어 있다고 전제한다. 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다. { 책 : { 책 이름 : "GraphQL은 어렵지 않다", 저자 : [ { 이름 : "김코딩"}, { 이름..

번들링 잡지를 사면 게임 CD를 주는 것과 같은 원리 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 프론트엔드에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 사용자는 브라우저를 열고 주소를 입력하면, 프론트엔드 개발자가 번들링한 여러 파일을 받는다. 용량을 크게 줄여줘 로딩 속도 시간을 줄여주고 높은 성능을 얻을 수 있다. WebPack webpack은 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러다. 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러이며, HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 조합해 하나의 묶음으로 번들링하는 도구이다. 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능함 np..

회선교환 방식 - 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결한다. 1:1 교환만 가능 패킷교환 방식 - 패킷이라는 단위로 데이터를 잘게 나누어 전송. IP 주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송하게됨 IP / IP Packet 정확한 출발지와 목적지를 파악할 수 있다. 복잡한 인터넷 망 사이에서도 정확한 목적지로 패킷 전송 가능 비연결성 - 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 비신뢰성 - 중간에 있는 서버가 장애가 생겨 패킷이 소실 돼도 클라이언트는 이를 파악할 수 없음. 또한 전달 데이터의 용량이 클 경우 이를 패킷 단위로 나눠 데이터를 전달하는데 패킷들은 중간에 서로 다른 노드를 통해 전달 될 수 있다. 이러면 클라이언트가 의..

인터넷 - 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망 (웹, 앱 , 이메일 등 네트워크 포함) 웹 - 문서, 이미지, 영상 등 다양한 정보를 공유할 수 있는 공간 웹 표준 웹에서 표준적으로 사용되는 기술이나 규칙 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록하는 웹페이지 제작 기법을 담고 있음 HTML, CSS, JavaScript는 각각 구조, 표현, 동작을 담당한다. 유지 보수의 용이성 - 코드가 경량화 되면서 트래픽 비용이 감소함 웹 호환성 확보 - 항상 동일한 결과가 나옴 검색 효율성 증대 웹 접근성 향상 Semantic HTML semantic - 의미의, 의미가 있는 HTML - 화면의 구조를 만드는 마크업 언어 요소가 어떤 내용을 담게 ..

상태 관리 React는 상태 관리를 위한 라이브러리는 아니다. 상태란 변하는 데이터, UI, 동적으로 표현되는 데이터 로컬 상태 - 특정 컴포넌트 안에서만 관리되는 상태 다른 컴포넌트와 데이터를 공유하지 않음 전역 상태 - 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태 (다크 모드,라이트 모드, 언어 설정) 서로 다른 컴포넌트가 동일한 상태를 다루면 출처는 오직 한 곳이어야 한다. (하나의 출처) 상태 관리 툴로는 React Context, Redux, MobX, Recoil 등이 있다. 상태 관리 툴은 전역 상태 저장소를 제공하고, props driling(필요치 않은 곳에 props 내려줘야하는) 이슈를 해결 해준다. Redux React에서는 상태와 속성을 이용한 컴포넌트 단위 개발..