티스토리

매일 꾸준히

검색하기

블로그 홈

매일 꾸준히

khj0426.tistory.com/m

자바스크립트와 알고리즘을 공부 중입니다!

구독자: 1

방명록 방문하기

주요 글 목록

자바스크립트 + CSS + Babel + Webpack구축하기 기존 노션클로닝 과제를 뜯어고치던 와중.. 나는 npx serve - s을 이용해 개발환경을 띄우고 있었다. 그럼 npx serve -s는 뭐고 어떻게 동작했었지..?를 묻게 된다. (언젠가 배웠던 것 같은데 까먹은 거 같기도) 바로 npm에 들어가 해당 패키지가 뭔지 살펴봤다. npx-server는 Node.js기반의 정적인 웹 서버 도구이다. -s를 이용해 SPA환경에서 지원도 해준다. 문제는 기존 코드의 props가 흩뿌러져 있는 문제 떄문에 이를 redux로 이용해 마이그레이션하는 과정에서 발생했다. redux를 설치하고 다음의 코드를 적었을 떄 이런 오류가 발생했다. import { legacy_createStore } from 'redux'; import editorChild from './e.. 공감수 0 댓글수 0 2023. 12. 13.
useCallback에 대해서 언제 useCallback을 쓰고 어느 시점에 useMemo를 써야할까요? 이 주제에 관해 정리해보려고 합니다. (먼저 useCallback 훅부터 정리를 하고 가려고 합니다.) (막연하게 성능 최적화를위해 useCallback과 useMemo를 쓴다고만 알고 있었던..) 리액트에서는 useCallback과 useMemo라는 훅이 존재합니다. 공식문서에 따르면 두 훅은 다음과 같은 상황에 사용된다고 합니다. useCallback useCallback은 함수를 기억했다가 재사용가능하도록 도와주는 훅입니다. 리액트에서 부모 컴포넌트가 랜더링 될떄, 하위 자식 컴포넌트들도 랜더링이 일어납니다. 이 과정에서 useCallback으로 함수의 불필요한 생성을 방지 할 수 있습니다. 이처럼 useCallback을 사.. 공감수 0 댓글수 1 2023. 10. 2.
프로그래머스 베스트 앨범 문제를 보면 주어진 요구사항은 크게 4가지로 나뉜다. 장르별로 최대 2개씩까지만 앨범에 들어간다. 속한 노래가 많이 재생된 장르를 먼저 수록한다. 장르 내에서 많이 재생된 노래를 먼저 수록한다. 장르 내에서 재생횟수가 같은 노래끼리는 고유번호가 낮은 노래를 수록한다. 장르별로 구분을 해야하기 떄문에 Map을 사용할 수 있다. map의 키로 장르를 선택하고 값으로 해당 장르의 재생횟수, 고유번호 리스트를 선택할 수 있다. 입출력 예 문제에서 예를 들어보자. 처음 클래식이라는 장르가 보인다. map에 {클래식,{500번,처음 고유번호인0}}을 저장한다. 다음으로 Pop이라는 또 다른 새로운 장르가 보인다. 마찬가지로 map에 {팝,{600번,고유번호 1}}을 저장한다. 다음으로 클래식이라는 이미 존재하는 장.. 공감수 1 댓글수 0 2023. 6. 7.
2023/06/06 빅오 표기법 빅오표기법의 수학적 정의는 다음과 같다. f(n)의 알고리즘 시간 효율성이 있고 n0보다 충분히 큰 값 n을 넣을떄, f(n)의 런타임 시간이 최악의 경우에도 점근선인 k*g(n)을 넘을 수 없다. 이때 빅오 표기법을 사용해 O(g(n))이라고 나타낸다. 빅오 표기법은 크게 2가지 특성이 있다. 1. 상수항 무시 빅오 표기법에서 데이터 입력값은 충분히 크다고 가정하고, 알고리즘의 효율성도 데이터의 크기에 따라 영향을 받기 때문에 상수항 같은 사소한 부분은 무시한다. 예를들어 O(2N) -> O(N)과 같이 상수항은 무시하고 표기한다. 2. 영향력 없는 항 무시 가장 영향력이 큰 항 외에 영향력 없는 항들은 무시된다. 예를 들어O(n^2 + 2n + 1) -> O(n^2)과 같이 영향력이 지배.. 공감수 1 댓글수 0 2023. 6. 6.
23/06/05 TIL 브라우저에 URL을 입력하면 무슨 일이 일어날까? - 웹 사이트가 우리한테까지 보이기까지 , 무슨 작업이 일어날까? 과정별로 찬찬히 알아보자. 1. URL을 해석한다. (Uniform Resource Locator) URL은 protocol,host,port,path,query,fragment로 구성되어있다. - 프로토콜(protocol) URL의 시작 부분에는 , 해당 자원에 접근하기 위해 사용되는 프로토콜이 명시된다. 예를 들어 , 웹 페이지에 접속할떄는 https프로토콜을 사용하고, 파일 전송을 위해서는 File Transfer Protocol 프로토콜을 사용할 수 있다. 그럼 웹에서 사용되는 https프로토콜은 무엇일까? http와 https프로토콜 HTTP hyper text transfer p.. 공감수 0 댓글수 0 2023. 6. 5.
위상정렬(Topological sort) 위상정렬은 먼저 비순환 방향 그래프 DAG에서만 사용 가능합니다. 그래프 이론에서 DAG는 노드와 노드간의 방향성을 가진 간선으로 구성된 그래프를 의미합니다. 각 간선이 하나의 노드에서 다른 노드로 방향을 가지며, 일방통행을 합니다. 또한 그래프 내에서 절대 사이클이 없는 것을 의미합니다. 즉, DAG는 방향성이 있고 사이클이 없는 그래프라고 볼 수 있습니다. 위상정렬 위상정렬은 순서가 정해진 작업을 차례대로 수행할때 순서를 결정해주는 알고리즘입니다. 예를 들어서, 라면을 끓이기 위해 물을 먼저 끓어야 합니다. 이때 물을 먼저 끓인다 -> 라면을 끓인다 라는 작업간의 선행 순서가 존재하고 이 선행 순서를 정해주는 알고리즘입니다! 또한 그래프에는 진입차수(In-Degree)와 진출차수(Out-Degree).. 공감수 0 댓글수 0 2023. 5. 29.
프로그래머스 프론트엔드 데브코스 4기 합격 후기 이 글은 프론트엔드 데브코스를 준비 하고 있는사람들이나 관심있는 분들을 위한 글입니다. 일단 제가 프로그래머스 프론트엔드 데브코스를 지원한 이유는 크게 3가지였습니다. 1. 자바스크립트를 잘 안다는 착각 자바스크립트에 대해 책을 깊게는 아니지만 (코어자바스크립트, 모던 자바스크립트..) 읽어봤습니다. 호이스팅, var vs let,const 등 여러 개념을 공부해서 자바스크립트에 대해 이정도면 잘 아는거 아니야..?라는 생각을 갖고 있었습니다. 우매함의 봉우리의 고점을 향해있던 쯤에, 프로그래머스의 과제테스트 전형을 연습삼아 응시해봤습니다. 사원 구축 테이블의 과제였는데, 나는 자바스크립트를 진짜 많이많이많이 모르구나..라는 생각을 과제를 치르고 나서 하게되었습니다. 간단한 페이지 라우팅부터, 상태 관리.. 공감수 2 댓글수 2 2023. 5. 23.
vite + react + github page 배포 환경에서 환경변수 설정 깃헙 페이지로 배포를 하고 있었고,import.meta객체를 이용해 로컬환경에서 환경변수를 했다. 다만 배포 환경에서는 (env파일이 깃에 올라기지 않는다는 가정하에는) 다른 방법의 환경변수 설정이 필요하다. firebase등등 보여줘서는 안되는 환경변수들을 배포 시에도 유지하기 위해서 깃헙 secrets을 이용해 환경변수를 관리할 수 있다. github Action secrets? 깃헙 레포의 action secrets는 환경변수를 암호화해서 저장할 수 있는 기능이다. 결과적으로 로컬환경에서는 .env파일을, github action을 이용한 배포 시에는 , action secrets를 이용해서 환경변수를 관리 할 수 있다. 먼저 github Action의 secrets를 저장하는 방법은 간단하다. 깃.. 공감수 0 댓글수 0 2023. 5. 15.
vite + react환경에서 환경변수 설정하기 기존의 CRA에서 process.env로 환경변수를 관리했어서, vite + react의 환경에서도 process.env를 통한 환경 변수 관리가되지 않을까.. 하고 시도를 해봤지만 실패하였다. process.env가 뭐길래? process.env는 노드에서 사용하는 전역객체고, 환경변수를 저장하기 위한 객체이다. 리액트에서는 REACT_APP_키워드를 붙여서 환경변수를 관리한다. CRA를 통해 만든 리액트의 프로젝트에서는, 기본적으로 환경변수를 사용할 떄 .env파일을 사용한다. 이때 process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다. 이떄 등록된 변수들은 자바스크립트에서 process.env객체를 통해 접근 할 수 있다! 공식문서에 따르면, 환경변수의 접두사를 VITE_로 .. 공감수 0 댓글수 0 2023. 5. 6.
useDebounce 훅 적용기 먼저 기존에는 입력 컴포넌트를 만들고 Props를 주입해서 사용하고 있었다. 키워드를 통해 검색 결과를 검색하는 기능을 구현하기 위해 위에서 정의한 컴포넌트를 사용했지만 , 입력할때마다 상태가 바뀌는 불편함이 존재하였다! 입력한 상태가 바뀔떄마다 입력값을 통해 검색 결과를 가져오기 떄문에 너무 과도하게 검색 결과가 바꾸는 문제도 발생했다. 입력을 할때마다 굉장히 불필요하고 많은 검색 결과를 찾고 있었고, 개선이 필요했다. 디바운스 이를 해결하기 위해 디바운스를 이용할 수 있다. 다바운스는 짧은 시간 간격으로 연속해서 발생하는 이벤트를 묶어, 과도한 이벤트의 호출을 방지하는 기법이다. 위의 경우 텍스트 입력 필드에 값을 입력할 떄마다 연속해서 검색 결과를 찾게 되는데, 사용자가 입력을 모두 끝냈을 떄 한번.. 공감수 0 댓글수 0 2023. 5. 1.
useState와 클로저 클로저 자바스크립트에는 클로저라는 것이 존재한다. 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 예를들어서 다음과 같은 경우가 존재한다. function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); makeFunc의 함수 안에 name이라는 변수와 displayName이라는 함수가 선언되었다. makeFunc는 displayName이라는 함수를 반환하는데, displayName은 makeFunc의 name이라는 변수를 참조한다. myFunc.. 공감수 1 댓글수 2 2023. 4. 22.
BroswerRouter와 HashRouter의 차이점 리액트에서 라우팅은 보통 react-router-dom을 사용한다. 이 react-router-dom은 두 가지의 라우터를 제공한다. 공식문서에서는 BroswerRouter가 현재 브라우저의 위치를 받아사 브라우저의 history스택을 이용해 이동한다고 한다. 하나씩 살펴보자. export interface BrowserRouterProps { basename?: string; children?: React.ReactNode; window?: Window; } 먼저 BrowserRouterProps는 basename이라는 기본 URL을 받고 children이라는 라우터의 자식이 되는, 랜더링 될 리액트 노드를 받고 window를 사용하고 있다. let historyRef = React.useRef(); .. 공감수 0 댓글수 0 2023. 4. 15.
리액트로 스크롤 애니메이션을 넣어보자! 정적인 사이트를 만들때, 스크롤 애니메이션은 정말 멋진 것 같다. 특히 애플 공식 홈페이지의 애니메이션은 너무너무 이쁜데, 이를 보고 내가 만드는 것에 도입해보고 싶었다. 스크롤 애니메이션 브라우저는 사용자가 화면을 스크롤 할떄마다, 스크롤 이벤트를 발생시킨다. 리액트로 스크롤을 구현하는 라이브러리는 많지만, 직접 구현해 보고 싶었다. 화면을 스크롤 할떄, 특정 화면이 보이기 시작한다면 애니메이션이 적용되면서 등장하는 방식이다. Intersection Observer 방금 말한 '특정 화면이 보인다면'을 Intersection Observer를 통해 해결 가능하다. 기본적으로 뷰포트와 설정한 교차점을 관찰해, 요소가 뷰포트에 포함되는지 ,사용자에게 지금 보이는 화면인지를 쉽게 판단가능하게 해준다. 비동기.. 공감수 0 댓글수 0 2023. 4. 9.
언제 컴포넌트가 랜더링 되는 걸까? 랜더링이란? 리액트는 컴포넌트를 랜더링한다. 컴포넌트가 스스로의 상태를 능동적으로 바꾸든, 다른 변화 떄문에 수동적으로 바뀌었든, 컴포넌트는 리액트에 의해 호출된다. 컴포넌트가 상태 업데이트를 했다고 해서, 반드시 하나의 랜더링으로 이어지는 것은 아니다 리액트는 컴포넌트의 상태의 변화가 의미 없는 변화로 해석할 지도 모른다! 리액트에서 상태 업데이트를 모아서 한번에 처리하고(batch update) 이 일괄 업데이트로, 불필요한 랜더링 횟수를 최소화 한다. 리액트는 다양한 이유로 컴포넌트를 랜더링 할 수 있기 때문에 컴포넌트를 랜더링 하는 것이 즉각적인 UI 변화로 이어지지 않을 수 있다 랜더링 과정 살펴보기 리액트는 컴포넌트의 루트부터 시작하면서 (아래의 코드에는 root부터 ), 아래쪽으로 쭉 훑어보.. 공감수 0 댓글수 0 2023. 4. 1.
이분 그래프와 판별법 이분 그래프란? 이분 그래프는 노드가 두 개의 그룹으로 분리되어 있는 그래프를 말한다. 인접한 정점끼 서로 다른 색으로 색칠하여 모든 정점을 두 가지 색으로만 칠할 수 있는 그래프이다. 철수부터 색을 칠하면 인접한 정점은 철수와 반대되는 색으로 칠한다 철수와 인접한 수학은 주황색으로 칠해진다. 다시 수학과 인접한 영희를 수학과 반대되는 파란색으로 칠하고 영희와 인접한 국어를 주황색으로, 국어와 인접한 세희를 파란색으로..쭉쭉 칠하면 모든 정점을 두 가지의 각기 다른 색으로 칠할 수 있다.이러한 그래프를 이분 그래프라고 부른다. 모든 정점을 방문하며 간선을 검사하기 때문에 시간 복잡도는 O(V+E)로 그래프 탐색 알고리즘과 같다. 이분 그래프의 판별법 서로 인접한 정점이 같은 색이면 이분 그래프가 아니다!.. 공감수 0 댓글수 2 2023. 3. 15.
Next.js와 Pre-rendering 기존 SPA의 Client-side 랜더링의 문제점 웹 페이지의 랜더링이 클라이언트 = 브라우저 측에서 일어나는 것을 의미한다. 브라우저가 최초 요청 시 html,css,js 확장자 파일을 차례로 다운로드하는데, 최초로 불러온 HTML 파일은 비어있게 된다. 그 후 빈 HTML 파일에 js 파일이 다운로드되면 DOM을 빈 HTML 위에서 그리기 시작한다. 그래서 디버거 모드에서 자바스크립트 사용 중지를 하게 된다면, DOM을 페이지 위에서 그리지 못하므로 빈 페이지가 나오게 된다. Nextjs의 pre-rendering Next js는 기본적으로 모든 페이지를 pre-rendering한다. Next js에서는 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해 pre-rendering을 수행한.. 공감수 1 댓글수 2 2023. 3. 11.
프로그래머스 덧칠하기 C++ https://school.programmers.co.kr/learn/courses/30/lessons/161989 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 스위핑 문제같아서 스위핑을 사용해서 접근했다 처음구간을 section의 처음으로 잡고 끝 구간을 처음 구간 + m -1로 잡는다 그 후 secion배열을 돌면서 만약 section이 끝 구간 보다 길다면, 새로 덧칠해야 하므로 처음 구간과 끝 구간을 각각 갱신해 주었다 #include #include //n미터의 벽 //1부터 N까지 구역 //롤러의 길이는 M임 //3456 -> 1234 //1.. 공감수 0 댓글수 0 2023. 3. 3.
Next js sessionstorage is not defined 문제 Next js로 개발을 하던 중 sessiostorage is not defined 에러를 만났다. 나는 sessionStorage의 어떤 값이 업데이트 될떄 시행해야 할 작업이 있었고, useEffect안에 의존성 배열로 sessionStorage.getItem('...키값..') 이런식으로 사용을 했는데, 위와 같은 에러를 만났다. 찾아보니 Next js 는 SSR환경이고, 막무가내로 locaoStorage,sessionStorage를 사용하면, 위와 같이 정의되지 않았다라는 에러를 만날 수 있다고 한다!. Next js에서 window객체는 cliend-side를 랜더링 하기 이전에 server-side랜더링을 수행한다! 그래서 Next js에서 제공하는 server-side랜더링에서는 window.. 공감수 0 댓글수 0 2023. 2. 26.
프로그래머스 뒤에 있는 큰 수 찾기 C++ https://school.programmers.co.kr/learn/courses/30/lessons/154539 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 스택을 이용해서 해결하였습니다. #include #include #include #include using namespace std; vector solution(vector numbers) { vector answer; stack st; for(int i = numbers.size()-1;i>=0;i--){ if(st.empty()){ answer.push_back(-1); st.push(nu.. 공감수 0 댓글수 0 2023. 1. 31.
자바스크립트 this this는 함수를 호출한 방식에 따라 다르게 정의된다. 객체 리터럴의 메서드의 this const circle = { radius:5, getRadius(){ return this.radius; } }; console.log(circle.getRadius()); 객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체와 바인딩된다. 다음의 경우를 살펴보자 const person = { name:'LEE', getName(){ return this.name; } }; const anotherperson = { name:'Kim' }; anotherperson.getName = person.getName; console.log(anotherperson.getName()); const getName = .. 공감수 0 댓글수 0 2023. 1. 30.
프로그래머스 튜플 C++ https://school.programmers.co.kr/learn/courses/30/lessons/64065?language=cpp 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 몇번의 시행착오를 겪었다. 처음에 내가 든 생각은 다음과 같다. "{{2},{2,1},{2,1,3},{2,1,3,4}}" 1 먼저 문자열로 입력이 들어오는데, 괄호를 제외한 순수한 문자열을 얻는다. (위의 경우 "2","21","213","2134"순으로 괄호를 제외해서 문자열을 얻는다) 2 문자열을 크기 순으로 정렬한다. 3 크기 순으로 정렬된 문자열이 있다면, 다음 크기.. 공감수 0 댓글수 0 2023. 1. 29.
간단한 뉴스 뷰어 만들기 리액트를 다루는 기술 14장을 참고해서 만들었고, 타입스크립트도 적용해보았다. 먼저 API KEY가 필요하다. https://newsapi.org/account Login - News API newsapi.org API KEY를 발급받으면 이메일로, KEY가 올 것이다. 리액트에서 API KEY를 환경변수로 관리 할 수 있다. 프로젝트 최상단에 .env파일을 만들고, .gitingnore파일에 .env를 추가해서 깃에 올라가는 것을 막아준다. 그리고 API KEY를 적어주면 된다. 이떄, API KEY는 REACT_APP_으로 시작해야 한다 사용할 떄는 jsx,js에서 process.env.REACT_APP_이름 변수명을 넣어서 사용해준다. src폴더 구조는 다음과 같고, constants.ts에서는 받.. 공감수 0 댓글수 0 2023. 1. 19.
프로그래머스 뉴스 클러스터링 C++ https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다. 개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색해보았다. 카카오 첫 공채.. 공감수 0 댓글수 0 2023. 1. 16.
실행 컨텍스트 https://khj0426.notion.site/JS-b26a1ed38d344131a3b9d5d8766747ed 공감수 0 댓글수 2 2023. 1. 16.
프로그래머스 키패드 누르기 C++ https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당.. 공감수 0 댓글수 0 2023. 1. 5.
백준 숫자고르기 C++ https://www.acmicpc.net/problem/2668 2668번: 숫자고르기 세로 두 줄, 가로로 N개의 칸으로 이루어진 표가 있다. 첫째 줄의 각 칸에는 정수 1, 2, …, N이 차례대로 들어 있고 둘째 줄의 각 칸에는 1이상 N이하인 정수가 들어 있다. 첫째 줄에서 숫자를 적절 www.acmicpc.net 그래프에서 사이클이 발생한다면, 정수를 뽑을 수 있습니다. 만약 n이 3이고, 입력이 {3,1,2}가 주어진다면, 그래프로 연결을 했을떄, 정점1은 사이클이 존재함을 확인할 수 있습니다(아래 그림을 통해 잘 사이클이 발생하는 것을 볼 수 있습니다) DFS에서 사이클을 찾는 방법은 아래의 블로그를 참고하였습니다. https://nicotina04.tistory.com/148 그래프에서 .. 공감수 0 댓글수 0 2022. 12. 31.
리액트 연습하기!- todo만들기 (타입스크립트와 함께하는) 먼저 리액트 앱을 타입스크립트와 같이 사용하려면, $ npx create-react-app ts-react-tutorial --typescript 명령어를 사용하면 됩니다. (ts-react-tutorial부분은 앱 이름입니다.) 전체 폴더 구조 스타일링은 styled-components를 사용하였습니다. styled-components는 자바스크립트 파일 안에서 CSS를 사용할 수 있도록 해주는 (CSS-In-JS)라이브러리입니다. styled-components 설치 npm i styled-components 타입스크립트와 함께 사용하려면, 다음의 명령어를 추가로 실행해야 합니다. npm i -D @types/styled-components 🌕Todo의 타입을 지정해보자 할 일 목록(Todo)에는 고.. 공감수 0 댓글수 0 2022. 12. 31.
백준 숨바꼭질4 C++ https://www.acmicpc.net/problem/13913 13913번: 숨바꼭질 4 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 www.acmicpc.net BFS를 했을 떄, 최단 거리를 역추적하는 문제입니다. 먼저 주어진 n과 k를 입력받고, 최단거리 저장 배열 dt를 만들고 큰 값으로 초기화를 해주었습니다. void input(){ cin >> n >> k; for(int i = 0;i MAX || node < 0){ return false; } return true; } 이제 BFS함수를 정의해줍니다. void.. 공감수 0 댓글수 0 2022. 12. 27.
2차원 배열에서 이분 탐색 사용하기 2차원 배열에서 이분탐색을 적용하고 싶었다. https://leetcode.com/problems/search-a-2d-matrix/?envType=study-plan&id=algorithm-ii Search a 2D Matrix - LeetCode Search a 2D Matrix - Write an efficient algorithm that searches for a value target in an m x n integer matrix matrix. This matrix has the following properties: * Integers in each row are sorted from left to right. * The first integer of each row is greater l.. 공감수 0 댓글수 0 2022. 12. 27.
얕은 복사 VS 깊은 복사 얕은 복사 vs 깊은 복사 얕은복사는 객체의 참조값(주소값)을 , 깊은 복사는 객체의 실제값을 복사합니다 원시 값을 복사할 떄, 새로운 메모리 공간을 할당하고, 그 곳에 새 원시 값을 넣고, 식별자가 새로운 메모리 공간을 가르키기 떄문에, 복사를 하고 값을 바꿔도, 기존의 원시값에는 아무런 영향도 가지 않습니다. const a = 1; let b = 2; b = 3; console.log(a); //1 console.log(b); //3 //기존 값 a에 영향을 미치지 않는다. 위의 코드를 그림으로 그려보면 다음과 같은 과정을 겪습니다. 이제 변수 b를 변수 c로 복사해 보겠습니다. let c = b; 위의 코드가 실행되면 다음과 같이 3을 저장할 새 메모리 공간을 만들고, 원시 값을 저장하고 c가 그 .. 공감수 0 댓글수 0 2022. 12. 26.

문의안내

티스토리
로그인
고객센터

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