전체 글
create-react-app 레퍼런스
상대경로 빌드할 일이 있을때 참고해야겠다 Create React App · Set up a modern web app by running one command. `npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the conte create-react-app.dev
django + github web hook 자동배포
잘 참고해서 자동배포 해놔야겠다. sftp 로 업로드하는것도 괜찮긴 한데, 그냥 로컬에서 작업하고 저장해서 푸시하는게 분기별로 관리하기 편할 것 같다. How to Handle GitHub Webhooks Using Django Webhooks are a convenient way to notify external services when a certain event occur. GitHub provides an easy way to create Webhooks for the git repositories... simpleisbetterthancomplex.com cliche90/webhook_autopull guide for auto pull by github webhook. Contribute to ..
JS 정렬함수(sort function)
Array.sort(정렬함수) JS에서 임의의 Array를 정렬할 때 sort 메소드를 사용한다. 정렬함수는 정렬 순서를 결정하는 데 사용되는 함수로, 정렬함수가 없는 기본값 상태에서는 오름차순, ASCII 문자 순서대로 정렬된다. 배열 안의 요소를 ASCII 순서대로 정렬하다 보니, 숫자 크기 순서대로 정렬이 될 것 같지만 실제 결과는 다르다. var arr = [1, 2, 10, 9, 4, 2]; var sort_default = arr.sort(); console.log(sort_default); 실제 숫자의 크기가 아닌, ASCII 값으로 정렬되어 이 부분이 문제가 될 수 있다. 즉, 직관적이지가 않다. 이 문제를 해결하기 위해 정렬 함수를 정의해서 사용해야 한다. 정렬함수에 인수를 넣고 아래의 ..
Web에서 ScrollTop버튼 넣는 코드
특정 버튼을 클릭하면 스크롤을 맨 위로 올리는 기능. jQuery와 Vanilla JS를 사용한 버전을 둘 다 써놓는다. 원하는 버전으로 쓰시길. jQuery 사용 //페이지 상단으로 이동하는 메소드입니다. const html_top = () => { // scrollTop은 상단이기 때문에 0, duration은 애니메이션 속도입니다 (ms) $('html, body').animate({ scrollTop: 0 }, { duration: 500 }); }; //버튼에 클릭 이벤트 바인딩해서 사용 $('#top_button').on('click', () => html_top()); Vanilla JS 사용 //페이지 상단으로 이동하는 메소드입니다. //임의의 버튼에 클릭 이벤트 리스너를 추가합니다. do..
jQuery를 이용한 Ajax
jQuery를 이용한 Ajax 코드 예제이다. const ajax = (ajax_url, ajax_type, ajax_data, ajax_data_type) => { $.ajax({ // 요청을 보낼 URL url: ajax_url, // HTTP 요청 방식 (GET, POST) type: ajax_type, // HTTP 요청과 함께 서버로 보낼 데이터 data: ajax_data, // 서버에서 보내줄 데이터의 타입 ( xml, text, html, json 등) dataType: ajax_data_type, }) .done(function (data) { console.log('성공적으로 데이터 수신 : ' + data[0]); }) .fail((data) => { console.log('실패');..
react에 super(props)를 써야하는 이유
https://min9nim.github.io/2018/12/super-props/ [React] super(props) 를 써야하는 이유 이 글은 Dan Abramov의 Why Do We Write super(props)? 글을 충분한 의역으로 번역한 것입니다. 번역이 일부 자연스럽지 않은 부분이 있을 수도 있습니다. 정확한 내용은 원문을 참고하기 바랍니다 최근 Hooks min9nim.github.io js언어에선 상속 클래스의 특성상 super()이 생성자에 강제된다. super()만 선언하더라도 작동은 보장된다. (props가 생성자 이후에 자동으로 세팅됨) 다만 생성자 호출 이후에 props가 세팅되기 때문에, 생성자 내부에서 사용되는 this.props는 undefined가 되어버린다. 이 때..
뉴스룸 자동화 후후속조치
Ubuntu 20.04 LTS 홈 서버 구축기 (2) 저번 편에서는 ubuntu20.04 LTS 버전을 내 서버에 설치하는 부분까지 진행했다. 사실 이 시리즈는 친절하게 설치 방법을 알려준다는 목적보다는, 내 스스로의 기록과 회고 측면에 가깝기 때문에 중�� nookpi.tistory.com 거지같은 방식으로 크롤링 데이터를 저장하고 가져오던 AWS를 벗어나, (AWS 는 죄가 없다.. 내가 못났을 뿐...) 홈 서버 구축과 동시에 DRF api 로 이전되었다. 당분간 aws는 그대로 유지되지만 이미 폰에 있는 스크립트에서도 뉴스룸 서버는 홈 서버로 이전한 상황이다. 기존에 aws에 구축했던 여러 서비스들 (php로 만든 맛집 정보 크롤링 웹사이트 , STT 웹 서비스)도 차차 홈서버로 이전할 계획이다.
Ubuntu 20.04 LTS 홈 서버 구축기 (2)
저번 편에서는 ubuntu20.04 LTS 버전을 내 서버에 설치하는 부분까지 진행했다. 사실 이 시리즈는 친절하게 설치 방법을 알려준다는 목적보다는, 내 스스로의 기록과 회고 측면에 가깝기 때문에 중간중간 많은 부분이 생략될 수 있다. 이점 양해 부탁드린다. 처음으로 접해본 리눅스는 ubuntu18.04 였는데, 당시에 APM을 수동 설치(컴파일 설치) 하면서 개고생 했던 기억이 생생하다. 자동 설치의 존재를 몰랐던 건 아니지만, 아무튼 리눅스를 처음 접하던 당시에 APM 설치는 고난과 역경의 연속으로 기억에 남는다. 설치 단계의 여러 옵션들을 익히느라 어려웠던 점도 있지만, 설치 경로가 기본이 아니다 보니 나중에 호환성과 conf 수정 등에서 정말 많은 난관을 겪었다. 하지만 지금은 그럴 필요가 굳이..
JavaScript 정규식 패턴 정리
개인 확인 및 공부용입니다. // 정규식 패턴 (Regex Pattern) // 단순 패턴 사용하기 // /hi/ --> 문자열에서 정확히 'hi'부분이 나타나야 대응됩니다. // 특수 문자 사용하기 // \ --> 특수 문자가 아닌 문자 앞에서 사용되면 해당 문자는 특별한 명령어로 간주됩니다. // ex) \b 는 단어 경계에 대응됩니다. // ^ --> 입력의 시작 부분에 대응합니다. // ex) /^A/ 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다. // $ --> 입력의 끝 부분과 대응됩니다. // ex) /t$/ 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다. // * --> 앞의 표현식이 0회 이상 연속으..
Ubuntu 20.04 LTS 홈 서버 구축기 (1)
나는 노트북을 2019년 i5그램 15인치를 사용하고 있는데, 이 녀석은 가볍고 성능도 어지간히 괜찮은 모델이다. 다만 한 가지 아쉬운 점이 있다면 램 업그레이드는 16g로 했지만 SSD를 256g로 다는 바람에 고질적인 용량 부족에 시달리고 있다. VM 설치하고 스냅샷 몇 번 찍으니 - 70G 언리얼 하면서(잘 돌아가지도 않지만) 엔진 설치하니 - 40G 기타 잡다한 것들 .... - 100G 정신을 차리고 보니 SSD 용량이 거덜 났다. 문제 해결을 위해 m.2 SSD 1TB를 사서 달아야겠다는 생각으로 주문했는데 집에 온 것은 2.5인치 데스크탑용 SSD였다. 분명히 두 번 세 번 확인했다고 생각했는데, 주문 당시에 뭔가 혼이 빠져있었나 보다. 아무튼 갑자기 생겨버린 이 SSD를 당근마켓에서 처분할..