공부 기록일지📚

복사에 대해서 이해하려면 우선 자바스크립트의 데이터타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문인데 자바스크립트에서 데이터는 원시타입과 참조타입으로 나뉜다. 변수에 원시 값을 담는다면 값 자체가 담긴다. 하지만 변수에 객체를 담는다면 객체 값이 아니라 객체 값이 저장된 메모리 주소가 담긴다. 자세한 내용은 아래의 내용을 참고하면 된다. 원시값: 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은 언제 필요할까? 규모가 큰 어플리케이션에서 동일한 패턴이 반복적으로 발생한다고 가정했을 때, 그렇게 된다면 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 해주는 추상화가 필요하..

CSS3 Flexible Box [배경] 오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구로 float, position 속성을 사용하였다. 무난하지만 어떤 점에서는 제한적이라 확실히 단점이 있습니다. 예를 들어, 아래와 같은 요구 사항을 달성하기 어렵거나 불가능합니다. [float, position이 구현 불가능한 요구 사항] 부모 요소 내부에 포함된 블록 컨텐츠를 세로로 중심부에 맞추기 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 비와 높이를 똑같은 크기로 점유 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택 flexbox는 위와 같은 문제를 해결하고 레이아웃을 만드는데 편의..

[정의] CSS-in-JS는 스타일 정의를 css나 scss파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 기법이다. [사용 배경] 기존 웹 사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 컴포넌트 기반 개발 방법의 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있다. inline-style과의 차이점? CSS-in-JS는 컴포넌트 안에 css를 정의하는 인라인 스타일과 비슷하지만 인라인 스타일은 지양하는 것이 좋습니다. [inline style의 단점] CSS 속성의 중복, 재사용성이 떨어진다. 의사 클래..

면접 준비를 하면서 정말 생각보다 너무 많이 모른 채로 무작정 코드를 작성했구나 반성하게 된다. 면접 질문 중 리액트 선정 이유에 대해서 설명하였는데 리액트의 단방향 데이터 바인딩 덕분에 흐름을 파악하기 쉽다는 장점을 들었을 때 팀원 중에서 "리액트는 그러면 단방향 데이터 바인딩만 하고 양방향은 안되냐"는 질문을 하셨다. 내가 알기론 양방향 데이터 바인딩이 되지만 주로 단방향 데이터 바인딩인 것으로 알고 있어서 제대로 대답하지 못했다! 또한, 데이터 바인딩과 이벤트 전파에 대한 추가 질문을 던지셨는데 내가 생각했던 리액트의 단방향 데이터 바인딩은 state를 props로 내려주는 것만 생각하고 있었어서 이벤트와 직접적으로 연관이 있는 줄은 몰랐다. (이건 제대로 찾아봐야 할 거 같다 데이터 바인딩에서 "..