본문 바로가기

전체 글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.