웹 (6) 썸네일형 리스트형 [Modern][vue3] dialog 태그를 활용한 로딩 바 구현 Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다. 는 원래 모달을 구현하기 위해 제안된 스펙으로 2022년 3월에 HTML5의 기능으로 추가되었습니다. 모달을 위해 설계되긴 했지만 모달의 특성을 생각해보면 로딩으로 활용했을 때, 그 이점이 상당하다는 것을 알수 있습니다. div 태그로 로딩 바를 구현해보시면 이벤트를 완전히 차단하는게 꽤나 피곤한 작업이란걸 아실겁니다. backdrop 효과를 적용하기 위에 바깥에 div를 씌우고... 클릭 이벤트, 키보드 이벤트(tab 키 클릭), 스크롤 등 신경써야 할 부분이 상당히 많죠 dialog 태그를 이용해 로딩 바를 구현하면 많은 부분을 지원해주기 때문에 상당히 안정적입니다. 아래는 dialog가 지원해주는 기능입니다. dialo.. [NestJS][Lambda][DynamoDB] Serverless 구성 + CI/CD 2023-01-15 일에 구동 확인했습니다. NestJS + Lambda + DynamoDB 환경 구성은 아래 글을 참고해주세요. [Serverless]NestJS + Lambda + DynamoDB 구성 + CI/CD CI/CD 내용이 필요하신 분은 다음 글을 참고하세요. 요즘 Serverless 아키텍쳐의 인기가 많아 NestJS + Lambda + DynamoDB를 활용해 환경을 구성해 보았는데요. 신기술이면서, 관련 정보도 많이 없어 환경 구 aierse.tistory.com Github Actions를 활용하여 CI, CD를 구축해보겠습니다. 환경 구성을 마치신 분은 AWS 콘솔측 권한설정까지 모두 마치셨을겁니다. 따라서 깃허브 측의 환경 변수만 세팅하고, actions 코드만 작성하면 CI, .. [NestJS][Lambda][DynamoDB] Serverless 구성 CI/CD 내용이 필요하신 분은 다음 글을 참고하세요. [NestJS][Lambda][DynamoDB] Serverless 구성 + CI/CD2023-01-15 일에 구동 확인했습니다. NestJS + Lambda + DynamoDB 환경 구성은 아래 글을 참고해주세요. [Serverless]NestJS + Lambda + DynamoDB 구성 + CI/CD CI/CD 내용이 필요하신 분은 다음 글을 참고하세요. 요즘 Serveaierse.tistory.com 요즘 Serverless 아키텍쳐의 인기가 많아 NestJS + Lambda + DynamoDB를 활용해 환경을 구성해 보았는데요.신기술이면서, 관련 정보도 많이 없어 환경 구성에 정말 애를 많이 먹었습니다. 특히 AWS 자체가 업데이트되며 과거.. 리액트 프리랜서 체크리스트 출처(번역) Freelance React Developer Checklist 리액트 프리랜서로서, 저는 요즘 리액트 프로젝트에서 많은 고객들과 함께 일합니다. 이메일로 요청을 받을 때마다, 저는 보통 리액트 프리렌서 개발자 체크리스트 템플릿으로 답장합니다. 본질적으로 이 체크리스트는 리액트 프리랜서로서 프로젝트 참여를 더 원활하게 만듭니다. 왜냐하면 회사가 여러분을 고용하기 전에 양측의 요구 사항을 맞추기 위해 이 체크리스트를 통해 대화해야 하기 때문입니다. 이 글에서 체크리스트의 항목을 자세히 공유하겠습니다. 여려분이 직장을 찾는 구직자이든, 고용하려는 회사이든 상관없습니다. 리액트 프리랜서 체크리스트 프리랜서로서 회사와 일하기전에 항상 알고싶은 몇가지 세부사항이 있습니다. 이 프로젝트의 규칙이 뭔가요.. 리액트 폴더 구조 설계 5단계 출처(번역) React Folder Structure in 5 Steps 대규모 리액트 어플리케이션의 폴더 및 파일 구조를 어떻게 설계하는가는 핫한 주제 중 하나입니다. 사람들이 소규모부터 대규모 프로젝트에 이르기까지, 저에게 리액트의 폴더 구조를 설계하는 방법에 대해서 질문합니다. 이 주제에 대한 정해진 정답이 없기 때문에, 작성하는 데에 꽤 오랜 시간이 걸렸습니다. 지난 몇년동안 리액트를 구현하면서, 제 개인 프로젝트(freelance, React workshops)를 통해 어떻게 제가 이 문제에 접근하는지 설명해드리겠습니다. 5 단계를 통해서 자신에게 얼마나 필요한 것인지 아닌지 결정할 수 있습니다. 시작하겠습니다. 누군가는 "나는 파일이 이동될 때까지 옮기는걸 반복해" 라고 말합니다. 이건 1인 .. 리액트(React.js)를 배우는 방법 출처(번역) How to learn React.js 2020년 올해 많은 자바스크립트 개발자가 리액트 배우는 방법에 대해 관심을 가졌습니다. 최근 자바스크립트 생태계 설문조사에 따르면 많은 개발자가 모던 웹 어플리케이션을 만들기 위해 리액트를 선택했습니다. 리액트의 인기와 수요로 인해 많은 자바스크립트 개발자가 리액트를 배우고 싶어합니다. 이 가이드에서, 저는 초보자들이 다른 길로 새거나, 난이도의 벽을 느끼지 않게끔 리액트 학습에 대한 포괄적인 방법에 대해 알려드리겠습니다. 리액트"만" 배우기 배움에 왕도는 없습니다. 인내심을 갖고 학습해야합니다. 이건 모든 개발자에게 동일합니다. 개인적으로 제가 개발자가 되는걸 좋아하는 이유입니다. 개발자는 항상 새로운 것을 배워야합니다. 호기심을 가진 개발자라면 리.. 이전 1 다음
