Bigc인턴

모노/멀티/터보 레포는 무엇인지 어떻게 실행: 여러개의 구별된 프로젝트를 포함하고 있는 하나의 저장소: 프로젝트별로 레포를 생성하여 만드는 방법단순히 현재 우리가 주로 사용하고 있는 레포지토리 방식이라고 생각하면 됨1개의 repo 안에 모든 서비스나 프로젝트가 서로 존

: Utility-First 컨셉을 가진 CSS 프레임워크미리 세팅된 유틸리티 클래스를 활용하는 방식으로 스타일링이 가능Utility-First : 미리 세팅된 유틸리티 클래스를 활용해서 HTML 코드 내에서 스타일링 하는 것CSS의 각 속성들을 클래스에 직관적으로 표

맥 상에서 tree 구조를 터미널에 띄우고 싶으면 다음과 같이 하면 됨.$ brew install tree$ tree --help

: 데이터 가져오기를 위한 React Hooks먼저 캐시로부터 데이터를 반환한 후, fetch 요청을 하고, 최종적으로 최신화된 데이터를 가져오는 전략SWR를 사용하면, 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됨UI가 항상 빠르고 반응적이게 반응하

: React 전용 상태관리 라이브러리2가지 개념으로 이루어져있다. (Atoms, Selectors)yarn add recoilrecoil state를 사용할 컴포너트는, RecoilRoot 태그로 해당 부분들을 감싸주어야함.모든 곳에서 보통 사용하니까, App.ts에

: 사용자가 특정 액션을 취하고 난 후 짧은 시간동안 메세지를 보여주는 박스useToast 훅으로 토스트 메세지 처리하기

프로젝트 전체에서 사용 가능한 JS / TS 함수를 저장React 컴포넌트와 상관없이 사용 가능한 함수들EX) 데이터 변환 및 매핑, 날짜 및 시간 관련, 에러 처리커스텀 React hook을 저장하는데 사용React 기능(상태 관리 등)을 추상화해서 컴포넌트간에 재사

: React를 기반으로 만들어진 프레임워크React 코드를 기반으로 하며, React를 개발하는 데 사용됨React의 기능 + 추가적인 기능 (서버 사이드 렌더링, 정적 생성, 라우팅 등)의 기능 제공일반적으로 Next.js는 다음과 같은 파일 구조를 가짐프론트엔드에

Framer 페이지: 애니메이션 터치기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리피그마처럼 GUI를 설계하고, 웹 배포를 위한 몇가지를 설정하고 배포를 누르면, 누구나 접속 가능한 웹 사이트가 만들어짐. 프레이머는

: .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환ref : 변경 가능한 값을 담고 있는 상자 = 객체이때, ref 객체 안의 값은 React의 생명주기에 독립적!! ( = re-render와 상관 없이 유지되는 값!!!!!)∴ 값이

개발자 개인 컴퓨터 또는 로컬 서버에서 애플리케이션을 실행하는 환경코드 수정, 개발, 단위 테스트를 위해서 사용됨일반적으로 팀이 공유하는 테스트 서버 또는 특정 환경에서 애플리케이션을 실행하는 환경로컬 환경과 유사하지만, 실제로 사용될 서비스에 더 가까운 성격을 가지고

: 복잡한 화면을 분해 가능한 가장 작은 단위인 원자 단위까지 나누어서, 각 요소간 컴포넌트의 재활용성을 높이고 복잡한 화면 구성을 쉽게 제작하는 접근 방식원자 : 더 이상 쪼갤 수 없는 최소 단위인터페이스를 작고 단순한 요소로 분리하는 개념Atoms(원자)원자는 버튼

: 낡은 기술, 방법론, 컴퓨터 시스템, 소프트웨어 등을 말함공생해야 하거나 기반이 되는 오래된 시스템과거로부터 물려 내려온 것들을 의미하는 내용현대까짇 남아서 쓰이는 기술을 의미 || 더 이상 쓰이지 않더라도 현대의 기술에 영향을 주는 경우

styled components의 themeProvider는 context api를 기반으로 만들어짐∴ themeProvider로 감싸진 component들은 theme 정보를 props형태로 넘겨받아서 사용이 가능아래처럼 우선 theme.ts 파일을 생성해서 전역에서

styled components의 themeProvider는 context api를 기반으로 만들어짐∴ themeProvider로 감싸진 component들은 theme 정보를 props형태로 넘겨받아서 사용이 가능아래처럼 우선 theme.ts 파일을 생성해서 전역에서

https://velog.io/@a_in/React-SVG-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0이렇게 SVG 컴포넌트를 만들어서, SVGMap에 값들을 저장만 해두는 방식으로 사용

이미지 사이즈 최적화, 이미지 공통 컴포넌트화Next image 사용법: SPA의 서버 사이드 렌더링을 지원하는 React 기반SPA : 하나의 페이지를 사용하는 애플리케이션 ( 서버로부터 새로운 페이지를 가져오는 것 X): 이미지 컴포넌트 하나로 손쉽게 이미지 최적화

개발자를 위해서 빌드와 테스트를 자동화하는 과정해당 레포로 코드를 저장하면, CI는 변경 사항을 자동으로 테스트해서 애플리케이션에 문제 없음을 보장코드 변경 사항이 코드 저장소 (ex. main, dev)에 저장되면 CI를 시작 \- CI 도중 문제가 생기면 실패하니

delivery : 웹페이지나 이미지, 동영상 등의 컨텐츠를 서버에서 사용자에게로 전송하는 것을 의미AWS의 CloudFront 등와 같은 CDN 서비스를 사용해서 정적/동적 컨텐츠 전달속도를 높일 수도 있음CDN을 사용하면 서버로 직접 요청들이 들어오지 않기 때문에,