토끼개발자 조르디의 질주

[인턴/ko웹페이지] Node.js 프론트엔드 코드 세팅👾 - 기본코드

프론트엔드 코드 작성1. HTML 파일 (frontend/public/index.html):웹사이트의 뼈대가 되는 html 파일을 작성한다. 2. CSS 파일 (frontend/public/styles.css):웹사이트를 꾸며주는 CSS 파일을 작성한다. 3. JavaScript 파일 (frontend/src/app.js):웹사이트 내의 기능 실행이 이루어지도록 JS 파일을 작성한다.   우선 프론트엔드  라는 말을 하기도 부끄러운 기초 디자인 코드를 작성한 상태.나중에 리액트를 활용해서 프론트엔드 코드 구성을 해봐야겠다.  프론트엔드 코드 실행npx http-server frontend/public     그렇다면, 저 주소에 접속하면 어떻게 보일까?  이렇게 잘보인다 ^^

[인턴/ko웹페이지] Node.js 백엔드 코드 세팅👾

백엔드 코드 작성1. 데이터베이스 설정 (backend/config/database.js):const Sequelize = require('sequelize');const sequelize = new Sequelize('database_name', 'username', 'password', { host: 'localhost', dialect: 'mysql'});module.exports = sequelize; 'database_name' 에 본인이 설정한 DB 이름을 적어야 한다. ** 환경변수를 사용한 안전한 코드 버전const Sequelize = require('sequelize');const sequelize = new Sequelize(process.env.DB_NAME, process.en..

[인턴/ko웹페이지] Node.js 초기 개발 환경 세팅👾

1. 깃허브에 Private 으로 폴더 생성 + VS Code 와 연결리드미 파일, 프로젝트 내용 설명, 사용 스택, ERD 구조 사진 업로드 2. Node.js 설치https://nodejs.org 에서 LTS 버전을 다운로드하여 설치  Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  3. 프로젝트 초기화내가 개발하는 프로젝트 위치에서 실행npm init -y 4. 패키지 설치npm install express body-parser mysql2 sequelize cors jsonwebtoken bcryptnpm install -D nodem..

Cursor AI 사용 배경인턴을 하고 있는 곳에서 웹사이트를 만드는 업무를 받았다.Node.js 로 구축을 해야하는데, 프런트와 백 둘다 내가 해야하는.... ㅋㅋㅋ 아 물론, 내가 이걸 처음부터 사용하겠다고 한 것은 아니고대표님께서 회의실로 나를 부르시더니 "cursor 라고 알아요?" 라고 물으시고서 알려주셨다.이걸 쓰면 원하는 코드를 바로바로 만들어준다며,,, 덤으로 "개발자가 할일이 없어지는 날이 왔어~"라고,,,, 어쨌든, 그래서 사용하게 되었다.아래에 사용 화면 예시와 짤막한 후기(?)를 작성해보겠다.  Cursor AI 란?The AI Code Editor  위의 한문장으로 요약이 가능하다.AI 활용 코드 편집기이다! Cursor is a fork of VS Code. This allows..

아 인턴을 끝낸지 두달반이 지나서야 적는 인턴일지 ㅋㅋㅋㅋㅋㅋ 아놔 인턴 끝나고 다음날부터 바로 학교 복학 및 아침수업이라,,,, 정신이 없었다,,,, 프로젝트도 준비하랴,,, 외부 창업팀도 들어가서 활동하랴,,,, 지금은 외부 창업팀에서 나오고 학교 프로젝트에만 힘을 쏟고 있고 한참 전부터 계획했던 두근두근 일본 여행도 다녀와서 ( 편 - 안 ) 😁 여유롭게 카공하러 나왔다가 삘받아서 적고 있다... ㅋㅋㅋㅋ 😍 그렇다면, 나의 1년 ( 길게도 했다 ~~~ ) 의 인턴 생활을 남겨보도록 하겠다 훗 👾 인턴 ? 합격 ? 대박, 감사합니다 나의 인턴 일지는 무조건 준비 기간, 면접 썰 부터 들어가야 한다. 스펙터클했던 준비 기간,,,, 나는 핀테크지원센터에서 진행된 "2022 핀테크 인턴십 코스" 생각해보..

보호되어 있는 글입니다.

이용툴 slack api 튜토리얼 https://api.slack.com/tutorials Guided tutorials | Slack Create, store, and send friendly welcome messages to your teammates when they join a channel. api.slack.com block kit build 설명 https://api.slack.com/block-kit Block Kit A clean and consistent UI framework for Slack apps api.slack.com https://api.slack.com/block-kit/building Building with Block Kit String the atoms togeth..

SLACK API 호출 규격 플랫폼 서버에서 SLACK API를 호출하여 해당 채널에 메시지를 다이렉트로 전송 POST https://api.slack.com/api/chat.postMessage headers {"Authorization": f"Bearer {SLACK_BOT_TOKEN}", "Content-Type": "application/json"} SLACK_BOT_TOKEN = "" 만든 슬랙봇의 토큰을 입력 Request body (application/json) { "channel": CHANNEL_ID, "text": message, "blocks": [{....}] } channel (string) : 메시지 전송 대상 채널 ID text (string) : 메시지 보낼 내용 block..

이번 편에서는 저번 편에서 만든 슬랙 앱과 실제로 대화를 하면서 테스트하기 위한 중요한 작업을 해보려고 한다. 슬랙에서는 슬랙봇을 만드는데 도움을 주는 slack python bolt를 제공한다. 처음 봇을 제작하거나 시간이 없는 분들은 이 프레임워크를 사용하는 것이 도움이 될 것이다. 그러면 이제 기본적인 셋팅 : slack bolt 코드를 실행할 수 있는 외부에서 접근할 수 있는 로컬 서버를 생성 을 진행하고 간단한 slack bolt 제공 코드를 통해 app 이 실행되는 것을 확인해보자. Setup 아래 페이지를 보면서 진행. https://github.com/slackapi/bolt-python GitHub - slackapi/bolt-python: A framework to build Slack..

Slack Bot Slack App Slack Bot 생성 과정 1. Slack api 페이지 접속 1) 링크 : https://api.slack.com/ 2) 우측 상단 Your apps 클릭 2. Slack app 생성하기 1) Create New App 클릭 2) From scratch 클릭 3) App Name, workspace 설정 : 원하는 앱 이름 입력, 원하는 위치 선택 4) Create App 클릭 : App 관련 정보 수정을 원한다면, 왼쪽 목록에서 Settings Basic Information => 누르고 들어가서 정보 수정하기 3. Scope 설정 / Slack bot 생성 1) 페이지 이동 Features App Home OAuth & Permissions 2) Scopes 설..