본문 바로가기

전체 글

 (364)
SPA란? # 전통적인 웹사이트(MPA:Multiple Page Application) - 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"(html, css, js)를 불러와야만 했다. 아래 그림을 보자. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA(Single Page Application)는 Menu, Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오고 있지 않다. 전통적인 웹사이트에서는 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. - 새로운 페이지를 요청할때마다 서버에서 렌더링된(SSR) 정적 리소스(HTML, CSS, JavaScript)가 다운로드 된다. **렌더링 : HTML, CSS, J..
[자료구조 - Stack] Stack이란? 먼저 stack의 의미를 한번 살펴보자. * Stack : 쌓다, 쌓이다, 포개지다의 뜻. 즉, 마치 접시를 쌓아 놓은 형태와 비슷한 자료구조, 데이터(data)를 순서대로 쌓는 자료구조를 말한다. 아래 사진을 보면 알다시피 아래부터 쌓여있는 접시는 가장 마지막에 쌓인 접시를 가장 먼저 사용한다. 또 다른 예를 살펴보자. ex: 한쪽 끝이 막혀있는 골목에 다섯 대의 자동차가 순서대로 좁은 골목을 지나고 있다. 이 경우, 마지막으로 들어온 다섯번째 자동차가 먼저 후진하여 나와야 된다. --> 여기서 골목은 자료구조 Stack, 자동차 : data로 생각해보자. 이 구조의 특징은, 가장 먼저 들어간 자동차는 가장 나중에 나올 수 있다(FILO : First In Last Out). 바꿔 말하면, 가장 나중에..
[자료구조 - Stack] 브라우저 뒤로가기 앞으로가기 [ 문제 ] 문제를 해석하자면, actions라는 배열과, start라는 문자열을 입력받는다. * actions : - 행동 순서를 나열한 것 - actions의 요소 중, "-1"은 뒤로 가기, "1"은 앞으로 가기, 문자열은 새로운 페이지에 접속하는 것이다. * start : 시작 페이지 [ 풀이 ] -1, 즉 뒤로가기를 하게되면 현재 페이지를 next Stack에 넣고 prev Stack의 제일 위에있는 페이지를 가지고 온다. --> 여기서 자료구조 중, Stack인 걸 알수 있다. LIFO(Last In First Out) 여기서 prev Stack에 아무 페이지도 담겨있지않다면, 아무런 동작도 일어나지 않는다. 1, 즉 앞으로가기를 하게되면 현재 페이지를 prev Stack에 넣고, next S..
12_findBugInApples [ 문제 ] 입출력 예시를 보고 이해하는게 가장 쉽다. 2차원 배열에서 'B'를 찾아 그 B의 위치, 즉 index를 반환하면 된다. [ 풀이 ] 나의 로직은 다음과 같다. 1/ 이중 반복문을 이용하여 'B'를 찾는다. 2/ 'B'일때의 i, j의 값을 빈 배열에 넣어 return 한다. function findBugInApples(arr) { let result = []; //먼저 빈 배열을 선언한다. for(let i = 0; i < arr.length; i++){ for(let j = 0; j < arr[i].length; j++){ //이중 반복문을 이용하여 'B'를 찾는다. if(arr[i][j] === 'B'){ //'B'를 찾으면 result.push(i); result.push(j); //..
11_removeExtremes [ 문제 ] 처음 문제를 봤을 때는 '아, 반복문 돌려서 가장 짧은 문자열 하나 찾고, 또 반복문 돌려서 가장 긴 문자열 찾아서 splice함수로 제거하면 되겠네!' 이렇게 간단하게 생각했다. 하지만 반복문을 두번 돌리는 대신 한번 돌림으로써 시간복잡도를 줄이고 싶었고, 그럴려다 보니 조금 머리가 아팠다. 그리고 특이점은, 가장 짧은 문자열 또는 가장 긴 문자열이 하나만 존재하는 것이 아니라 여러개가 존재할 수 있다는 것. [ 풀이 ] 나의 로직은 다음과 같다. 1/ 먼저 가장 문자열 길이가 긴 값, 짧은 값의 index값을 할당할 변수를 각각 shortestIndex, longestIndex로 선언한다. 2/ 인덱스 0, 1 값의 길이를 비교하여 짧은 값의 index를 shortestIndex에, 길거..
10_insertDash [ 문제 ] 문제를 해석해보면, 연속된 홀수 사이에 '-'를 추가한 문자열을 반환하는 것이다. 이 문제의 특이점은 '문자열' 형태의 숫자를 입력받는다는것과, 문자열 형태의 값을 반환해야 한다는 것! [ 풀이 ] 나의 로직은 간단하다. 반복문을 이용하여 해당 인덱스의 값과 전 인덱스의 값이 홀수이면 사이에 '-'를 추가해주는 것! function insertDash(str) { let result = str[0]; //먼저 변수 result를 선언하고, [0]인덱스의 값을 넣어준다. 문자열 타입이다. for(let i = 1; i < str.length; i++){ //반복문을 이용하여 if(str[i-1] % 2 === 1 && str[i] % 2 === 1){ //전 인덱스의 값과 현재 인덱스의 값이 ..
09_ABCheck [ 문제 ] 입력받은 문자열에서 'axxxb'이거나, 'bxxxa'가 포함되어있으면 true, 아니면 false를 반환하는 문제이다. 이번 문제는 주의사항을 잘 봐야하는데, 대소문자를 구분하지 않고 / 공백도 한 글자로 취급 / 'a','b'는 중복해서 등장 할 수 있다. 입출력 예시를 보면 입력받은 문자열이 'lane Borrowed'이다. 'ane B' 이렇게 a로 시작하여 b로 끝나는 길이 5인 문자열이 포함되었기 때문에 true를 반환한다. [ 풀이 ] 나의 로직은 다음과 같다. 1/ toLowerCase함수를 이용하여 입력받은 문자열을 전부 소문자로 만들어 준다. 2/ 반복문과 조건문을 이용하여 true/false를 결정한다. function ABCheck(str) { let lowerLette..
08_convertDoubleSpaceToSingle [ 문제 ] 입력받은 문자열에 있는 두 칸의 공백을 한 칸의 공백으로 바꾼 후, 그 문자열을 반환하는 문제이다. 입출력 예시를 보면, 'string with double spaces'에서 중간의 공백이 전부 두 칸이다. 이걸 한 칸씩 변경한 'string with double spaces'값을 반환하는 것이다. [ 풀이 ] 나의 로직은 다음과 같다. 1/ split함수를 이용하여 구분자를 ' ' 즉, 두 칸의 공백으로 하여 배열로 만든다. 2/ 그 배열을 다시 ' ' 즉, 한 칸의 공백으로 연결하여 문자열을 만든다. 예를 들어보면, 아래와 같다. let str = 'javascript is good'; //javascript와 is 사이에 두 개의 공백이 들어가있다. let arr = str.split(..

티스토리툴바