얼레벌레

ReactFacebook에서 개발한 사용자 인터페이스(UI) 구축을 위한 Javascript 라이브러리이다.🖥️ 특징1️⃣ Data Flow- 단방향 데이터 흐름을 채택하고 있다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향 전달된다.2️⃣ Component 기반 구조- 어플리케이션의 UI를 독립적이고 재사용 가능한 조각으로 나누어 구성한다. - 코드의 재사용성과 유지보수성이 향상된다.3️⃣ Virtual DOM1) 상태 변경: 컴포넌트의 상태가 변경되면 React는 새로운 Virtual DOM 트리를 생성한다.2) 비교: 새로 생성된 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 파악한다.3) 재조정: 변경된 부분만을 실제 DOM에 적용한다.4️⃣ Props and ..

🌊고민 풀장🌊1️⃣ index.ejs의 레이아웃 구조는 유지하되 디자인은 mypage.ejs랑 좀 더 통일성 있게 바꿨다.포인트 디자인(버튼)은 유지하되 input area랑 바탕색을 다시 정렬했다. 고민 듣기 버튼을 누르면 display= "none", display= "block"을 사용해서 페이지 이동 없이 타인의 고민이 랜덤으로 들어온다. 더보기document.addEventListener("DOMContentLoaded", function () { const refreshButton = document.querySelector(".refresh-button"); const contentArea = document.querySelector(".content-area"); const new..

🌊고민 풀장🌊1️⃣ 온도계의 위치가 고민이였다.이미지 자체를 왼쪽에 두자니 전체적으로 모양새가 깨지는 느낌이였다. 이미지 사이즈도 너무 큰건 알겠는데 얼마나 줄여야 할지 감도 안왔다. 생각하다가 사이즈를 확 줄여버리고 header밑에 넣었다. 존재감도 덜 하면서 보기 쉬운 위치를 찾은 것 같아 마음에 들었다. 2️⃣ 사이즈가 안 맞다 싶으면 header에 세로 스크롤바가 생겼다. 이 부분은 overflow: hidden으로 지정된 요소 밖을 벗어나는건 잘리게 해버렸다. .header-wrapper { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-left: calc(-50vw + 50%); overflow: hidden;}...

🌊고민 풀장🌊 1️⃣ 첫 번째 프로젝트! 고민을 던지면 랜덤한 한 사용자에게 고민이 날아가고, 고민을 수신한 사용자는 답장을 보낸다. 답장을 본 사용자가 별점으로 답장이 만족스러웠는지 평가하면 평가를 받은 사용자의 온도가 변하도록 시스템을 짰다. 모든 사용자는 익명으로 고민을 쓰고 답장한다. 답장은 한 번만 보낼 수 있고 답장에 대한 답장은 불가능하다. 이미 답장을 받은 고민은 다시 메인 풀(답장이 되지 않은 고민들이 담겨있는)로 돌아가지 않는다! 2️⃣ 프로젝트 주제를 정하고 역할 배분을 하는 데 생각보다 시간이 걸렸다. 와이어프레임을 Figma로 짜는데, 이것저것 수정하다 보니 일주일이라는 시간도 부족하다고 생각했다.🫠

JWT💡OAuth란? (Open Authorization)사용자의 리소스에 대한 접근 권한을 안전하게 위임하기 위한 개방형 표준 프로토콜!사용자가 비밀번호를 제공하지 않고도 제3자 어플리케이션에 권한을 부여할 수 있다.주로 소셜 미디어 로그인이나 외부 서비스 연동에 사용된다.💡 JWT (Json Web Token)사용자 인증에 주로 사용되는 토큰 기반 인증 방식!JSON 형식의 정보를 안전하게 전송하기 위한 표준 규격Header, Payload, Signature 세 부분으로 구성된다.토큰 자체에 사용자 정보를 포함하고 있어 서버에서 별도의 세션 저장소가 필요 없다.주로 웹 어플리케이션에서 사용자 인증을 위해 사용.더보기// app.js// POST /loginapp.post("/login", (re..

🍪Cookie🍪웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일클라이언트 측에 저장되므로 보안에 취약할 수 있다!이름, 값, 만료일, 경로 정보로 구성되어 있다.더보기 // 백엔드 쿠키 설정// cookie.jsconst express = require("express");const cookieParser = require("cookie-parser");const app = express();const PORT = 8080;// ver1. 암호화 되지 않은 쿠키// app.use(cookieParser());// ver2. 암호화된 쿠키// 실제로 암호화 쿠키를 사용한다면 비밀키도 .env로 관리하는 것이 좋다. 문자열은 아무거나 상관 없음app.use(cookieParse..

환경변수운영체제나 소프트웨어에서 참조하는 변수로, 프로그램 동작에 영향을 주는 값들을 저장한다.💻 dotenv .env 파일에 키=값 형식으로 환경변수를 정의보안에 민감한 정보를 코드에서 분리할 수 있다!보안상 중요한 정보를 포함하므로 .gitignore에 추가하여 버전 관리에서 제외해야 한다.SequelizeNode.js에서 사용하는 ORM(Object-Relational Mapping)라이브러리개발자가 SQL 쿼리를 직접 작성하지 않고도 Javascript 객체를 통해 데이터베이스와 상호 작용할 수 있다!💻 모델 정의Sequelize.define(param1, param2, param3);// param1: 모델(테이블) 이름 설정// param2: 컬럼 정의// param3: 모델 옵션 정의💻..

MVC: Model View Controller소프트웨어 설계와 관련된 디자인 패턴💡MVC 흐름💡Router와 MVC의 상호작용 💻 폴더구조- controller : view와 model연결 └ Cmain.js - model : 데이터 처리 └ index.js - routes : 경로 설정 └ index.js - views : UI관련 처리 └ 404.ejs └ index.ejs - app.js - .gitignore - package.jsonMySQL과 연결// model/User.jsconst mysql = require('mysql');const conn = mysql.createConnection({ host: 'localhost', user: 'sesac', password..

Multer: 파일 업로드💻 multer파일 업로드를 위해 사용되는 Node.js의 미들웨어💡 미들웨어란?  양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어.양쪽을 연결중간에서의 매개 역할// app.js// multer 불러오기const multer = require("multer");// multer 설정const upload = multer({ dest: "uploads/", // 어디에 저장 될지});const uploadDetail = multer({ storage: multer.diskStorage({ destination: function (req, file, done) { done(null, "uploads/"); // 어디에 저장..

동적 폼 전송 (fetch, ajax, axios) 유저가 서버에 원하는 데이터를 GET요청을 보냄. 주소창에 URL을 넣거나 Form태그를 이용해서 버튼으로 요청을 할 수 있음. 그러나 이 두개는 브라우저가 새로고침이 된다. 이게 싫으면 비동기 HTTP통신을 사용하면 된다.비동기 HTTP 통신이란?response와 request를 비동기 식으로 다룰 수 있다! ➡️ 이를 통해 웹 페이지 전체를 다시 로드하지 않고도 필요한 데이터만 갱신할 수 있다. 💻Ajaxjavascript를 이용해 클라이언트와 거버 간에 데이터를 주고 받는 비동기 HTTP통신JQuery를 통해 쉽게 구현이 가능하나 반대로 말하면 JQuery를 사용해야만 간편하고 호환성이 보장된다.// index.ejs// ----- ajax 요청..