본문 바로가기

학원수업107

04/07 국비학원 개발자과정 91회차수업 - Redux, CSS 로 네임카드 만들기 Redux복습 Redux는 React와 함께 사용되는 상태 관리 라이브러리입니다. Redux는 단방향 데이터 흐름을 따르며, 상태 변경을 예측 가능하게 만듭니다. Redux의 흐름은 다음과 같습니다. 1. Action 액션은 상태를 변경하기 위한 일종의 메시지입니다. 액션은 type 필드를 가지며, 상태 변경을 위한 추가적인 데이터를 포함할 수 있습니다. 2. Reducer 리듀서는 액션을 받아서 상태를 변경하는 함수입니다. 리듀서는 이전 상태와 액션을 입력으로 받고, 새로운 상태를 반환합니다. 리듀서는 순수 함수여야 하며, 동일한 입력에 대해서는 항상 동일한 출력을 반환해야 합니다. Store 스토어는 애플리케이션의 상태를 보관하는 객체입니다. 스토어는 리듀서와 함께 생성됩니다. 액션을 디스패치하면 스.. 2023. 4. 7.
04/06 국비학원 개발자과정 90회차- Redux, YoutubeAPI Redux는 props넘길때 자동으로 훨씬 편하게 만들어 준다. Redux로 로그인 로그아웃 하기 uid를 로컬 스토리지에 담아주기 로그인 후 로그아웃도 구현한다. 그런데 로그인이나 로그아웃하고 페이지 새로고침 하고싶다. 원래는 useNavigate 훅을 사용하는게 좋다. 그런데 여기서는 안된다. 그래서 window.location.reload()로 처리했다. 컴포넌트 쪼개기 연습-youtubeAPI https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube.. 2023. 4. 6.
04/05 국비과정 개발자 89회차 수업- QnA게시판 글 상세보기, 이미지 다운, 글수정 dbLogic.js->qnaDB->Back-end->spring boot 그런데 우리는 댓글형 게시판으로 진행 된다. - 여러가지 유형의 게시판을 고려 해보자 id : notice, qna, transfer qna_type 전체목록-n건 - 댓글 테이블 고려 대상이 아니다. 상세보기-1건 - 댓글처리 고민 - QNA_COMMENT(select, insert, delete) 상세보기 조회시에서는 추가적으로 qna_comment붙여서 조회해야한다. [ {}-객체리터럴(Map)-object-한것-row-cloum여러개 ,{}-fileList, commentList ,{} ] List 댓글형 게시판 조회할때 SQL문 그런데 그룹바이 쓰는법 까먹어서 다시 복습함 comm_no 를 count함수에 넣었다... 그러.. 2023. 4. 5.
04/04 국비학원 개발자과정 - 88회차 React, Spring QnA게시판 qna 게시판 테이블 정리 MASTER_BOARD--리뷰게시판, 양도게시판->실제 사용하지는 않고 있음 MBLOG_FILE-실제 사용 안하고있다. 첨부파일이 QNA게시판에 들어 가 있는 상태...? 나잖아...QNA.... 사이드 테이블 - MBLOG_FILE, QNA_COMMENT(화면에 대한 설계부분에 반영을 한 상태) 이미지를 다운 받아야 한다. 알아야 할 것들.... 1. INSERT() 메소드가 왜 Object타입을 리턴 하는가? 실제로 많이 문제가 되는 부분이다. 2. 다중 insert문 사용방법 하나의 인서트문에서 여러개의 row을 insert하는 방법 다중 쿼리문, 동적쿼리문 - JDBC API를 사용할 때와 차이점 FILE_NO는 시퀀스로 처리할 예정 BOARD_TYPE - id='qna.. 2023. 4. 4.
04/03 국비학원 개발자과정 87회차- React와 Spring연결 서비스 게시판 생각해보기 페이징 처리 - 각자 처리 해보기- 분리해보기 연습 스프링 부트와 리액트 연동하기가 목표이다. Front-end를 jsp로 하는경우 VS 리액트로 하는 경우 프론트엔드와 백앤드 연결해보기를 잘 해야한다. 부트 스트랩, Vew.js일수도 있기때문에 독립적으로 생각할 수 있어야한다. JSP - @Controller -> 페이지 이동 처리 - 뷰솔루션 사용시에는 필요 없는 부분 @RestController - > plain/text, 문자열 - 화면출력 - 페이지 이동은 없다 sendRedirect, forward대상이 아니다. 둘이 구분해서 사용할수있니? 공통점 - 화면과 모델계층 사이에 이어주는 전달자 -페이지 이동 useNavigate()-화면전환 훅(함수형) -하나의 브라우저 .. 2023. 4. 3.
03/31 국비학원 개발자과정 로그인 처리 1.이메일과 비번으로 인증하기 2.구글 로그인 처리하기 ----------------------------------------------------- 오라클 서버에 member230324에서 찾음 구글계정으로 발급된 userId가 있는 회원정보가 있는지 체크하기 회원정보는 있으면- List 없으면-0 이메일과 비번만 가지고 뭘 하겠니.... 없을때는 해당 구글계정은 회원가입을 부탁드립니다. 라고 안내하기 있는애는 회원가입 필요 없음 이 애들은 sessionStorage애 저장함-내가 유지해야할 정보를 저장한다. 캡쳐링과 버블링이 마음대로 제어가 가능해야한다. key->props props를 넘기는것은 원본에 대한 주소번지를 넘긴다는 것이다. 원본에다가 넣는다. 자바스크립트에서 배열은 훨씬 .. 2023. 3. 31.
03/29 국비학원 개발자과정 - 평가일 1. mapper.xml => 마이바티스 쿼리문 등록하는 문서 동적 sql문... chat22의 board.xml 참고 insert할 때 오라클에서 null값 허용/비허용 그거랑 별개로 null들어오면 mybatis에서 문제삼음 ~ mblog-1의 member.xml에도 null값 걸러주는 처리를 했음./dept.xml update에서도... 오라클에서 db설계를 할 때 null값을 허용하거나 말거나 관계없이 mybatis에서 막고있음. 이 문제 해결하는 코드 일괄적으로 해결하는 코드임. 전체방지... 오타가 있음 -> 검색으로 오타 찾기 2. 조건절... if문이 싹 빠져있음. trim 마이바티스 api쪽 보면 trim... 들어있긴함. mybatis-3-user-guide_ko... 찾아보기... 4.. 2023. 3. 29.
03/24 국비 개발자 과정 - Spring - React - Oralce 연결, 회원가입구현 회원제로 운영되는 서비스라고 가정해본다 게시판 유형이 여러가지 필요하다고 상상해보자 (예를 들면, 리뷰게시판, Qnz) 요구사항 QNA게시판인데 양도, 매매, 등으로 검색조건이 꼭 필요하다 게시판의 유형에 따라 첨부파일이 필요한 경우도 있고 필요없는 경우도 있다. 게시판 유형에 따라 댓글 처리 테이블을 별도로 설계한다 리뷰게시판-(예:Review_Comment게시판)-댓글테이블 QnA게시판-QnA댓글(예:qna_comment) 예매게시판-예매댓글테이블(예:reserve_comment)등 첨부파일은 통합 테이블로 관리하기로 결정되었다. mlog_file 댓글형 게시판 구현하기 ERWin으로 테이블을 설계해준다. 블로그에 필요한 데이터들을 만들어 준다. 오라클 계정 만들기-MBLOG계정 create user.. 2023. 3. 24.
03/23 국비학원 개발자과정 79회차 - Redux 이해 전 과정... Dom Tree+CSS=>Render Ttree 브라우저에 내장 리액트 스타일 컴포넌트 https://velog.io/@hwang-eunji/Styled-Components-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8 Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초 Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하 velog.io const obj={} =>리터럴 .. 2023. 3. 23.
03/22 국비학원 개발자과정-Spring @ annotation 정리, Flux아키텍쳐, Redux, React Hook MVC아키텍쳐의 한계 https://velog.io/@alskt0419/FLUX-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80 root다 모두 제어 거대 프로젝트가 되면 오류가 발생 장애가 너무 많다. 양방향 데이터 바인딩이다. 너무 복잡하다. 비효율적. Redux는 단방향 데이터 바인딩이다. 양방향이 안된다. 쿠키와 세션 화면에 반영이 되기 위해서는 브라우저가 Dom Tree를 그린 후 Render Tree를 그려야한다. 렌더 트리는 기존의 돔 트리에 CSS가 포함된 트리이다. 화면에 대한 깜박임, 기다림 없이 최적화된 상태로 보여주는것이 브라우저의 역할. 엔진들이 모여져서 서비스가 진행... 한 화면에 탑-바디-바텀 이 있다. 전체를 감싸는것은 App.jsx이다. .. 2023. 3. 22.

티스토리툴바