코딩하는 해커

[Design Pattern] RPG 패턴

RPG 패턴 RPG 패턴이란 POST / REDIRECT / GET 패턴의 약어로, 폼 데이터를 POST하면 REDIRECT(리다이렉트)하여 GET한 페이지를 표시하는 패턴이다. 만약 이 RPG 패턴을 사용하지 않는다면 어떤 일이 발생할까? 폼 데이터를 POST한 다음에 새로고침을 한다고 생각해보자. 이 경우 본래 POST한 내용이 다시 송신되어 폼 데이터가 이중 전송될 가능성이 있다. 이러한 문제를 회피하기 위해 RPG 패턴을 사용하는 경우가 많다. 플라스크를 통해 문의 폼을 만든다고 가정하고 이 RPG 패턴을 적용시킨다면 아래와 같은 순서로 사용할 수 있다. 문의 폼 화면을 표시(GET)한다. 문의 내용을 이메일로 송신(POST)한다. 문의 완료 화면으로 리다이렉트(REDIRECT)한다. 문의 완료 ..

[JS] ES6의 화살표 함수(fat arrow function)

ES6의 화살표 함수(fat arrow function) 화살표 함수는 ES6에 추가된 표현식을 사용하는 함수로 =>(화살표 기호)로 함수를 선언한다. 이를 살펴보기 앞서 기존의 함수 사용 방법을 먼저 살펴 보자. 기존 JS의 함수 사용 방법 기존 자바스크립트에서는 2가지 방법으로 함수를 선언할 수 있다. 이 둘의 차이는 함수의 이름이 있는지 없는지 차이가 있다. 두 번째 방식을 익명 함수(anonymous function)이라고 한다. ES6의 화살표 함수 사용 방법 화살표 함수는 기존 자바스크립트의 함수 선언 방식 중 익명 함수를 선언하여 변수에 대입하는 방법가 비슷하다. 다만 다른 점은 function 키워드를 생략하며, 인자와 본문 블록 사이( (인자들) {~~} ) 사이에 아래와 같이 화살표 기..

[Development] 오늘 하루 시연 영상 with Android(JAVA)

Today-Diary '오늘, 하루' - 일기 어플리케이션 깃허브 링크: https://github.com/PSLeon24/Today-Diary I. 개발 앱 선정 및 선정 이유 교재를 학습하던 중 Diary 앱 실습 예제가 있어서 현재 플레이스토어에 존재하는 일기장 어플을 찾아 보았다. 대부분의 일기가 너무 복잡한 기능이 많았으며, 일기의 경우 개인의 사생활이 많이 기록될 것이라 본인 외에는 쉽게 볼 수 없는 비밀번호가 적용된 일기장이 만들면 어떨까? 하는 생각으로 '오늘, 하루'라는 비밀 일기장 어플리케이션을 개발하게 되었다. II. 작업 계획표(일정표) 작성 날짜 진행 여부 목표 ~ 11/03 O 프로젝트 구상, 아이디어 논의, 활용 기술 정리 ~ 11/10 O UI설계, 리소스 자료 구하기 ~ 1..

[Development] 구글 코랩 런타임 연결 끊김 방지(2023년 최신 버전)

(오랫동안 컴퓨터 작업 안하면 작업이 멈추기 때문에 아래 셋팅 필요) - 크롬에서 Ctrl+Shift+I 단축키 누르기 - console prompt에 아래 내용 붙여넣고 엔터 누르기 (=>60초마다 connect button이 자동으로 누르도록 하는 코드) function ClickConnect(){ console.log("코랩 연결 끊김 방지"); document.querySelector("colab-toolbar-button#connect").click() } setInterval(ClickConnect, 60 * 1000)

[Clean Code] 클린 코드

클린 코드 책을 읽게 된 계기 작년, 대학교 2학년 2학기에 배운 안드로이드 프로그래밍 수업에서 9주차부터 13주차까지 프로젝트를 진행하였는데, 코드가 길어지면 길어질 수록 코드를 작성하는 시간보다 내가 작성한 코드를 읽는 시간이 훨씬 더 많다는 사실을 깨달았다. 이후, 이를 어떻게 해결하면 좋을까라는 고민을 하였고 여러 방법을 찾던 중, 로버트 C. 마틴이 쓴 라는 책을 알게 되었고 클린 코드를 작성하기 위한 패턴과 규칙을 익혀 깨끗하고 가독성 좋은 코드를 작성하고 싶어 본 책을 읽게 되었음 기억할 좋은 속담 문구(덴마크말: “사소한 곳에서 발휘하는 정직은 사소하지 않다.”) → 사소한 것은 중요하다. Ærlighed i små ting er ikke nogen lille ting. = “Honesty..

[ChatBot] Dialogflow를 활용한 콘도 예약·신청 챗봇 구축

[API] fetch()를 이용한 날씨 API 불러오기 실습

fetch API웹개발을 할때, AJAX라고 불리는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청 fetch API는 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를 JavaScript에서 호출하는 것으로 손쉽게 사용 가능함fetch() 함수 사용법fetch(url, [options]) · url: 접근하고자 하는 URL · [options]: 선택 매개변수 [API] fetch()를 이용한 날씨 API 불러오기 실습실습 코드: https://github.com/PSLeon24/learningToNodejs/blob/main/learnAPI.html 날씨 API: https://github.com/robertodu..

[JS] ES6 템플릿 리터럴: 백틱(``)과 달러(${}) 사용법

템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법으로 문자열 생성시 따옴표 대신, 백틱(``)을 사용 ex: const str1 = `hello, world!`; 1. 줄바꿈 템플릿 리터럴을 사용하기 전, 즉 기존의 따옴표("") 방식에서는 줄바꿈이 허용되지 않아 이스케이프 시퀀스를 사용해야 했음(ex: \n) 하지만 백틱(`) 리터럴을 사용하면 줄바꿈을 쉽게 표현 가능 위 사진은 크롬의 개발자도구의 콘솔창으로 실습한 화면 특히 str2를 보면 알 수 있듯이 백틱 내에 입력한 문자열은 공백과 개행까지 그대로 표현 - HTML의 pre 태그와 유사 2. 표현식 삽입 기존의 따옴표("") 방식에서는 .format()이나 + 연산자로 번거롭게 변수를 삽입해야 했으나, 백틱 리..

[Node.js] Express 프레임워크로 웹 화면에 Hello World 출력

[Node.js] Express 프레임워크로 웹 화면에 Hello World 출력 Express framework: https://www.npmjs.com/package/express express Fast, unopinionated, minimalist web framework. Latest version: 4.18.2, last published: 7 months ago. Start using express in your project by running `npm i express`. There are 71870 other projects in the npm registry using express. www.npmjs.com 공식 홈페이지: https://expressjs.com/ko/starter/..

[Node.js] npm 이해를 위한 간단한 figlet 실습

[Node.js] npm 이해를 위한 간단한 figlet 실습 figlet module: https://www.npmjs.com/package/figlet Step 1. Terminal에 npm install figlet 을 통해 figlet module을 설치 Step 2. index.js 파일을 생성 후, 위 사이트에 있는 코드를 붙여 넣고 figlet("Hello World!") 중 "Hello World"를 원하는 값으로 수정 Step 3. Terminal에 node index.js로 실행 Step 4. 실습이 끝나면 Terminal에 npm uninstall figlet 을 통해 figlet 모듈 삭제