본문 바로가기

웹

React에서 이미지를 웹팩 안에서 꺼내쓰기
웹/React 2022. 2. 21. React에서 이미지를 웹팩 안에서 꺼내쓰기 당근마켓 처럼 화면을 만들어봤습니다. 문뜩 든 고민이 String타입으로 DB에 저장하는건 이해가 가는데 img들은 어떻게 저장하지? 라는 의문이 들었습니다. blob 형태로 db에 넣었다가 뺐다 하는 것을 생각했습니다. 서버 특정 폴더에 img 파일들을 저장하고 db에는 경로만 적자 라고 생각했습니다. 1번의 경우는 okky 게시판의 충고글을 보고 너무 비효율적이라고 합니다. 그래서 패스 2번을 생각했는데 그러면 img 파일들이 어마어마하게 서버에 올건데 이걸 어떻게 관리해야하나? 라는 생각이 들었습니다. 아니면 의외로 img 파일들은 용량을 안먹나? 라고 생각을 했습니다. react에서 img들 뿌려보기 예를 들어 src에 images들이 있다면 이렇게 json형식에 "imgsrc" 부분이 서버에서 ..
웹/React 2022. 1. 14. async, await fetch 일단 fetch부터 살펴봐야 합니다. fetch("url")을 넣으면 요청을 보냅니다. response을 fetch().then()으로 다룰 수 있습니다. useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []); then()안에 () => {} 형태로 람다 함수를 집어넣을 수 있는거 같습니다. then()을 대채하려는게 async, await인듯 합니다. 비동기 처리및 콜백함수라고 하는데 요청이 들어왔을 때 실행된다! 라는 함수입니다. fetch로 문자들..
Using an authentication API in Angular applications [2]
웹/school(MEAN) 2021. 12. 7. Using an authentication API in Angular applications [2] 앵귤러에서 인증 api를 사용하는 방법을 알아봅시다. 우리가 사용자를 인증하는 법을 알아냈습니다. 이제 사용하는 법을 알아봅시다. 방문자의 로그인 여부에 따라 내비게이션을 변경한다 리뷰를 작성할 때 사용자 정보를 사용한다 내비게이션 링크를 오른쪽 상단에 추가합니다. 로그인하면 -> 사용자 이름 표시 로그아웃 버튼도 만들어야 합니다. framwork 컴포넌트에 설정하면 됩니다. 라우터의 윤곽을 정의하는 루트 컴포넌트 입니다. 로그아웃을 클릭했을때 작동되는 링크를 만들어야 합니다. 인증서비스와 3가지 메소드를 추가해봅시다. 로그 아웃을 트리거하는 클릭 이벤트 (doLogout) 현재 사용자 로그인 상태를 확인하는 메소드(isLoggedIn()) 현재 사용자 이름을 얻는 메소드(getUsername()) 프레..
Using an authentication API in Angular applications [1]
웹/school(MEAN) 2021. 12. 1. Using an authentication API in Angular applications [1] 백엔드에서 돌아가는 인증기능을 angular에서 구현해보기 특히 Angular HTTP 클라이언트 라이브러리와 localStorage 를 사용하는 방법을 살펴본다 localStorage를 이용해서 인증을 하는 방법을 알아봅니다. 사용자가 방금 로그인 했고 api가 JWT를 반환했다고 가정하자 토큰으로 뭘할까요? 지금까지 브라우저 메모리에 토큰을 저장했었습니다. 그런대 사용자가 새로고침하면 모든 정보가 날아갑니다. 좀더 지속적으로 저장할 수 있는 공간에 저장을 해봅시다. 1.Cookie를 이용하는 방법 2. localStorage를 이용하는 방법 SPA는 전체 내용이 이미 브라우저에 다운받아져 있습니다. Cookie를 이용해서 서버에 뭔가 보낼 필요가 없습니다. HTML5 api중 하나인 localStor..
Authenticating users,managing sessions, and securing APIs [2]
웹/school(MEAN) 2021. 11. 30. Authenticating users,managing sessions, and securing APIs [2] PASSport라는 것을 이용해서 인증을 쉽게 만듭시다. strategy라는 것을 통해서 여러 인증방법을 가져다가 쓸 수 있습니다. 우리는 local strategy를 사용해서 인증하는 방법을 알아봅시다. 일단 설치합시다. passport는 api가 사용합니다. 그래서 api 폴더에 config를 생성합시다. Passport use를 사용하면 strategy를 생성할 수 있습니다. 첫 번째 파라미터는 options 입니다. 두 번째 파라미터에서 대부분의 일들이 일어납니다. 첫 번째 파라미터는 options입니다. 유저네임 필드는 email로 옵션을 줍니다. 두 번째 파라미터(함수)에서 대부분의 일들이 일어납니다. db에서 user와 password를 찾아옵시다. 만약 db와 일치하면 사용자 객체를 반환합..
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException 에러
웹 2021. 11. 28. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException 에러 에러 상태 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException 만약 사용하시는 DB가 Mysql 8.0 버전이고 public key retrieval is not allowed에러가 발생한다면 다음과 같은 옵션을 확인해보셔야합니다. useSSL: DB에 SSL로 연결하는지 안하는지 확인합니다. allowPublicKeyRetrieval: 서버에서 RSA 공개키를 검색하거나 가져와야하는지 확인합니다. 에러 발생 원인 에러가 발생하는 원인은 useSSL=false로 설정하고 allowPublicKeyRetrieval 설정을 하지 않은 경우입니다. 따라서 다음과..
Authenticating users,managing sessions, and securing APIs [1]
웹/school(MEAN) 2021. 11. 24. Authenticating users,managing sessions, and securing APIs [1] 앵귤러에서 인증을 관리해 봅시다. 전통적인 서버 기반에 애플리케이션 인증을 넣기 옛날에는 서버에 정보를 넘기고 서버는 데이터를 보고 로그인을 시켜줍니다. 서버는 세션 정보를 사용하여 사용자의 브라우저에 쿠키를 설정하거나 설정하지 않을 수 있다 세션이 연결된 상태에서 서버는 세션의 유효성을 검사합니다. 브라우저가 새로운 페이지에 접근하려면 쿠키를 보냅니다. 서버는 이 브라우저가 누구인지 압니다 "지난번에 접근했던 사람" 인증이 유효하면 서버는 페이지를 브라우저에게 보냅니다. 세션은 브라우저를 빠져나갈 때 까지를 의미 합니다. 사용자가 db에 접근해서 저장하고 싶은 때 유효한 세션을 통해서 저장할 수 있습니다. MEAN 스택에서의 전통적인 방법 접근 MEAN 스택에서는 어울리지 않습니다. node.js는 사..
Building an SPA with Angular - The next level[2]
웹/school(MEAN) 2021. 11. 23. Building an SPA with Angular - The next level[2] add review 페이지를 만들고 데이터를 제출하는 방법부터 배웁니다. 폼 이동 대신 페이지에 폼을 인라인으로 표시합니다. 입력 필드에 "데이터 바인딩" Express에서 만든 html을 가져와 씁시다. 앵귤러에서는 페이지를 변경하지 않고 데이터를 바인딩시켜줘야 합니다. [()] ="bingdingName" 데이터를 넣을 수 있습니다. HTML에서 ngModel을 사용하려면 FormsModule 및 REactiveFormsModuel을 app.module.ts로 추가해야 합니다. newReview로 묶어서 api에 보냅시다. 각 속성은 아직 받아오기 전이니 디폴드 값으로 지정해 줍시다. 컴포넌트에 정의되어 있으니 html에서도 사용할 수 있습니다. ngModel로 데이터 바인딩을 시킵니다. select..
Building an SPA with Angular - The next level[1]
웹/school(MEAN) 2021. 11. 17. Building an SPA with Angular - The next level[1] express로 짠 외부 기능을 앵귤러로 바꿔볼 것입니다. 디테일 페이지를 만들어야 합니다. 디테일 페이지의 레이아웃을 보면 컴포넌트를 어떻게 사용돼야 하는지 알 수 있습니다. 스케치한 내용입니다. 각각 컴포넌트들은 프레임워크 컴포넌트 안에 들어가 있습니다. 남은 컴포넌트는 디테일 페이지 컴포넌트, 로케이션 디테일 컴포넌트입니다. 3개의 컴포넌트를 포함하고 있는 details-page 컴포넌트를 만들어 봅시다. location details 컴포넌트 만들기 details-page 컴포넌트 만들기 3개를 포함하는 컴포넌트입니다. 레이아웃을 만들었습니다. 이 페이지를 볼 수 있게 라우터 설정을 해야 합니다. url을 설정한다는 뜻입니다. 라우팅 정의는 app.module.ts에서 합니다. :locationI..

티스토리툴바