CSS으로 레이아웃을 하는 방법에는 여러가지가 있습니다. 그 중에서도 대표적으로 flex, grid 레이아웃 시스템을 예시로 들 수 있습니다. Grid와 Flex의 가장 큰 차이점은 Flex는 한 방향 레이아웃 시스템이며(1차원) Grid는 두 방향(가로-세로)레이아웃 시스템(2차원)이라는 것입니다. 결과적으로 Flex보다 더 다채로운 레이아웃 구성이 가능하게 됩니다. -> 개인적으로 Grid와 Flex의 차이점을 잘 이해하고 필요할 때 둘을 적절히 혼용하는 것이 좋은 거 같습니다. Grid는 Flex와 마찬가지로 컨테이너와 아이템만 있으면 됩니다. 아래는 그리드의 기본적인 HTML 구조입니다. A B C D E F G H I //✅부모 요소인 div.container를 Grid Container(그리드..
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. Promise 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체 Axios Promise API를 활용하는 HTTP 비동기 통신 라이브러리 기능 브라우저 환경: XMLHttpRequests 요청 생성 Node.js 환경: http 요청 생성 Promise API 지원 -> then(), catch()등 후속처리 메서드 활용가능 요청/응답 차단(Intercept) 취소 요청 JSON 데이터 자동 변환(자동 형변환) 사이트간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원(보안성) 브라우저 호환성이 fetch보다 ..
이전에 정리한 생활코딩의 내용을 빌려오자면 this는 이렇게 정의할 수 있다. this ? this란 함수 내에서 함수 호출 맥락(context)를 의미한다. 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 의미이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점 역할을 한다. this는 상위 객체를 가르킨다. apply ,call을 활용해 제어가 가능하다. 함수호출 어떠한 객체에 소속되어 있지 않은 함수를 호출했을 때 this는 무엇을 가리키는가? -> this === window 사실상 window가 생략됐을 뿐이지(암시적으로 사용되고 있는 window) window가 해당 함수를 포함하는 전역객체인 것이다. 🙋♂️this는 무엇..
복사에 대해서 이해하려면 우선 자바스크립트의 데이터타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문인데 자바스크립트에서 데이터는 원시타입과 참조타입으로 나뉜다. 변수에 원시 값을 담는다면 값 자체가 담긴다. 하지만 변수에 객체를 담는다면 객체 값이 아니라 객체 값이 저장된 메모리 주소가 담긴다. 자세한 내용은 아래의 내용을 참고하면 된다. 원시값: number/string/boolean/null/undefined/ symbol(ES6) -> 변경 불가능한 값 (immutable value) 참조값: Object(array, function, regExp)/ Map,Set 등(ES6) -> 변경 가능한 값(mutable value), 원시 값을 제외한 모든 것 // 문..
배경 바벨과 웹팩은 웹프론트엔드 어플리케이션을 제작할 때 없어서는 안되는 기반 기술이되었다. 테스트 프레임워크를 도입할 때, 별도의 빌드 과정이 필요할 때, 서버사이드 렌더링을 위해서 서버 측 코드를 빌드해야 할 때 등 바벨과 웹팩을 활용해야 한다. 엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이다. 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있다. 명세서 내 모든 기능을 모든 (브라우저)엔진이 구현하고 있지 않기 때문이다. 바벨이란? 자바스크립트 컴파일러이다.(공식 홈페이지 번역, 컴파일러보단 트랜스파일러에 가깝다 생각한다. ) 📚컴파일러 - 한 언어를 다른 언어로 변환 e.g.) Java -> bytecode ✅트랜스파일러 - 한언어로 작성된 소스 코드..
Next.js는 무엇인가요? Next.js는 SPA에서 SSR을 가능하게 해주는 React 프레임워크입니다. 기본적으로 CSR을 하는 React 어플리케이션은 SEO에 취약합니다. Next.js를 도입하면 프리 렌더링을 통해 SSR 또는 SSG를 가능하게 해주기 때문에 성능과 SEO에 좋습니다. 이 외에도 페이지 기반 라우팅, 번들을 줄여주는 코드 스플리팅 기능*, 이미지 최적화 기능을 제공하여 어플리케이션의 퍼포먼스를 끌어올리고 SPA의 단점을 보완할 수 있습니다. ⚠️ 주의점 SPA 방식이 모두 CSR인 것은 아니다. -> Next.js을 사용하면 SPA를 SSR로 구현할 수 있다. 🤸♀️ Next.js는 용량이 커지면 로딩속도가 느려지는 것을 대비하여 파일을 분리하는 코드 스플리팅을 자동적으로 해..
※해당 글은 원문이 따로 있습니다. 공부용으로 타이핑한 것이니 자세한 내용은 원문을 참고해주세요! 리액트에서 렌더링은 DOM을 업데이트하는 것과 같은 것이 아니고, 컴포넌트는 어떠한 가시적인 변경이 없이도 컴포넌트가 렌더링될 수 있다는 것이다. 리액트가 컴포넌트를 렌더링하는 경우를 살펴보면 컴포넌트는 이전과 같은 렌더링 결과물을 리턴해서, 아무런 변화가 일어나지 않을 수 있다. Concurrent Mode*에서는, 리액트는 컴포넌트를 렌더링하는 작업을 여러번 할 수 있지만, 다른 업데이트로 인해 현재 작업이 무효화되면 매번 렌더링 결과물을 버린다. 이번에 리액트 18에서 나온 Concurrent Mode의 경우, 브라우저가 이벤트를 처리할 수 있도록 렌더링 단계에서 작업을 일시 중지 할 수 있다. 리액트..
🤸♀️HOC(HOC, Higher Order Component)가 뭔가요? 고차 컴포넌트(HOC)는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. HOC는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. const EnhancedComponent = higherOrderComponent(WrappedComponent); 컴포넌트와 고차 컴포넌트와의 차이점 컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다. HOC은 언제 필요할까? 규모가 큰 어플리케이션에서 동일한 패턴이 반복적으로 발생한다고 가정했을 때, 그렇게 된다면 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 해주는 추상화가 필요하..
- Total
- Today
- Yesterday
- 항해99추천비추천
- aspect-ratio
- 항해99프론트후기
- ~ ^
- 타입스크립트 DT
- text input pattern
- float 레이아웃
- 원티드 3월 프론트엔드 챌린지
- 부트캠프항해
- is()
- 틸드와 캐럿
- 원티드 FE 프리온보딩 챌린지
- D 플래그
- && 셸 명령어
- 타입스크립트 장점
- 원티드 프리온보딩 FE 챌린지
- 항해99프론트
- nvm 설치순서
- fs모듈 넥스트
- grid flex
- Prittier
- getStaticPaths
- getServerSideProps
- reactAPI
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- nvm경로 오류
- 프리렌더링확인법
- 형제 요소 선택자
- 프리온보딩 프론트엔드 챌린지 3월
- tilde caret
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |