코드를 위한 기록

Deploy 배포 개발한 서비스를 사용자가 이용가능하게 하는 과정 배포 4단계 1. Development 개발 - Local 컴퓨터 환경에서 개발 및 테스트 - Sample Data 이용 - 변경사항이 있어도 문제되지 않음 - 모든 구성원이 각자의 환경에서 진행 2. Intergration 통합 - 각자의 환경에서 개발된 부분을 취합 - 코드간 conflict(충돌)가 없는지 확인하는 단계 - 작성한 코드가 다른 코드에 문제를 발생시키지 않는지 확인 3. Staging - production 단계와 가장 유사한 환경에서 테스트 진행 - 복제된 실제 데이터를 이용해서 다양한 환경에서 테스트 - 모든 관계자들이 검증하는 단계(+마케팅팀, 디자인팀) 4. Production - 실제로 서비스가 제공되는 단계(..

Optimization 최적화 주어진 조건으로 최대 효율을 내는 것 허용된 자원 한계 내에서 주어진 요구 사항을 만족시키면서 최선의 결과를 얻는 과정 컴퓨터 공학- 가능한 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것 웹개발- 주어진 조건에서 최대한 빠르게 화면을 표시하도록 만드는 것 최적화의 필요성 및 효과 1. 이탈율 감소 화면을 불러오는 시간(로딩)이 길어지면 사용자가 페이지를 이탈할 확률이 높아짐 로딩 시간이 3초 이상 걸리면 53%의 사용자가 이탈(1~3초: 32%, 5초: 90%, 6초: 106%, 7초: 123%) 2. 전환률 증가 전환률: 회원가입, 게시글 조회, 구매, 다운로드 등의 활동 이탈한 사용자의 전환률은 0%이기 때문에 이탈율이 감소하면 전환률이 ..

보호되어 있는 글입니다.

token 설정 1. .env파일 생성 // .env // 토큰 이름 = 토큰 값 REACT_APP_TOKEN = secret123 2. 사용 NODE_ENV는 기본 제공하는 환경 변수임 const { TOKEN, NODE_ENV } = process.env if (NODE_ENV === 'development' || NODE_ENV === 'test') { token = TOKEN } 리액트가 아닌 경우 dotenv 라이브러리 필요 페이지 이동 시 스크롤이 상단에 위치하게 하기 window.scrollTo(0,0) 스크롤을 0, 0 좌표에 위치시키기 1. history 라이브러리 앞으로가기, 뒤로가기, 새로고침시 POP액션 발생 // POP 발생 시 스크롤 이동 history.action === 'PO..

REST API의 한계 1. overfetch 필요 없는 데이터까지 제공됨 - 유저 이름만 필요한데 유저의 가입일, 생일, 주소 등이 함께 제공 2. underfetch endpoint가 필요한 정보를 충분히 제공하지 못해 추가적인 요청을 보내야 함 - endpoint마다 제공하는 정보가 한정되어 유저, 유저의 포스팅 목록, 유저의 팔로워를 얻기 위해 세 번의 요청 필요 3. 클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 수정 필요 서버가 자원의 크기와 형태를 결정하기 때문에 클라이언트에서 필요한 데이터가 변할 경우 다른 endpoint를 통해 변경된 데이터를 가져오거나 수정해야 함 => 원하는대로 정보를 가져올 수 있고, 보다 편하게 정보를 수정할 수 있는 표준화된 Query Language가 ..

문자열과 그래픽 프로그래밍 언어로 다룰 수 있는 가장 기본적인 소스 문자열 프로그래밍 언어마다 문자열을 다루는 자료형이 다르고 이 자료형에 따라 문자열의 크기(바이트)가 다름 ASCII 문자 7비트 인코딩. 출력 불가능한 33개의 제어 문자와 출력 가능한 95개의 문자로 구성 - 영문 알파벳 대소문자 52개 - 숫자 10개 - 특수문자 32개 - 공백문자 1개 유니코드 유니코드 협회 제정, 전세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 문자셋 국제 표준. ASCII를 확장한 형태 Universal Coded Character Set + Transformation Format + 인코딩 방식(8, 16, 32 bits) 유니코드 탄생 전 같은 문자(한글 등)라도 인코딩..

운영체제 Operating System 하드웨어 상에 프로그램을 동작시키기 위해 일을 시키는 주체 - 하드웨어는 특정 기능을 수행하기만 함 - 컴퓨터라는 하드웨어 상에 프로그램이 동작되려면 하드웨어들이 적절하게 데이터를 주고 받으며 논리적인 일을 해야 함 운영체제의 목적 처리능력 향상, 사용 가능도 향상, 신뢰도 향상, 반환 시간 단축 등 운영체제의 기능 - 프로세서, 기억장치, 입출력장치, 파일 및 정보 등의 자원 관리 - 자원을 효율적으로 관리하기 위해 자원의 스케줄링 기능 제공 (스케줄링: 어떤 자원을 누가, 언제, 어떤 방식으로 사용할 지 결정해주는 것) - 사용자와 시스템 간의 인터페이스 제공 - 시스템의 각종 하드웨어와 네트워크를 관리하고 제어 - 시스템 자원 관리 운영체제는 응용 프로그램이 ..

컴퓨터: 하드웨어 + 소프트웨어 하드웨어: 전자 회로 및 기계 장치(입출력장치, 중앙처리장치CPU, 주/보조기억장치 등) 소프트웨어: 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램 컴퓨터의 기본 구성 요소 1. 입력 장치(Input) 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 컴퓨터에 연결하여 무언가를 입력할 수 있는 장치 ex. 키보드, 마우스, 스캐너, 타블렛, 조이콘 등 2. 출력 장치(Output) 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 ex. 모니터, 프린터 등 3. 중앙 처리 장치(CPU) ① 산술/논리 연산 장치(ALU. Arithmetic Logic Unit) 레지스터에 저장된 데이터를 이용하여 실제로 연산을 하는 ..

코드 분할(Code Spliting) 모던 웹으로 발전하면서 JavaScript 코드가 방대해지고 무거워짐을 개선하기 위해 런타임 시 여러 번들을 동적으로 만들고 불러오는 것 당장 필요한 코드가 아니면 따로 분리시키고, 필요할 때 불러와서 사용 -> 대규모 프로젝트 앱의 경우에도 페이지 로딩 속도를 개선할 수 있음 번들 분할, 줄이는 법 서드 파티 라이브러리(플러그인, 라이브러리, 프레임워크)는 다양한 메서드를 제공하기 때문에 코드 양이 많아 번들링 시 많은 공간을 차지함 -> 라이브러리를 전부 불러와 사용하지 말고, 필요한 것만 불러와 사용하는 것이 성능 개선에 좋음 // 라이브러리 전부 불러오기 import _ from 'lodash'; _.find([]); // 필요한 메서드만 불러오기 import..

Real DOM DOM. 실제 돔. 가상 돔과 구분하기 위해 Real DOM이라 명칭함 브라우저(JavaScript 같은 스크립팅 언어)가 태그에 접근하여 조작하기 위해 태그들을 트리 구조로 만든 객체 모델 DOM의 리렌더링 과정 DOM은 UI가 변경될 때마다 업데이트하는데, DOM 조작이 잦다면 DOM 렌더링은 브라우저의 파워(구동 능력)에 의존하기 때문에 성능이 안좋아지고 조작속도가 느려지게 됨 트리 구조는 저장된 데이터를 효과적으로 탐색할 수 있게하기 때문에 탐색 속도도 빠르고 변경/업데이트 속도도 빠르지만 요소가 변경/업데이트되어 DOM 트리가 재구축되면 브라우저 렌더링 엔진에서 리플로우, 리페인트(Reflow, Repaint)가 발생하며 재연산으로 인해 속도가 느려지게 됨 Virtual DOM ..