분류 전체보기 검색 결과

해당 글 777건

React에서 radio button 사용법

http://react.tips/radio-buttons-in-react-16/ input에 value, checked, onChange를 적절하게 구성하는게 포인트다. 주의점이라면 Change를 핸들링하는 함수에 e.preventDefault()를 하지 않아야 한다는 것이다. 만약 prevent를 하게 되면 더블 클릭해야만 라디오에 체크가 되고 이는 유저 경험을 저해하는 요인으로 작용한다. const changeRadioQ1 = (e) => { setQ1(e.target.value); }; const changeRadioQ2 = (e) => { setQ2(e.target.value); }; orm style={{ display: "flex", flexDirection: "column" }}> Q1: W..
React, Next, Redux/⚛ React.JS 2020. 6. 5. 14:44

Next에 대한 간단한 소개

https://nextjs.org/learn/basics/create-nextjs-app Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 공식 홈페이지에서 튜토리얼도 제공하니 여기를 쭉~ 따라해보는 게 좋을 것 같습니다. 한국어 자료 중에서는 Next.js 핸드북을 번역한 아래 포스트가 제일 좋습니다. coffeeandcakeandnewjeong.tistory.com/5 [번역] The Next.js 핸드북 Flavi..
React, Next, Redux/▲ Next.js 2020. 6. 4. 19:30

flask가 렌더링하는 html 내에서 python 코드 돌리기 {% %} (Jinja2)

js를 사용하는 pug나 ejs는 고유의 문법이 있었다. flask에서도 비슷한 문법이 존재한다. flask에서는 Jinja2를 사용한다. 음... 그런데 flask를 쓴다 => (1) django를 쓰지 않을 정도로 작은 토이 프로젝트 (2) NoSQL을 사용하면서도 ML 등 데이터 관련 코드와 연계성을 위해 python으로 백엔드를 짜고 싶다 일 텐데 사실 이런 레벨이면 jinja2를 사용하기 보다 따로 Frontend Framework를 사용하지 않을까... 싶습니다. 여튼, 다음과 같이 route 처리를 해줬다고 봅시다. @app.route("/report") def report(): ... 로직은 생략합니다. return render_template("report.html", searchingB..
Django, Flask/🌶️ Flask 2020. 6. 2. 00:57

flask 기본 사항 : Flask, render_template, requests, redirect, send_file

Express와 상당히 유사합니다. 간단한 웹 서버 작성 from flask import Flask # 플라스크 앱의 이름을 정해줍니다. app = Flask("job scrapper") # decorator(@)는 곧바로 아래의 함수를 찾습니다. @app.route("/") def home(): return "Hello" # 도메인의 변수를 사용하기 위해서는 로 감싸고, 함수의 파라미터로도 넣습니다. @app.route("/") def contact(username): return f"hello {username}" # 플라스크 웹 서버를 가동합니다. app.run(host="0.0.0.0") render_template으로 HTML 렌더링하기 플라스크의 규칙에 따라 반드시 templates 폴더 내부..
Django, Flask/🌶️ Flask 2020. 6. 2. 00:13

AWS Certificate Manager(ACM)를 이용 SSL 인증서 등록 및 ELB를 이용한 https force redirection

HTTPS를 지원하기 위한 SSL 인증서를 발급, 등록하는데 있어, 클라우드 업체에서 제공하는 것을 사용할 것이냐 (대표적으로 AWS Certificate Manager) 사설 업체에서 구입한 후 직접 등록할 것이냐를 먼저 고려해봐야 한다. 만약 사설 업체에서 직접 구입하고 싶다면 각 인증서의 스펙을 비교해보고 구입하자. 하나의 인증서에 몇개의 도메인을 지원하는지, 서브 도메인 지원은 몇 개까지 지원하는지, 어떤 브라우저의 CA 리스트에 포함되어 있는지 등을 살펴보자. (https://cryptography.fandom.com/wiki/Comparison_of_SSL_certificates_for_web_servers) 사설 업체에서 구입하는 건 번거롭고 소모적인 일이기 때문에 가급적이면 클라우드 업체에..
AWS/☁️ AWS 2020. 6. 1. 01:22

HOC을 통한 인증 미들웨어

로그인한 회원만 진입 가능한 페이지 관리자만 진입 가능한 페이지 등을 구별해야 한다. 페이지 외에도 댓글 작성, 파일 전송/업로드에도 마찬가지이다. node에서는 간단히 미들웨어로 구현할 수 있었지만 React에서는 특정 컴포넌트에 접근하기 전 인증을 체크해서 인증을 통과하지 않으면 아예 렌더를 안하게끔 만들어야 한다. React에서는 HOC를 통해 특정 컴포넌트를 감싼 후 HOC의 단계에서 백단으로 axios을 날려서 해당 유저가 로그인된 상태인지 아닌지를 체크하고 특정 컴포넌트로 접속하게 만들거나 강제로 다른 곳을 리다이렉트 해주면 됩니다. hoc을 하나 만들어줬습니다. redux는 너무 번잡해서 생략했습니다. 구조만 봅시다. 입력받은 조건을 모두 통과했다면 입력한 컴포넌트를 return하는 것을 잊..
React, Next, Redux/⚛ React.JS 2020. 5. 30. 02:47

mongoose 미들웨어, Instance methods, Statics 사용하기

https://mongoosejs.com/docs/guide.html#methods https://mongoosejs.com/docs/guide.html#statics https://mongoosejs.com/docs/middleware.html 지금까지 mongoose를 이용하는 데에 있어 다음과 같이 스키마를 정의하고, 모델을 만든 다음 export하여 사용했을 것이다. 저장하는 값에 조작(해시 암호화, 난독화 등등...)은 node의 컨트롤러 단에서 처리했을 것인데 사실 mongoose를 이용하여 먼저 전에 처리할 수도 있다. 왜 이렇게 하냐면 라우터, 컨트롤러 단을 깔끔하게 처리하여 코드의 가독성을 높일 수 있기 때문이다. // 지금까지의 사용법 const mongoose = require("mo..
DB, ORM/🍃mongoose, pymongo 2020. 5. 28. 17:47

파일 io

# w 쓰기(기 존재 파일 초기화) r (읽기) a(append 추가) f = open("C:/Users/BOSSMONSTER/Desktop/test/new.txt", "w") # 쓰기 for i in range(0, 10): data = f"{i} \n" f.write(data) # 파일 닫기 f.close() # w 쓰기(기 존재 파일 초기화) r (읽기) a(append 추가) f = open("new.txt", "r") # 각 줄을 읽어서 리스트로 반환 data = f.readlines() print(data) # 그냥 모두 문자열로 만듦 all_data = f.read() print(all_data) f.close() # w 쓰기(기 존재 파일 초기화) r (읽기) a(append 추가) f =..
Programming Language/🐍 Python 2020. 5. 27. 23:27

잡다한 메서드, 내장 함수, 외장함수들

구글링 하면 다 나오지만 훑어볼 요량으로 적어보았다. 이걸 외운다는 건 어리석은 짓이다. 문서를 찾아보거나 구글링하는게 훨씬 편하다. how to find an element in string python. 정도로 검색해봐도 원하는 게 바로 stoverflow에 나온다. 파이썬의 모든 자료형은 객체이다. 그래서 내장 함수도 꺼내 쓰고 하는 것이다. 문자열 관련 메서드 a = 'python for artificial intelligence' b = ' hi ' # 문자열에 l이 몇 개 들어있니 print(a.count('l')) # 첫번째로 y가 나온 인덱스 # The only difference is that find() method returns -1 if the substring is not foun..
Programming Language/🐍 Python 2020. 5. 27. 23:16

javascript의 가비지 컬렉션

가비지 컬렉션 ko.javascript.info 자바스크립트 엔진은 끊임없이 가비지 컬렉트를 하여 메모리를 여유있게 유지하려고 합니다. 그 기준은 '도달할 수 있는가?' 입니다. let test = { name: "da" }; // {name: "da"} 객체는 연결된 곳이 없다. => 도달 불가 => 가비지 컬렉팅됨 test = {}; 모든 가비지 컬렉션은 특정한 알고리즘에 따라 카비지 컬렉팅을 합니다. v8 자바스크립트 엔진은 'mark-and-sweep’이라 불리는 가비지 컬렉션 기본 알고리즘으로 움직입니다. 가비지 컬렉터는 루트(root) 정보를 수집하고 이를 ‘mark(기억)’ 합니다. 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 ‘mark’ 합니다. mark 된 모든 객체에 방문하고 그..
Programming Language/🟨 Javascript (Core) 2020. 5. 27. 17:43