강의 링크 : https://www.youtube.com/watch?v=8qIsZsjdvjo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=7 https://www.youtube.com/watch?v=lgMtc0SyW64&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=8 https://www.youtube.com/watch?v=fZYIzTuAcNk&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=9 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! import에 대해 Sub.js export default Sub; 는 이 Sub 함수를 외부에 노출하겠다는 것이다. 그럼 이 외부에..
강의 링크 : https://www.youtube.com/watch?v=swGjcOWZ3d0&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=6 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! useState *참고 더하기 버튼에 함수를 이렇게 바인딩만 시켜야 한다. 더하기 이렇게 작성해버리면 함수가 바로 실행된다. App.js 실행결과 ) 더하기 버튼을 누르면 number의 값이 올라가지만 화면에 나타나진 않는다. 현재 number가 '상태'가 아니기 때문에 UI가 자동으로 변경되지 않는 것이다. ※ 렌더링 시점은 상태값 변경이 일어날 때이다. 따라서 let number = 1; 을 수정해서 number를 상태로 변경해주자 이렇게 작성하면 변수를..
강의 링크 : https://www.youtube.com/watch?v=U7zNZrLhhlA&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=4 https://www.youtube.com/watch?v=IQovah5bz3Q&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=5 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! 지금까지 배운 내용을 토대로라면 밑줄 친 부분만 변경하고자 했을 때, 결국 이 return이 다시 실행되기 때문에 이 리턴되는 영역 자체가 다시 실행된다(그려진다)는 것이다. 함수가 하나로 묶여 있기 때문에 다른 부분만을 따로 렌더링 할 수 없다는 것이다. 이 도토리만 사과로 바꾸기 위해선 어떻게..
강의 링크 : https://www.youtube.com/watch?v=qCADzDFiVgo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=2 https://www.youtube.com/watch?v=OYH_ISVjHR4&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=3 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! React 실행 흐름 package.json : 프로젝트를 관리하는 설정 파일 npm start 를 하면 index.js를 실행시킨다. render는 데이터를 기반으로 그림을 그리는 것이다. 여기서 을 클릭해보면 App.js로 이동된다. 즉 App.js를 그리겠다는 것이다. 이와 같은 문법을 JS..
강의 링크 : https://www.youtube.com/watch?v=hdsALpVJwgU&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! 리액트 -> ajax -> 데이터 변경 감지 -> UI가 자동 업데이트 리액트는 변경을 감지하는 엔진(Daemon), 그래서 서버처럼 계속 돌아야한다. 즉 리액트를 계속 동작하게 할 수 있는 서버가 필요하다. 이 서버가 Node.js 서버이다. 실행하게되면 리액트는 Node.js 위에서 계속 동작한다. 우선 VSCode 를 킨 후 reackwork 이름 폴더 만들어 열어주자 Node.js가 없다면 Node.js를 설치해주자 터미널에 node --version 명령어를 치면..
현재 진행 상황 시큐리티 로그인 적용 & DB 연동 완료 서머노트와 게시판 글쓰기 & DB 연동 완료 여기까지의 회원가입과 시큐리티 로그인 적용, 그리고 게시판 CRUD 중 Create 파트까지는 내가 이전에 작성했던 스프링 부트 블로그 JPA 프로젝트의 내용과 유사하므로 따로 작성하진 않겠다. #17 회원가입을 위한 세팅 : https://daramgda.tistory.com/67?category=554648 #18 회원가입 구현 : https://daramgda.tistory.com/68?category=554648 #21 스프링 시큐리티 : https://daramgda.tistory.com/71?category=554648 #22 스프링 시큐리티2 : https://daramgda.tistory...
AccessToken을 통해 카카오 회원정보 가져오기 이전까지 code를 받는 인증처리 완료와 AccessToken을 받아 권한을 부여받는 과정까지 했다. 이번 시간엔 AccessToken으로 카카오쪽으로 카카오로 로그인한 회원의 개인정보를 요청해보겠다. 우선 필요한건 body 데이터니까 return response; 에서 response.getBody()로; 코드를 수정한다. 이 정보를 오브젝트에 담아야 한다. 이거랑 똑같이 생긴 오브젝트를 하나 만들어보자 변수명도 정확히 같아야 한다. model 패키지에 OAuthToken 클래스를 생성하고 body 데이터를 담을 오브젝트인 OAuthToken을 만들었다. getter/setter를 생성해줘야하니 @Data 어노테이션을 꼭 작성해야한다. 이 JSON ..
OAuth2.0 개념 OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. OAuth 2.0은 1.0에서 알려진 보안 문제 등을 개선한 버젼이다. 이렇게 매 사이트마다 회원가입을 할 경우 사이트의 개수만큼 내 개인정보는 많이 뿌려지고 노출되게 된다. 개인정보를 지키기에 한 곳에서 관리하는게 훨씬 더 효과적이다. 그래서 특정한 대형 포털 사이트들이 이 개인정보들을 관리하게 된다. 네이버와 카카오가 대표적이다. 이 2개의 사이트가 대표적으로 우리의 개인정보를 관리해서 로그인처리를 대신해준다. 그러니까 내가 A라는 사이트에 회원가입을 하지 않고 B라..
