feat : a태그 새창으로 열기 #34

- get요청으로 받아온 markdown에서 a 태그에 target 어트리뷰트에 _blank 추가

client/src/components/common/MarkdownRender.js

@@ -36,6 +36,10 @@ const Wrapper = styled.div`
     line-height: 2;
   }
   h1 {
+    @media (max-width: 400px) {
+      font-size: 28px;
+      line-height: 1.4;
+    }
     font-size: 36px;
     line-height: 1.2;
     font-weight: 500;
@@ -53,6 +57,28 @@ const Wrapper = styled.div`
     margin-top: 80px;
     margin-bottom: 40px;
   }
+  h3 {
+    @media (max-width: 400px) {
+      font-size: 17px;
+      line-height: 1.4;
+      margin-top: 15px;
+    }
+    font-size: 20px;
+    line-height: 1.2;
+    font-weight: 500;
+    margin-top: 30px;
+  }
+  a {
+    font-size: 16px;
+    color: #7fcde1;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+    &:visited {
+      color: #7fcde1;
+    }
+  }
   pre {
     @media (max-width: 400px) {
       margin-top: 15px;
@@ -66,32 +92,33 @@ const Wrapper = styled.div`
 
 function MarkdownRender(props) {
   const { markdownContent } = props;
+  const renderers = {
+    a: ({ children, href }) => (
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    ),
+    code: ({ node, inline, className, children, ...props }) => {
+      const match = /language-(\w+)/.exec(className || "");
+      return !inline && match ? (
+        <StyledCodeBlock
+          {...props}
+          style={vscDarkPlus}
+          language={match[1]}
+          PreTag="div"
+        >
+          {String(children).replace(/\n$/, "")}
+        </StyledCodeBlock>
+      ) : (
+        <code {...props} className={className}>
+          {children}
+        </code>
+      );
+    },
+  };
   return (
     <Wrapper>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || "");
-            return !inline && match ? (
-              // !inline && match 조건에 맞으면 하이라이팅
-              <StyledCodeBlock
-                {...props}
-                style={vscDarkPlus}
-                language={match[1]}
-                PreTag="div"
-              >
-                {String(children).replace(/\n$/, "")}
-              </StyledCodeBlock>
-            ) : (
-              // 안 맞다면 문자열 형태로 반환
-              <code {...props} className={className}>
-                {children}
-              </code>
-            );
-          },
-        }}
-      >
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={renderers}>
         {markdownContent}
       </ReactMarkdown>
     </Wrapper>

server/_post/jwt.md

@@ -36,9 +36,7 @@ jwt 토큰을 발급 받을때만 DB를 거치고 그다음의 인증요청때
 
 서버에서 access토큰은 body로 보내고 refresh토큰은 cookie에 저장했습니다
 
-access 토큰은 header에 고정해서 api요청을 할때마다 같이 보내고 유효 시간은 5분으로 설정(5분뒤 요청을 보내면 refresh 토큰으로 다시 access 토큰을 발급 받아야 합니다)
-
-![jwt](../img/jwt/5.jpeg)
+access 토큰은 header에 고정해서 api요청을 할때마다 같이 보내고 유효 시간은 1시간으로 설정(1시간뒤 요청을 보내면 refresh 토큰으로 다시 access 토큰을 발급 받아야 합니다)
 
 ```js
 const httpClientForCredentials = axios.create({
@@ -56,9 +54,11 @@ refresh토큰은 유효 시간을 2주로 설정하고 access토큰이 유효하
 
 ## 백과 프론트가 도메인이 다를때 쿠키 주고 받기
 
+![jwt](../img/jwt/5.png)
+
 도메인은 지금 블로그 url중 sheepdog13.blog부분 입니다.
 
-제 블로그는 서버는 [render](render.com) PaaS(Platform as a Service) 서비스로 배포 하고, 프론트는 aws cloudfront를 이용해서 서로 도메인이 다릅니다. 도메인이 다를때 쿠키를 교환할려면
+제 블로그는 서버는 [render](https://render.com) PaaS(Platform as a Service) 서비스로 배포 하고, 프론트는 aws cloudfront를 이용해서 서로 도메인이 다릅니다. 도메인이 다를때 쿠키를 교환할려면
 
 1. https 설정을 해야합니다.
 2. cookie 속성중 하나인 sameSite 속성을 none으로 설정해야 합니다.
@@ -98,3 +98,13 @@ res.cookie("refreshtoken", userdata.token, options).status(200).json({
 ```
 
 cors설정은 볼륨이 많이 질 거 같아서 다음 포스팅 때 정리하겠습니다.
+
+### git issue
+
+- [accesstoken, refreshtoken으로 로그인 구현](https://github.com/sheepdog13/sheepdog.blog/issues/26)
+
+### 참고자료
+
+- [프론트에서-안전하게-로그인-처리하기](https://velog.io/@yaytomato/프론트에서-안전하게-로그인-처리하기)
+- [Access-Token-Refresh-Token-원리-feat-JWT](https://inpa.tistory.com/entry/WEB-📚-Access-Token-Refresh-Token-원리-feat-JWT)
+- [https://jeleedev.tistory.com/174](https://jeleedev.tistory.com/174)

server/models/User.js

@@ -71,7 +71,7 @@ userSchema.methods.generateToken = async function () {
   var user = this;
   // jsonwebtoken을 이용해서 token을 생성하기
   var accesstoken = jwt.sign({ username: user.name }, SecretKey, {
-    expiresIn: "5m",
+    expiresIn: "1h",
   });
   var refreshtoken = jwt.sign(user._id.toHexString(), SecretKey);
   // refreshtoken을 db에 저장한다.