![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGFz26%2FbtrPK6oU8Q4%2F1if0jBKk2eAceg8KqkK9r0%2Fimg.png)
스코프 체인
2022. 10. 27. 23:10
TIL/개념정리
스코프 체인이란 한마디로 정리하면 블록에서 어떤 값에 접근이 가능하고 어떤 값에는 접근이 불가능한지를 확인해주는 것이다. 이때 블록은 { }로 표현되는 if, while, for, try-catch... 등이 있고 그냥 { }만 작성해도 블록으로 처리된다. 아래 코드는 함수 b를 선언했지만 실제로 실행시키게 되면 b는 선언되지 않았다고 나온다. 왜일까? const x = "x1"; function c() { const y = "y"; console.log("C"); function b() { const z = "z"; console.log(b); c(); } } function a() { const x = "x2"; console.log("a"); b(); } a(); c(); 함수의 선언위치를 살펴보면..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHNVd5%2FbtrPDr2q5XZ%2FsO8masM3zkGf1ectW91oz1%2Fimg.png)
Next.js static 페이지 업데이트가 되지않았던 이유와 해결 경험
2022. 10. 26. 22:31
TIL/트러블슈팅
요약 SSG페이지로 만든 뒤 업데이트하기 위해 revalidate를 아무리 짧게줘도 1시간 뒤에 이미지가 만료되는 현상이 발견됐다. 알고보니 revalidate 시간 동안은 이미 만들어진 static page를 전송해주고 revalidate 시간을 넘어 새로운 요청이 들어와야 새 정적 페이지를 만들어준다. 예를 들면 처음 빌드하고 페이지를 방문한 뒤 revalidate를 1분으로 짧게줘도 그 사이에 다른 누군가가 방문하지 않았고 1년이 지났다면 1년 뒤 처음 접속한 유저는 내가 아무리 블로그 글을 갱신했더라도 1년전 봤던 페이지와 같다는 것이다. 그리고 NextJS는 그제서야 revalidate 시간을 확인하고 새로 빌드해주게 된다. 아무래도 잦은 빌드시 성능적으로 비효율적이기 때문에 그런거같다. 두 가..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvXNqC%2FbtrPvwOObk2%2F14Tcr5kd25R6cbcIsVSJg1%2Fimg.png)
Call stack (호출 스택)
2022. 10. 24. 22:33
TIL/개념정리
Call stack이란? 콜스택은 말 그대로 콜을 관리하는 스택이다. 여기서 call(호출)이란 함수의 호출이라고 생각하면되는데 이것을 스택으로 관리하는 이유는 자바스크립트가 싱글 스레드 언어이기 때문이다. 싱글 스레드란 말은 한번에 하나의 작업만 실행시킬 수 있게 되는데 우리가 함수를 호출하는 코드를 작성하게되면 스레드가 호출된 함수가 있는 곳으로 이동해서 거기서부터 다시 코드를 실행시킨다. 이것을 분기라고도 하고 제어권 이동이라고도 한다. 그런데 이렇게 함수를 호출한 곳으로 이동하게 됐을 때 이미 실행되던 함수의 정보를 저장해야만 새로 호출해서 실행된 함수가 종료되었을 때 다시 작업하던 위치부터 실행을 이어나갈 수 있다. 이때 실행시키던 함수의 정보를 저장하기 위해 사용하는 곳을 콜 스택이라고 한다...
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcqqO9%2FbtrPsArx9TZ%2FuJsxzcqGlIUeh7Lt2FoYU0%2Fimg.gif)
BFS(너비 우선 탐색)
2022. 10. 24. 20:05
알고리즘
BFS DFS와는 다르게 그래프의 인접노드부터 탐색하는 방식입니다. BFS는 상태트리로 이해하면 쉬운데 상태 트리란 문제의 모든 가능한 상태를 노드로 구성하여 초기 상태를 루트로 에서 최종 상태로 리프로 상태 전환을 통해 연결된 트리라고 하는데 당장 BFS를 이해하기 위해 중요한건 아니라 따로 읽어보았습니다. [Algorithms] State Space Tree Search | 상태 공간 트리 탐색 State Space Tree Search 상태 공간 트리 탐색 - 문제 해결 과정의 중간 상태들을 모두 Node로 구현해놓은 트리이다. - 상태 공간 트리의 Leaf Node는 해당 문제의 해(Solution)에 해당된다. - Optimum(최적해)는.. dad-rock.tistory.com BFS의 구현 ..
자주 나오는 정렬 알고리즘
2022. 10. 24. 17:51
알고리즘
선택 정렬 선택 정렬이란 오름차순, 내림차순에 따라 하위 인덱스부터 하나씩 위치를 정렬시켜 나가는 방법으로 이중 for 문을 통해 구현됩니다. function solution(arr) { /* 선택 정렬이란 최솟값부터 하나씩 위치 변경을 시켜주는 것이다 이중for문을 돌면서 i번 위치에 올 최솟값, i + 1 위치에 올 최솟값... 이렇게 정렬시켜나간다 */ let answer = arr; for (let i = 0; i arr[j]) idx = j; // 자리바꾸기 } // 이렇게 하면 아래와 똑같이 자리가 바뀐다 아래 tmp 변수를 활용하는 것과..
함수와 함수호출, 고차함수에서의 호출
2022. 10. 23. 15:35
TIL/개념정리
함수와 함수 선언, 함수 호출을 잘 구분해야 한다 const add = (a, b) => a + b; function calculator(func, a, b) { return func(a, b); } add(3, 5); // 8 calculator(add, 3, 5); // 8 calculator(add(), 3, 5); // X 위 코드에서 calculator를 func, a, b를 매개변수로 가지는 함수로 선언하였다 이때 calculator는 add라는 함수와 a,b를 3, 5라는 정수 아규먼트로 받는다. 하지만 calculator의 func 매개변수 자리에 add라는 함수를 add() 호출해서 아규먼트로 넘겨주게 된다면 실제 전달되는 값은 함수가 아닌 그 함수의 리턴값이 된다 (함수 add는 매개변..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcImSy%2FbtrN5wXgqQD%2FqukyAX2QxmSa8SwQ7WNf40%2Fimg.png)
인텔 프로세서를 통한 명령어 실행사이클 정리
2022. 10. 8. 10:28
TIL/CS
인텔 8086 프로세서 1978년에 개발된 x86 최초의 모델로 최신 인텔 구조의 시작으로 세그먼트 메모리 모델을 사용헀으며 이후 XT라는 PC가 보급되며 사용되었습니다. 이후 80186, 80286, i386으로 점점 발전해서 펜티엄, 제온까지 x86구조를 사용하게 되었습니다. 프로그램 실행 방식 사용자가 실제 고급언어로 개발한 뒤 프로그램을 실행시키는 것을 정리해보면 다음과 같습니다 사용자가 프로그래밍 언어(고급 언어)를 통해 하나의 프로그램을 개발 하나의 프로그램은 각종 명령어와 데이터의 집합 프로그램을 실행시키게 되면 운영체제가 메인 메모리에 적재 -> 프로세스 4. 오른쪽 메모리 구조에서 명령어 실행 사이클에 따라 명령어를 실행함 ( 명령어 코드와 데이터를 따로 저장) 명령어 실행 사이클 1) ..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6EF0l%2FbtrNFTLYqqZ%2FHQlNkWG79cKgKyNjBWCvaK%2Fimg.png)
Javascript Array.sort() 정렬이 이상하게 되는 이유
2022. 10. 3. 11:22
TIL/트러블슈팅
요약 JS에서는 배열의 원소를 숫자로 넣었다고해도 각 원소를 문자열로 처리해버린다. 따라서 단순히 Array.sort()를 한다고 했을 때 내부 원소 하나하나를 유니코드로 치환해서 오름차순으로 정렬시키기 때문에 이상한 숫자가 나오는 것이다. 추가로 원본 배열이 정렬되는 것이기 때문에 원본 배열을 따로 저장하거나 깊은 복사를 한 뒤 변수를 따로 선언하여 사용해야 한다 오름차순, 내림차순 정렬 //오름차순 arr1.sort((a, b) => a - b) //내림차순 arr1.sort((a,b) => b - a) Array sort is not working correctly in JavaScript I have tried this code function sort() { var ary = [2, 1, 0.4..
스코프 , 스코프체인 , 클로저
2022. 10. 2. 15:26
TIL/개념정리
function outer() { var a = 1; console.log(a); } outer(); a를 콘솔에 찍어보려고 할 때 a를 먼저 찾아야하는데 이때 scope를 사용하게 됩니다 scope는 table 형식으로 변수를 저장하고 있다고 이해하면 쉬운데 결국 scope는 변수의 값을 찾아올 때 들여다 보는 곳입니다 예를들면.. var A 1 이때 이 scope는 outer라는 이름으로 정의되어있어 변수 A를 찾아올 때 우선 outer에 scope를 확인하게 됩니다. function outer() { var a = 1; function inner() { var a = 2; console.log(a); } inner(); } outer(); 이렇게 작성하면 어떻게 나올까? 콘솔에 2가 나온다. 즉 여..
js object 접근 방식
2022. 10. 2. 10:28
TIL/트러블슈팅
Object 접근 방식 const object = { "a" : "1", "b" : "2", "c" : "3" } const key = "c" console.log(object.a) // 점으로 접근 console.log(object["b"]) // 배열처럼 대괄호로 접근 console.log(object[key]) // 변수 값으로 접근 // 모든 object 탐색하는 방법 for(let object_key in object) { console.log(key) } // keys를 통해 배열로 만들어서 접근 for (let key of Object.keys(p)) { console.log(key + " -> " + p[key]) } // 최신방법으로 for (let [key, value] of Objec..