본문 바로가기
크로스 브라우징 크로스 브라우징 정의 모든 브라우저와 디바이스에서 가능한 동등한 수준의 정보, 기능을 제공하는 것. ex) 스크린 리더에서도 사이트를 읽을 수 있도록 함 똑같이 보일 필요는 없음( 최신 버전에서는 3D 이미지를 구버전 브라우저에서는 평면 도형을 보여주는 방식 ) 플랫폼 사용자가 수용 가능한 수준으로 핵심 기능과 정보를 제공하도록 하는 것 크로스 브라우징 원칙 특정 브라우저에 종속성을 가진 기능은 가급적 사용을 배제한다. 웹 사이트는 그래픽을 연결하지 않은 상태로도 사용 가능해야 한다. 핵심 정보는 반드시 텍스트/HTML 포맷으로 제공되어야 한다. ex) flash 같은 것으로 전체 화면을 구성해서는 안된다. 핵심 정보를 표현하는데 이미지를 사용하는 것은 최소화해야 한다. 사용한다면 텍스트 형식의 alt ..
[프로그래머스, 레벨1] K번째 수 K번째 수 출처: 프로그래머스 코딩 테스트 연습 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한 조건 ..
[프로그래머스, 레벨1] 두 개 뽑아서 더하기 두 개 뽑아서 더하기 출처: 프로그래머스 코딩 테스트 연습 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 나의 풀이 모든 숫자 조합을 계산하려면 배열의 각 요소에 대해 나머지 요소와의 합을 계산하면 된다. 요소 1개당 n-1번 반복하는데, 모든 요소에 대해 수행해야 하므로 복잡도는 O(n^2) 이다. numbers의 길이가 최대 100이므로 완전탐색으로 계산할 수 있다. 마지막에는 Set으로 중복을 제거하고 so..
[프로그래머스, 레벨1] 모의고사 모의고사 출처: 프로그래머스 코딩 테스트 연습 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아..
[프로그래머스, 레벨1] 완주하지 못한 선수 완주하지 못한 선수 출처: 프로그래머스 코딩 테스트 연습 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 나의 풀이 동명이인 처리를 위해 part..
React Hooks useState 함수형 컴포넌트에서 상태를 관리할 때 쓴다. const [state, setState] = useState(initialState); 반환된 배열 중 첫번째 원소는 값을 저장하는 state 이며, 두번째 원소는 setter 함수다. state를 변경할 때에는 반드시 이 setter를 이용해야 렌더링이 정상적으로 이루어진다. useState로 상태 변경 시, 렌더링이 된 후에 업데이트된 state를 조회 가능하다. 즉, useState가 호출된 이후라도 렌더링이 수행되지 않았다면 업데이트 이전의 state가 조회된다. useRef const refContainer = useRef(initialValue); initialValue를 설정하면 refContainer.current가 해당 값으로..
debounce와 throttle 개인 프로젝트 중 무의미한 스크롤 이벤트를 줄여야 했습니다. 그 과정에서 debounce, throttle 개념에 대해 알게 되어 정리 차 글로 남깁니다. debounce 맨 마지막으로 호출된 함수만 실행시킵니다. 아래와 같은 형태로 작동합니다. 중간에 함수가 다시 호출되면 타이머를 초기화 하고 delay 만큼 기다린 후 실행합니다. 따라서 최종적으로는 마지막 fn()이 호출된 시점 + delay 후에 함수가 실행됩니다. function debounce(fn, delay) { let timer = null; // timer 은닉을 위해 클로저를 사용 return function () { // 클로저 함수 안에서 this 와 arguments 변수로 디바운싱 함수의 스코프와 변수에 접근 const cont..
position : absolute가 부모 엘리먼트 밖으로 나가는 문제 absoluteThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.This value creates a new stacking context when the value of z..

티스토리툴바