천천히 알아가는 세상

안녕하세요. 이번에는 includes 함수에 대해서 알아보겠습니다. includes 함수는 단어 또는 문장에서 본인이 찾고자 하는 단어가 포함되어 있는지를 확인할 수 있습니다. 사용 방식은 아래와 같습니다. text.includes('찾는 단어'); 찾는 단어가 있으면 True, 없으면 False를 반환합니다. 아래 코드는 다른 코드에서 사용하던 코드인데 예시용으로 가져왔습니다. if 문 앞이 엄청 길어 보이지만, 전부 확인할 필요는 없습니다. textContent로 가져온 글자에 '상승'이 포함되어 있으면, #ED3023 색으로 변경 '하강'이 포함되어 있으면, #0096FF 색으로 변경 'NEW"이 포함되어 있으면, #00CD3C 색으로 변경 아무것도 없으면 grey 색으로 변경 한다는 내용입니다. ..

안녕하세요. JavaScript로 Head 태그에 동적으로 추가하는 방법입니다. sciprt 파일과, css 파일을 추가하는 방법으로 사용하게 되면 head 태그의 맨 마지막에 추가되는 것을 볼 수 있습니다. 1. script head 동적 추가 const script = document.createElement('script'); script.src = '/static/js/test2.js'; script.type = 'text/javascript' document.head.appendChild(script); 2. css head 동적 추가 const css1 = document.createElement('link'); css1.src = '/static/css/youtbeRealChart.css';..

안녕하세요. 이미 프로젝트가 끝난 지는 한참 지났지만, 정리를 해두면 나쁘지 않을 것 같아서 여기에도 올리게 되었습니다. 프로젝트 메인 화면 프로젝트 소개 다른 음악 차트 사이트를 한 곳에서 전부 확인할 수 있으며, 사이트의 사용자끼리 방명록 방식처럼 서로 소통할 수 있는 사이트를 만드는 것이 이번 프로젝트의 주제입니다. 기간 : 2022.12.13 ~ 2022.12.29 팀 구성 : 4명 (페이지별 업무 분배) 사용 기술 : JavaScript, Node.js, MySQL, Naver Cloud Server, Bootstrap v5 프로젝트 주요 기능 회원가입, 로그인 음원 페이지 - 음원 순위 확인, 페이징 처리, 당일 시간대 변경 기능 좋아요 기능 - 각 음원에 대한 개인 좋아요 리스트 게시판 - ..

안녕하세요. 이번에는 .env 파일에 대하여 알아보겠습니다. 1. env 파일 환경 설정 관련 내용을 저장하는 파일 git에 업로드 하지는 않게 gitignore 파일에 등록해야 한다. 2. 설치 npm install dotenv 3. 연습하기 .env PORT=8000 SECRET_KEY=secret index.js const dotenv = require('dotenv'); // npm install dotenv const path = require('path'); // 방법1 dotenv.config({ path: './.env' }); // 방법2 dotenv.config({ path: path.join(__dirname, './.env')}); console.log(process.env.PORT..

안녕하세요. 이번에는 세션(Session)에 대하여 알아보겠습니다. 1. Session 웹 서버에 저장되는 쿠키 사용자가 웹 브라우저를 통해 접속한 시점부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 그 상태를 유지시킨다. Ex) 로그인 유지 2. 동작 방식 클라이언트가 서버에 접속 시 세션 ID를 발급받습니다. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있습니다. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용합니다. 서버는 세션 ID를 전달받아서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옵니다. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답합니다. 3. 쿠키와 세션 차이 (간단하게) ..