TIL

[React] 'React' must be in scope when using JSX error 오류해결

CRA 를 실행시키니 에러가 떴다. 'React' must be in scope when using JSX error 해결법 React를 임포트 시켜준다. import React from 'react'; JSX는 자바스크립트 문법의 확장으로 ECMA 표준이 아니다. 따라서 create-react-app따라서 JSX를 사용할 때마다 표준 JavaScript로 변환하려면 바벨과 같은 툴이 필요하다. 바벨이 JSX가 사용되었음을 알고 이를 변환하도록 하기 위해서는 React를 임포트해주어야 한다. 참고 https://stackoverflow.com/questions/56562685/react-must-be-in-scope-when-using-jsx-error-in-routes-js-file 'React' mu..

[Github] 보안 취약점 알림(Dependabot alerts)

리액트로 프로젝트를 파서 하던도중 Dependabot alerts 알람이 떴다. We found potential security vulnerabilities in your dependencies. 뭔가 해서 보니, 보얀 취약성을 발견했다는 건데 pakage-lock.json 이나 pakage.json 파일을 업데이트를 해야 한다고 한다. 해결법 터미널을 열어 보안 취약성을 확인해주고 업데이트를 한다. npm audit 그 후 업데이트를 해준다. 업데이트가 안되면 --force 를 붙여 강제로 해주면 된다. // npm 최신버전 업데이트 $ npm i -g npm // 보안 취약성 확인 (해당 폴더로 이동) $ npm audit // 업데이트 (해당 폴더에서) $ npm audit fix $ npm au..

[React] CSS Module - Component에 style 주기

앞서 포스팅한 create-react-app을 통해서, 특정 컴포넌트를 위한 css 파일을 만들 수 있는 기능을 사용할 수 있다. 먼저 css를 사용하는 방법에는 두 가지 선택지가 있는데 아래와 같다. 하나의 style 파일 만들기 component 마다 style 파일 만들기 1. styles.css 파일 styles.css 파일을 만들어 사용하는 것은 간단하다. css 파일에 넣고싶은 css코드를 작성하고, index.js에서 styel.css파일을 import를 해주면 된다. index.js import "./styles.css"; 하지만 이 방법은 css파일이 적용하려는 파일의 모든 부분에 import 된다는 단점이 있다. 2. component 마다 style 파일 만들어주기 - CSS Modu..

[React] 리액트 시작하기, create-react-app

Create React App Create React App은 React 배우기에 간편한 환경이며, 시작하기에 최고의 방법은 새로운 싱글 페이지 애플리케이션 입니다. 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다. 1. Node.js 설치 및 npx 설치 가장 먼저 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 설치 후 콘솔창에 node js의 버전을 확인해보는 명령어는 다음과 같다. node -v 그 후 npx 가 설치되어있는지 버전이나 커맨드 실행을 확인해본다. npm install npx -g // npx 설치 npx -v // 버전확인 npx // npx 커맨드 실행 2. 새로운 프로젝트 만들..

[Java] 프로그래머스 : 시저 암호

문제 코딩테스트 연습 - 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀 programmers.co.kr 풀이 단순하게 대문자인지 소문자인지 확인하고 더해놓고 기준을 넘어가면 다시 빼줬다. class Solution { public String solution(String s, int n) { char c[] = s.toCharArray(); // 대문자 65-90 소문자 97-122 for (int i=0;i=65 && c[i]90) c[i]-=26; } // 소문자인데 122 넘어가면 -26 else if (c[i]>=97 &&..

[Java] 프로그래머스 : 콜라츠 추측

https://programmers.co.kr/learn/courses/30/lessons/12943 코딩테스트 연습 - 콜라츠 추측 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2 programmers.co.kr 풀이 문제가 어려운 건 아니고 테스트 케이스 3번에서 결과가 488이 나와서 오류가 뜨길래 찾아보니, class Solution { public int solution(int num) { } 문제에서 입력값을 int 파라미터로 받지만 int의 경우 테스트 케이스 3번의 연산 과정에서 21억을 넘게되면서 이 과정에서 연산값 제한으로 ..

[Java] 프로그래머스 : 3진법 뒤집기

https://programmers.co.kr/learn/courses/30/lessons/68935?language=java 코딩테스트 연습 - 3진법 뒤집기 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 100,000,000 이하인 자연수 programmers.co.kr 풀이 10진법 -> 3진법 변환 나머지가 0이 될때까지 나눠주며 몫을 저장한다. 45의 경우 sb에 0021이 저장된다. 3진법 -> 10진법 변환 자릿수에 맞게 3의 배곱근을 곱해주며 다시 더한다. 0021을 reverse()함수로 반전해서 1200으로 만들고 곱해서 수월하다. class ..

[Java] 프로그래머스 : 이상한 문자 만들기

https://programmers.co.kr/learn/courses/30/lessons/12930# 코딩테스트 연습 - 이상한 문자 만들기 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 programmers.co.kr 풀이 처음에는 공백을 기준으로 문자열을 나누기 위해 split(" ")을 사용했는데, 테스트 점수가 68점이 나왔다. 틀린 점을 모르겠어서 찾아보니, split(" ")은 후행 공백을 처리해주지 않는다는 점을 알게 되었다. 만약 " hello "라는 문자열을 split(" ")으로 나눈다면 { "", "", "hello", "", ""] 가 아니라..