⚡️ 프로젝트에서 backend api를 clone 받고 frontend 프로젝트를 시작할 때 하나의 레포에 합치는 방법 1. 폴더 생성 2. VS code 실행 3. 생성된 폴더에서 터미널을 실행 4. git init 5. 레포지토리 생성 (README.ms 포함해서 생성) 6. git clone 레포주소 7. 클론해준 부모레포의 디렉토리로 이동 8. git create-react-app frontend(폴더이름) 9. 다른 프로젝트 클론 받아오기 ( 자식 레포를 remote 로 등록 ) ⓵ git remote add [remote name] [child git 주소] ⓶ remote name : 원하는 이름 ( 의미없음 ) ⓷ child git 주소 : 클론 받아올 레포주소 10. subtree 명령..

⚡️ SPA vs MPA SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다. 반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. 그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다. 그래서 MPA를 SSR(Server Side ..

⚡️ Mock Data 란? 프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있습니다. 이러한 경우Mock Data를 만들어 사용한다. Mock Data란 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터입니다. ⚡️ Mock Data 를 사용하는 이유 1. 백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발할 수 있습니다. 2. 백엔드 API의 구성을 미리 맞춰볼 수 있습니다. 3. 실제로 API 통신을 진행할 때 원활하게 할 수 있습니다. ⚡️ Mock Data 생성 Mock Data는 실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에 .json 확장자 파일로 JSO..

⚡️ 상수 데이터란? 페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있습니다. 이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있습니다. 즉 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 의미합니다. ⚡️ 상수 데이터를 사용하는 이유? 반복되는 UI를 하드코딩으로 일일이 만들어두게 되면 코드가 길어져서 가독성에 좋지 않고 수정이 필요할 시 해당하는 부분을 찾기 힘들어 유지보수가 어렵다는 문제가 있습니다. 하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있습니다. 이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return하는 JSX 부분만, 내..

⚡️Sass 와 Scss 차이점 // .sass nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none // .scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } ⓵ sass 문법을 활용한 방법 ⓶ scss 문법을 활용한 방법 sass보다 scss 문법을 사용하는 것을 권장하고 있습니다. 왜냐하면 sass의 문법 ..

⚡️삼항연산자 자바스크립트 기본 문법 중에 삼항연산자라는게 있습니다. if가 들어갈 수 없는 곳들에 간략하게 if문을 넣을 수 있는 방법입니다. 조건문 ? 참일때실행할코드 : 거짓일때실행할코드 3 > 1 ? console.log('맞아요') : console.log('아님') ⚡️조건부로 타입만들기 type Age = T; 이러면 이제 Age 이렇게 쓰면 그 자리에 number가 남습니다. (타입변수에도 타입파라미터 넣기 가능) if문을 사용하여 만약 T가 string이면 string, 그게 아니면 unknown 를 남기도록 하고싶다. 그럴때 타입 조건식은 주로 extends 키워드와 삼항연산자를 이용합니다. "extends는 왼쪽이 오른쪽의 성질을 가지고 있냐" 라는 뜻으로 사용할 수 있기 때문에 조건..