티스토리

min

검색하기

블로그 홈

min

minprogramming.tistory.com/m

minprogramming 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

webpack optimistic (by tree shaking) 1. webpack optimistic에 정의 : webpack이란 웹 어플리케이션을 구성하는 자원들을(html , css , js , jsx , img , svg)을 각각의 모듈로 보고 "이 모듈들을 조합하고 병합해서 하나의 결과물로 나타내는 것을 도와주는 도구"라고 생각하면 된다. webpack을 통해 병합된 결과물의 번들 사이즈를 줄이면 줄일 수록 코드를 가동하는 가상 컴퓨터의 부담이 줄어들고 사용자들에게 좀 더 나은 퍼포먼스를 보여줄 수 있다. 그렇다면 어떻게 해야지 webpack을 통한 번들 사이즈 최적화를 할 수 있을까? 오늘은 그 방법 중에서 tree shaking에 대해서 알아볼려고 한다. 2. tree shaking의 정의 : tree shaking이란 사용되지 않는 코드를 제거하기 위해.. 공감수 1 댓글수 0 2023. 12. 26.
Optimistic Updates (by React-query) 1. Optimistic Updates의 정의 : Optimistic Updates는 "요청을 보내기 전에 요청에 대한 결과를 예상 및 적용하고 요청을 보낸 후에 예상된 결과를 UI에 반영하는 것"을 의미한다. 이 문장을 보고 바로 이해되기에는 추상적으로 다가올 것이다. 그래서 이 과정을 크게 request 전 / 후로 나눠서 설명하고자 한다. request 전 : request 후에 결과를 예측해서 request 요청을 받기 전에 해당 요청 값을 미리 변화시키는 것이다. (새로고침시 없어짐) request 후 : request 후에는 request전에 적용한 값을 요청 받은 값으로 바꾼다. (새로고침시 유지됨) 여기까지 살펴본다면 Optimistic Updates의 대략적인 흐름은 이해가 될 것이다. .. 공감수 0 댓글수 0 2023. 12. 16.
React.useEffect 1. React.useEffect의 정의 : React.useEffect를 한 문장으로 정의하자면 "컴포넌트와 외부 시스템을 동기화"해주는 리엑트 훅이다. 여기서 이런 의문이 생길 수 있다. "외부 시스템"이 무엇인가? , "동기화"를 해준다는 것은 무엇인가? 그래서 쳅터 2에서는 이 2가지 키워드에 대해서 살펴보려고 한다. 2. synchronize(동기화) external system(외부 시스템) synchronize(동기화) : 동기화의 사전적인 의미는 "서로가 알고 있는 정보들을 일치시킨다는 것"이다. 이 의미를 컴퓨터 입장에서 생각해보면 "서로 다른 2개의 시스템에 데이터를 일치시킨다"는 의미로 해석할 수 있을 것이다. 그리고 여기서 서로 다른 2개의 시스템은 외부 시스템과 , 컴포넌트가 될 .. 공감수 0 댓글수 2 2023. 12. 15.
스코프(scope) 1. 스코프의 정의 : 스코프를 한 문장으로 표현하면 "식별자(변수, 함수, 클래스 이름)의 유효범위"이다. 즉 식별자를 어느 범위까지 사용할 수 있는 지를 나타내는 개념이다. 그렇다면 실제로 식별자의 유효범위는 어떻게 될까? 쳅터 2에서는 스코프 실습을 통해 알아보도록 하겠다. 2. 스코프 실습 예를 들어 다음과 같은 코드가 있다고 하자 function a() { var text = "b"; console.log(text) // 1. } a() console.log(text) // 2. 먼저 1.에 찍히는 값은 무엇일까? 이 값에 대해서는 큰 고민 없이 b라고 대답할 수 있다. 하지만 2. 에 찍히는 값에 대해서 묻는 다면 대답하기 힘들 것이다. 그 이유는 2. 과정을 설명하기 위해 스코프라는 개념이 .. 공감수 0 댓글수 0 2023. 12. 14.
React.useState 1. React.useState에 정의 : React.useState를 한 문장으로 정의한다면 컴포넌트에 "상태변수"를 추가할 수 있는 훅이다. 여기까지 들었을 때 이런 궁금중이 생길 수 있다. "상태변수"라는 것은 어떤 것일까? 그래서 쳅터 2에서는 상태 변수에 대해서 작성해볼려고 한다. 2. state variable(상태 변수) : 상태 변수란 한 문장으로 정의하자면 컴포넌트의 메모리이다. 컴포넌트는 다음 예시와 같이 상호작용의 결과를 통해 화면이 바뀔 수 있다. input에 값이 변할 때마다 input field의 값을 변화시켜야 하는 상황 input에 값을 입력하고 button을 눌렀을 때 input의 값을 출력하는 상황 이 2가지 예시들에서는 공통적인 궁금중이 발생한다." input에 값을 입.. 공감수 0 댓글수 0 2023. 12. 13.
변수의 생명주기 (variable life cycle) 1. 변수의 생명주기의 정의 : 변수의 생명주기의 의미는 해당 변수가 메모리에 얼마나 존재하고 있는지를 나타내는 것이다. 정확하게 말하면 변수가 메모리에 들어가는 순간부터 시작해 사라지는 순간까지를 의미한다. 2. 지역 변수의 생명주기 : 지역 변수의 생명주기는 해당 지역변수를 담고 있는 함수의 생명주기와 동일시 된다. 실행 컨텍스트에서 variable environment와 lexical environment 정확히는 레코드에 식별자에 대한 정보가 들어간다. 그리고 이 식별자에 대한 정보는 실행 컨텍스트가 실행 컨텍스트 스택에서 없어질 때까지 메모리에 잔류하고 있다. 3. 전역 변수의 생명주기 : 전역 변수의 생명주기는 해당 전역변수를 담고 있는 전역 컨텍스트의 생명주기와 동일시 된다. 이 때 전역 컨.. 공감수 0 댓글수 0 2023. 12. 12.
Execution Context (+ hoisting , scope) 1. 실행 컨텍스트의 정의 실행 컨텍스트를 한 문장으로 표현하자면 "실행과 관련된 요소들의 집합"이라고 볼 수 있다. 그럼 여기서 이런 의문이 들 수 있다. "그렇다면 실행과 관련된 정보들은 어떤 것들이 있는데?". 그래서 챕터 2에서는 실행 컨텍스트의 구성 요소에 대해서 알아볼려고 한다. 2. 실행 컨텍스트의 구성 요소 variable environment : variable environment는 크게 2가지로 이루어져 있다. 첫번째는 record로 "식별자" (변수 , 함수 , 클래스 등의 이름) 에 대한 정보가 담겨 있다. 두번째는 outer로 자기 자신보다 상위에 있는 실행컨텍스트의 lexical environment가 들어 있다. lexical environment : lexical envir.. 공감수 0 댓글수 0 2023. 12. 12.
React Router Dom v6에 대하여... 1. loader와 action에 대하여 loader : 로더는 말 그대로 데이터를 가져다주는 것을 의미한다. 즉 우리가 어떤 페이지를 갈 때 그 페이지에 데이터를 로딩하고 그 데이터를 던져주는 역할을 한다. 그럼 여기서 이런 의문이 생길 수 있다. 만약 데이터가 로딩 되고 있으면? , 데이터는 어떻게 가져와? 그 역할을 하는 친구가 Suspense Await와 useLoaderData() 훅이다. // ./pages/root.jsx function Root() { const user = useLoaderData(); // data from } action : 액션은 말 그대로 데이터를 서버에게 던져주는 것을 의미한다. 즉 우리가 어떤 데이터를 폼을 통해서 전달할 때 바로 백엔드 서버에게 전달하는 것이 .. 공감수 1 댓글수 1 2023. 12. 8.
https 와 aws ec2 , code deploy , iam 에 대하여.... 오늘은 https 연결과 관련해서 작성해볼려고 한다. 먼저 확실하게 집고 가야할 점은 https에 대한 지식이 아니라 aws 서비스를 이용해서 내가 만든 node js 프로젝트를 instance 화 시키고 이 instance에 https를 부여하는 방법에 대해서 저술할 것이다. 1. s3에 대하여.... 먼저 s3에 대해서 집고 넘어가자. s3는 정적 파일을 배포하는 서비스이다. 여기서 말하는 정적 파일은 내가 만든 node js 프로젝트를 말한다. 이를 왜 구지 s3에 올리는 지 궁금하실 수 있다. 이를 이해하기 위해서는 aws라고 하는 서비스에 대한 관점에서 이야기를 해야한다. aws는 가상 클라우드 (컴퓨터)인 ec2라는 서비스를 가지고 있다. 여기서 ec2에 내가 만든 프로젝트를 넣으려면 aws에.. 공감수 0 댓글수 0 2023. 12. 2.
HashMap과 Map에 대하여... 오늘은 HashMap과 Map에 대해서 알아볼려고 한다. 먼저 내가 이 두 단어를 들었을 때 처음 들었던 생각은 둘다 Map이라는 단어가 들어가는 어떤 부분에서 다른 거지? 어떤 부분이 다르게 작용하는 거지? 라는 궁금중이 들었다. 아마도 이 글을 읽고 이는 독자 분들도 그런 생각이 들었을 것이다. 그래서 나는 이 두가지 개념의 공통점과 차이점을 바탕으로 살펴보려고 한다. 1. HashMap과 Map의 공통점 먼저 HashMap과 Map의 공통점은 어떤 데이터를 키와 값 형태로 관리하는 자료구조라는 점이다. 즉 이 2가지 개념은 모두 자료구조라는 것이다. 그렇다면 이 2가지 개념은 어떻게 데이터를 관리할까? 2. HashMap과 Map의 차이점 그 방법에서 HashMap과 Map의 차이점이 발생한다. H.. 공감수 0 댓글수 1 2023. 11. 1.
프로그래머스 멀리 뛰기 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/12914?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n) { let arr = []; arr[0] = 1; arr[1] = 1; for(let i = 2; i 공감수 0 댓글수 0 2023. 9. 12.
프로그래머스 예상 대진표 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/12985 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //A와 B가 같을 때까지 다음 과정을 수행한다. //A와 B를 2로 나눈다. //나눈 값을 반올림한다. //answer를 하나 올린다. //answer를 리턴한다. function solution(n,a,b) { var answer = 0; while(a !== b) { a = Math.ceil(a / 2); b = Math.ceil(b / 2); answer++; } return answer;.. 공감수 0 댓글수 0 2023. 9. 11.
사용하지 않는 자바스크립트 이슈 1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴 2. 가설 (H1) : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함. 3. 해결(S1) : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음 import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Suspense, lazy } from ".. 공감수 0 댓글수 0 2023. 9. 5.
렌더링 차단 리소스 제거하기 이슈 1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서 렌더링 차단 리소스 제거하기라는 항목이 나옴. 이 항목을 분석해보니 렌더링 이전에 CSS와 JS를 동기적으로 다운로드 받기 때문임. 2. 가설 1 (H1) : 내 프로젝트에서는 구글 폰트를 사용하는 데 이 구글 폰트 서비스가 CDN 서비스라서 외부로 부터 CSS , JS파일을 동기적으로 다운로드 받아야 함. 이 과정에서 렌더링 차단이 발생하는 것으로 보임 3. 해결 (S1) : 구글 폰트를 미리 prefetch 받기 위해서 다음과 같은 항목을 추가함 여기서 프리로드를 통해서 브라우저가 폰트를 로드하기 전에 폰트 리소스를 사전에 가져오도록 지시함. 이를 통해서 가능한 절감 효과인 370m.. 공감수 0 댓글수 0 2023. 9. 5.
코드 리뷰 사이트 개인 회고 10일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 테블릿 사이즈 반응형 사이트 만들기 : 반응현 사이트를 만들면서 가장 어려웠던 점은 테블릿 사이즈일 때 어떤 디자인으로 해당 사이트를 보여줄 것인지가 가장 어려웠다. 그 다음으로 어려웠던 부분은 테블릿 사이즈일 때 마진 값과 패딩 값을 어떻게 맞출 것인지 였다. 그래서 나는 이문제를 해결하기 위해서 flex라는 속성을 통해서 해결했다. 정확히 말하자면 flex-grow , flex-shrink , 기본값을 통해서 화면이 줄어들 때 줄어드는 화면 비율에 맞춰서 자동적으로 사물의 크기도 배치되도록 만들었다. 그리고 요소들간의 간격은 gap이라는 속성을 통해서 해결했다. 이 gap을 통해 각 요소들의 간격을 맞추고 .. 공감수 0 댓글수 0 2023. 9. 2.
코드 리뷰 사이트 개인 회고 9일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 페이지네이션 테스트 코드 : 페이지네이션 테스트 코드를 작성하면서 어떻게 테스트를 해야 할지에 대한 궁금중이 많았다. 여기서 궁금중을 설명하기 위해서 한가지 예시를 들겠다. 만약 페이지가 1~100개까지 있다고 하자. 이때 1~100개를 다 클릭했을 때 확인하는 테스트 코드를 작성하는 것이 맞을 것인지 아님 다른 방법이 있는지에 대한 궁금중이 있었다. 나는 이 부분을 다음과 같이 해결했다. 만약 1~100까지가 있다면 3가지만 체크하면 모든 것을 체크할 수 있을 것이라고 생각한다. 첫번째 : 첫번째 페이지를 눌렀을 때 이전 페이지는 disabled , 다음 페이지는 abled처리가 이루어지는지 두번째 : 첫번.. 공감수 1 댓글수 2 2023. 9. 2.
코드 리뷰 사이트 개인 회고 8일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. flex 정말 너란 친구는..... 최고야....! 오늘의 가장 큰 주제는 css에서 flex였다. css에서 flex란 정말 중요한 개념이다. 사물들을 배치하는데 있어서 즉 정렬 하는 데 있어서 중요한 속성이다. 특히 비율과 관련된 부분이 flex 핵심인데 이번 프로젝트에서는 그 비율과 관련해서 여러 이슈가 있었다. 내가 프로젝트를 보면 다음과 같은 페이지가 구현되어야 한다. 여기서 가장 큰 문제는 저 3개의 비율을 어떻게 조정할 것인가 였다. 특히 저 큰 박스가 가운데에 있고 나머지 2개의 박스가 양옆에 가로로 배치되어야 한다. 이때 나는 저 3개의 박스를 담는 하나의 박스를 만들고 이 하나의 박스에서 3.. 공감수 0 댓글수 0 2023. 8. 31.
코드 리뷰 사이트 개인 회고 7일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. test code and tdd 이번에 코드 리뷰 사이트를 만들면서 가장 시간을 많이 든 부분은 디버깅이었다. 어떤 기능을 만들면 해당 기능이 정상적으로 작동하는지를 확인하기 위해서 일일히 테스트를 진행했던 것이 가장 시간이 많이 든 부분이었다. 그래서 나는 이번 기회에 테스트를 자동화할 수 있으면 좋을 거 같다는 생각이 들었다. 그래서 테스트 코드에 대해서 알아봤으며 테스트 자동화에 대해서 찾아보았다. 그래서 오늘은 테스트코드 작성과 tdd에 대해서 알아볼려고 한다. 먼저 tdd란 데스트 주도 개발이다. tdd의 흐름은 다음과 같다. RED : 실패하는 테스트 코드를 작성한다. (즉 내가 만들려고 하는 기능.. 공감수 0 댓글수 2 2023. 8. 30.
프로그래머스 점프와 순간 이동 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n) { let answer = 0; while(n > 0) { if(n % 2 === 1) { n -= 1; answer += 1 } n /= 2; } return answer; } function solution(n){ if(n === 1) return 1; const nArr = Array.from(n.toString(2)); return nArr.reduce.. 공감수 0 댓글수 0 2023. 8. 30.
프로그래머스 영어 끝말잇기 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/12981 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n, words) { var answer = []; let data = [words[0]]; for(let i = 1; i < words.length; i++) { if(words[i].at(0) !== data[data.length - 1].at(-1)) { return [i % n + 1 , Math.floor(i / n) + 1] } else if (data... 공감수 0 댓글수 0 2023. 8. 29.
프로그래머스 키패드 누르기 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(numbers, hand) { var answer = ''; let numbersIndex = { 1 : [0,0], 2 : [0,1], 3 : [0,2], 4 : [1,0], 5 : [1,1], 6 : [1,2], 7 : [2,0], 8 : [2,1], 9 : [2,2], 0 : [3,1], "*" : [3,0], "#" : [3,2], }; let left = .. 공감수 0 댓글수 0 2023. 8. 28.
코드 리뷰 사이트 개인 회고 6일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 태그 시스탬 도입 : 코드 리뷰 사이트를 만들 때 중요한 것은 게시글을 보고 어떤 글인지 지레짐작이 가능해야 한다는 점이다. 실제로 많은 게시글 사이트의 경우에는 태그라는 시스탬을 통해서 이 글이 대충 어떤 글인지에 대한 지레짐작이 가능하도록 만들어놨다. 따라서 나도 태그 시스탬을 통해서 위 문제를 해결하려고 하였다. 태그 시스탬을 도입하면서 가장 어려웠던 부분은 onKeyDown 이벤트 핸들러였다. 태그 시스탬의 동작원리는 다음과 같다. input에 문자열을 입력한다. input에 엔터키를 눌렀을 때 해당 문자열을 태그로 변환한다. 변환한 태그를 태그목록에 추가한다. 위 과정을 보면 onKeyDown 헨들러가.. 공감수 0 댓글수 0 2023. 8. 27.
코드 리뷰 사이트 개인 회고 5일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 페이지네이션 버튼 구현 페이지 네이션 버튼 구현을 진행하면서 굉장히 어려웠던 점은 좌우 방향표를 눌렀을 때 현재 위치에 따라 disabled 또는 abled 처리를 진행해야 한다. 이는 정말로 어려운 것이었다. 왜냐하면 상위 부모 컴포넌트에 이에 대한 로직을 작성하고 이를 자식에게 props로 넘겨줘서 이 props에 따라서 조건부 css를 해야 하기 때문이다. 그래서 나는 이를 해결하기 위해서 부모 컴포넌트인 review list 컴포넌트에다가 로직을 다음과 같이 작성했다. const onClickPages = (number) => setCurrPage(number); const onClickPrevPages.. 공감수 0 댓글수 0 2023. 8. 27.
코드 리뷰 사이트 개인 회고 4일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 다뤄볼려고 한다. 1. 반응형.... 정말 하.... 재밌다 ㅎㅎ : 내가 만든 프로젝트 한계점은 여러 사용자의 유저들이 이 프로젝트를 사용할 수 없다는 것이다. 즉 데스크탑을 기준으로 프로젝트를 보여주기 때문에 테블릿 , 모바일 환경에서 들어오는 사람들은 이 프로젝트를 보지 못한다. 그래서 나는 이 프로젝트의 사용성을 높이기 위해서 반응형을 구현했다. 반응형을 구현할 때 사용한 css 전처리기는 scss 였는데 이 scss가 굉장히 간단해서 생각보다 반응형을 구현하는데 어렵지 않았다. 실제로 반응형을 위한 로직은 다음과 같다. $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-.. 공감수 0 댓글수 0 2023. 8. 27.
프로그래머스 둘만의 암호 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/155652# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //s의 길이만큼 반복하면서 다음 과정을 수행한다. //index의 길이만큼 반복하면서 다음 과정을 수행한다. //만약 skip에 해당 단어가 있다면 index를 올리지 않는다. //만약 skip에 해당 단어가 없다면 index를 올린다. //index만큼 뒤에 있는 알파벳을 answer에 더한다. //answer를 리턴한다. function solution(s, skip, index) { v.. 공감수 0 댓글수 0 2023. 8. 26.
코드 리뷰 사이트 개인 회고 3일차 오늘은 코드 리뷰 사이트를 만들면서 개인적으로 어려웠던 부분들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 코드 리뷰 사이트 매인 페이지 디자인 수정 : 사실상 어제까지 만든 코드 리뷰 사이트에서 가장 수정해야 하는 부분은 메인 페이지 디자인이었다. 그 이유는 다음과 같다. 첫번째 ux적인 측면에서 사용자가 볼 수 있는 자료가 별로 없다는 점이다. 어제까지 만든 코드 리뷰 사이트에는 사실상 사용자가 볼 수 있는 정보가 한정적이었다. 태그도 자신이 선택한 태그를 넣을 수도 없었으며 답변이 되고 있는지 아님 안되고 있는지도 확인할 수 없었다. 따라서 유저가 이 사이트를 볼 때 이 사이트가 코드 리뷰 사이트인지 한 눈에 살펴보기에 굉장히 어려웠다는 점이다. 그래서 나는 디자인을 다음과 같이 수정했다. 위 사.. 공감수 0 댓글수 0 2023. 8. 25.
프로그래머스 문자열 나누기 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/140108?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { let answer = 0; let var1 = 0; let var2 = 0; let i = 0; while (s.length > 0) { if (s[0] === s[i]) { var1++; i++; } else if (s[0] !== s[i]) { var2++; i++; } if (var1 === var2) { s =.. 공감수 0 댓글수 0 2023. 8. 25.
코드 리뷰 사이트 개인 회고 2일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 이야기를 나눌려고 한다. 1. lazy loading 어떻게 확인하는 가? : 내가 어제 lazy loading에 대해서 언급하면서 가장 궁금했던 점은 lazy loading 을 어떻게 확인하는 것이었다. 사실상 lazy loading 의 핵심은 번들러에 있다. 즉 페이지에 들어올 때 응답으로 어떤 컴포넌트들을 줄 것인지 전체 번들을 줄 것인지 아님 페이지 마다의 모듈을 줄 것인지 바로 이 부분이 핵심이었다. 그래서 나는 요청과 응답을 확인할 수 있는 개발자 도구에 네트워크 탭에서 확인을 해보았다. 네트워크 텝을 보니 lazy loading이 구현됐는지를 확인할 수 있었다. 증거는 다음과 같다. 2. 코드 하이라이팅 에디터 어떻게 구현했는가? :.. 공감수 0 댓글수 2 2023. 8. 24.
프로그래머스 숫자 짝꿍 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/131128 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //X의 각원소를 높은 순 부터 낮은 순으로 배열을 만든다. //Y의 각원소를 높은 순 부터 낮은 순으로 배열을 만든다. //X와 Y중 길이가 작은 리스트 만큼 반복문을 돌면서 다음 과정을 수행한다. //만약에 작은 길이의 배열의 원소가 긴 길이의 배열의 원소에 있다면 다음 과정을 수행한다. //answer에 그 원소를 담는다. //긴 길이의 배열의 원소를 지운다. //answer를 반환한다. .. 공감수 0 댓글수 0 2023. 8. 24.
코드 리뷰 사이트 개인 회고 1일차 오늘은 내가 코드 리뷰 사이트 매인 페이지를 제작하면서 느꼈던 어려움들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 폰트 어썸 CDN : 사실상 CDN이라고 하는 서비스는 분산 처리 시스템을 의미한다. 이는 서버를 한 군데에다가 넣어두는 것이 아니라 여러 곳에 배치하여 클라이언트와 서버 사이에 물리적인 거리를 줄인다. 또한 이 서버는 캐싱 서버이기 때문에 초기에 들어오고 나서 두번째부터는 캐싱이 된다는 장점이 있다. 하지만 여전히 물리적인 거리는 존재하기 때문에 속도는 낮을 수 밖에 없다. 그 뿐만 아니라 CDN 시스템에서 내가 원하는 폰트를 가져오기 때문에 내가 이 폰트를 압축시키지 못한다는 점도 문제이다. 이는 결과적으로 성능과도 연관되는 문제이기 때문에 이번에 나는 폰트를 CDN 서비스를 통해서 .. 공감수 0 댓글수 0 2023. 8. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.