ksw_devlog

호이스팅 호이스팅은 코드가 실행하기 전 변수선언 / 함수선언 이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말합니다. (호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동) 변수 호이스팅 (var, let, const) 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 그런데 let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다. var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 *일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다. var, l..

RESTful API REST(REpresentational State Transfer)ful API는 HTTP 통신에서 어떤 자원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식입니다. 구성 Resource(자원, URI) Method(요청방식, GET / POST / PUT / DELETE) Representation of Resource(자원의 형태, JSON or XML 등) PUT - 자원을 수정할 때 DELETE - 자원을 삭제할 때 RESTful 하지 못한 경우 CRUD 기능을 전부 POST METHOD로만 처리하는 API URI에 자원과 id외 정보가 들어가는 경우 PUT /users/update-nickname [X] PUT /users/:id..

브라우저 렌더링 기본동작 각 브라우저는 렌더링 엔진을 가지고 있다. 렌더링 엔진으로 파일들을 파싱(해석)하여 화면으로 그려낸다. 렌더링 과정 1. Client 가 -> WEB Server 에게 받은 IP 주소로 요청하면, WEB Server 는 -> Client 에게 해당 웹페이지의 index.html 등의 파일들을 보내준다. 2. 브라우저는 서버가 보내준 HTML 파일을 해석(Parsing)하여 DOM 트리를 만든다. 3. 브라우저는 서버가 보내준 CSS 파일을 해석(Parsing)하여 CSSOM 트리도 만든다. 4. DOM 트리 + CSSOM 트리를 결합해 렌더트리를 만든다. 5. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를..

이분탐색 N 개의 수가 크기 순서대로 배열되어 있을 때, 특정한 수 K가 몇 번째 위치에 있는지 빠르게 찾는 방법 이진 탐색(이분 탐색) 알고리즘은 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법이다. 이진 탐색은 배열 내부의 데이터가 정렬되어 있어야만 사용할 수 있는 알고리즘이다. 변수 3개(start, end, mid)를 사용하여 탐색한다. 찾으려는 데이터와 중간점 위치에 있는 데이터를 반복적으로 비교해서 원하는 데이터를 찾는 것이 이진 탐색의 과정이다. 한 번에 배열이 절반씩 줄어들기 때문에, 시간 복잡도는 O(log2 N)이다.(밑 2) N이 100만일 때, log2 N은 약 20이므로 20개 정도의 수만 보면 충분하다

알고리즘 성능 평가 알고리즘 성능을 평가하기 위해 '복잡도(Complexity)'의 척도를 사용한다. 그 중 시간 복잡도와 공간 복잡도의 개념이 나오며, 동일한 기능을 수행하는 알고리즘이 있을 때 복잡도가 낮을 수록 좋은 알고리즘이라 말한다. 시간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 수행 시간 분석 공간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 메모리 사용량 분석 1. 시간 복잡도 시간 복잡도는 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미한다. 같은 결과를 갖는 프로그래밍 소스도 작성 방법에 따라 걸리는 시간이 달라지며, 같은 결과를 같은 소스라면 시간이 적게 걸리는 것이 좋은 소스이다. ** 시간복잡도란 입력크기에 대해 어떠한 알고리즘이 실행되는데 걸리는 시간이며 ..

https://www.notion.so/7be3db316f194cf2b61b9aaf01d76649 발표 자료 1. MOCO 소개 www.notion.so

메인 페이지 반응형 적용 https://www.npmjs.com/package/react-responsive react-responsive Media queries in react for responsive design. Latest version: 9.0.2, last published: 3 months ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1077 other projects in the npm registry using react-responsive. www.npmjs.com https://mytutorials.tistory.com/335 [다락재쉼터] react-r..

모달창 (영역 밖 클릭 시 닫기) 검색창 밖 영역을 클릭하면 모달창이 사라지게 하기 // 검색창 currentTarget const searchRef = useRef(null); // 검색창 드랍다운 생성유뮤 const [isSearchUserDropDown, setIsSearchUserDropDown] = useState(false); const searchModalOutSideClick = (e) => { // 검색창 영역 밖 클릭하면 닫히게 하기 if (searchRef.current === e.target) { setSearchdropDownClick(false); } }; ..... return ( {isSearchUserDropDown && searchModalOutSideClick(e)} >..