오늘은 리액트의 JSX와 props에 대해 알아보자. JSX JSX(javascript xml)는 javascript를 확장한 문법이다. React을 통해 UI가 어떻게 생겨야 하는지 직관적으로 살펴볼 수 있으며 브라우저에서 실행되기 전에는 바벨을 사용하여 일부 자바스크립트 형태의 코드로 변환되어 사용된다는 특징을 가지고 있다. JSX 문법에서는 반드시 지켜야 하는 것들이 몇 가지가 있는데 이는 다음과 같다. 반드시 부모 요소 하나가 감싸는 형태여야 한다. 자바 스크립트 표현식을 작성하려고 한다면 JSX내부에서 코드를 {}로 감싸주면 된다. 쉽게 이야기하자면 javascript에서 값을 선언해서 JSX에서 사용할 때는 {}을 사용하여 처리한다. JSX로 css을 받아와 사용할 때에는 class가 아닌 c..
리액트란 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리이다. 물론 Html, Css, Javascript로 사용자 인터페이스를 구축할 수 있지만, 복잡한 인터페이스를 구축하기에는 조금 불편한 점이 있을 수 있다. 따라서 리액트의 힘을 빌려 좀 더 쉽게 인터페이스를 구축하기 위해 사용한다. 리액트 리액트는 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리 종류 중 하나이며 모두 컴포넌트(html, css, js의 결합물)로 구성되어 있다. 리액트를 사용하게 된다면 다음과 같은 이 점을 얻을 수 있다. 재사용성 증대 관리 용이성 증대 리액트 프로젝트 생성하고 실행하기 리액트 프로젝트를 생성하기 위해서는 node.js을 설치하여야 한다. 참고 : https://nodejs.org/ko Node.js..
리엑트를 활용하기 위해서 간단하게 자바스크립트의 내용을 압축해서 알아보자. 변수선언 (const, let) Javascript의 에서 변수선언은 const, let으로 할 수 있다. let은 값을 수정할 수 있는 변수를 선언할 때 사용하고 const는 값을 수정할 수 없는 변수를 선언할 때 사용한다. 그럼 일반적으로 let으로 변수를 선언하면 되지 않을까라고 생각이 들겠지만 const 키워드를 사용하면 의도치 않은 재할당을 방지를 도와주기 때문에 이를 구분하여 사용하는 것이 좋다. const a = 1; let b = 2; 🔖 var 선언 방식이 존재하지만 ES6에서는 호이스팅이라는 문제 때문에 추천하지 않는 방식이다. 참고 : https://developer.mozilla.org/ko/docs/Glos..
이번에는 selenium과 pyinstaller을 가지고 나온 exe 파일을 실행시켰을 때, cmd창을 끄는 옵션을 추가했음에도 불구하고 cmd창이 뜨는 오류를 해결하는 방법에 대해 알아보고자 합니다. 오류 selenium을 실행하는 파이썬 코드를 pyinstaller을 통해 exe 파일을 만들어 배포하였습니다. 하지만 exe 파일을 실행할 떄 pyinstaller에서 콘솔이 뜨지 않도록 하는 -w 옵션을 넣어 줬음에도 불구하고 뒤에 cmd(흔히 검은창)이 뜨는 현상이 일어났습니다. 혹시 해당 오류에 대해 다루기전에 pyinstaller 실행 방법이나 옵션에 대해 모르신다면 아래 게시글을 참고 하시면 좋을 듯 합니다. 참고 : https://jheaon.tistory.com/131 파이썬 라이브러리 Py..
Pyinstaller pyintsaller는 python 애플리케이션과 모든 종속성을 단일 패키지로 묶어서 사용자가 python 인터프리터 또는 모듈을 설치하지 않고 패키지 된 앱을 실행할 수 있도록 도와주는 라이브러리이다. python 3.7 이상부터 지원하며 현재까지 numpy, matplotlib, PyQt.. 등과 같은 많은 주요 python 패키지들 까지도 번들로 잘 제공되고 있다. 주의해야 할 점은, 크로스 플랫폼이 아니라는 점인데, window 기반에서 exe 파일을 만들었다면, window안에서만 돌아가고, window 외의 운영체제인 mac, linux에서는 따로 파일을 만들어 실행하여야 한다. 자세한 부분은 공식문서 보면서 참고하길 바란다. 공식문서 : https://pyinstalle..
이번 포스팅에서는 입력값을 다루는 에딧 컴포넌트와 어떤 목록을 보여주는 리스트 위젯 컴포넌트에 대해 알아보자. 에딧 컴포넌트 Edit component는 말 그대로 값을 받아 처리하는 컴포넌트이다. Html에 비교하자면 input 태그에 비유할 수 있다. 에딧 박스 컴포넌트에 대한 함수가 있는데 아래는 그중에서 자주 사용하는 함수의 코드이다. """ 위에 edit_text를 정의 했다라고 가정한다. """ # 에딧 박스에 있는 내용을 변수 text에 저장 text = self.edit_text.text() # edit_text 라는 Edit 컴포넌트에 Enter 입력이 들어오면 send() 가 실행 self.edit_text.returnPressed.connect(self.send) # 에딧박스에 있는 ..
Pyqt에서는 message box을 새롭게 만들 수 있도록 제공하는 모듈 위젯이 있다. 해당 모듈을 import 해야만 message box을 만들 수 있다. 오늘은 Pyqt에서 메시지 박스를 컨트롤하는 방법에 대해 알아보자. 메시지 박스 Pyqt에서 Message box에도 여러 종류가 있다. 크게는 2가지가 있는데 그 종류는 다음과 같다. 확인 메시지 박스 : 말 그대로 확인용도의 메시지 박스 예/아니요 메시지 박스 : 예/아니요를 선택할 수 있는 메시지 박스 오늘은 이 메시지 박스에 대해서 알아보도록 하자. 확인 메시지 박스 일반적으로 확인하는 원 버튼 Message Box을 작성하는 방법은 다음과 같다. 1. from PySide6.QtWidgets import QMessage을 임포트 한다. ..
이번에는 PyQT에서 제공하는 버튼 요소에 대한 기법에 대해서 알아보자. PyQT에서 제공하는 버튼의 종류는 여러 가지가 있는데 이번에는 이를 순서대로 정리해서 알아보고자 한다. 해당 순서는 아래와 같다. QT Designer에서 버튼을 생성하고 파이썬 코드로 변환하기 푸시 버튼 라디오 버튼과 체크 박스 QT Designer에서 버튼 생성하고, 파이썬 코드로 변환하기 QT Designer에서 만든 ui파일을 py파일로 만드는 방법은 아래 게시글에서 설명드렸기에 아래 글로 들어가면 해당 내용을 쉽게 확인할 수 있으니 참고 바란다. 티스토리 : https://jheaon.tistory.com/27 파이썬으로 그래픽 인터페이스 제작하기! Pyside6 설치 및 Qt designer로 작업물 .py 파일로 변환..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/42885?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 해당 문제는 사람과 무게 제한이 주어질 때, 구출하기 위해 필요한 구명보트의 최소수를 구하는 문제이다. 문제 카테고리가 탐욕법이기도 하고, 이런 문제류는 높은 무게부터 시작하여 처리해 나가면 쉽게 풀리는 문제라고 판단되었다. 그래서 다음과 같은 과정을 생각하고 문제를 풀기 시작했다. 1. people을 내림차순으로 정리한 후 앞 요소와 맨 뒷 요소를 더한 ..
