본문 바로가기

분류 전체보기124

[CSS] 크로스 브라우징 시 필요한 css 접두어 webkit, moz, ms, o 의 의미 크로스 브라우징을 위해 필요한 CSS 접두어 정리 -webkit-: 구글, 사파리 -moz-: 파이어폭스 -ms-: 익스플로러 -o-: 오페라 2021. 7. 23.
[React] React onClick에 여러 함수를 넣고 싶다면 (+주의사항) React onClick할 때 여러 동작을 붙이고 싶은 경우가 많다. 처음에 많이 당황스러웠던 에러는 onClick에 함수 두 개 넣었을 때 예상치도 못했는데 에러가 무한으로 발생했을 때. 이런 간단한 코드에서 에러가 발생하다니 난 바보야.. 같은 생각 들면서 당황스러웠더랬지.. 그럼 이럴 때는 어떻게 하면 되는지 침착하게 알아보자. 함수 하나일 때와 여러 개일 때의 차이점은? 단순하게 설명하자면 함수 하나일 때와 여러 개일 때의 차이는 바로 () => {} 유무이다. 당연하게도 onClick에 여러 함수를 넣었을 때, 그냥 무작정 코드 추가만 하게 되면 에러가 발생한다. 실수로 놓칠 때도 있었고 알고 나서도 꽤 많은 에러가 여기서 났었다. 이 정도 실수는 다신 안해 싶을 때 또 찾아오는 에러.. 방심은.. 2021. 7. 23.
React, React-Native 한 번에 여러 스타일 적용하는 법 한 번에 여러 스타일 적용하는 법 (multiple styles) 스타일 적용 시 아래와 같은 TypeError가 발생했고 스타일 적용 문제였다. React — TypeError: CSS2Properties doesn’t have an indexed property setter for ‘0’ 한 태그에 여러 스타일을 적용하려고 한 부분에서 생긴 에러였고, 한 번에 여러 스타일을 적용하는 해결방법을 찾았다. React style={Object.assign({},style1, style2, ...)} React-Native style={[style1, style2, ...]} 참고 https://medium.com/@abhaytalreja/react-typeerror-css2properties-doesnt-.. 2021. 7. 23.
[Redux] 새로고침 유지: Redux Persist 테스트 후기 도입 배경 Redux의 스토어는 페이지 새로고침 시 state의 데이터들이 초기화되기 때문에, 새로고침 시에도 저장된 상태가 없어지지 않도록 캐시 기능을 구현하는 장치가 필요했다. 기존에는 새로고침 시에 로그인이 풀리지 않도록 하기 위해서, LocalStorage로 사용자 인증 상태를 확인하기 위한 토큰을 저장하고 불러와서 사용하고는 했다. 하지만 그 토큰에 페이지의 많은 상태값이 의존하고 있고, LocalStorage에 매번 직접 접근하여 인증 정보를 가져오는 것보다 store에서 관리하는 것이 더 적합하다고 생각했고, 추후 자동 로그인 기능 도입을 위해서도 반드시 대안이 필요할 것이라고 판단하였다. 또한 새로고침 시에 유지해야 할 상태값들이 많이 추가되었고, 앞으로의 확장성을 위해서도 Redux Pe.. 2021. 7. 23.
React 빌드, 배포 시 주의할 점 소스맵 제거하기 create-react-app으로 빌드, 배포하는 경우 기본적으로 webpack에 의해 번들링 된 파일과 sourcemap이 생성된다. sourcemap은 디버깅을 위한 파일이기 때문에 브라우저 내에서 다시 원본 소스처럼 확인할 수 있다. 개발자 도구에서 source 확인 시, 코드가 그대로 노출될 위험이 있으므로 반드시 package.json에서 아래와 같이 수정이 필요하다. 최종 배포 전에 꼭 브라우저에서 다시 확인하는 작업이 중요하다. GENERATE_SOURCEMAP=false "build" : "GENERATE_SOURCEMAP=false react-scripts build" 또는 빌드 후 직접 삭제 (v1.0.11 보다 높은 버전이어서 사용해보지는 않았다) "build": "r.. 2021. 7. 23.
[Level 2][정렬] 가장 큰 수(JavaScript) 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6, 10, 2] 621.. 2020. 4. 4.
[Level 2][스택/큐] 기능개발(JavaScript) 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자연수입니다... 2020. 4. 1.
[Level 2][스택/큐] 다리를 지나는 트럭(JavaScript) 트럭 여러 대가 강을 가로지르는 일 차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 트럭은 1초에 1만큼 움직이며, 다리 길이는 bridge_length이고 다리는 무게 weight까지 견딥니다. ※ 트럭이 다리에 완전히 오르지 않은 경우, 이 트럭의 무게는 고려하지 않습니다. 예를 들어, 길이가 2이고 10kg 무게를 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 경과 시간 다리를 지난 트럭 다리를 건너는 트럭 대기 트럭 0 [] [] [7,4,5,6] 1~2 [] [7] [4,5,6] 3 [7] [4] [5,6] 4 [7] [4,5] [6] 5 [.. 2020. 4. 1.
[Level 2][스택/큐] 쇠막대기(JavaScript) 여러 개의 쇠막대기를 레이저로 절단하려고 합니다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자릅니다. 쇠막대기와 레이저의 배치는 다음 조건을 만족합니다. - 쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있습니다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓습니다. - 각 쇠막대기를 자르는 레이저는 적어도 하나 존재합니다. - 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않습니다. 아래 그림은 위 조건을 만족하는 예를 보여줍니다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향입니다. 이러한 레이저와 쇠막대기의 배치는 다음.. 2020. 4. 1.
[Level 2][스택/큐] 프린터(JavaScript) 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되는지 알고 싶습니.. 2020. 4. 1.
[Level 2][스택/큐] 탑(JavaScript) 수평 직선에 탑 N대를 세웠습니다. 모든 탑의 꼭대기에는 신호를 송/수신하는 장치를 설치했습니다. 발사한 신호는 신호를 보낸 탑보다 높은 탑에서만 수신합니다. 또한, 한 번 수신된 신호는 다른 탑으로 송신되지 않습니다. 예를 들어 높이가 6, 9, 5, 7, 4인 다섯 탑이 왼쪽으로 동시에 레이저 신호를 발사합니다. 그러면, 탑은 다음과 같이 신호를 주고받습니다. 높이가 4인 다섯 번째 탑에서 발사한 신호는 높이가 7인 네 번째 탑이 수신하고, 높이가 7인 네 번째 탑의 신호는 높이가 9인 두 번째 탑이, 높이가 5인 세 번째 탑의 신호도 높이가 9인 두 번째 탑이 수신합니다. 높이가 9인 두 번째 탑과 높이가 6인 첫 번째 탑이 보낸 레이저 신호는 어떤 탑에서도 수신할 수 없습니다. 송신 탑(높이) 수.. 2020. 4. 1.
[Level 1] 소수 찾기(JavaScript) 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한 조건 n은 2이상 1000000이하의 자연수입니다. 입출력 예 n result 10 4 5 3 입출력 예 설명 입출력 예 #1 1부터 10 사이의 소수는 [2,3,5,7] 4개가 존재하므로 4를 반환 입출력 예 #2 1부터 5 사이의 소수는 [2,3,5] 3개가 존재하므로 3를 반환 풀이1(JavaScript). 배열 사용 // 소수 구하기: 에라토스테네스의 체 function PrimeNumber(n) { let arr = []; for (let i = 2; i 2020. 3. 27.