분류 전체보기280 [220414] 빙고게임 완성하기 - 01 1-9까지 채워진 숫자판 만들기 클릭하면 X가 표시되는 숫자판 변형본 (Square, Board 컴포넌트만) class Square extends React.Component{ render(){ //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!! return( { this.props.onClick() } } > {this.props.value} ) } } class Board extends React.Component{ state = { // square:[null,null,null,null,null,null,null,null,null] squares : Array(9).fill(null) } handleClick = (i) => { const squares = [..... 2022. 4. 17. [220411] 연극 예매사이트 팀플 기록) 18. 팀플을 마치며 만족스러웠던 점 sql을 다채롭게 다룰 수 있었다. 달력기능, 스케쥴러 기능을 완성했다. 아쉬웠던 점 파일업로드 기능을 결국 만들지 못해서 여러 기능이 누락되었다. 깨달은 점 팀장직분은 정말 힘든거구나 두루뭉술 알고있는 지식들이 꽤 많다 크로스브라우징은 피눈물난다. 같은 브라우저라고해도 모니터 해상도에 따라 달라진다. 개선할 점 돌다리를 오천만번 두들겨서 건널 생각 하지말고 하나라도 개념을 똑바로 알자. 그래야 프로그래밍 속도가 향상된다. 2022. 4. 17. [220407] 연극 예매사이트 팀플 기록) 17. 키워드에 맞게 배경바꾸기 현재 하고 있는 것 공연 제목을 읽고 일치하는 이미지를 배경과 메인이미지 박스에 넣도록. 예) 박열 이라는 단어가 있으면, 박열에 해당하는 이미지를 넣는다. 마찬가지로, 제목에 해당 키워드가 있으면 그 키워드에 맞는 이미지를 불러온다. 이미지에 마우스를 올리면 그에 해당하는 텍스트가 아래 박스에 떠오른다. width : whitewrap을 줘서 양쪽에 이미지를 넘치게 넣어도 바깥에서 보이지 않으며, 움직일때 스크롤바가 생긴다. 개선해야할 점 텍스트박스에 엔터가 먹질 않는다.... 2022. 4. 17. [220414] 리스트로 DB 데이터를 다루는 방법 2022. 4. 17. [220414] 리스트의 단점을 극복하는 상태 끌어올리기 리스트의 단점 리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만, 동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다. 해결책 : 상태 끌어올리기 부모컨텐츠에 App component에 state를 만들어서 전달해준다. 리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up App에 state값을 저장하기 코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다. class Form extends React.Component{ state ={ value:'', } handleChange = e => { const .. 2022. 4. 17. [220414] 리액트에서 이벤트 생성하기 1. 이벤트명은 Camel 형태로 쓰기 html에서 이벤트를 만들때 버튼 리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다. Camel형태로 안 쓰면 실행 자체가 안 된다. class Login extends React.Component{ state = { name:'ingoo2' } render(){ return( {this.state.name} ) } } 2. 이벤트는 익명함수로 감싸기 render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다. 따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다. 버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다. 왜? 함수가 호출되지 않으면 실행이 될 수 없기 .. 2022. 4. 16. [220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15. [220413] 리액트 시작하기 (react, react-dom, 컴포넌트) 사전지식 자바 프레임워크라고도 부르고, 자바 라이브러리라고 부르는 리액트. 조금 자세히 따지자면 프레임워크에 가깝다. 라이브러리 : 폴더 구조가 없음 프레임워크 : 폴더 구조가 있음 1. react 시작하기 react는 react문법을 사용해서 작성한다. react-dom은 바뀐 값을 찾아서 그 영역만 바꿔준다. 주로 맨 마지막 한줄만 사용함 1-1. react 문법 버튼을 리액트로 만드는 코드 //인자값 3개 들어가는 React.createElement() //첫번째 인자 : 엘리먼트 명 //두번째 인자 : 속성값 //세번째 인자 : innerHTML React.createElement('button', null, '버튼') 1-2. react-dom 문법 //ReactDOM.render() //첫번째.. 2022. 4. 15. [220406] 연극 예매사이트 팀플 기록) 16. 카테고리 편집기능 완성 현재 하고 있는 것 카테고리 편집 페이지 구현 회원정보 수정 페이지 구현 예매 시작일자 기준으로 리스트를 구현한 공연 관리페이지 구현 개선해야할점 카테고리 편집기능인 오른쪽에서 수정하면 왼쪽 박스에 있는 카테고리가 사라짐. -> 이슈해결 : 왼쪽 박스는 복사본으로 만들어 오른쪽 박스 내용과 별개의 내용으로 만듬 카테고리 편집을 하면 가장 위에 있는 목록이 수정되어버림 -> 이슈해결 : 리스트 반복함수에 오류가 있었음. 수정. 2022. 4. 11. [220405] 연극 예매사이트 팀플 기록) 15. 달력 완성 현재 하고 있는 것 원래는 날짜를 하나하나 받아서 자료검색을 돌리려고했는데 그러면 너무 느려짐. 그래서 한 달을 표시하기로 선택하면, 그 달에 해당하는 모든 이벤트 목록을 가지고오는걸로. 거기서 달을 나누자. 원래 갯수만 먼저 가져오고 나중에 필요할때 가져올까했는데 어쨋든 그것도 두번 검색해야하고 개별 검색 돌려야함 차라리 한달치를 먼저 가져오는게 낫지. 2022. 4. 5. 이전 1 ··· 14 15 16 17 18 19 20 ··· 28 다음
