FE

인턴을 했던 회사에 다양한 프로젝트가 있었는데 그 중 일부는 node modules로 패키지를 관리하지 않고 yarn berry로 패키지를 관리하고 있었다.node modules로 관리할 때의 단점을 많이 커버할 수 있다고 한다.기존의 JS는 HTML에 독립적으로 실행

퍼블리싱의 영역이라고 볼 수도 있지만, 개인적으로 UI적 요소도 프론트엔드 개발의 중요한 요소라고 생각한다.디자이너가 요구한 내용을 최대한 반영하기 위해서 css에 대한 기본 소양이 필요하다고 느꼈다.React에는 css를 적용하는 다양한 방법이 있고, 특히 CSS-i

회사에서 웹뷰를 개발하고 있다.간단한 개념이지만 웹앱, 네이티브앱, 하이브리드앱, 모바일웹 등 간에 계속 헷갈려서 이참에 정리해보기로 했다.쉽게 말하면 반응형 웹 이다.PC용 사이트를 모바일에서도 사용자가 이질감 없이 같은 사이트를 사용하고 있다는 느낌을 받도록 하게

React? Vue? 아무리 개발을 해봐도 근본을 모르면 말짱 도루묵인 것 같다.~과제 테스트 통과 못하는 건 덤~JS는 ES6에서 JS 표준 모듈 문법이 정의되었음에도 ES6 문법을 구형 브라우저에서 사용하지 못해 SystemJS 같은 또 다른 라이브러리에 의존했어야

Node.js가 널리 사용될 수 있는 계기가 V8 Engine가 나오면서라고 하니 공부하지 않을 수 없는 부분인 것 같다.참고한 글들 1, 2처럼 내부 구조를 git clone해서 파본 것은 아니어도 정리할 필요는 있다는 생각이 들었다.~자동차 v8 엔진의 이름을 따온

React를 개발하다 보면 매번 좋은 구조가 무엇인지 헷갈린다.좋은 구조에는 정답이 없고 프로젝트의 성격마다 좋은 구조가 다르다는 것은 알지만 그럼에도 어떤 구조가 좋은지 끊임없이 고민하게 되고 시간을 소비하게 된다.심지어 vanilla js로 개발할 때도 비슷한 고충

vanilla.js로 virtual DOM 만들기(https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/DOM은 Document Object Model의 약자로 여기서 documen

react에 대해 면접 전에 부랴부랴 외우기 보다 미리 '이해'하고 싶어서 정리하려고 한다.react는 왜 등장했는가에 대해 여러 글을 읽고 나의 방식대로 정리해봤다.react 이전에는 SPA 프레임워크로서 angular가 존재했다.angular는 jQuery를 써서

~면접에서 집요하게 공격받던 질문이다...~예전에 진행했던 프로젝트 중에 FE 개발만 많이 앞서 나가고 BE의 API가 개발될 때까지 기다렸던 적이 있다.그러한 일이 현직에서도 많이 발생하고 BE/FE 개발을 비동기(?)로 진행하기 위한 방법으로 mocking을 이용한

좋은 react 개발자가 되기 위해서는 가독성 좋은, 성능 좋은, 유지 보수 가능한 코드를 짜야 된다.성능이나 디자인 패턴을 이해하고 싶다면 react에서 상태 관리가 어떻게 이루어지며 어떠한 원리를 가지고 있는지 파악할 필요가 있다고 생각했다.다음과 같은 특징을 지닌

성능을 향상시키는 적이 있냐는 질문을 많이 들어봤다.미리 방법을 공부한 뒤 프로젝트에 언제든지 도입할 수 있도록 해보고자 한다.지금부터 진행하는 테스트는 CRA(v5.0.1), npm run eject를 실행한 코드를 이용했다.webpack은 v5이다.여기서 re-re

HTML5에 대해 잘 안다고 하니, '그러면 HTML5에서 SEO를 하는 방법을 알고 있느냐?' 라는 질문을 받았다.벙쪘다. 그런 것도 모르면서 안다고 나불댔던 내가 부끄러웠고 이참에 해당 방법들에 대해 정리하고자 한다.아쉽게도 검색엔진과 관련된 부분이고 현재 운영중인

노션 클린 코딩 프로젝트을 진행하기 전 컨벤션을 정하다가 CSS에도 컨벤션이 존재한다는 것을 알았다.가장 많이 사용되는 OOCSS, BEM, SMACSS를 정리한 뒤 프로젝트에 사용할 컨벤션을 정하고자 공부를 시작했다.OOCSS, BEM, SMACSS는 같은 지향점을

link 태그의 preload, preconnect, prefetch가 '무엇'인지 공부하다가 외부 리소스 가져오는 부분이라는 것을 알게 돼서 정리하고자 한다.우선 한 가지 확실히 할 것은 모든 것에는 일장일단이 있다.초기 렌더링 속도를 향상시키느냐, 초기 렌더링 후의

동아리 면접 때 거짓말치다가 걸렸다...현재 첫 회사에 입사해 본격적으로 일한지 2개월이 되지 않았다.지금까지 맡은 업무는 사장된 Angular.js를 React.js로 전환하는 일이 전부이다.그래서 설계 등에 대해 고민할 것이 적었다.공통적으로 사용되는 메서드는 Ho

React v18에 새로 나온 기능이다.Fiber 아키텍처는 React의 내부 재귀 rendering 알고리즘을 비동기적으로 작동하도록 변경했다.이를 통해 React는 작업을 나누고 우선 순위를 지정하여 더 효율적으로 작업을 수행할 수 있게 되었다.다른 말로 증분 re

Preact로 번들 사이즈 대폭 줄이기라는 글을 보고 Preact가 뭐지...? 싶어서 한 번 읽어봤다.~참고로 2023.10.17 기준으로 작성 중인 이 글은 정화히 말하자만 Preact를 다루는 것은 아니고 React의 synthetic event와 관련된 내용이다

딱히 큰 이유는 없다.그저 react의 대안책이라 불릴 수 있는 vue나 svelte가 굳이 단방향 데이터 바인딩을 사용하지 않은 이유에 대해 궁금했다.참고로 데이터가 변경됐음을 감지하는 방법이 여러 가지가 있지만, 각각의 라이브러리나 프레임워크는 각자의 장점을 최대화