✅일반 변수의 선언 방식 let num = 1; num = 2; ✅useState 선언 방식 let [num, setNum] = useState(1); setNum(2); ✅useState 사용 시 주의할 점 상단에 정의할 것 바로 실행하지 말 것 반복문 안에 정의하지 말 것 if문 안에 정의하지 말 것 🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때 아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나 console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다. 이때 useState()를 활용할 수 있다. 실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다. useState를 사용하면 -> setNum이라는 함수를 사용했을 때..
🤍React.js 구조 build : 빌드 시 생성되는 디렉토리 node_modules : 리액트 실행에 필요한 모듈 디렉토리 public : 정적 파일 디렉토리 src : 프로젝트 source 디렉토리 🤍React.js 변수 적용 기존 자바스크립트에서 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다. 하지만 리액트에서 변수를 적용할 때에는 이렇게 {변수명} 간단한 방법으로 변수를 적용할 수 있다. let name = 'hancoding'; {name} 실제 크롬에서 확인해 봐도 태그 안에 hancoding이 들어간 것을 확인할 수 있다.
🤍게시판 글 상세 조회 구현 글 조회 컨트롤러 코드 작성 @GetMapping("/board/view") //localhost:8080/board/view?id=1 public String boardView(Model model, Integer id){ model.addAttribute("bootboard",boardService.boardView(id)); return "boardview"; } 글 조회 화면 boardview.html 작성 제목입니다. 내용입니다. 글 조회 서비스 코드 작성 //특정 게시글 불러오기 public Bootboard boardView(Integer id){ return boardRepository.findById(id).get(); } 글 목록에서 제목을 클릭했을 때 상세..
🤍Body-parser란? node.js의 Post 요청 데이터를 추출할 수 있도록 만들어주는 미들웨어. body-parser를 사용하게 되면 req에 body 프로퍼티를 사용할 수 있다. vscode 터미널에 아래 명렁어를 입력하고 설치해 준다. npm install body-parser --save 🤍회원가입 만들기 1. 지난번에 만들어둔 User 스키마를 가져와서 회원가입에 활용한다. 2. 데이터를 json 형태로 send할 것이고, 회원가입 성공하면 success:true 라고 출력. 3. Postman을 다운받는다. 4. 아래 화면에서 GET이 아닌 POST로 변경한다. 5. raw, json으로 선택하고 회원가입에 필요한 정보를 입력한다. 6. User 스키마에 필수값을 주지 않았기 때문에 모..
🤍Mongoose에서 Schema, Model이란? 오라클, mysql과 달리 MongoDB에는 테이블이 없다고 한다. Schema는 이로 인한 헷갈림을 방지하기 위해 도입되었다. 사용자가 작성한 Schema를 기준으로 데이터를 DB에 넣기 전에 먼저 검사하고 어긋나는 데이터가 있으면 에러를 발생시킨다. 스키마를 설정할 때 인덱스도 걸어둘 수 있고 기본값도 설정할 수 있다. 즉, 스키마=테이블과 어느 정도 비슷한 역할을 한다. Model은 Schema를 감싸주는 역할을 한다. MongoDB는 고정적인 스키마를 갖고 있지 않지만, 이번 3강에서는 데이터베이스 서버가 아니라 우리의 웹서버가 데이터베이스에 들어있는 문서들을 객체화하여 사용할 수 있는 스키마를 설정해 봅니다. 🤍스키마 스키마는 해당 컬렉션의 문..
이번 2강에서는 저번에 만든 앱에 MongoDB를 연결하는 실습을 진행했습니다. 🤍MongoDB Cluster 생성 1.MongoDB 홈페이지에 접속 2. 회원가입을 해줍니다. 3. Free로 선택해 줍니다. 4. aws, 가장 가까운 도시(필리핀)으로 선택하고 create해주면 끝. 5. Connect your application 선택 6. application code를 복사해 옵니다. 🤍monoose 설치 & MongoDB 연결 npm install monoose --save 명령어를 입력해 주면 package.json dependencies에 "monoose"가 추가된다는데... 나는 아래와 같이 뜨고 ㅠㅠ추가가 되지 않는다...그래서 설치가 된 건지 안 된 건지 모르겠다... 2시간 째 삽질 ..
안드로이드 프로젝트 생성 1. 2개 항목 추가됨. -Layout Name : 기본 화면인 XML 파일 이름으로 지정 -Activity Name : 기본 소스인 Java 파일 이름으로 지정 2.화면 구성을 위한 XML 파일 뷰 컴포넌트(위젯, 클래스) -부모 뷰, 루트 뷰, 컨테이너 뷰 : 다른 뷰를 가질 수 있는 뷰 -자식 뷰 : 다른 뷰를 가질 수 없는 뷰 레이아웃 뷰 -자식 뷰의 배치(위치)를 설정하는 뷰 부모뷰 -자식뷰1 -자식뷰2 -자식뷰3 뷰 속성 -뷰의 설정을 할 때 뷰가 가지고 있는 속성을 통해서 함. -필요한 경우에 해당 속성이 있는지 확인하고 사용함. LinearLayout(리니어 레이아웃) -부모가 될 수 있는 뷰(컨테이너 뷰) -자식의 위치를 설정하는 뷰(가로, 세로 설정 가능) -크..
형식 [] .... url.jsp 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 c:url 테스트 회원 정보 출력 Colored by Color Scripter cs member01.jsp 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 회원 정보 출력 아이디 비밀번호 이름 이메일 ${param.id } ${param.pwd } ${param.name } ${param.email } Colored by Color Scripter cs 실행 화면 url.jsp를 실행해서 태크 링크를 클릭하면 url 패턴에 적용된대로 member01.j..