나의라임오렌지원

코드 스플리팅을 위해 리액트에 내장된 기능으로 유틸 함수인 React.lazy와 컴포넌트인 Suspense가 있다. 이 기능은 리액트 16.6 버전부터 도입. 이전 버전에서는 import함수를 통해 불러온 다음, 컴포넌트 자체를 state 에 넣는 방식으로 구현해야 한다. React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 간편하게 컴포넌트 코드 스플리팅을 할 수 있다. * 코드 스플리팅(Code Splitting)? 코드 분할이다. 싱글 페이지 애플리케이션의 성능을 향상시키는 방법. 코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생긴다. React.lazy 컴포넌트를 렌더링하는 시..

알고리즘과 프로그램의 차이 '알고리즘(Algorithm)'이란, 계산이나 작업을 하기 위한 순서를 의미한다. 요리의 레시피와 같다고 생각하면 된다.어떤 요리를 만들기 위한 순서를 레시피라고 하면, 특정 문제를 컴퓨터로 해결하기 위한 순서가 알고리즘. 예를 들어 '아무렇게나 나열돼있는 숫자를 작은 순서부터 차례로 정렬하기' '출발점부터 목적지까지의 경로 중 최단 경로 찾기' 등 알고리즘은 프로그램과 비슷하다고 생각할 수도 있다. 하지만 프로그램은 컴퓨터상에서 실행할 수 있도록 컴퓨터가 이해할 수 있는 언어로 작성하는 것에 반해, 알고리즘은 프로그램을 작성하기 이전 단계에서 사람이 이해할 수 있도록 작성하는 것. 같은 알고리즘이라도 프로그래밍 언어가 다르면 다른 프로그램이 되며, 같은 프로그래밍 언어를 사용..

코드컨벤션(Code Convention) / 코딩컨벤션(Coding Convention) 내가 작성한 코드를 다른사람들도 쉽게 이해할 수 있게 가독성 있는 코드를 작성하는 법에 대한 규칙 Sun에서 소개하는 코딩 컨벤션의 필요성 1. 소프트웨어를 개발하는 일련의 모든 과정에 들어가는 비용 중 80%가 유지보수 2. 소프트웨어의 유지보수를 그 소프트웨어를 직접 개발한 개발자가 담당하는 경우 적음 3. 코딩컨벤션은 다른 개발자가 그 소스코드를 처음 보았을 때, 더 빠른 시간에 완벽히 이해할 수 있도록 도와주기 때문에, 코드의 가독성이 높아짐 4. 개발자가 자신의 소스 코드를 제품으로 팔고자 한다면, 자신이 작성한 코드가 다른 소스코드들과 잘 어울리도록 패키지(package)를 적절히 구성할 필요 있음 참고 ..

useMemo 를 사용하면 함수 컴포넌트 내부에서 발생하는 연산 최적화 가능 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식. useCallback 은 useMemo 와 비슷한 함수. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용. 이 Hook을 사용하면 만들어 놨던 함수를 재사용 가능하다. useCallback 의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다. 추가 내용 [2022.11...

문자열 치환/변환 시 사용되는 str_replace, preg_replace str_replace('찾을 문자열', '변경할 문자열', '해당 문자열') preg_replace(/찾을 문자열/, '변경할 문자열', '해당 문자열') 문자열을 검색해 치환 문자열로 변경한다. preg_replace 의 경우 정규표현식의 사용이 가능하다.

동기 방식 : 데이터를 서버와 클라이언트가 같은 속도로 연계하여 동작하는 방식 비동식 : 같은 속도로 연계하지 않는 방식 예를 들어, XMLHttpRequest 객체라는 편지를 우체통에 넣고 - 답장이 올 때 까지 우체통 앞에서 기다리는 것 -> 동기 방식 - 편지를 우체통에 넣고 답장이 올 때까지 다른 일을 처리 하는 것 -> 비동기 방식 //XMLHttpRequest 객체 생성 var request = new XMLHttpRequest(); request.open('GET', '/data.html', false); //send() 메서드에 소비되는 시간 측정 var prevDate = new Date(); request.send(); var nowDate = new Date(); //출력 alert(..

Apache 인터넷을 통해 액세스되는 웹 콘텐츠를 제공하기 위해 개발되었다. 개방형 개발자 커뮤니티에서 개발 및 유지 관리하는 오픈 소스 소프트웨어이며 다양한 운영 체제에서 실행된다. 핵심 구성 요소는 기본 서버와 같은 기능을 제공하므로 연결을 수락하고 동시성을 관리한다. 다양한 모듈은 각 요청에서 실행되는 다양한 기능에 해당한다. 특히 Apache 배포는 보안 기능, 동적 콘텐츠 관리 또는 기본 HTTP요청 처리와 같은 다양한 모듈을 포함하도록 구성할 수 있다. Nginx Apache 웹 서버의 성능 제한을 해결하기 위해 특별히 작성되었다. Nginx에서 각 작업자 프로세스는 수천 개의 HTTP 요청을 처리할 수 있다. 따라서 Nginx 는 가볍고 확장 가능하며 성능이 뛰어난 구현이다. 이 아키텍쳐를 ..

평소 REST 방식을 이용하는데 왜 REST 방식을 사용하게 되었는지 알고 싶어서 책을 읽다가 URL과 URI가 정리되어있어 글로 남긴다. 지난 10년간 일어난 IT 분야의 가장 큰 변화를 생각해 보면 '모바일' 모바일 시대가 되면서 WEB 분야의 가장 큰 변화는 서버 역할의 변화라고 할 수 있다. 과거에는 서버의 데이터를 소비하는 주체가 '브라우저' 라는 특정한 애플리케이션으로 제한적이었다면, 모바일의 시대가 되면서 앱이나 웹은 서버에서 제공하는 데이터를 소비하게 된다. 과거의 서버는 브라우저라는 하나의 대상만을 상대로 데이터를 제공했기 때문에 아예 브라우저가 소화 가능한 모든 데이터를 HTML 이라는 형태로 전달하고, 브라우저는 이를 화면에 보여주는 역할을 해 왔다. 스마트폰에서는 앱(App) 이라 ..

내가 생각하기에는 다른 방법도 있을 것 같은데 아직 그 방법을 찾지 못했다. 일단 성공한 방법으로는, index.html 에서 외부 스크립트를 불러오고 렌더링 되는 구역을 찾아서, 사용할 컴포넌트에 createElement('script')를 써줘서 head에 script 를 넣어버리는 것이었다. loadScript를 써서 index.html 으로 페이지 최초 호출 시, 불러오지 않아도 되는데 js 에서 쓰이는 함수가 많거나, 나중에 유지보수를 위해서 index.html 에 추가하는 방법을 택했다. export function test() = { const script = document.createElement("script"); script.innerHTML = `console.log('test()'..

인터프리터 언어 소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 프로그램(언어). 번역과 실행이 동시에 이루어진다. 인터프리터(Interpreter)란, 우리말로 '통역사'라는 뜻. 우리가 컴퓨터에 명령을 내리면 한 줄씩 즉시 통역사가 컴퓨터 언어로 바꿔주는 거라고 생각하면 된다. 규모가 큰 소스의 경우, 컴파일 언어는 프로그램 실행 전 먼저 기계어로 컴파일하는 데 시간이 오래 걸릴 수 있는데 인터프리터 언어는 코드를 한 번에 한 줄씩 읽어 들이면서 바로 실행이 가능하다. 즉, 한 줄 씩 명령을 내리다 보니, 그 명령 자체의 속도는 컴파일러 언어에 비해 느리다. 예를 들어 자바스크립트, 파이썬, 루비, sql 등 컴파일 언어 소스코드를 한꺼번에 다른 목적 코드로 번역한 후, 한 번에 실행하는 프로..