https://kofearticle.substack.com/ Korean FE article | Han Jung(한정) | Substack매주 한국어로 번역 혹은 작성된 프론트엔드 글을 전달합니다. Click to read Korean FE article, by Han Jung(한정), a Substack publication with thousands of subscribers.kofearticle.substack.com프론트엔드 기술에 관한 새로운 소식, 뉴스를 확인하기 위해 Korean FE article 팀의 아티클을 구독 중에 있다.그중 2월 첫 아티클을 보고 궁금한 점이 생겼다. React 프로젝트를 시작하는 방법에 관한 이야기였는데, 아카데미에서 배우며 프로젝트를 시작할 때 또는 작은 테스트..

[Week 2-1] 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. 들어가기 전에 PWA가 무엇인지 간단하게 정리하자면 Progressive Web Apps PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 앱스토어 혹은 구글플레이에서 설치 가능한 앱을 웹 기술로 구현했다고 생각하면 쉽다. https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames 프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN 이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다. developer.mo..

2월 챌린지에선 상황에 맞는 프론트엔드 개발 전략에 관한 주제로 진행된다고 한다. React의 장점인 SPA, 렌더링이 서버측과 클라이언트 측 어디에서 되는지에 따른 SSR, CSR과 웹 앱/네이티브 앱의 장점을 모두 활용한 PWA가 있다. 그 중 첫 번째 주제로 SPA에 대해 알아보는 시간이 되었다. [Week 1-1] SPA의 원리를 배우고, 사용자 경험을 향상하는 방법을 탐구합니다. 1-1) SPA의 기본적인 이해 SPA(Single Page Application) 웹 페이지가 하나의 애플리케이션으로 페이지의 리로드/리렌더링 없이 필요한 부분만 빠르게 업데이트하여 좋은 UX를 제공할 수 있다. SPA - 페이지 전환 없이 동적 컨텐츠 업데이트 - CSR - 초기 로딩 시간 길어짐 - 전통적인 SEO..

1월 원티드 챌린지에서 프론트 엔드에서도 테스트 코드가 필요하다는 것을 알게 되었다.프론트 엔드에서 테스트 코드를 활용한 경험을 담은 기술블로그의 글을 읽다 보면 공통적으로 말하는 장점이 있다.1. 오류를 빠르게 발견하고 수정할 수 있다.2. 다른 라이브러리/프레임워크로 쉽게 리펙터링이 가능하다.3. 로직의 흐름을 파악하기 쉬우므로 문서화 역할을 하며 새로운 팀원이 해석하기 쉽다. 여기에 추가적으로 TDD 방법론을 적용하였을 때 개발 시간이 줄어든다는 실제 사례를 에서 본 기억이 있다.복잡한 비즈니스 로직이 포함된 코드가 아닌 간단한 사칙연산 수준의 코드를 구현함에 있어서도 위처럼 유의미하게 차이가 발생했다. 챌린지에서 배웠던 내용을 한마디로 요약하자면 "UI 테스트는 하지 않고, 요구사항의 사용자 시나..

[Week 2-1] 백엔드 코드를 수정할 수 없을 때 프론트엔드가 할 수 있는 최적화 방법 3-1) 성능 측정 툴 소개 및 사용법 웹 애플리케이션의 성능을 측정하고 분석하는 데 사용할 수 있는 툴에 대해 알아보았다. 애플리케이션의 로딩 속도, 실행 시간, UX 등 다양한 측면에서 성능을 평가하고, 이를 통해 성능 저하의 원인을 찾아 개선할 수 있도록 도와준다. Lighthouse Lighthouse - 웹 성능을 분석하는 오픈 소스 - 주요 기능 1) 성능 분석 2) 접근성 검사 3) SEO 평가 4) PWA 기준 평가 https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko Lighthouse Li..

[Week 1-2] 테스트코드를 활용한 효율적인 리팩토링 2-1) 무엇을 테스트할 것인가? 오늘 챌린지에선 리펙터링시 테스트 코드를 활용할 것을 소개하고 있다. 개념으로만 테스트 주도 개발(TDD)이 중요하다고만 알고 있었는데 특히 프론트 엔드에서 무엇을 고려하여 진행해야 하는지 알 수 있었다. UI 테스트는 진행하지 않는다. 테스트를 계획할 때 무엇을 테스트 할 것인지 명확하게 파악을 해야 하는데 UI 테스트는 중요하지 않다. 컴포넌트 렌더링 순서를 확인하거나, 태그와 요소들의 간격 등은 굳이 테스트할 필요가 없다. 요구사항의 "사용자 시나리오"에 집중해야 한다. UI, Style 부분보다 "기능"에 더 중점을 두고 테스트를 해야한다. 회원가입 form에서 input이 제대로 되는지, 혹은 필수 항목들..

[Week 1-1] 전역변수를 설정하는 기준과 방법 -챌린지 강병진 멘토님- https://github.com/jasonkang14 jasonkang14 - Overview I believe software engineers can change the world. jasonkang14 has 47 repositories available. Follow their code on GitHub. github.com 1-1) 지역변수와 전역변수 비교 - 지역 변수 (Local Variable) 함수 내부에서 선언된 변수 지역 변수는 해당 함수 내부에서만 접근할 수 있으며, 함수가 종료되면 메모리에서 사라진다. 다른 함수에서는 같은 이름의 지역 변수를 사용해도 각각 독립된 메모리 공간을 가지므로, 서로 영향을 미..

5. 5부 아키텍처 좋은 아키텍처는 유스케이스를 그 중심에 두기 때문에, 프레임워크나 도구, 환경에 전혀 구애받지 않고 유스케이스를 지원하는 구조를 아무런 문제 없이 기술할 수 있다. - 클린 아키텍처(209p) 프레임워크 독립성 테스트 용이성 UI 독립성 데이터베이스 독립성 모든 외부 에이전시에 대한 독립성 - 클린 아키텍처(214p) 소프트웨어를 계층으로 분리하여 관심사의 분리를 목표로 한다. 이를 통해 외부 요소 없이 테스트가 가능하고 기존에 사용하던 DB를 바꾸어도 문제가 발생하지 않는다. https://medium.com/humanscape-tech/clean-architecture-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EC%99%80-%EB%8F%85%EB%A6%B..

클린 아키텍처 소프트웨어 아키텍처의 보편 원칙을 적용하면 소프트웨어 수명 전반에서 개발자 생산성을 획기적으로 끌어올릴 수 있다. 《클린 코드》와 《클린 코더》의 저자이자 전설적인 소프트웨어 장인 www.aladin.co.kr 소프트웨어 아키텍처의 보편 원칙을 적용하면 소프트웨어 수명 전반에서 개발자 생산성을 획기적으로 끌어올릴 수 있다. 《클린 코드》와 《클린 코더》의 저자이자 전설적인 소프트웨어 장인인 로버트 C. 마틴은 이 책 《클린 아키텍처》에서 이러한 보편 원칙들을 설명하고 여러분이 실무에 적용할 수 있도록 도와준다. 단순히 선택지들을 나열하는 책이 아니다. 상상할 수 있는 모든 분야의 소프트웨어 환경에서 반 세기를 살아온 저자의 경험에 기초하여, 성공하기 위해서는 어떤 선택을 해야 하고 무엇이 ..