[TIL] 2022.02.21 - amplify, React hover, json 줄바꿈

개발자의 삶

개발이라는 직업으로 일주일을 보냈고, 또다시 한주가 시작되었다.

야근이라면 치를 떨고, 부들부들 떨어했던 지난날과는 다르게,

자발적 야근을 택하고, 퇴근하고 와서도 개발과 관련된 공부 또는 정리에 시간을 쏟는데도

즐겁다. 무언가 계속 모르는 지식이 쌓이고 숙련도가 쌓이는 느낌이 들때면,

아직까지 후회없는 선택을 한 것같다!

초반에 갈아넣은 습관들과 지식들은 앞으로의 자양분이될거라 믿어의심치 않는다.

 

오늘 한일

• 콘핀스튜디오 스크립트 부분 마무리 : 마우스오버시 이미지 및 텍스트 변환,정규표현식을 통한 에러처리,스크롤 카운트업 애니메이션
• amplify 숙지 및 학습 후 세팅
  

오늘 배운것

 

• amlify 설치
  
  https://docs.amplify.aws/cli/start/install/
  

https://docs.amplify.aws/cli/start/install/

 

$ npm install -g @aws-amplify/cli

$ Brew serach aws
$ Brew install aws

$ aws configure 
-AWS Access Key ID [None]: 
-AWS Secret Access Key [None]: 
-Default region name [None]: 
-Default output format [None]: json

4.Credential
~/.aws/credentials 위치의 파일을 다음과 같이 셋팅하면 목적에 맞는 사용자 권한을 사용할 수 있음
파일이 없을 경우 aws configure 명령어를 통해서 생성 가능
~/.aws/credentials 
[default] 
aws_access_key_id=

5.Config
같이 생성되는 파일로 같은 이름으로 지역만 설정해주면 됨

6.배포준비환경 완료
$ amplify pull

 

•  Json 줄바꿈 처리
  줄바꿈이 필요한 문자열은 JSON 데이터에 '\n' 삽입
  split('\n') 처리
  줄바꿈이 필요한 지점을 기준으로 문자열 배열이 생성
  map()메쏘드를 이용해 <br/>과 함께 줄바꿈 문장 
  

  {item.hovercontent.split('\n').map((line) => {                         
      return (
        <ProcessText>
          {line}
          <br />
        </ProcessText>
      );
    })}

 

 

내일 할일

• 스튜디오 페이지 완료(카운트업 애니메이션, api연동)
• 웹 소스코드 구조화작업
• 공식문서 + 리액트 네이티브 다루는 기술 기반 학습
  
• Node.js학습