ALL

React 실행, style 지정, State 실행 설정(useEffect, Cleanup Func)

📌ReactApp 실행 Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgnode -vnpx제대로 설치되었는지 확인npx create-react-app [폴더명]code [폴더명]새로 프로젝트 생성 및 실행npm startnpm 오류 발생→ terminal을 cmd로 바꿔준 후, 윈도우 환경 변수 설정 후 재부팅해주어 해결npm i prop-typesprop-types 설치 📌Style 지정module.css 형태의 파일을 생성하여 원하는 style로 css를 만들어준 후에 import해준다. (Ex. App.module.css)import Button from "./Button";import..

Props & Prop Type란 무엇인가

📌 PropsProps는 함수에 전달되는 인자를 의미한다. function SaveBtn() { return ( SAVE ); } function ConfirmBtn() { return ( CONFIRM ); }버튼이 여러 개일 경우, 중복되는 속성이 생기고 코드 중복으로 인해 불편함이 커진다. props를 이용하여 하나의 버튼만을 생성한 후, text만 바꾸어 사용하는 방식이 더 편리하다.function Btn(props) { console.log(props); return ( {props.btn} ); } function App() { return ( ); }props로 object 형태로 다양한 값을 받아올 수 있고, props.btn과 같은 형태로 활용이 가능하다. object 형태로 받아오는 것..

JSX & State란 무엇인가 + Form & Input

📌JSX란Javascript를 확장한 문법이다. HTML과 유사한 형태로 React 개발자 입장에서 편리하게 사용한다.const h3 = React.createElement( "h3", { onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a h3" );위와 같은 형태의 컴포넌트는 아래와 같이 JSX를 통해 HTML과 유사한 형태로 사용한다.const Title = ( console.log("mouse enter")}> Hello I'm a h3 );const Button = ( console.log("clicked")} > Click );style을 지정해서 사용도 가능하다. 반드시 {}가 두 번 감싸지는 형태여야 적용된다. 이렇게 JSX로 ..

[Programmers/Python] 운영체제

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr프로그래머스 파이썬 PCCP 모의고사 1회 4번 운영체제 121686 더보기 문제 설명 개발자 준모는 운영체제를 만들었습니다. 준모가 만든 운영체제는 프로그램의 우선순위와 호출된 시각에 따라 실행 순서를 결정합니다. 모든 프로그램에는 1부터 10까지의 점수가 매겨져 있으며, 이 점수가 낮을수록 우선순위가 높은 프로그램입니다. 각 프로그램들은 실행 시간이 정해져 있으며 프로그램이 호출되면 대기상태에 있다가 자신의 순서가 되면 실행 시간 동안 실행된 뒤 종료됩니다. 준모가 만든 운영체제는 호출된 프로그램들 중 우선순위..

[Programmers/Python] 가장 큰 수 || 정렬

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr프로그래머스 파이썬 가장 큰 수 42746더보기문제 설명0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.제한 사항..

[Programmers/Python] 폰켓몬, 전화번호 목록 || Hash

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr프로그래머스 파이썬 폰켓몬 1845더보기문제 설명 )당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 ..

[Programmers/Python] 유전 법칙

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 더보기 멘델은 완두콩을 이용하여 7년간 실험한 결과, 다음과 같은 특별한 법칙을 발견하였습니다. 둥근 완두 순종(RR)을 자가 수분, 즉 같은 유전자끼리 교배할 경우, 다음 세대에 둥근 완두 순종 형질만 나타난다. 주름진 완두 순종(rr)을 자가 수분할 경우, 다음 세대에 주름진 완두 순종 형질만 나타난다. 두 순종을 교배한 잡종(Rr)을 자가 수분할 경우, 다음 세대의 형질은 RR:Rr:rr=1:2:1의 비율로 나타난다. (아래 그림 참조) 멘델의 법칙을 공부한 진송이는, 직접 완두콩의 자가 수분 실험을 진행했..

[Algorithm/Python] 파이썬 itertools에서 combinations, permutations를 사용하지 않고, 조합과 순열 구현

파이썬에서는 순열과 조합을 간단하게 바로 구해볼 수 있다. 그러나, itertools가 기억이 나지 않는 경우를 대비하여 순열과 조합을 직접 구현해보도록 하자. 📌 itertools 패키지의 combinations, permutations 활용 먼저 itertools를 통해 조합과 순열을 구하는 방법이다. ✅ [ CODE ] # 조합 from itertools import combinations arr = [0, 1, 2, 3] print(list(combinations(arr, 2))) # [(0, 1), (0, 2), (0, 3), (1, 2), (1, 3), (2, 3)] ✅ [ CODE ] from itertools import permutations arr = [0, 1, 2] print(lis..

MariaDB 설치 & SQLYOG 설치

📌 XAMPP 설치Apache Friends XAMPP Installers and Downloads for Apache FriendsWhat is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to uswww.apachefriends.org설치 시, 다른 것들을 사용을 하지 않기 때문에 MySQL만 설치해주었다. MySQL..

[Spring] 의존성 주입(DI, Dependency Injection) (생성자 주입을 사용해야 하는 이유)

📌 DI(Dependency Injection)DI(Dependency Injection)이란, 객체를 직접 생성하는 것이 아니라 외부에서 생성 후 주입시켜주는 방식이다. 즉, 의존 관계를 외부에서 결정하고 주입하는 것을 의미한다. interface Book { // 더 다양한 Book을 의존받을 수 있도록 인터페이스로 추상화 ... } class ScienceBook implements Book { ... } class EnglishBook implements Book { ... } public class Library { private Book book; public Library() { this.book = new ScienceBoo..