본문 바로가기
728x90

JavaScript

43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기)
블록체인_9기/🩵 React 2023. 6. 28. 43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기) 목차 043 1. React ? 2. 바닐라 자바스크립트로 React 이해하기_State 상태 변경 3. Component 4. JSX와 Babel 5. Class형 컴포넌트_토글버튼 생성 6. React의 LifeCycle (생명주기) 7. Class형 컴포넌트_현재시간 렌더하기 React ? React는 사용자 인터페이스를 만들기 위한 라이브러리이다. 위의 React에 대한 정의는 공식적으로 정의된 내용이다. react는 페이스북에서 2011년도 쯤 여러 실력좋은 개발자들이 모여서 만든 라이브러리이다. react가 프레임워크다, 라이브러리다 얘기가 많은 라이브러리이다. 다른 개발자들은 왜 프레임워크라고 얘기하는 걸까? React 개발을 할 때 편하게 초기 세팅을 설치받아서 사용할 수 있다. 메타에서 ..
230602~230626_Team project_node.js 그림 일심동체 게임제작
프로젝트/팀 프로젝트 2023. 6. 27. 230602~230626_Team project_node.js 그림 일심동체 게임제작 개요 6월 2일부터 3주간의 프로젝트가 시작되었다. 이번 프로젝트의 요구사항은 다음과 같다. [요구사항] 어드민 페이지 (유저 관리 페이지) 로그인, 회원가입 게시판 글 등록 댓글, 대댓글 작성 가능 게시판 조회수 좋아요 기능 실시간 고객 센터 문의 가능 (socket 사용) ERD구성 API문서 작성 (추천 Swagger) 마이페이지 유저 프로필 (이미지 포함) 수정 AWS 페이지 배포 (개발 하면서 중간중간 배포) 게시글 통계 페이지 (그래프 추가) 해당 내용을 바탕으로 만들고자 하는 페이지의 주제를 정하고자 하였다. 기획과정 처음에 페이지를 만들고자 했을 때 생각나는 페이지는 SNS였다. 사실 예전부터 node를 배우고 나서 지금 우리가 배운 내용을 바탕으로 인스타그램 같은 SNS를 만들 수 있을것..
39강_230526_Node.js(로그인, 회원가입, 게시판 페이지 구현_html로 front 작업)
블록체인_9기/💚 Node.js 2023. 6. 2. 39강_230526_Node.js(로그인, 회원가입, 게시판 페이지 구현_html로 front 작업) 목차 039 1. cors 2. 회원가입, 로그인, 게시판 페이지 구현 cors cors (Cross-Origin Resource Sharing)란? 자신이 속하지 않은 도메인이나 다른 프로토콜, 다른 포트에 있는 리소스 요청을 요청하는 cross-origin HTTP요청 방식이다. 좌측의 웹 사이트는 domain-a.com으로 구동되고 있다. 파란색 이미지는 웹사이트가 구동 중인 domain-a.com 으로부터 자료를 요청하고 수신한다. 하지만 아래의 빨간색 이미지는 domain-b.com라는 다른 도메인에 자료를 요청하고 수신한다. 이러한 방식이 cross-origin HTTP요청 방식이다. 중요한 부분은 서버는 기본적으로 cors 방식을 제한해둔다. 특정 서버 리소스에 다른 임의의 웹 사이트들으 r..
블록체인_9기/💚 Node.js 2023. 6. 2. 38강_230525_Node.js(socket을 이용하여 채팅방 만들기) 사용한 모듈 ejs express socket.io app.js // 채팅방 만들기 // 방을 따로 나눠서 // 유저간에 귓속말 제작 // 사용할 모듈 express socket.io ejs // 서버 대기상태 // view엔진 세팅 // socket 연결 const express = require("express"); const path = require("path"); const socketIo = require("socket.io"); const app = express(); app.set("views", path.join(__dirname, "page")); app.set("view engine", "ejs"); const server = app.listen(8000, ()=>{ console.l..
230414~230426_Team project_Javascript 주식게임 제작
프로젝트/팀 프로젝트 2023. 4. 30. 230414~230426_Team project_Javascript 주식게임 제작 개요 약 2주간의 팀 프로젝트 작업을 진행하게 되었다. 팀 프로젝트는 Html5, CSS3, Javascript를 이용하여 웹사이트를 제작하는 것이다. 사이트 자체를 제작해도 되고, 게임을 제작해도 되므로 주제는 자유였다. 단, 사이트를 제작할 때 몇가지 필수로 들어가야 하는 사항이 있었다. 자유주제 프로젝트 필수조건 구분 웹 페이지 게임 페이지 로그인 페이지 로그인페이지를 제작. 로그인, 회원가입이 진행되어야 한다. 로그인페이지가 제작되어야 하며, 로그인, 회원가입이 진행되어야 한다. 게시판 페이지 고객문의 게시판을 제작. 로컬스토리지를 사용하고, 페이지 네이션을 추가. 등록기능이 들어가야 한다.(수정, 삭제는 자유) 자유 게시판을 제작. 로컬스토리지를 사용하고, 페이지 네이션을 추가. 등록기능이 들어..
개발일지/JavaScript 2023. 4. 7. [Javascript] Math.trunc() 개요 프로그래머스에서 입문문제를 풀다가 발견하였다. '두 수의 나눗셈'을 구하는 문제였고, 나는 return 영역에 Math.floor로 정수부분의 값을 반환하였는데, 문제를 풀고 나서 다른 사람들의 풀이를 보고 새로운 메소드를 보게 되었고, 이를 구글링한 정보를 정리하고자 한다. Math. trunc() ? 소수 자릿수를 제거하여 숫자의 정수 부분을 반환하는 메소드이다. 구문은 하단의 내용이며 기본적인 사용 예시를 함께 볼 것이다. Math.trunc(x) // x: 숫자 //반환값: X의 정수부분을 반환한다. // Math.trunc 사용 예------------------------------------------------------------- console.log(Math.trunc(13.37..
23강(과제X)_230406_Javascript(Set, Map, 배열메소드)
블록체인_9기/💛 JAVASCRIPT 2023. 4. 6. 23강(과제X)_230406_Javascript(Set, Map, 배열메소드) 목차 023 1. Set 2. Map 3. 배열메소드 👩‍🏫예시_클릭하면 옆에서 열리는 애니메이션 영역 만들기 Set 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. 배열은 중복값이 저장될 수 있지만 set은 중복이 안되는 값을 저장할 수 있다. 배열은 요소의 순서에 의미가 있지만 set은 의미가 없다. 배열은 인덱스의 값으로 접근을 하지만 set은 해당 방법으로 접근이 이루어지지 않기 때문이다. ES6이며, 값으로만 만들어져 있다. 주요 메소드 new Set(iterable) set을 생성한다. 이터러블 객체를 전달받으면 그 안의 값을 복사해 셋에 넣어준다. set.add(vlaue) 값을 추가하고 set자기 자신을 반환한다. set.delete(vlaue) 값을 제거한다. 호출 시점에 set ..
블록체인_9기/💛 JAVASCRIPT 2023. 3. 29. 19강_230328_Javascript(옵션 체이닝, console.time / timeEnd) 목차 019 1. 옵션 체이닝 2. console.time() / console.timeEnd() 옵션 체이닝 개체의 속성에 액세스하거나 함수를 호출한다. ES11에서 도입되었다. 객체의 값을 호출할 때 안전성을 유지하면서 호출이 가능하다. 객체의 키 앞에 ' ? ' 구문을 추가해서 작성한다. 객체의 키 값이 있는지 확인하고 없으면 undefined를 던져 오류가 나지 않도록 방지해준다. 오류가 나지 않는 이유는 객체의 키 값을 확인하고 type에러가 나지 않게 방지해주기 때문이다. let obj = {name : "wi", content : "내용"}; console.log(obj?.name); //결과: wi console.log(obj?.age); //결과: undefined console.time..
블록체인_9기/💛 JAVASCRIPT 2023. 3. 29. 17강(과제X)_230324_Javascript(쿠키, setCookie, getCookie, document.cookie, toUTCString, trim, startsWith, setInterval, clearInterval) 목차 017 1. 쿠키 (Cookie) 2. setCookie / getCookie 3. toUTCString 4. trim() 5. startsWith() 6. setInterval() 7. clearInterval() 쿠키 (Cookie) 쿠키와 로컬스토리지의 type은 string으로 표시된다. 쿠키값이 없을 경우의 type은 undefined로 확인된다. 사용자가 일부러 쿠키 값을 없애거나 지정된 쿠키 시간이 종료되면 쿠키값이 사라진다. let popupEvent = document.querySelector('.event-btn'); popupEvent.addEventListener("click",function(){ setCookie("event-popup",true,10); }) console..
728x90

티스토리툴바