jineecode

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 자바스크립트를 이용하여 브라우저에서 직접 페이지를 렌더링하는 것을 의미한다. 장점: 일단 로드되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아진다. 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다. 단점: 애플리케이션 규모가 커질수록 JS양이 증가하여 페이지가 다른 면에서 무거워질 수 있다. 초기 페이지 로드에 더 많은 시간이 걸린다. SEO에 친화적이지 않다. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. CSR의 단점을 극복하며 SPA의 장점도 가져갈 수..

1. 사건의 발단 전엔 못 본 거 같은데 다크모드 버튼을 토글할 때, 폰트가 깜빡이는 현상을 목격. 가장 먼저 든 생각은 이게 말로만 듣던 FOUC ('style이 적용되지 않은 내용'이 '깜빡'이는 현상) 인가? 라는 생각에 도달함 그러나 엄밀히 말해, 폰트만 이런 모습을 보이고 있는 것 같아서 FOUT(텍스트가 깜빡여보이는 현상. 즉, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상)으로 추측했음 말로만 듣던 FOUT를 목격하는 건 처음이라 당황스러우면서도 신나게 버그를 해결하기로 결심 2. 그럼 해결 방법을 찾아보자! https://web.dev/avoid-invisible-text/ 글꼴 로드 중 보이지 않는 텍스트 방지 글꼴은 로드하는 데 시간이 걸리는 대용량 파일인..

프리온보딩 프론트엔드 챌린지 2차 수강 도중 애매하게 알고 있었거나 새로이 알게된 정보 정리 1. new.target new.target 속성(property)은 함수 또는 생성자가 new 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. 우리는 사용자를 위해 일부러 에러를 낼 수 있지만, 동료 개발자를 위해 에러를 낼 줄도 알아야 한다. 예를 들어, 생성자를 사용하여 init 코드를 써야만 한다고 해보자. 동료 개발자가 이를 쓰지 않았을 때, 에러를 내주어야 한다. 이럴 때 쓸 수 있는 것이 new.target 이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new.target new.target - JavaSc..

1. CI? Continous Integration은 코드를 지속적으로 통합해나가는 것. 코드의 통합은 단순히 코드와 코드를 합치는 것뿐만이 아니라 코드를 테스트하고 유효한지 검사하는 확인. 2. CD? Continuous Deployment는 CI 과정을 통해서 성공적으로 통합된 코드들을 실제 사용자가 사용하고 있는 Production 환경에 배포하는 것 3. 설치형 / 클라우드형 설치형: Jenkins 클라우드형: Github Actions 4. Github Actions 구성요소 name: CI/CD on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/che..

원격 저장소 브랜치 삭제하기 git branch -d 이 명령어는 local repositorie에서만 삭제가 되고 원격에서는 삭제되지 않는다. 원격 저장소의 브랜치까지 삭제하기 위해서는 명령어가 한가지 더 필요하다. git push origin --delete 로컬 브랜치 정리 (--prune 옵션 사용) 원격 저장소에 브랜치가 삭제되었으나, 로컬 저장소에는 그 브랜치가 유효한 경우, 로컬 브랜치도 같이 정리해주어야 한다. 아래 명령어로 정리할 브랜치가 어떤 것인지 체크해본다. git branch -r // 원격 저장소의 브랜치 목록 git branch -a // 모든 브랜치 목록 특정 원격 저장소의 삭제된 로컬 브랜치를 정리하려면 git fetch --prune 모든 원격 저장소에 대한 삭제된 브랜치..

프리온보딩 프론트엔드 챌린지 1차 수강 도중 애매하게 알고 있었거나 새로이 알게된 정보 정리 1. map 등 메서드를 사용할 때, number[]를 썼다면 number 관련 method가 추론된다. num 위에 커서를 올리면 타입추론이 되고 있는 것을 확인할 수 있다. https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gRgDQwBMBAzALoDcAUIsigHQC2cADgBQCWUApoxgHwwuvejAD0YmIAGFwKHjgFNnABh2AXcZiAcFsAnTfQCUQA TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets ..

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#type-assertions Documentation - Everyday Types 언어의 원시 타입들. www.typescriptlang.org 때로는 TypeScript보다 당신이 어떤 값의 타입에 대한 정보를 더 잘 아는 경우도 존재합니다. 예를 들어 코드상에서 document.getElementById가 사용되는 경우, TypeScript는 이때 HTMLElement 중에 _무언가_가 반환된다는 것만을 알 수 있는 반면에, 당신은 페이지 상에서 사용되는 ID로는 언제나 HTMLCanvasElement가 반환된다는 사실을 이미 알고 있을 수도 있습니다. 이런 경우, _타입 단..

getServerSideProps에서 context를 가져올 때 타입에러가 발생할 경우, 확장시켜서 사용한다. export const getServerSideProps: GetServerSideProps = async (context) => { const { userSeq } = context.params; //'ParsedUrlQuery | undefined' 형식에 'userSeq' 속성이 없습니다.ts(2339) ... }; 이때 query는 string으로 받기 때문에, userSeq가 number로 와야할 경우, 형 변환을 따로 해주는 게 좋다. import { ParsedUrlQuery } from 'querystring'; export const getServerSideProps: GetSe..