본문 바로가기

전체 글

(31)
[http] 브라우저의 렌더링 과정 본 포스팅은 저자 이웅모님의 '모던 자바스크립트 deep dive를 참고하였습니다. 🐬렌더링이란? 브라우저가 html, css, 자바스크립트로 작성된 텍스트 문서를 브라우저에 시각적으로 출력하는 것. 구글에 렌더링에 대해서 찾아보면 다양한 그림들이 나온다. 🐣렌더링 수행과정 1. 주소창에 www.goole.com 입력 -> dns가 실제 서버를 찾아준다. 2. html, css, 자바스크립트, 이미지, 폰트 등 렌더링에 필요한 리소스를 서버에 요청하면 응답을 받는다. 2. 브라우저의 렌더링 엔진이 응답받은 html, css를 파싱하여 DOM과 CSSOM 생성하고 결합, 렌더 트리 생성. 3. 브라우저의 자바스크립트 엔진이 응답받은 자바스크립트를 파싱, 이 때 자바스크립트가 DOM API를 통해 DOM이나..
[ssh] SSH: Could Not Resolve Hostname 오류 cafe 24에서 웹 호스팅을 위해서 ssh 키를 발급하는데, 터미널에서 ssh key-gen 명령어를 입력하면 SSH: Could Not Resolve Hostname 라는 에러 메시지가 떴다. 구글링해보니 stack-over flow에도 다양한 해결법들이 올라와있었지만 해당 답변들은 나에게 해당되지 않았다. 에러메시지는 SSH: Could Not Resolve Hostname 뒤에도 \276\313\267 이런식으로 숫자가 메시지에 포함되었다. 숫자가 포함된걸로 봐서는 암호화 방식과 관련된 에러로 추정되었지만.. 구글링해보니 해결방법도 안나와서 애를 좀 먹었다. 👉 우선은 ssh 공개키 발급과 관련하여 에러가 있다면 .ssh 내의 파일들을 모두 삭제하고 다시 생성하는 방법을 시도해보길 바란다. ope..
[mongodb] bad auth : Authentication failed. 에러 몽고디비 서버를 실행하는데 해당 에러가 발생했다. 해당 에러는 .env에 있는 uri를 수정함으로써 간단히 해결했다. MONGO_URI = mongodb+srv://softBUD:@****.q8acx.mongodb.net/myFirstDatabase?retryWrites=true&w=majority 여기서 에 해당하는 부분에 비밀번호를 넣으면 되는데, 이때 꺾새 괄호를 빼고 비밀번호만 입력해야한다. 몽고디비 서버 uri를 암호화해서 사용하지 않고 server.js 나 index.js에 바로 넣어서 실행하고 있는 경우에도 해당 부분을 수정해주면 된다. 프로젝트를 제대로 만들기 위해서는 uri를 암호화하는 과정을 꼭 해보길 추천한다.
[react] 'zlib' 모듈 오류 발생시 해결 방법 리액트와 mongo db로 웹사이트를 만들던 중에 발생한 에러이다. Module not found: Error: Can't resolve 'zlib' in... 대충 모듈을 찾을 수 없다는 내용의 에러이다. 구글링해보니 webpack에서 해결해야된다고 나와있었는데, 해결이 되지 않았다. 이것 때문에 app.js나 컴포넌트로 구별해놓은 js 파일들 중 axios 통신을 사용하는 js 파일을 수정했다. 상단의 import {response} from 'express'; 를 삭제하니 모듈에러가 해결되었다. 아마 axios 라이브러리에서 제공하는 함수의 response 인자가 아니라 express 프레임워크의 respose 기능을 불러오게되어서 발생한것같다.
[알고리즘] 배열에서 최소값 구하기 배열에 n개의 숫자가 담겨있을때, 최솟값을 구하는 방법이다. 1. for문 활용하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function test (...rest) { let arr = rest let result= arr[0]; for(let i=0; i arr[i]){ result = arr[i]; } } console.log(result); } test(3,17,8,4,5,9,6,1,2,9); //1 cs 함수의 인자로 받을 값들을 ...rest로 하여 배열로 만든다. 결과로 보여줄 변수에 배열의 첫번째 값을 할당시키고 for문으로 값의 비교를 반복하게 한다. 2. Math.min 활용하기 1 2 3 4 5 6 7 function test(...rest) { let res..
[JavaScript]배열에서 자주 쓰는 메서드들 여기서는 배열에서 자주 쓰이는 메서드들에 대하여 정리해두었다. 개별적인 메서드의 이해가 어려울 경우 구글링을 통해 좀 더 자세한 설명을 얻는 것이 좋다. indexOf 와 includes 1 2 3 4 5 6 7 8 9 10 11 12 const arr = [1, 2, 2, 4]; arr.indexOf(2); // 1 , 배열에서 요소 2 검색, 첫번째로 검색된 인덱스 반환 arr.indexOf(3); // -1, 요소 3이 없다 arr.indexOf(2, 2); // 2, 검색을 시작할 인덱스 번호 지정 const animal = ['cat', 'dog', 'bird']; if (!animal.includes('dog')) { //.includes가 false면 실행, 배열에 'dog'가 존재하지 않으..
[JavaScript] 배열의 기본 원리 자바스크립트에는 다른 언어와 동일하게 배열이라는 자료구조를 사용할 수 있다. 다른 언어와 구별되는 특징은 배열이라는 타입이 따로 존재하는 것이 아니라 일반 객체라는 것이다. 다만 일반 객체와는 달리 요소, 값의 순서(인덱스), length라는 특징들을 가지고 있다. 밀집배열과 희소배열 우리가 일반적으로 다른 언어에서 사용하는 배열은 밀집배열이다. 하나의 데이터 타입으로 통일되어 있고, 동일한 데이터 크기를 가지며, 서로 연속적으로 인접해있다. 이러한 구조는 인덱스 번호를 통해 효율적으로 임의의 요소에 접근할 수 있도록하며, 속도도 빠르다. 하지만 특정한 요소가 있는지 검색할 때, 배열의 요소들을 처음부터 하나씩 접근하므로 속도가 매우 느리다는 단점이 있다. 서두에서 말했듯이 자바스크립트는 일반적인 배열과..
[JavaScript] 화살표 함수 자바스크립트는 ES6부터 함수를 사용목적에 따라 구별하고 있다. 일반함수, 메서드, 화살표 함수이다. 이러한 함수들은 호출방식을 달리하고 있으며, 각자 내부슬롯이 다르게 작동된다. 그 중에서도 화살표 함수는 es6 이전에는 없던 기능이다. 화살표 함수의 정의 방식을 살펴보자. 1 2 3 4 5 6 7 8 9 10 11 //값을 반환하고, 문이 하나인 경우 중괄호를 생략할 수 있다. const func = (x, y) => x*y; //매개변수가 하나인 경우, 소괄호를 생략할 수 있다. const func1 = x => x*2; //객체 리터럴을 반환할 수 있지만, 소괄호를 감싸줘야 한다. const func2 = (x,y) => ({ x, y}); func2(1, "text"); // { x: 1, y:..