FrontEnd :-)

항해99 64일차 2022. 7. 11.(월) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 중간발표 발제(10시), 오전 팀 회의, 버튼 컴포넌트 생성 등 JS 스터디 항해99 65일차 2022. 7. 12.(화) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 이번주 1차 프+백 통합테스트(저녁 이후) JS 스터디 항해99 66일차 2022. 7. 13.(수) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 중간발표 자료 준비(FE) JS 스터디 항해99 67일차 2022. 7. 14.(목) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), JS 스터디 항해99 68..

파일을 수정하면 정상적으로 나왔다가, 새로고침하면 map을 읽을 수 없다는 오류가 뜸!! data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문.....! 옵셔널 체이닝으로 문제 해결! {detailList?.applyList?.map((value) => { (참고) https://ko.javascript.info/optional-chaining 옵셔널 체이닝 '?.' ko.javascript.info https://aosjehdgus.tistory.com/132 [Javascript] 옵셔널 체이닝 (Optional Chaining)을 사용해보자 Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사..

항해99 57일차 2022. 7. 4.(월) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 메인 페이지 애니매이션, 상세페이지 계속 JS 스터디 항해99 58일차 2022. 7. 5.(화) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 상세페이지 계속, 프론트 회의 JS 스터디 항해99 59일차 2022. 7. 6.(수) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 메인페이지(1440px기준) 뷰 완성, 푸터, 프론트-백 통합 테스트(상세페이지 apply C까지 테스트 성공) JS 스터디(회의때문에 불참) 항해99 60일차 2022. 7. 7.(목) 실전프로젝트 (프론트2+백3+디자이너1 협업) ..

https://wsss.tistory.com/1507 원 모양의 텍스트 애니메이션 만들기 See the Pen Circular text by Fabio Ottaviani (@supah) on CodePen. 원 모양의 텍스트 애니메이션 만들기 wsss.tistory.com 위 블로그를 참고하여 리액트에서 글씨 구부려서 회전시키기를 구현함. 처음엔 HTML, SCSS 코드를 그대로 활용하고, styled-components에서 animtaion 효과와 @keyframs spin 을 이용했다. 하지만 박스 전체가 움직이고 글씨는 구부려지지 않았는데... HTML 부분이 svg 태그로 시작해 닫히길래 svg 파일을 만든 다음 임포트해봤지만, 제대로 반영되지 않았다. 다시, 페이지에 그대로 넣어봤더니, 오류가 ..

항해99 50일차 2022. 6. 27.(월) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 기획 일부 수정(스코프 줄이기 등), API 일부 수정, 회원가입 기능 구현 95% 완성(CSS는 제외) JS 스터디 항해99 51일차 2022. 6. 28.(화) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 디자이너 와이어프레임 작업 확인하며, 의견 공유, 회원가입, 로그인 기능 구현 완료, 소셜로그인 공부중 JS 스터디 항해99 52일차 2022. 6. 29.(수) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(6명), 로그인/회원가입 기능 구현 테스트 완료 JS 스터디 항해99 53일차 2022. 6. 30...

CI/CD 파이프라인 구축 과정 AWS : S3 버킷 생성 , CloudFront 생성, IAM 생성 -> GITHUB ACTIONS : 연결 (yml 파일 생성) AWS S3 : Simple Storage Service. 파일이 담긴 서버의 역할을 대신하는 서비스. 리액트에서 빌드한 파일을 업로드해서 사용! Cloudfront : 정적 또는 동적인 웹사이트 컨텐츠 다양한 데이터를 AWS에서 안전하게 전달 제공하는 CDN (Content Delivery Network) 서비스. 이걸 통해서 SSL* 과 더 빠른 접속속도 (CDN) 를 보장한다. => S3라는 저장소에 올렸다면 이제는 실 사용자들이 우리의 정적인 웹사이트를 사용할 수 있도록 Cloudfront에 배포하는 과정. *SSL(Secure Soc..

항해99 43일차 2022. 6. 20.(월) 클론코딩 (프론트3+백3 협업) D반 - 클론코딩 JS 스터디 항해99 44일차 2022. 6. 21.(화) 클론코딩 (프론트3+백3 협업) D반 - 클론코딩 JS 스터디 항해99 45일차 2022. 6. 22.(수) 클론코딩 (프론트3+백3 협업) D반 - 클론코딩 JS 스터디 항해99 46일차 2022. 6. 23.(목) 클론코딩 (프론트3+백3 협업) D반 - 클론코딩, 발표 JS 스터디 항해99 47일차 2022. 6. 24.(금) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 - 실전프로젝트 8조(5명), 기획 회의, 디자이너 합류 JS 스터디 항해99 48일차 2022. 6. 25.(토) 실전프로젝트 (프론트2+백3+디자이너1 협업) D반 -..

[테트리스 패배해서 쓰는 TIL] CI/CD? => 서비스 빌드부터 배포까지의 과정을 자동화하는 과정(Code > Build > Test > Release > Deploy) 더보기 CI/CD는 애플리케이션의 통합 및 테스트 단계에서부터 제공 및 배포에 이르는 애플리케이션의 라이프사이클 전체에 걸쳐 지속적인 자동화와 지속적인 모니터링을 제공합니다. 이러한 구축 사례를 일반적으로 "CI/CD 파이프라인"이라 부르며 개발 및 운영팀의 애자일¹ 방식 협력을 통해 지원된다. - 자동화된 테스트는 CI/CD 파이프라인의 여러 테스트 및 릴리스 단계를 수행할 수 있어야 하기 때문에 많은 선행 투자 필요. - CI/CD 툴 : Jenkins, Buildkite, GitHub Actions, Bitbucket Pipel..