전체 글 36

[프로그래머스]멀리 뛰기

[level 2] 멀리 뛰기 - 12914 문제 링크 문제 설명 효진이는 멀리 뛰기를 연습하고 있습니다. 효진이는 한번에 1칸, 또는 2칸을 뛸 수 있습니다. 칸이 총 4개 있을 때, 효진이는 (1칸, 1칸, 1칸, 1칸) (1칸, 2칸, 1칸) (1칸, 1칸, 2칸) (2칸, 1칸, 1칸) (2칸, 2칸) 의 5가지 방법으로 맨 끝 칸에 도달할 수 있습니다. 멀리뛰기에 사용될 칸의 수 n이 주어질 때, 효진이가 끝에 도달하는 방법이 몇 가지인지 알아내, 여기에 1234567를 나눈 나머지를 리턴하는 함수, solution을 완성하세요. 예를 들어 4가 입력된다면, 5를 return하면 됩니다. 제한 사항 n은 1 이상, 2000 이하인 정수입니다. 성능 요약 메모리: 4.14 MB, 시간: 0.02 m..

개발/알고리즘 2023.09.25

[인턴 회고] 스타트업 프론트엔드 개발

스타트업 인턴 지원 2023년의 목표 중 하나가 인턴 경험해보기였다. 하지만 당장 대기업 인턴 서류를 넣어도 붙을 자신이 없었고... 마침 학교에서 학점도 주면서 인턴 생활을 할 수 있는 현장실습 프로그램이 있어서 지원했다. 기본 월급(기본 월급은 최저 임금의 75%라 꽤나 적었다.)보다 돈을 많이 주는 큰 기업이나 집과 가까운 기업들도 있었지만, 나는 내가 흥미 있는 분야인 메타버스를 다루는 스타트업에 지원했다. 웹 브라우저에서 3D 가상현실을 어떻게 구현하는지도 궁금했고, 프로젝트에서 한 번 해본 프론트엔드 직무를 한번 제대로 경험해보고 싶었다. 무엇보다, 해당 회사의 제품을 직접 사용해보고 싶은 호기심이 가장 컸다. 대입 이후 처음으로 자기소개서도 써보고, 이력서도 써보고, 화상 면접도 봤다. 면접..

[Typescript] type 과 interface의 차이

next 프로젝트를 하다가, 코드리뷰 중 interface 로 정의된 타입을 type으로 바꾸자는 이야기가 나와서 둘의 차이점이 뭔지 찾아보게 되었다. ChatGPT 답변 : Type과 Interface는 TypeScript에서 타입을 정의하는 두 가지 주요 방법입니다. 두 방법은 비슷한 목적을 가지고 있지만, 몇 가지 차이점이 있습니다. --- Type (타입 별칭): type 키워드를 사용하여 타입을 정의합니다. 주로 유니온(Union), 인터섹션(Intersection), 나머지(rest) 타입 등을 사용할 때 유용합니다. 새로운 타입을 정의하고 이름을 부여할 수 있습니다. 유니온 타입: type MyUnion = string | number; 인터섹션 타입: type MyIntersection =..

개발/TIL 2023.08.04

[230517] 새탭으로 링크 열기(html), Angular 현재 경로, ChangeDetectionStrategy

https://velog.io/@iooi75/%EA%B3%B5%EB%B6%80-%EB%A7%81%ED%81%AC-%EC%83%88%ED%83%AD%EC%97%B4%EA%B8%B0-%EA%B7%B8%EB%83%A5-%EC%97%B4%EA%B8%B0 [TIL] 링크 새탭열기, 그냥 열기 HTML 그냥 열기 네이버로 바로이동 HTML 새창열기 네이버 새탭으로 열기 velog.io https://stackoverflow.com/questions/34597835/how-to-get-current-route How to get current route The current docs only talk about getting route params, not the actual route segments. For ex..

개발/TIL 2023.05.17

[230516] <img> vs background-img, ChangeDetectionStrategy

아이콘이나 뱃지 등 이미지가 들어가는 컴포넌트를 만들 때, 나는 그냥 img 태그를 사용해서 넣었는데 다른 분들 코드에서는 background-img를 통해 넣는 경우가 더 많았다. 그래서 두 개의 차이에 대해 알아봤다. 태그 - 이미지에 구체적인 정보가 담겨 있거나, 출력이 필요하거나, 이미지의 크기가 레이아웃에 크게 영향을 주거나, 검색 엔진에 노출이 필요하거나, 사용자가 등록한 이미지 등일 땐 img 태그를 주로 사용한다. 즉, 페이지 내에서 중요한 역할을 하면 img 태그! background-img : 디자인 요소로만 사용하여, 로딩 되지 않더라도 콘텐츠를 이용하는 데 문제가 없을 때 사용. 그리고 이렇게 사용하는 게 개발/유지보수에 훨씬 효율적이다. https://inseq.co.kr/ko/b..

개발/TIL 2023.05.16

[Javascript] 객체, 배열 정리

배열 push, pop, shift, unshift let arr = new Array(); let arr_1 = new Array(5); // empty array 5 let arr2 = []; arr.push('a'); // 맨 뒤에 추가 arr.push(1); arr.push({name: 'hello'}); arr.unshift(10); // 맨 앞에 추가 arr.pop(); // 맨 뒤 arr.shift(); // 맨 앞 splice, slice arr.splice(2,1,6,7,8); // 인덱스 2부터 1개 삭제, 그 자리에 6,7,8 추가 arr.splice(3); // 인덱스 3부터 끝까지 삭제, 삭제한 배열 리턴 let newArr = arr.slice(1, 4); // 인덱스 1~3 요..

개발 2023.05.08

[크롬 브라우저 하드웨어 가속] Udemy 화면 재생 안될 때

맥북으로 유데미 강의를 듣는데, 아무래도 들으면서 실습을 하거나 필요한 자료 찾으려면 아이패드랑 미러링 해서 보는 게 훨씬 편해서 미러링을 했더니 화면이 그냥 검은 화면만 나오고, 소리와 자막만 재생되었다. 처음엔 그게 미러링 탓인줄도 모르고, 그냥 동영상 재생이 안되길래 당황했는데, 알고보니 미러링 때문이었다... 아마 영상 캡쳐로 인식하거나 그런 것 같다. 케이블 연결도 시도해보고 했는데, 찾아보니 https://business-support.udemy.com/hc/ko/articles/115005369487-%EB%8F%99%EC%98%81%EC%83%81-%EC%9E%AC%EC%83%9D-%EB%AC%B8%EC%A0%9C 이 링크에서 '브라우저 하드웨어 가속 설정' 을 해제하라고 해서 시도해봤다...

개발 2023.05.08

[230427] css box-sizing, <section><div><article> 차이점

CSS 자식 컴포넌트가 부모 컴포넌트 width를 넘어서서 검색으로 -webkit-fill-available을 사용했는데, box-sizing 속성을 지정해주어서 해결됐다. box-sizing https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing#css 한 페이지에 div 를 너무 무지성으로 나누는 거 아닌가, 뭔가 구분을 둬야 할 것 같아서 찾아봤다. 차이점 - 의미적 차이 https://velog.io/@yunsungyang-omc/html-%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8-%EB%B8%94%EB%9D%BD%EC%9A%94%EC%86%8C-%EB%B9%84%EA%B5%90-arcicle-section-div (html) ..

개발/TIL 2023.04.27

[230424] Angular - Observable subscribe, Router, ActiveRoute

Observable lazy loading Observable: 변화하는 데이터 소스들 ex) (user Input)events, HTTP Requests, triggered in Code... Observer: 관찰자, 코드의 다른 부분들 비동기 데이터를 다루는 새로운 표준 lazy하다. 각 이벤트에 subscribe 하면, 구독한 관찰자에게만 보내진다. ngOnDestroy에서 unsubscribe 해줘야함 : 안하면 메모리 누수! promise = 오직 하나의 값만 반환 observable = 구독을 하거나 취소하는 등 직접 관리. 앵귤러 라우팅 객체 (gpt 답변) Router: Router 클래스는 라우팅과 관련된 주요 동작을 제공하는 핵심 클래스입니다. navigate, navigateByUr..

개발/TIL 2023.04.24