분류 전체보기 (150) 썸네일형 리스트형 [git] github에 작업저장소를 만들자(Repository) git은 버전 관리 툴이고 gitgub는 웹상에서 소스 코드를 올려서 다른 사람과 공유 및 협업을 할 수 있다 작업 저장소를 만들어 주어야 하는데 Repository라고 한다 Repository 만들기 나의 깃허브 아이디를 만들면 좌측 상단에 New 버튼이있다. Repository name에 원하는 이름을 적고 Public (다른사람에게 소스공개) 과 Private ( 나만보기)를 선택해준 후 하단의 Create repository를 눌러주면 waglewale이란 이름으로 나의 repository 목록에 생성 돼있다. 이제 이 곳의 주소로 소스 업로드 및 내려받기가 가능하다 안에 들어가서 code▼를 눌러보면 repository주소가 생성 돼있는것을 볼 수 있다 다음은 cmd창에서 업로드하는 방법을 알아보자 [프로젝트]1:1 매칭 대상을 바꿔보자 (react,nodejs,express) 오늘 작업한거 정리이다 기존 이성 끼리만 매칭되던 기능을 버튼 하나 더 만들어 동성끼리도 만나게 해주자 콤보박스를 누르면 원래는 1:1과팅과 "다중매칭은 준비중입니다." 가 뜬다 저자리에 동성 친구를 넣어주자 버튼은 어떻게 구분 해 줄까 this.state = { arrow_text: "1 : 1 과팅", // 콤보박스에 뜨는 문구인데 default는 "1 : 1 과팅" count: 1, state 값에 count를 넣어서 1:1 과팅 클릭시 count: 1, 동성친구 클릭시 count: 2, 로 초기화 해준다 "매칭시작"을 누르면 컴포넌트가 실행 되는데 start 컴포넌트에 count값을 넘겨 주자, 그래야 구분지어 함수를 실행 할 수 있다 컴포넌트 당연히 props를 사용해야 한다 const user.. [react,javascript] 화살표 함수를 알아보자 (arrow function) 함수를 간단하게 써보자 화살표 함수(arrow function)은 ES6에 추가된 표현식을 사용하는 함수로 화살표 기로 => 를 사용한다 기존 함수 표현법: function add(first, second){ return first + second; } var add = function(first, second){ return first + second; }; 둘 다 add 라는 함수 명이며 first 와 second를 더한 값을 반환 한다. 화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사하다 let add = (first,second) => { // () 안에 파라미터 return first + second; // first 더하기 second 바환 }; let add = (first,.. [프로젝트]벤 당한 유저를 접근 못 하게 하자 (react, nodejs,mysql) 채팅앱이다 보니 욕설이나 성희롱이 존재 한다 신고 당한 유저를 이용 못하게 만들자 나쁜사람. 비매너 신고를 받으면 접수를 받고 그 유저를 ben_table에 넣어 주도록 하였다 ben_useer_realid가 회원의 아이디이다 이 테이블에 존재하는 유저는 페이지 어디에 있더라도 알림과 함께 로그인 페이지로 가게 만들자 페이지가 render되기 전 componentWillMount() 안에 코드이다 let user_realid = JSON.parse(localStorage.getItem("user")).user_realid; // 로컬스토리지에서 console.log(user_realid); 유저의 아이디를 가져오자 const box2 = { //박스로 감싸기 user_realid: user_realid,.. [프로젝트] setTimeout()을 사용해 버튼클릭에 제한을 두자(react) 요새 우리학교 랜덤 채팅 웹앱을 제작중이다 잠시 서버 오픈 했었는데 사람들이 이메일 인증번호 전송을 클릭하고 금방 메일이 오지 않자 다시 전송을 누르는 현상이 생겼다 이를 시간 제한을 둬서 해결 해 보자 위의 사진이 회원가입 인터페이스이다 전송을 누르면 요론 메시지가 나오도록 설정했다 state값: this.state = { email: "", //입력받은 이메일 waitingEmail: true, // false면 눌러도 메일이 안가게 할거다 }; 전송버튼: 전송 onClick 이벤트 발생시 sendEmail 함수를 실행시킨다 sendEmail 함수: sendEmail = (e) => { //전송 버튼 눌렀을 때 e.preventDefault(); if (this.state.waitingEmail ==.. [react,javascript] 템플릿 문자열을 사용해보자 (`${백틱}`) 문자열을 사용하려면 이렇게 + 써줬어야 + 했다 `템플릿 문자열`이라고 간단한 기능이 있다 알아보자 기존 자바에서 사용 할 때 let string1 = "ㅎㅇ요"; let string2 = "ㅂㅇ요"; let greeting = string1 + " " + string2; let product = { name: "도서", price: "1231원" }; let message = "제품" + product.name + "의 가격" + product.price + "입니다"; let multiLine = "줄바꿈을 \n 해보자"; let value1 = 1; let value2 = 2; let boolValue = false; let operator1 = "곱하기" + value1 * value2 + "입니.. [프로젝트]텍스트 입력후 데이터베이스에 넣기(nodejs,react,mysql사용) 영빈이가 오랜만에 오더를 줬다 제작중인 웹에 피드백을 받기위해 불편사항 신고기능을 만들어라고 했다 입력받은 내용을 디비에 넣기만 하면 된다 함 해보자 내 핸드폰 아이폰7기준으로 인터페이스를 만들었다 정말 깔끔하고 예쁘다 기능을 보자 제출 버튼에 onClick 이벤트를 주고 onSubmit함수를 이용해 데이터를 보낼 예정이다 제출 제목을 받는 input 태그와 내용을 받는 textarea 태그에 onChange함수 이벤트를 주었다 onChange로 인해 input이나 textarea에 입력이 있을 때마다 state값이 초기화 된다 onChange = (e) => { this.setState({ [e.target.name]: e.target.value, // 변화가 있을때마다 state값을 초기화 }); }.. [react] 리액트가 무엇일까(컴포넌트,게임엔진,npm,웹팩) 리액트를 이용해서 프로젝트를 만들고 있다 사용하면서도 자세하게 알려고 한적이 있던가 알아보자 리액트는 프론트엔드 프레임워크 중 하나다 현재 많이 쓰이는 프레임워크가 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등이 있다 앵귤러는 화면 출력, 형상 관리, 배포하여 완성형 프레임워크를 지향한다 뷰제이에스는 가장 나중에 나왔고 다른 프레임워크 장점은 유지하고 단점은 보완하였다 이중 가장 많이 사용하는게 리액트다 페이스북도 리액트로 개발 되었다 리액트개발자 찾는 기업이 많다고 한다 좀 이득이다 컴포넌트(component) 가장 큰 특징은 "화면 출력에 특화된 프레임워크"이다 컴포넌트는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다 컴포넌트를 만드는 과정은 레고 .. 이전 1 ··· 13 14 15 16 17 18 19 다음
