조은의 프론트엔드 실무 가이드

커뮤니티 <Facebook의 주력언어>확장성 <Next, Gastby>현재는 리액트가 UI의 Basic인 느낌, 리액트에서 확장된 것들도 많이 사용하고 있습니다.리액트 네이티브 <리액트 시장의 확대 촉진>경쟁상대의 부재 <리액트를 대체할만한게 없어

클래스 컴포넌트는 장황 합니다클래스 선언, 이름, 익스텐즈 설명 등 여러 일을 해야합니다.객체지향 관점에서는 필요하지만 JSX 엘레먼트를 만든다는 관점에서는 불필요한 일을 반복한다고 느껴집니다.누가봐도 함수형 컴포넌트가 간단합니다.동일한 작업을 진행하더라도 조금 더 직

타입스크립트 : 타입을 활용해서 대규모 서비스 등에 유용합니다.자바스크립트 : 타입프리(Type Free), 대부분의 케이스에서 알아서 잘 동작합니다.두 언어의 용법은 크게 다르지 않습니다.인터페이스를 보며 각각의 타입이 어떻게 생겼는지 파악해서 데이터가 들어오면 어떻

일반적으로 백엔드 엔지니어가 API 로 만들어서 내려주면 프론트엔드 엔지니어가 사용하는 방식으로 합니다.CRUD 기준으로 데이터베이스를 조회하고 변경하는 식으로 나오는 코드가 RESTful API 의 핵심이기 때문입니다.SQL(씨퀄)문 자체를 이해하는 게 조금 어렵습니

만들 사이트에 대한 스펙(기능) 및 구조를 분석하고 어떤 아키텍쳐, 라이브러리를 사용할지 선택합니다.

개발할때 검색하는 습관은 중요하고 의미가 있지만 대부분은 공식문서에 나와 있기때문에 공식문서를 숙지하고 확인 하는 것이 중요합니다.npx create-next-app 등을 사용하면 커스터마이저블 하지 못 하다는 의견이 있습니다.다만 커스터마이저블 한 것이 얼마나 필요한

패키지를 처음 만들고 README 작성을 많이 놓칩니다. 사내 프로젝트 중에서도 그런 경우가 많이 있습니다. 문서화는 굉장히 중요합니다. 모르는 사람이 프로젝트를 봐도 어떤 테크 스펙, 어떤 목적, 누가 포함되어 있는지 나와 있어야 합니다. 그래서 리드미를 제일 먼저

유닛 테스트코드상으로 기능을 점검하는 것입니다.로직을 파악하는 것에 가깝습니다.테스트의 기초에 가깝다고 생각합니다.E2E 테스트End to End 테스트의 약자입니다.쉽게 생각하면 실제 동작을 바탕으로 기능을 점검한다에 가깝습니다.실제 웹사이트에서 개발자의 의도대로 동

배포환경을 어떻게 세팅하냐는 독단적으로 결정 사항을 아닙니다.동료들과 많은 논의를 거쳐 결정해야 합니다.NextJS 는 Vercel 이 만들었기 때문에 공식문서에서는 Vercel 을 강조하고 Vercel 을 사용하면 최적화가 되어 있을때 보다 빨리 해결할 수 있습니다.

이전에 생성해놓은 컨테이너 환경을 클라우드에 올리면 클라우드 내에서 동작하게 됩니다. 보편적으로 와 함께 사용하거나 에 올립니다. 환경에 따라서 에 올릴 수도 있고 어느 곳에 업로드를 하거나 , 전부 사용하지 않고 로만 에 올릴수도 있습니다. 비즈니스 방향에

개발에 들어가기에 앞서 큰 그림을 먼저 그려야합니다. 페이지 전체의 데이터 플로우를 알아야 합니다. 데이터가 흐르는 전체적인 구조를 봐야 데이터를 API, 설정파일, 목데이터(Mock Data) 등 어떻게 정리해야할지 알 수 있습니다. 보통은 보이는 화면만 그리게 되는

데이터 플로우를 통해서 유저가 어떻게 데이터를 활용할지 알기 어렵기 때문에 유저 시나리오를 따로 작성합니다. 유저가 사이트를 어떻게 이용할지를 정리하는 단계입니다. 비회원, 회원, 구매 회원, 어드민 크게 네 가지 유저들에 대한 시나리오를 작성합니다. 비회원 : 사

웹사이트 개발시 순서에대한 여러 철학이 있지만 강사님은 페이지를 먼저 만드는 것을 선호합니다. 페이지 단위가 어느정도 나와있어야 어떤 라우터를 태울지 판단하고 어떤 사이트의 어떤 구조를 가질 수 있는지 알 수 있기 때문입니다. 페이지를 만들기 전에 테스트 코드를 먼저