본문 바로가기

Computer Programming

JSX란? React 에서 사용하는 JSX 문법 | Babel
Computer Programming/React 2023. 5. 15. JSX란? React 에서 사용하는 JSX 문법 | Babel 1. JSX란? React에서의 JSX const element = Hello, world!; 위 태그 문법은 JSX 라고 불리는 javascript를 확장한 리액트에서 차용하는 문법이다. 리액트와 함께 사용되는 이유는 리액트가 UI와 state 의 변화에 초점을 맞추는 라이브러리이기 때문에 자바스크립트 함수와 html 태그를 함께 사용하는 것이 효과적이기 때문이다. 즉, react 에서는 렌더링 로직이 ui로직 ( 이벤트 처리, state 변화, 데이터 준비방식) 과 밀접한 연관이 있다. 따라서 마크업인 html 태그와 함께 로직을 처리할 수 있는 JSX를 사용한다. React에서 JSX 문법 사용이 필수는 아니지만, Javascript 코드와 함께 ui 관련 작업을 쉽게 할 수 있는 html 태그를 ..
리액트 프로젝트 설치하기 (create-react-app or vite)
Computer Programming/React 2023. 5. 14. 리액트 프로젝트 설치하기 (create-react-app or vite) 1. 리액트 코드와 브라우저 호환 리액트 코드는 브라우저에서 바로 호환가능한 코드가 아니다. 예를 들면, 자바스크립트로만 구성된 웹페이지는 한 프로젝트 폴더 안에 .html / .js / .css 파일들만 있으면 브라우저에서 바로 동작 가능하지만 리액트 코드 웹페이지는 코드를 자동으로 변환해주는 작업을 포함해야한다. 또한, 리액트 코드로 웹을 개발하면서 실시간으로 브라우저에서 동작하는 과정을 관찰해야 하고 이를 위해서는 백그라운드에서 코드 변환이 일어나야 한다. 리액트를 사용하면 하나의 .js 파일에 자바스크립트와 JSX (html처럼 보이는 것) 을 함께 작성하기 때문에 이 자바스크립트 파일만으로는 브라우저에서 유효하지 않고, 브라우저는 이 코드 자체 만으로는 실행할 수 없다. => 따라서 브라우저가 ..
[React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js)
Computer Programming/React 2023. 5. 14. [React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js) 1. Javascript만을 사용한 코드는? 자바스크립트는 명령형 접근방식(imperative approach)이기 때문에 모든 단계를 설명하는 것이 중요하다. 예를 들면 화면에 특정한 페이지를 띄우는 방식 등에서 일련의 액션들을 단계별로 설명해야한다. -> 모든 단계를 명시하는 과정에서 한계가 나타날 수 있고 세부사항들을 신경써야한다. 이는 되풀이되고 반복적인 액션들을 작업하게 될 수 있다. 2. 리액트(React.js)란? 리액트는 client-side 자바스크립트 라이브러리이며 모던, 반응형 유저 인터페이스관리에 용이하다. Declarative and component-focused approach 3. React.js의 장점은? 리액트를 사용하면 같은 방식으로 동작하지만 훨씬 더 간결한 코드로 작..
[Python] pymongo, dnspython 프레임워크를 이용한 insert | find | update | delete 코드
Computer Programming/Python 2023. 5. 12. [Python] pymongo, dnspython 프레임워크를 이용한 insert | find | update | delete 코드 # 저장 - 예시 doc = {'name':'bobby','age':21} db.users.insert_one(doc) # 한 개 찾기 - 예시 user = db.users.find_one({'name':'bobby'}) # 여러개 찾기 - 예시 ( _id 값은 제외하고 출력) all_users = list(db.users.find({},{'_id':False})) # 바꾸기 - 예시 db.users.update_one({'name':'bobby'},{'$set':{'age':19}}) # 지우기 - 예시 db.users.delete_one({'name':'bobby'})
[Python] MongoDB를 위한 프레임워크 pymongo, dnspython 실행 중 오류 (Mac 유저!)
Computer Programming/Python 2023. 5. 12. [Python] MongoDB를 위한 프레임워크 pymongo, dnspython 실행 중 오류 (Mac 유저!) - pymongo와 dnspython 라이브러리를 사용하여 mongoDB에 필요한 딕셔너리 형식(document)의 데이터를 저장하는 과정에서 생긴 오류 (macOS 기준) [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1108)')>]> 참고 PyMongo [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate 해결 (Stackoverflow): Well, I eventually decided to install certifi and it ..
[DB] SQL 과 NoSQL의 차이 (MySQL vs MongoDB)
Computer Programming/CS 2023. 5. 10. [DB] SQL 과 NoSQL의 차이 (MySQL vs MongoDB) DB - SQL 과 NoSQL의 차이 1. SQL : ex. MySQL 정해진 데이터 스키마에 따라 테이블에 저장되며 데이터들은 관계를 통해 여러 테이블에 분산된다. ⇒ 관계형 데이터베이스라고도 하며 RDBMS에서 데이터를 저장, 수정, 삭제 및 검색 할 수 있다. 이는 정형화된 데이터를 저장하기에 용이하기 때문에 조금 더 빠르게 데이터를 가지고 올 수 있다는 장점이 있다. 2. NoSQL: ex. MongoDB ⇒ mysql에서는 데이터를 여러 테이블에 분산시키며 관계를 이루지만, NoSQL은 관련 데이터들을 하나의 컬렉션에 넣는다. 이는 정형화된 스키마가 없기 때문에 비즈니스의 유연성을 담보한다. (스타트업에서 처음 도입하기에 좋다) 예를 들면 스타트업 비즈니스에서 어제까지는 이메일 정보를 받아 저장..
[Python] - venv 가상환경 접속하기, 필요성과 설치법
Computer Programming/Python 2023. 5. 10. [Python] - venv 가상환경 접속하기, 필요성과 설치법 1. venv (가상환경) 만들고자 하는 여러개의 프로젝트가 있는 경우, 특정 프로젝트에서 특정 버전의 라이브러리를 필요로 할때 사용한다. 또는 라이브러리의 특정 버그가 수정된 버전이 필요하거나, 구버전의 라이브러리를 필요로 할 때 사용하기도 한다. venv가 없다면, A와 B 프로젝트 두 개를 동시에 진행하고 있다고 가정할 때 A에 구버전의 라이브러리를 설치하면, B에서는 해당 라이브러리를 실행할 수 없게 된다. ⇒ 해결법 : 가상환경 만들기! (venv) venv의 장점은 서로 다른 프로젝트(응용프로그램)들이 서로 다른 가상환경을 사용할 수 있기 때문에 앞에 예시로 들었던 A와 B 프로젝트는 같은 라이브러리를 사용하더라도 버전이 다르도록 설정할 수 있다는 것이다. 2. venv 설치 방법 (mac /..
Computer Programming/Javascript 2023. 5. 9. JQuery - $( document ).ready() A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. ..

티스토리툴바