프로그래밍16 [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. [220322] 자바스크립트로 달력만들기 1. 현재 날짜를 가져오는 함수 new Date() date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. let dateToday = new Date() console.log(dateToday) console.log(typeof(dateToday)) //출력값 //2022-03-22T13:35:12.509Z //object 그 외에도 원하는 시각을 넣어서 객체를 작성할 수 있다. console.log(new Date(2021, 11, 6)); console.log(new Date('2021-12-06T03:24:00')); //결과 //2021-12-05T15:00:00.000Z //2021-12-05T1.. 2022. 3. 23. [220303] npm과 jwt을 활용해서 로그인 확인 기능 만들기 [목록] 1. npm 명령어로 서버 시작하기 2. 코드를 자동으로 갱신해주는 nodemon 3. 로그인시 jwt 생성하기 4. 로그인 확인을 위해 쿠키에서 jwt 정보 추출하기 5. try/catch문을 통해 응답코드 짜기 1. npm 명령어로 서버 시작하기 서버를 시작하는 node server의 의미 node로 된 명령어를 쓸건데, server.js파일을 실행할거란 명령문. 명령문을 이용하면 다른 명령어를 사용해서 서버를 시작할 수 있다. npm run start npm 스크립트 안에 있는 start 명령어를 run(실행)할게. start 명령어는 node server과 연결되어있기때문에 결과적으로 서버가 시작된다. 2. 서버를 자동적으로 갱신해주는 nodemon 서버를 껐다 켜는 것을 반복하지 않아도.. 2022. 3. 3. [220216] Mysql 직접 사용해보기 Mysql의 탄생 유료인 오라클이랑 무료인 mysql이 있었는데 오라클이 mysql을 인수함. 그래서 둘다 유료가 되어버림. 근데 mysql을 오라클이 인수하고나서 신경을 안쓰니까 열받은 개발자들이 나와서 mysql이랑 같은걸 만든게 maria.db. Mysql의 목적 데이터를 하드디크스에 저장하고, 그 데이터를 관리하기 위해서 만들어진 프로그램이다. Mysql에 접속하기 brew install mysql brew services start mysql Mysql 문법 배우기 DDL 데이터베이스나 테이블을 만들때 씀 DML 테이블 안에 있는 데이터를 조작할때 씀 / 가장 많이 쓸 문법 DCL 권한설정, 자주 안 씀 Mysql로 요청/응답 확인하기 요청 보내기 curl : 요청을 보내는 명령어 -X POST.. 2022. 2. 16. [220207] 로그인 페이지 만들기 목록 1. 청사진 그리기 2. login 페이지 3. logout 페이지 4. profile 페이지 청사진 그리기 login페이지 정보를 입력할 창 만들기 & 입력한 정보가 터미널에 찍히도록 만들기. 브라우저에서 입력한 정보와 user라는 객체에 있는 정보가 서로 일치하는지 확인하기 오류해결 [ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client at new NodeError 해결하기 코드를 잘못 적어서 에러가 났는데, if문이나 반복문에서 중복된 값이 호출될때 생기는거라고하더라. 보니까 사이트를 2번 호출하게 잘못 적어서 해결함. 로그인이 성공했을때, 쿠키 만들어주기 res.setHeader(`Set-Cookie`,`lo.. 2022. 2. 8. [221003] 회원가입창 만들기 / 모달팝업창 실습용도 어제오늘 끙끙대던거 처리ㅎ망ㅇ러ㅣ머이멍ㄴ 쓱 보고 고쳐준 교수님 최고다!!! 코드 읽는 능력 최고다!!! 내가 이해한 label의 용도랑 연결연산자(+)는 맞았음. 문제의 시작 : label이랑 input이랑 떨어져도 된다는것을 생각을 못함. //이 자리에 있던 label을 아래로 밀어넣음 //왜? input 아래만 있으면 되는거고, 나는 X가 있을 위치 고정을 원하니까! X //여기로 밀어넣음! name id e-mail phone CSS의 수정 (기존 css) input[id="close"]:checked+label+#content{ display: none; } (수정본 css) input[id="close"]:checked+#content{ display: none; } 2022. 1. 3. 이전 1 2 다음
