Welcome ! (441) 썸네일형 리스트형 [79일차 복습] 웹팩 CRA 없이 React 개발 환경 구축 및 핫리로드 & CRA 사용버전 Webpack, 웹팩이란 ? -> https://blckchainetc.tistory.com/253 [Webpack] 웹팩이란 ? 웹팩 사용 전, 알아야할 기본 개념 6가지 웹팩(Webpack)이란 ? 수많은 모듈을 잘 관리하도록 돕는 번들러(Bundler) 중 하나이다. "webpack" 이 번들러 중 가장 유명하다. 여러개의 파일을 하나로 묶어 제공 ---> 웹 애플리케이션의 빠른 로딩을 blckchainetc.tistory.com Webpack 환경설정 하기 1. terminal 경로를 webpack 을 하려는 파일까지 들어오기 ex) 파일 이름이 0705webpack이고 이 안에 파일들을 생성할 예정이면 $ cd 705webpack 2. 아래 npm 명령어 실행 $ npm init $ npm in.. [79일차] 20210705 react Webpack 웹팩 수동으로 개발 환경 구축/ 핫리로드 / & CRA 사용버전 Webpack 이란 ? 웹팩 개념을 위함 자세한 포스팅 ↓↓ https://blckchainetc.tistory.com/253 [Webpack] 웹팩이란 ? 웹팩 사용 전, 알아야할 기본 개념 6가지 웹팩(Webpack)이란 ? 수많은 모듈을 잘 관리하도록 돕는 번들러(Bundler) 중 하나이다. "webpack" 이 번들러 중 가장 유명하다. 여러개의 파일을 하나로 묶어 제공 ---> 웹 애플리케이션의 빠른 로딩을 blckchainetc.tistory.com 여러개의 JS를 하나의 JS로 만들기 Component 별로 파일을 쪼개놓고 (코드를 짤 때, 협업할 때 필수) 그리고 실제로 빌드해서 배포할 때는 한 파일로 만들 때 Webpack을 쓴다. Node.js 환경에서 돌아간다. 웹팩을하기 위해 코드.. [Webpack] 웹팩이란 ? 웹팩 사용 전, 알아야할 기본 개념 6가지 웹팩(Webpack)이란 ? 수많은 모듈을 잘 관리하도록 돕는 번들러(Bundler) 중 하나이다. "webpack" 이 번들러 중 가장 유명하다. 여러개의 파일을 하나로 묶어 제공 ---> 웹 애플리케이션의 빠른 로딩을 가능하게 하고 성능을 향상시킬 수 있다. "모듈" 관리를 하는 웹팩을 이해하려면 '모듈'에 대해서 먼저 잘 알아야 한다. 모듈이란 ? 개발할 때 하나의 파일로 모든 개발 코드를 입력하기엔 쉽지않다. 각 파일별로 분리를 시키는 것이 module 이다. 모듈은 보통 class 하나 또는 여러개의 함수로 구성된 라이브러리 하나로 구성된다. 모듈이 무엇인지 직접 만들어보기 index.html hello.js let test = "hello" world.js let test ="world!" 사.. [Webpack error] unable to resolve dependency tree webpack 설치 / 환경 설정 중 아래 코드가 계속 에러가 났다. 아래의 pmmmwh ~ 을 실행시켜야하는데 오류가 뜸.. $ npm install -D @pmmmwh/react-refresh-webpack-plugin 오류 메세지 : unable to resolve dependency tree dependency tree를 잘 찾지 못한다는 것 같다. 해결 방법 : 아래 명령어 실행 npm install -D @pmmmwh/react-refresh-webpack-plugin --save --legacy-peer-deps 위의 코드를 실행해주니 해결이 되었다!! [React 연습 3일차] 리액트 TicTacToe Game 구현 TicTacToe Game 구현하기 연습 ! function Square(props) { return ( {props.value} ) } class Board extends React.Component { constructor(props) { super(props) this.state = { squares: Array(9).fill(null), xIsNext:true, }; } handleClick = (i) => { const squares = this.state.squares.slice(); // winner 정해진 후 클릭 안되도록 // 질문 squares[i] 는 왜 있는걸까,,,,↓↓ -> 해당 값이 True일 때 ! (null 이 아닐 때 == 이미 클릭 했을 때) console.log(squ.. [78일차 복습] React, 리액트 함수형 컴포넌트 vs 클래스 컴포넌트 이번주 월요일 ~ 목요일까지 React의 Class Component를 배우고 오늘은 Function Component 찍먹 ! Class Component를 제대로 잘 연습하고 이해하면 함수 컴포넌트는 아주 쉽게 배울 수 있다고 하셨다. 오늘 공부는 Class 형 vs Function 함수형을 각각 만들어보고 비교하면서 공부해서 이해가 잘 되었다 ! Class Component VS Function Component 클래스 Component vs 함수 Component 차이 : 1. 코드의 사용 방식 - 어느 부분에서는 class가, 어느 부분에서는 함수가 코드가 짧고 간결하다. 어떤게 더 짧다고 말하기 어려울 듯..! 2. render() 매서드의 유무 - render() 가 있는 클래스 Compon.. 3주 팀프로젝트 리뷰 3주 장기 프로젝트가 끝이 났다! 코드 / 기술 / 서비스 리뷰 ! [ 팀 프로젝트 리뷰 ] 세호님 팀 1. 채팅 기능을 포함하여 사이트의 전체적인 완성도가 좋았다. checkbox 의 기능 / 세세한 기능들이 모두 들어가 있었고 퍼블리싱을 해도 손색없어 보였다 !! 우성님 팀 1. 사이트 들어가서 mbti 기반으로 본인의 성격에 따라 어떤 강의가 적성에 맞을지 알려주는 퀴즈같은거! -> 마케팅 효과 up, 웹을 사용하는 고객이 심심하지 않게하는 아이디어가 좋았다 2. main page의 애니메이션을 어도비 애프터이펙트 툴을 이용해 매우 멋졋음! 문영님 팀 1. 관리자 페이지에서 메뉴, 소메뉴 등까지 관리하여 header에 추가 / 삭제를 할 수 있음 !! -> 관리자 페이지의 기능이 매우 돋보였다. 2.. [78일차] 20210702 React 리액트 함수형 컴포넌트 어제까지 배운 내용 : Class Component 예제로 Class형 vs 함수형 비교해보기 ! 예제 1 1) Class Component class App extends React.Component{ render(){ return( 금요일이다 ! ) } } ReactDOM.render( , document.querySelector('#root') ) 2) Function 함수형 Component function App(){ return( 금요일이다 !!!! ) } ReactDOM.render( , document.querySelector('#root') ) 함수형 장점 : React.Component 를 안써도 되서 오류가 적어질 수 있다. 함수형은 간결하지만 render라던지 눈에 보이는 표시(?).. [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하는거.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 19 다음
