react15 AWS 한국 사용자 모임 - 프론트엔드 Next.js 이미지 최적화 소모임 후기 AWS 한국 사용자 모임에서 프론트엔드 소모임이 열린다고 하여 다녀왔다. AWS 한국 사용자 모임 링크 : https://www.meetup.com/awskrug/ AWSKRUG - AWS한국사용자모임 (서울, 한국(대한민국)) 본 그룹은 AWS한국사용자모임(AWSKRUG)의 정기 모임 및 소모임 운영 사이트로서 최신 활동 소식 및 행사를 올려드릴 예정입니다. 더 자세한 것은 https://facebook.com/groups/awskrug 를 참고하세요. www.meetup.com AWS이지만 인프라나 백엔드뿐만 아니라 프론트엔드, 스타트업 등 다양한 주제의 세미나가 열린다. https://www.meetup.com/awskrug/events/292866390 Login to Meetup | Meetup.. 2023. 5. 14. 스타트업 개발팀의 React Next.js 마이그레이션 도전기 나는 술담화라는 스타트업 회사에 다니고 있다. 2021년 초에는 php 기반의 웹 페이지에서 React를 도입했고, 이번 2022년 5월부터 NextJs를 도입했다. React에 NextJs를 Migration 하는 과정은 쉽지 않았다. 기존에 진행하던 회사 매출에 중요한 프로젝트도 동시에 진행해야 했고, 폴더 구조와 라우터가 완전히 바뀌기 때문에 버그가 없도록 유의해야 했다. 소규모 개발 인원으로 어떻게 성공적으로 Migration 했는지 이야기해 보겠다. 일단 먼저 시작하기에 앞서 NextJs가 무엇인지 간략하게 설명하겠다. (이 글은 술담화 프론트엔드팀 개발자 이병수, 정윤기 님과 함께 작성하였습니다.) NextJs란 무엇인가? 전통적인 웹 사이트는 글 위주의 페이지였다. 사진이나 영상은 거의 없었.. 2022. 12. 28. 술담화 쇼핑몰 Form 에러 처리 변경하여 결제페이지 체류 시간 감소, 이탈률 감소 시키기 술담화 쇼핑몰(https://sooldamhwa.com/)에서 8월 말 선물하기 기능을 추가하면서 결제 페이지의 대대적인 디자인 변경이 있었다. 결제 페이지 쪽 개발을 하면서 기존 결제 기능에 개선하고 싶은 부분을 발견했다. 술담화에는 장바구니에 상품을 담아서 결제하거나, 제품을 바로 구매하는 경우 결제 페이지로 이동한다. 결제 페이지에서 배송지 확인 및 수정, 주문하는 상품 확인, 결제 방법 선택, 쿠폰 선택, 포인트 입력, 정보제공 동의를 한 뒤에 결제 버튼을 누르면 결제가 진행된다. 기존에는 결제 버튼은 항상 비활성화되어 있고, 결제에 필수인 항목인 결제 방법과 개인정보 제공 동의를 하면 결제 버튼이 활성화되어 결제를 할 수 있는 방식이었다. 이 방식은 유저가 어떤 항목이 필수로 입력해야 하는지 알.. 2022. 10. 10. [코드숨 리액트 강의] 5주차 회고 - 비동기 코드에서 Thunk를 쓰는 이유 드디어 강의의 절반을 넘게 들었다! 8주차까지면 끝인데 벌써 5주차가 끝나다니 시간 참 빠르다. 이번주는 수요일 휴일이 있어서 여유가 있었다. redux와 비동기 fetch를 TDD로 개발하는 것을 배웠다. 지난번 첫 TDD를 개발해서 그런가 이번 과제는 처음 TDD를 접했을 때 보단 수월했다. 과제를 월요일부터 시작해서 제출하면 더 좋을 것 같다. 코드 리뷰를 좀 더 받는게 나에게 큰 도움이 될 것 같다. -> 내일부터 과제 해보자! Fetch 테스트 jest로 테스트하는 것은 런타임 때 테스트하는 것이 아니기 때문에 실제로 fetch 이후 response를 받아서 테스트가 진행되지는 않는다. useSelector.mockImplementation((selector) => selector({ categ.. 2022. 6. 6. [D3JS] 4. 얼굴 그리기 with React & ES6 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다. 이번 강의에서는 - 리액트 컴포넌트 - 리액트 Props - JSX transpilation - ES6 - ES5의 함수와 ES6의 화살표 함수 - ES5의 var vs ES6의 let, const - ES6의 비구조화 할당 에 대해서 배웁니다. 우리가 사용하는 앱들도 새로운 업데이트가 생기듯 자바스크립트도 새 기능들이 업데이트 됩니다. 자바스크립트의 표준은 ECMA 스크립트인데요, 그래서 자바스크립트는 ECMA 스크립트 2019 혹은 ES6와 같은 이름으로 버전이 명명됩니다. ECMA 스크립트에 대한 설명은 위키백과 한국어보다 영어에 더 설명이 잘 되어 있습니다. https://en.wikipedia.org/wiki/E.. 2021. 10. 9. [D3JS] 2. svg로 얼굴 그리기 이 글은 https://youtu.be/2LhoCfjm8R4 강의의 2번째 강의를 요약하였습니다. [ 웹 기술을 이용하는 이유 ] 시각화를 하는데 다른 기술(파이썬, R, 자바 등)이 아니라 웹 기술을 이용하는 이유는? 1. 웹 브라우저를 이용하여 누구나 접근 가능하다. 2. 내 컴퓨터에 설치할 필요가 없다. 3. 모던 자바스크립트 기술을 이용할 수 있다. 4. 커스텀 디자인 작업이 가능하다. 5. 상호 작용이 가능하다. 우리가 데이터 시각화를 하기 위해 쓰이는 기술은 위와 같습니다. 1. HTML : 웹 페이지의 내용과 간단한 형식을 표현합니다. 일종의 뼈대(Skeleton)과 같습니다. 2. CSS : 웸 페이지를 꾸밀 수 있습니다. 일종의 Skin(피부), Theme(테마)와 같습니다. 같은 HTM.. 2021. 10. 3. 이전 1 2 다음
