React는 사용자 인터페이스를 보다 더 효율적으로 구축하기 위해 개발된 자바스크립트 라이브러리로, Facebook에서 처음 도입된 이후로 많은 기개발자들에게 사랑받고 있습니다. 리액트의 주요 특징 중 하나는 가상 DOM(Virtual DOM)을 활용한 최적화된 렌더링 기법입니다. 리액트가 어떻게 동작하는지에 대한 원리와,DOM, 가상 DOM과 그것이 브라우저 성능에 어떤 영향을 미치는지 알아보도록 하겠습니다.  DOM( Document Objext Model )이란먼저 리액트의 동작원리를 이해하기 전에 DOM이란 무엇인지부터 이해하는 것이 중요합니다. DOM은 "Document Object Model"의 약자로, 웹 사이트의 HTML, head, body 같은 태그들을 자바스크립트가 조작할 수 있도록 ..

클로저는 함수와 그 외부상태를 결합한 것으로, 데이터 은닉과 콜백을 생성하는 유용한 개념입니다. JS 언어를 사용하는 개발자라면 한번쯤은 알게모르게 사용한 경험이 있을 것 같습니다. 자바스크립트에서 정말 중요한 개념이라고 생각해서, 이의 장점과 단점을 이해하고 코드를 작성한다면 코드의 질이 달라지지 않을까 생각이 듭니다. 클로저(Closure) 기본 개념 🐶클로저(Closure)란 외부 변수를 접근하는 가장 강력한 개념입니다. 즉 함수와 함수가 선언되었을 때의 렉시컬 환경의 조합입니다. 자신의 중괄호 외부의 값을 접근할 수 있으며, 이 과정에서 메모리의 힙을 활용하여 참조 가능한 변수를 저장함으로써 불필요한 데이터 노출을 방지합니다. 또 이를 이용해 자바스크립트(javascript) API 사용 시 더..

개인적으로 공부하고 직접 프로젝트에 적용해보고 싶은 기능이 있습니다. 바로 'nextjs의 경로 가로채기'였습니다. 대부분의 모달의 경우 URL이 부여되지 않고 있고, 현재 페이지위에서 모달창을 띄우는 방식을 사용합니다. 인기있는 웹사이트의 모달만 봐도 그렇습니다. 하지만 이러한 모달에 경로 가로채기 개념을 적용한다면 이는 사용자 경험(UX)를 크게 향상하는 방법이라고 생각이 들었습니다.. 그래서 본인의 프로젝트 링킷에도 경로 가로채기 개념을 도입해보고자 생각이 들었습니다. 이에 대한 기대효과로는 추후에 사용자가 선택한 값이 새로고침을 해도 풀리지 않고, 링크를 복사해서 다른 사용자에게 공유까지 할 수 있다는 장점이 있습니다. NextJS에서 경로 가로채기(Intercepting Routes)에 대한 개..

NextJS 13버전으로 업데이트가 되면서 굉장한 변화들이 있었는데, 그 중 가장 큰 변화라고 생각이 드는 것은 앱 디렉토리(app directory)의 등장이라고 생각이 듭니다. 앱 디렉토리의 이전과 이후를 모두 경험해본 입장에서는 이후가 개발자 경험이 향상되었다고 체감이 듭니다.  NextJS 서버 클라이언트와 클라이언트 컴포넌트의 이해nextjs에는 클라이언트 컴포넌트와 서버 컴포넌트가 있습니다. NextJS 13버전의 app 폴더안에 있는 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다. 개인적인 생각으로는 이 두개의 컴포넌트를 이해하고 차이를 인식하고 개발하는 것이 정말 중요하다고 생각합니다. 들어가기에 앞서 간단하게 결론부터 말하자면클라이언트 컴포넌트는 사용자 상호작용을 처리하는데 중점을 두고 ..

안녕하세요. 최고의 사용자 경험을 프론트엔드 개발로 끌어 내고 싶은 학생입니다. 프론트엔드 개발을 시작했을 때부터 지금까지 계속 웹 개발 공부에 집중을 하고 있었는데, 이번 방학 때 모바일뷰의 웹 프로젝트를 개발하면서" 이 서비스를 처음부터 앱으로 개발했으면 좋았겠다"라는 생각이 들었습니다.  웹 사이트에 적합한 프로젝트가 있고, 웹이 필요없고 모바일 앱에 대해서만 적합한 프로젝트가 있는데 이를 자유자재로 개발할 수 있는 프론트엔드 개발자가 되고 싶은 마음이 이번 방학에 강하게 들었습니다. 그래서 이에 대해서 알아보던 중 크로스 플랫폼 앱 개발이 가장 나에게 적합하다는 것을 알게 되었습니다. 본인처럼 크로스플랫폼 앱 개발은 하고 싶은데 무엇을 선택해야 할지 모르는 분들이 많을 거라 생각이 듭니다. 그래서..