단의 개발 블로그

💡 문제명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다.아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.명함 번호가로 길이세로 길이16050230703603048040가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 ..

💡 문제나만의 카카오 성격 유형 검사지를 만들려고 합니다.성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다.4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다.검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다.매우 비동의비동의약간 비동의모르겠음약간 동의동의매우 동의각 질문은 1가지 지표로 성격 유형 점수를 판단합니다.예를 들어, 어떤 한 질문에서 4번 지표로 아래 표처럼 점수를 매길 수 있습니다.이때 검사자가 질문에서 약간 동의 선택지를 선택할 경우 어피치형(A) 성격 유형 1점을 받게..

💡 문제두 정수 X, Y의 임의의 자리에서 공통으로 나타나는 정수 k(0 ≤ k ≤ 9)들을 이용하여 만들 수 있는 가장 큰 정수를 두 수의 짝꿍이라 합니다(단, 공통으로 나타나는 정수 중 서로 짝지을 수 있는 숫자만 사용합니다). X, Y의 짝꿍이 존재하지 않으면, 짝꿍은 -1입니다. X, Y의 짝꿍이 0으로만 구성되어 있다면, 짝꿍은 0입니다.예를 들어, X = 3403이고 Y = 13203이라면, X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 3, 0, 3으로 만들 수 있는 가장 큰 정수인 330입니다. 다른 예시로 X = 5525이고 Y = 1255이면 X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 2, 5, 5로 만들 수 있는 가장 큰 정수인 552입니다(X에는 5가 3개, Y에는 5가 2..

Hooks란?리액트에 도입된 기능으로 함수 컴포넌트에서 다양한 작업을 도와주는 기능이다. useState기본적인 훅으로 함수 컴포넌트에서 가변적인 상태를 지니게 해준다. 함수 컴포넌트의 상태를 관리할 때 사용된다.import {useState} from "react";const Counter = () => { const [count, setCount] = useState(0); return ( count의 값: {count} setCount(count + 1)}>+1 setCount(count - 1)}>-1 )}export default Counter;import './App.css';import..

이벤트란?사용자가 웹 브라우저와 상호 작용을 하는 것을 이벤트라고 한다. 마우스 클릭, 마우스 아웃, form 입력 등이 있다. 여러 이벤트에 따라 리액트는 해당 이벤트를 받아서 처리할 수 있다.  이벤트 사용 주의사항이벤트 명은 카멜 표기로 작성 ex) onclick -> onClick이벤트에 실행할 자바스크립트 코드가 아닌 함수 형태로 전달DOM 요소에만 이벤트 설정 가능 ex) div, button, inpu등 , 즉 직접 제작한 컴포넌트에는 사용이 불가능 이벤트 종류리액트에서 지원하는 이벤트 종류이다. 이외에도 다양한 이벤트가 있으므로 공식 문서를 참고해서 각자 필요한 이벤트를 사용하면 된다.ClipboardCompositionKeyboardFocusFormMouseSelectionTouchUIW..

컴포넌트리액트는 여러 컴포넌트로 구성하여 사용한다. 컴포넌트는 속성값 props와 상태 값 state를 사용한다. 원래는 클래스형 컴포넌트와 함수형 컴포넌트가 존재해서 사용되어 왔는데 요새는 함수형 컴포넌트가 주로 사용된다. 클래스 형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용하고, 임의 메소드를 정의할 수 있다. 함수형 컴포넌트는 선언하기 편하고, 메모리 측면에서 유리하다. 또한 클래스 형 컴포넌트가 가진 장점들을 훅을 사용해서 구현이 가능하기 때문에 요즘 대부분의 애플리케이션에서는 함수형 컴포넌트를 사용하여 많이 작업한다. 사용하기src/components/MyConponent.js 생성const MyComponent = () => { return 컴포넌트 테스트}export..

각 운영체제에 맞게 node js를 설치한다.https://nodejs.org/en/download/package-manager node js란 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 실행할 수 있게 해주는 런타임이다.리액트로 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 통해서 사용되기 때문에 설치하여 사용한다.개발도구에는 ECMAScript를 호환 시켜주는 바벨, 모듈화 된 코드를 한 파일로 합치는 것을 번들링, 코드를 수정할 때마다 웹 브라우저를 갱신 시켜주는 리로딩 기능을 하는 웹팩이 묶여있다. nodejs를 설치하면 패키지 매니저 도구인 npm도 같이 설치되는데 이를 통해 다른 개발자가 만든 패키지를 설치하여 사용할 수 있다. 프로젝트 생성터미널에 아래 명령어를 사..

리액트란?리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만들때 사용한다. 프레임워크에서 자주 쓰이는 패턴인 MVC로 예를 들면,V만 신경쓰는 라이브러리이다. 리액트로 애플리케이션을 만들 때 재 사용가능한 형식으로 만들게 된다. 이를 컴포넌트라고 하는데 수많은 기능을 내장하고 있다. 사용자 화면에 보여주는 것을 렌더링이라고 한다. 리액트는 변경된 부분만 리렌더링을 통해 성능과 사용자 경험을 향상 시킨다. 렌더링리액트의 render() 함수는 컴포넌트가 어떻게 만들어지는지 정의하는데 사용된다. 단순 HTML 태그를 리턴하는 것이 아닌 작동에 대한 정보를 지닌 객체를 반환한다. 리액트는 해당 정보를 재귀적으로 렌더링하여 HTML을 만들고 실제 페이지의 DOM 요소에 주입하여 브라우저에서 보여주게 된다...

구성 속성이란스프링에는 다음 두 가지 형태의 서로 다른 구성이 존재한다. 아래 두가지 구성은 XML 구성과 자바 구성 모두에서 사용된다. 빈 연결 (Bean wiring): 스프링 애플리케이션 컨텍스트에서 빈으로 생성되는 애플리케이션 컴포넌트 및 상호 간에 주입되는 방법을 선언하는 구성속성 주입 (Property Injection): 스프링 애플리케이션 컨텍스트에서 빈의 속성 값을 설정하는 구성예를 들어 우리가 데이터 베이스 연결할 때 sql문을 지정할 경우가 있었다. datasource 메소드를 빈으로 등록하는 방법이 빈 연결 방법이다.@Beanpublic DataSource dataSource() { return new ...;} 스프링 환경 추상화스프링 환경 추상화는 구성 가능한 속성을 한 곳에서 ..

💡 문제1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요.소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다.(1은 소수가 아닙니다.)💡 제한 조건n은 2이상 1000000이하의 자연수입니다. 입출력 예 입출력 예 설명입출력 예 #11부터 10 사이의 소수는 [2,3,5,7] 4개가 존재하므로 4를 반환입출력 예 #21부터 5 사이의 소수는 [2,3,5] 3개가 존재하므로 3를 반환✨ 풀이class Solution { public int solution(int n) { int answer = 0; for(int i=1; i1. 1은 소수가 아니므로 제외한다.2. 단순히 자기 자신과 i 값을 비교하며 나머지 값만 체크하..