목록분류 전체보기 (887)
치춘짱베리굿나이스
localStorage / sessionStorage 이번 기업과제는 로컬스토리지에 값을 저장해야 한다는 조건이 붙어 있어 store 라이브러리를 사용하려고 하는데, 기왕이면 로컬 스토리지에 관해 알고 사용하면 더 좋지 않을까? 싶어 정리를 해 본다 찾아보던 중에 세션 스토리지도 있길래 같이 적으려구 localStorage 로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다 또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다 이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다 브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한..
store 설치 $> npm install store $> yarn add store npm 링크 store store A localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood. Latest version: 2.0.12, last published: 5 years ago. Start using store in your project by running `npm i store`. www.npmjs.com yarn 링크 Contributors https://yarnpkg.com/package/store Fast,..
개인과제 #1 공식적인 내생각 무한스크롤 구현하면서 IntersectionObserver를 처음 다뤄봤는데, 린터의 비명소리와 타입스크립트의 타입 거부, 온갖 삽질이 겹쳐져 무한스크롤만 세시간 넘게 잡은 것 같다 삽질 이유도 찾아보면 참 별거아니었는데... 작업 내용 (삽질 내용) API 명세와 실제 데이터의 타입이 다르게 들어오는 문제 export declare interface ISearchResult { Response: 'True' | 'False' | null; totalResults?: number; Error?: string; } Bool이라길래 당연히 Boolean인 줄 알았는데 실제로는 문자열이 들어와서 암만 searchResult.Response 로 조건문을 작성해봐야 true만 반환되..
IntersectionObserver 무한스크롤을 구현해야 해서 이전에 합류한 프로젝트 코드를 (모바일 뷰 구현할 때 무한스크롤 방식으로 게시글을 불러왔기 때문) 찾아보고 있었는데, 보편적인 방식은 Intersection Observer를 거는 방법 같다 이름만 들어보면 벌써 공포스러운데 차근차근 정리해보도록 하겠다 Intersection Observer가 뭐지? 한국어로 교차 관찰자 / 탐지자 라고 한다 한국말로 풀어도 어렵다 ㅋㅋ ‘타겟 요소’와 ‘타겟의 상위 요소 또는 최상위 요소의 뷰포트’가 교차되는 부분을 비동기적으로 관찰하는 API라고 한다 뷰포트라 함은 우리가 웹 페이지를 보고 있는 바로 그 화면을 의미하며, css 작업을 할 때 vw, vh 단위로 비교적 익숙할 것이다 쉽게 말하자면 어떤 ..
팁 어린이은행 ㅋㅋ 경력자와 신입의 가장 큰 차이는 경력자는 이미 신입일 시절에 특정 이슈에 대해 막혀본 경험과 해결한 경험이 있다는 것 (같은 이슈가 나와도 빠르게 해결할 수 있음) 열심히살자 HTML 기본 사용법 div와 span 정도만 알아도 나머지는 다 비슷비슷하다 (형제 태그 느낌) 프론트엔드의 꽃은 다양한 html 태그를 어떻게 적재적소에 활용하나에 있다 비슷한 기능을 하지만 역할을 구분지을 때 쓰는 시맨틱 태그, 헤더 태그, 리스트 태그, 꾸미기 태그, 입력창 태그, 이름도 안 들어본 태그 등 종류가 굉장히 많다 내비게이션 바는 nav 태그 상단 내비든, 하단 내비든, 우측 내비든 nav 태그로 구분지어놓는 게 좋다 div랑 동작은 같지만 이름만 구분해둔 시맨틱 태그임 리스트 형식으로 여러 ..
개인과제 #1 공식적인 내생각 손가락 끝을 다쳐서 반창고를 감았더니 타자치는 느낌이 이상하다 오늘 유독 기침이 심해져서 집중이 하나도 안 됐다... 그래도 개인과제 얼레벌레 시작해서 다행이다 노션 정리보다 코드 작성에 더 시간투자 많이 하니까 재미있었다 남들보단 실력이 부족할지 몰라도 내가 재밌는 개발을 할 수 있어서 다행이다 코드리뷰 1등으로 요청하길 잘했다... 로직만 중요한게 아님을 많이 느낌 작업 내용 typescript interface에서 ?의 의미 interface ITest { value1: string; value2?: string; } 있어도 되고 없어도 되는 값을 의미한다 커스텀 훅 만들어보기 export const useFetchMovie = (page: number): ISearc..
시리얼 번호 문제 다솜이는 기타를 많이 가지고 있다. 그리고 각각의 기타는 모두 다른 시리얼 번호를 가지고 있다. 다솜이는 기타를 빨리 찾아서 빨리 사람들에게 연주해주기 위해서 기타를 시리얼 번호 순서대로 정렬하고자 한다. 모든 시리얼 번호는 알파벳 대문자 (A-Z)와 숫자 (0-9)로 이루어져 있다. 시리얼번호 A가 시리얼번호 B의 앞에 오는 경우는 다음과 같다. A와 B의 길이가 다르면, 짧은 것이 먼저 온다. 만약 서로 길이가 같다면, A의 모든 자리수의 합과 B의 모든 자리수의 합을 비교해서 작은 합을 가지는 것이 먼저온다. (숫자인 것만 더한다) 만약 1,2번 둘 조건으로도 비교할 수 없으면, 사전순으로 비교한다. 숫자가 알파벳보다 사전순으로 작다. 시리얼이 주어졌을 때, 정렬해서 출력하는 프로..
스타트와 링크 오늘은 스타트링크에 다니는 사람들이 모여서 축구를 해보려고 한다. 축구는 평일 오후에 하고 의무 참석도 아니다. 축구를 하기 위해 모인 사람은 총 N명이고 신기하게도 N은 짝수이다. 이제 N/2명으로 이루어진 스타트 팀과 링크 팀으로 사람들을 나눠야 한다. BOJ를 운영하는 회사 답게 사람에게 번호를 1부터 N까지로 배정했고, 아래와 같은 능력치를 조사했다. 능력치 Sij는 i번 사람과 j번 사람이 같은 팀에 속했을 때, 팀에 더해지는 능력치이다. 팀의 능력치는 팀에 속한 모든 쌍의 능력치 Sij의 합이다. Sij는 Sji와 다를 수도 있으며, i번 사람과 j번 사람이 같은 팀에 속했을 때, 팀에 더해지는 능력치는 Sij와 Sji이다. N=4이고, S가 아래와 같은 경우를 살펴보자.