전체 글 (441) 썸네일형 리스트형 [76-77일차 복습] 리액트 댓글 추가 수정 삭제 / React 합성과 상속 [77일차 복습] React Components 댓글 등록, 수정, 삭제 만들기 App : 브라우저 전체 Comment : 댓글 Component Comment Layout : 댓글창 layout (기능없고 그냥 담는 div같은 요소) Comment Form : 댓글 입력창 (form, input, button) Comment List : 댓글이 달리고 수정, 삭제되는 창 1. 위의 기본 Components 작성 2. 내용 입력 class CommentForm extends React.Component{ render(){ return( 댓글쓰기(1) ) } } class CommentList extends React.Component{ render(){ return( ID입니다 내용입니다 2021-06-.. [77일차]20210701 React 댓글 수정 삭제 / 리액트로 생각하기 / 합성과 상속 오늘 배울 내용의 코드 기초버전 https://github.com/ingoo-code/comments/blob/master/src/index.js 댓글의 수정 삭제 Comment라는 Component를 만들어 놓으면 이리저리 사용이 용이 ! 1. Comment Component 를 return하는 App Component 기본 코드 Comment 는 모든 댓글 기능이 다 그려진 역할 App은 다른 기능들도 있는 전체 wrap(?)같은 존재 2. Comment에는 CommentForm / CommentList를 return하는 CommentLayout을 return + CommentForm / CommentList 기본 코드 입력 class CommentForm extends React.Component{.. [76일차] 20210630 React 리액트 push, children 어제 과제 이어서 만드는 input box에 입력하면 입력값 push 앞으로 공부할 것들 CRA 란 ? Creat React App Node.js환경에서 npm 설치할 수 있다. 셋팅을 자동으로 세팅해주는 것 ! 우리는 Components를 많아야 4개 만들었는데 Facebook은 약 20000개............. 코드 관리위해 라이브러리가 필요 ! React에 필요한 것들 === Babel, Webpack, React, ReactDOM -> 셋팅을 해주는 좋은 도구들 Babel, Webpack은 페이스북이 만든건 아니고 React만들 때 가져옴 Babel - 구문 짧게 만들어주고 JSX 사용하는 / 이것도 Bable에 의해 가능함. html안에서 코드변형할 때 사용 Webpack - JS buil.. [React 연습 2일차] 리액트 TicTacToe Game 구현 어제부터 시작한 React 구구단 구현 연습 ! 아래에 html, css 기본 세팅이 있다. 오늘은 어제 만든 것 외우고 진도를 쪼금만 나가봐야겟다. https://blckchainetc.tistory.com/241 [React 연습 1일차] 리액트 TicTacToe Game 구현 처음 React를 배웠다! html, css, js를 모두 합친거라니 신기하고 비동기하려고 힘들게 배운 것들이 리액트로는 쉽게 되는 것 같다. 오늘부터 React 사이트에 있는 Tictactoe game 구현하기 연습해보기 목 blckchainetc.tistory.com 어제까지 한 내용 class Square extends React.Component{ render(){ return( {this.props.value} // .. [75일차 복습] React, state 끌어 올리기 / 리액트 구구단 어제 한 거 복습 및 오류 수정 어제 코드 setInterval(callback, 1000) render 하는 수를 console.log 찍어보면 재귀로 돌려져서 제곱씩 console.log 가 늘어남 -> 수정 필요 ! ↓↓ componentDidMount(){} 함수 사용 -> 따로 빼주기 ! or ComponentDidMout()함수를 안쓴 채로 바로 constructor 함수 안에 넣어줘도 된다. (포스팅 끝에 가능한 4가지 코드 첨부) 설치해두면 좋은 React Developer Tools -> react 로 만든 elements 를 확인할 수 있다 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljb.. [75일차] 20210629 React 리액트 구구단 출력하기 생명 주기 어제 공부한 setInterval 위, render 아래에 console.log 를 찍어보기 - console.log가 계속 찍힌다. ( 1초에 한 번이 아닌 엄청 많이 ! ) -> render() 안에 set 이 있어서 재귀함수 반복 계속됨 - 나의 data들이 변했을 때 DOM이 감지, 그려준다. - 1초 무한반복됨 -> 아래 코드는 실질적으로 쓰기 어렵다 ! - 화면이 그려졌을 때부터 1초마다 그려주고 싶다 ! 하면 - 생명주기 중 하나 사용 class Clock extends React.Component{ constructor(props){ super(props) this.state={ currentTime:new Date().toLocaleTimeString(), } } render(.. [React 연습 1일차] 리액트 TicTacToe Game 구현 처음 React를 배웠다! html, css, js를 모두 합친거라니 신기하고 비동기하려고 힘들게 배운 것들이 리액트로는 쉽게 되는 것 같다. 오늘부터 React 사이트에 있는 Tictactoe game 구현하기 연습해보기 목적 : 처음 배울 때 그리고 한 달 뒤에 얼마나 발전해있는지 확인하기 ! 먼저 위 문서에서 가져온 html, css -> 그대로 복붙해서 기본 세팅하기 https://ko.reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org tictactoe.html tictactoe.css .. [74일차 복습] 리액트란? 리액트 기초 배우기 / React CDN 링크 리액트란 ? 페이스북에서 만든 프레임워크, React 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 JavaScript Framework (또는 Library라고 하는 경우도 있음) Component 라는 작은 코드의 파편을 이용하여 복잡한 UI를 구성 기존 Html, CSS, JavaScript 로 화면을 만들 때 복잡해서 JavaScript 만으로 화면을 꾸미는 게 -> 리액트 리액트는 페이지를 컴포넌트, Components라는 것으로 만든다. { } 대괄호를 많이쓰는 문법이어서 어디에 코드를 쓰고 있는지 주의해야 한다. 장점 : HTML, CSS, JS 따로 따로 만들지 않아도 된다. 단점 : JS의 코드가 난잡해질 수 있다. -> html형태로 생긴 명령어를 만들어 html을 표현하여 보완됨.. [74일차] 20210628 리액트 react - JSX, ReactDOM 리액트 - 프레임워크 중 하나 , 페이스북이 만듬 현재 페이스북 인스타그램 - 리액트로 구현되어 있음 리액트 구현된 페이지에 가보면 대부분 url은 변경되지만 contents만 내용이 바뀐다. (Single page application) 리액트 컴포넌트로 구성된 페이지 *사용자 정의 컴포넌트명은 항상 대문자 리액트는 { } 을 많이쓴다 - 내가 어디 영역에 코드를 쓰는지 등 유의깊게 보기 ! JavaScript 만으로 화면을 꾸미는 것 (JS로만 만들자) - 리액트! -> 장점 : HTML, JS, CSS을 따로따로 만들지 않아도 됨 -> 단점 : JS 코드 난잡해질 수도 ! -> 대처 방안이 있다. html형태로 생긴 명령어로 html를 표현하기 시작함 React 공식문서 - 게임 만들기 일단 따라 .. [JavaScript] 핸드폰번호, 생년월일 - 하이픈 자동 삽입하기 / Backspace keyCode 프로젝트 마무리로 핸드폰번호, 생년월일 정규식으로 유효성 검사를 하는데 - 하이픈을 수동으로 입력해야해서 불편함을 느꼈다. 그래서 입력된 값의 길이와 onkeyup 이라는 event를 사용하여 - 하이픈 자동 삽입하기까지 작성해보았다. 생년월일 하이픈 자동 생성하기 html 에 onkeyup = "함수(this)" 코드 추가하기 생년월일 html과 연결된 Javascript에 아래 코드 추가하기 // 생년월일 - 하이픈 자동 생성 function birth_keyup(obj){ let birth_len = obj.value.length; if (event.keyCode==8){ obj.value = obj.value.slice(0,birth_len) return 0; }else if(birth_len==.. [JavaScript] 이메일, 핸드폰 번호, 생년월일 유효성 검사 (정규식) 이번 프로젝트 마무리 단계로 회원가입 join 시 userid 역할인 email, 핸드폰 번호, 생년월일 유효성 검사를 추가했다. 정규식을 사용하여 코드를 더 간결하게 만들 수 있었다. 😀 Email 형식 유효성 검사 -> JS addEventListener('change', callback) 사용 // EMAIL (userid) 형식 유효성 검사 let userid = document.querySelector('#userid') userid.addEventListener('change',(e)=>{ // html 의 onchange="validEmail(this)"와 동일 validEmail(e.target) }) function validEmail(obj){ if(validEmailCheck(obj).. [JavaScript] Promise 값 가져오기 async await 사용 JavaScript Promise 객체의 값을 가져오는 방법 ! let admin_check = areYouAdmin(userid) console.log(admin_check) ---> 요 부분이 안나왔다. async function areYouAdmin(userid){ let user_level = await users.findOne({where:{userid,}}) console.log(user_level.dataValues.admin) -> 요기는 잘 뜨고 return user_level.dataValues.admin; } 채팅 구현 중 Promise 의 값을 외부로 가져오면 계속 Pending으로만 떴다. areYouAdmin 이라는 함수에서 해당 userid가 관리자인지 아닌지 판별하고 싶었는데.. [JavaScript] 팝업창 띄우는 두 가지 방법 1. html 에서 바로 띄우기 채팅 html 해당 요소(a tag) 에 href 를 'javascript:openWindowPop('http://localhost:3000/', 'popup') 이렇게 쓰면 끝 ! 그리고 아래 JS 에 팝업창 크기 조정하기 2. js를 연결해서 클릭하면 함수 실행하여 window pop으로 띄우기 let chatBtn = document.querySelector('#chatBtn'); chatBtn.addEventListener('click', chatFn); function chatFn() { var chatWidth = 450; var chatHeight = 655; var chatLeft = 90; var chatTop = 100; // xPos = (documen.. [JavaScript] node.js 회원가입시 이메일 인증하여 로그인 하기 구현 JavaScript, node.js로 회원가입시 이메일 인증하기 html '제출' 버튼을 누르면 JS 로 함수 안의 명령들을 처리한 후, joinform.submit() 으로 처리해 주었다. 이름 생년월일 html_ js // 모든 절차 통과 후 회원가입 완료 alert(msg); joinform.submit(); } 아이디, 비밀번호, 이메일 등의 모든 유효성 검사를 거치로 -> sumit() -> /user/join_success user/join_success js let join_success = (req, res) => { let { username, userbirth, userid, userpw, mobile } = req.body; // verifying key 만들어 db에 함께 creat.. [JavaScript] Node.js Google API 구글 지도 맵 가져오기 JavaScript node.js 로 Google API 구글 맵 가져오기 구글 맵을 API로 가져오려면 billing 결제 정보를 업데이트하고 confirm을 받아야 온전한 지도, marker 까지 표시할 수 있다. 아직 나의 결제 정보는 confirm 중이여서 먼저 지도만 가져오는 코드만 공유 ! 먼저 Google cloud flatform 에서 API 키를 만들어야 한다. Google API 키 만드는 방법 https://blckchainetc.tistory.com/228 [ Google API 최신 ] http://localhost로 구글 로그인 로그아웃 API 사용하기 JavaScript node.js 1. Google Cloud Platform 에 들어간다. https://console.clo.. [69~73일차] 20210621~25 apple clone 팀 프로젝트 할 작업 2. login할 때 session에 넣는것 골라서 넣기 (pw 같은 개인정보 빼기) 3. 쿠키 값에 시간 찾아보기 12. 구글 크롤링 주말에 할 일 1. google accesstoken 받기 ! 2. 아이디, 비밀번호, 핸드폰번호 미니멈길이 설정 - 정규식 써서 해보기 ! 3. 다른 페이지에서 chat창 나오도록 ! 공부해볼 것 css - before, after REST API -> 다시 공부 이전 작업 1. 기본 server.js 틀 구성 2. sequelize models 틀 구성 users, items, buy tables + 외래키 설정 완료 & JS 에 tables 가져오기 완료 / 사용도 가능 ! 3. JWT (token, userpw sha256으로 암호화해서 return하는거.. [JavaScript] 이메일 주소 유효성 검사 JavaScript 로 이메일 주소 유효성 검사하기 JavaScript 의 이메일 유효성 검사 두 가지 정규식 표현 방법 - var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; var pattern = new RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i); var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/; var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-.. [JavaScript] IntersectionObserver 편리한 스크롤 이벤트 scroll event 500x 500px 의 4개 div 마지막 div에 fade in scroll event 주기 let winH = window.innerHeight; - 윈도우의 높이 (보여지고 있는 창의 height = ex 500px;) let scrollY = window.scrollY; - 스크롤의 값 (스크롤이 움지이지않은 상태는 0 ) let posFromTop = item4.getBoundingClientRect().top; (상대좌표 값 - 스크롤을 내릴 수록 줄어듬!) - 현재 위치(최상단)에서 적용할div 최상단 까지의 거리 - 현재 창의 최 상단으로부터 내가 스크롤 이벤트 주려는 div의 최상단 = 1500 let absolutePos = scrollY + posFromRop; - item 4의 절대.. [ Google API 최신 ] http://localhost로 구글 로그인 로그아웃 API 사용하기 JavaScript node.js 1. Google Cloud Platform 에 들어간다. https://console.cloud.google.com/apis/dashboard?hl=ko&project=neat-vent-317002&folder=&organizationId= Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 2. New Project 를 만든다 3. 라이브러리 - Google+ API 를 받는다. 4. OAuth consent screen (OAuth 동의화면) 들어가 Application name 지정 --> 바로 Save 확인 누른다. 5. Credentials(사용자 인증 정보) 에.. [JavaScript] scrollHeight, ScrollTop, ClientHeight 차이 JavaScript scrollHeight, ScrollTop, ClientHeight 차이 [JavaScript 채팅창] div 스크롤 자동으로 내려가게 만드는 방법 JavaScript 채팅창 구현 시 필요한 div 스크롤 자동으로 내려가게 만드는 방법 1) 기본 코드 소스 let chat = document.querySelector('#chat'); chat.scrollTop = chat.scrollHeight; ->chat 이라는 div가 채팅 창이 된다. 2) 예시 html JavaScript function send() { const msg = document.querySelector('#msg'); if (msg.value == '') { return; } else { socket.emit('send', msg.value); msgAdd(msg.value, 'me'); msg.value = ''; let chat = document.querySelector(.. [64~68일차] 20210613~17 apple clone 팀프로젝트 6일차 6일차 오늘 작업 1. 채팅 / 관리자 채팅 연결까지 확인 (담주 월) 채팅 길어지면 스크롤 이벤트 ! 채팅value 없으면 alert - 질문 안읽음 표시 엔터치면 채팅이 보내지게 2. join 메일 주소 유효한지 확인하는거 ! + join 시 입력창 모든 제어 추가 3. DB 구조 다시 파악하기 ! - 로그인 시 cookie 값 넣어서 장바구니 기능 추가 4. API 카카오 로그인 추가 / 네이버 로그인 추가 / 질문 1. chat.dataset.value를 변수에 담아서 하면 +=1이 안되는 이유 2. 채팅value 없으면 alert 3. 팝업창에서 다시 redirect to login page 4. join.js DB 첫줄 REST API -> 다시 공부 간략한 약속들... 어떤 형식으로 .. [59~63일차]20210607-11 팀프로젝트 1주차 팀 이름 : 서영세스메이커 오늘 할일: 1. 웹사이트 정하기 https://www.apple.com/iphone-12/ 2. 할일 나누기 3. DB tables, fields 정하기 database name: teample - users 정보 fields userid , userpw , username, image, mobile , address , email , register_date - items (상품을 뿌리는) item_serial_number, item_name, item_price , item_image, item_size, item_color, item_capacity, - buy (관계형 DB, foreign key 2번 ) - 배송할 때 userid, item_serial_number,.. [58일차 복습] mysql table 을 sequelize auto 사용해서 JavaScript로 자동으로 가져오기 / 데이터베이스 테이블 sequelize로 옮기기 mysql 에 기생성된 database, tables를 sequelize 사용해서 js로 가져오기 1. 기본 server.js 세팅 $npm init $npm i express server.js const express = require('express'); const app = express(); app.get('/',(res,req)=>{ res.send('d'); }) app.listen(3000,()=>{ console.log('server start port : 3000') }) 2. sequelize 다운/ 세팅 / 코드작성 / db연결 확인 $npm i sequelize mysql2 sequelize-cli $npx sequelize init sequelize - > 클래스 사용 패키지 my.. [mysql] Please install mysql2 package manually ERROR 에러처리 방법 sequelize-auto 명령어 실행 오류로 $sequelize-auto -o"./models" -d class -h localhost -u root -p 3306 -x root -e mysql $npm install -g sequelize-auto global로 설치 후 $npx sequelize-auto -o "./models" -d class -h localhost -u root -p 3306 -x [비번] -e mysql 이렇게 명령 실행을 했는데 [ERROR] Please install mysql2 package manually 에러가 났다. mysql2 도 이미 깔아주었는데 수동으로 다시 설치하라니 ??? 오류 해결법 찾아보니 매우 간단했다! 해결법 $npm install -g mysql2 .. [57일차 복습]mysql foreign key 외래키 설정/ left join / union / 특정 field 값 가져오기 mysql promt 창에서 create database class3; 생성 HeidiSQL 들어가서 비밀번호 입력 / 방금 만든 'class3' 클릭 1을 field로 만들어서 보여줄게 (근데 field명이 없어서 data 값 ==1을 field명으로 만듬) select 1 as 'Number' -> 1이라는 data를 Number라는 field 명으로 보여줄게 테이블 2개 더 만들기 CREATE TABLE skill( curr_id INT NOT NULL, item_id INT NOT NULL )CHARACTER SET UTF8 collate UTF8_GENERAL_CI; CREATE TABLE skill_item( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, NAM.. [58일차]20210604 관리자페이지 / sequelize table JS로 가져오기 / sequelize left join 관리자 페이지 - 보통 url 끝에 adm / admin 을 쳐서 들어감 -> 관리자 로그인 페이지 회원가입할 때 등급을 나눠서 구분 - 게시판 생성관리 / 그룹관리 - 복잡함 - 관리자페이지는 기능만 구현되면 되는 주의 ( 안보이니까) 팝업 리스트까 쭉 있음 - 팝업db fields 메인페이지에있는 이미지도 db에 담아놓고 (사진 이름으로) -> 내용 숨김, 보임, 등으로 구분 게시판 1. 공지사항 2. 게시판 3. 자유게시판 이 있다면 DB에 3개를 만드는 방법이 있고 (사용자가 많지않은 경우 굳이 3개 따로 만드는건 비효율적) board 라는 테이블에 세가지 내용을 다 담기 field값 하나 추가해서 구분하도록 (ex) url) 공지사항 : notice / 게시판 : board / 자유게시판 : f.. [57일차]20210603 MariaDB mysql table3개 만들어서 연결하기 / ㅣleft JOIN 프로젝트 내용 사이트 리뉴얼 로그인 = jwt 활용 카카오 로그인 네이버 로그인 구글 로그인 게시판 기능 DB 채팅 (1:관리자) 관리자페이지 팝업관리 * DB에 내용 넣어서 뿌려주기 (sub 페이지를 하나하나html 으로 하기보단) 반응형 (모바일) 발표 : 어떤 기능을 어떻게 넣었고 작업하는 순서 내가 만드려는 사이트의 페이지가 몇개가 있는지 확인 (페이지 개수) - url port 값들이 얼마나 있는지 디자인 레이아웃 (페이지마다 공통의 레이아웃 부터 ) DB설계 상품등록한 DB 상품 리스트들을 쭉 뿌리기 (게시판과 똑같음) https://gitmind.com/kr/ GitMind - 무료 온라인 마인드 맵 도구 GitMind는 브레인 스토밍, 프로젝트 계획, 개발, 행동 및 기타 창의적인 작업을위.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
