분류 전체보기

1️⃣ 나누어 떨어지는 숫자 배열 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor answer [5,9,7,10] 5 [5,10] [2,36,1,3] 1 [1,2,3,36] [3,2,6] 10 [-1] 💻 나의 풀이 import java.util.*; class Solution { p..

1️⃣ 하샤드 수 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한사항 x는 1 이상, 10000 이하인 정수입니다. 입출력 예 x answer 10 true 12 true 11 false 13 false 입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다. 입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다. 입출력 예 #3 11의 모든 자릿수의 합은 ..

1️⃣ 오류1 오류 메세지 java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead. 원인 Spring Security의 CORS 설정이 잘못 되어 있었다. Security에서 CORS 설정시 .addAllOrig..

1️⃣ Axios란? 자바스크립트에서 HTTP 통신을 쉽게 처리할 수 있도록 만든 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해 백엔드와 프론트엔드가 쉽게 통신을 하기 위해 Ajax와 더불어 사용됩니다. 이미 자바스크립트에는 fetch api가 있지만, 보통 프레임워크에서 ajax를 구현할 땐 axios를 씁니다. ( fetch와의 차이점을 아래에서 더 알아보겠습니다. ) Node.js 와 브라우저에서도 사용할 수 있습니다. Axios에는 많은 기능들이 있어서, 쉽고 편리하게 데이터를 가져올 수 있어서 개발자들이 많이 사용하는 방법입니다. 2️⃣ Axios 특징 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 3️⃣ ..

1️⃣ 자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 입출력 예 N answer 123 6 987 24 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. 💻 나의 풀이 import java.util.*; public class Solution { public int solution(int n) { int answer = 0; while (n > 0) { answer += n % 10; // 1의 자리부터 더..

component, probs, state 등을 적절히 사용하여 추가' 버튼을 누르면 인풋창에 입력한 값이 저장되어 나타나도록 구현해봤습니다. 아주아주 간단하지만 개념들을 익숙해지게 하기 위해 연습해본 과정을 기록해봅니다! 1️⃣ 인풋창과 버튼 생성 import './App.css' export default function App() { return ( 추가 ) } 먼저 App.js에 인풋창과 버튼을 생성해줍니다. 2️⃣ 인풋창에 입력한 값을 가져오기 onChange 이벤트 : input창에 값을 입력할 때 마다 호출되는 onChange 이벤트 (event) 안에 input에 입력한 값이 들어있습니다 ⇒ 확인해보려면 console.log(event.target.value) ⇒ input에 값을 칠 때 ..

1️⃣ 배경 자동으로 값이 업데이트되면 UI도 업데이트 시켜주자! 하고 나온 게 리액트 하지만 모든 변수가 변할 때마다 렌더링 해주는 건 비효율적이고 부담이 큰 일 그래서 나온 게 State 라는 개념 ! 변수가 바뀐 건 신경쓰지 않음 하지만 state가 바뀌었어???????? 그러면 UI 렌더링 해주자!!!!!!!!!!!! 2️⃣ 방법 ① import 해주기 import React, {useState} from 'react'; ② useState() useState란? 리액트에서 제공해주는 유용한 함수 중 하나 ⇒ react hook funtion App() { let count = 0 const [count, setCount] = useState(0) // 0은 초기값 useState() 함수는 배열..

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 JSX는 Babel에 의해서 Transcompile 됩니다. HTML 태그 내에 JavaScript 연산 class -> className 스타일은 object로 닫는 태그 필수 최상단 element는 반드시 하나 1️⃣ 규칙 1. HTML과 달리 모든 태그는 꼭 닫혀있어야 합니다. 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 합니다. import React, { Component } from 'react'; class App extends Component { render() { return ( Hello World ); } } export default App; 예를 들어 위의 코드는 엘..

1️⃣ Props란? 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체입니다. 다시 말하면, 상위 컴포넌트에서 어떤 데이터를 보낼 것인지 정해 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보내줍니다. 2️⃣ 기본 사용법 예를 들어, App 컴포넌트에서 TodoList 컴포넌트를 사용 할 때 ‘name’ 이라는 값을 전달해주고 싶다고 합시다. 그러면 App.js에 이렇게 작성하면 됩니다. ⇒ 컴포넌트 내부에서 코드를 작성합니다. App.js import React from 'react'; import TodoList from './TodoList'; function App() { return ( ); } export default App; 그리고나서 TodoList 컴포넌트에서 na..

1️⃣ Component란? ‘웹 페이지를 만드는 퍼즐 조각’ 입니다. 개발자는 컴포넌트 조각을 설계하고 만든 컴포넌트를 조합해서 사용자 인터페이스(UI)를 구축합니다. 자바스크립트의 함수가 특정값을 반환하는 것처럼 컴포넌트는 자바스크립트의 함수처럼 작동해서 리액트 엘리먼트를 반환합니다. 어떤 데이터 집합을 사용하든 같은 컴포넌트를 사용하면 모두 동일한 DOM 구조가 반환됩니다. 따라서 같은 컴포넌트를 사용해 동일한 DOM 구조를 지닌 인스턴스를 원하는 개수만큼 만들 수 있습니다. 2️⃣ 함수형 컴포넌트 function으로 정의하고 return문에 jsx 코드를 반환. import React from 'react'; import "./App.css"; function TodoList() { const n..