Front-End (12) 썸네일형 리스트형 Hi Next 15? 오늘 다뤄볼 내용은 Next.js 15 버전입니다. 최근에 React 19 버전이 업데이트가 되면서, 많은 개발자들 사이에서 화제가 됐었는데, "아니 Next 14 나온 지 얼마나 됐다고 벌써 15가 나올까?"라는 생각이 자주 들고 있다. 나도 프로젝트를 개발하면 React보다는 Next.js 프로젝트가 훨씬 많아서 이번 버전에서는 어떤 것이 추가가 되고 수정이 되었는지 알아보려고 합니다. Next 15?⭐️ React CompilerNext 15 버전에는 React Compiler라는 개념이 도입이 된다고 합니다.React Compiler이란 무엇일까? 🤔React에서는 불필요한 렌더링으로 성능이 저하되는 것을 막기 위하여 내부에서 Memoization을 사용합니다. Memoization은 이미 계산.. Hydrate가 무엇이고 어떻게 해결할까? 오늘 블로그에서 다룰 내용은 제가 최근에 Next에서 개발을 하다가 Hydrate가 발생해서 이러한 개념은 왜 나타나는 것인지, 또 어떻게 해결을 해야 할지 궁금증이 생겼습니다. 많은 개발자들은 이미 많이 들어본 용어가 아닐까 싶습니다. 하지만 이러한 개념이 무엇이고, 어떻게 해결하는지에 대해서 모르거나 더 궁금해하실 개발자님들이 있을 것 같아 이번 블로그에서는 이 Next.js에서 Hydrate가 무엇인지에 대해서 알아보겠습니다! 🔥 먼저, 시작하기에 앞서서 다들 CSR과 Pre-Rendering의 차이는 대충 뭔지 알고 계시죠??간략하게 설명을 해보겠습니다. CSRReact에서는 CSR 방식을 사용하는 거 다들 아시죠? 처음 브라우저가 빈 html 파일을 받아서 실제로 UI에보이지 않다가, 유저의 .. React Native로 IOS 개발자가 되어보자!! 요즘 최근 들어서 채용 공고를 많이 보고 있는데 그중에서 React 개발자보다 React Native의 비율이 많이 높아져서 채용하는 부분이 많아진 것 같습니다. 그래서 오늘은 엄청 큰 블로그는 아니고 React Native로 IOS 개발을 하는 단계까지의 과정을 블로그로 이야기를 해보려고 합니다. 먼저 블로그를 시작하기 앞서 ...ㅣ React Native에 대한 전반적인 개념에 대해서 알기 위해서 ⬇️ React Native 써야할까? 요즘에는 앱 개발을 React Native를 통해서 하는 개발자들도 많이 나타나고 있는데 이러한 React Native는 어떻게 사용하고 어떤 장점과 단점을 가지고 있으며 앞으로의 전망에 대해서 궁금해서 이 블 ltr2006.tistory.com 그러면 IOS 개발자로.. vainilla extract CSS 요즘 이게 대세라며? 혹시 vainilla extract CSS 아시나요? 제가 프로젝트를 하면서 vainilla extract를 접하게 되었는데 기존에 있던 CSS 사용방법과 좋은 장점들로 나타나서 한번 소개를 해볼까 합니다. 우리가 알고 있는 styled-component 또는 emotion 등 많은 스타일등을 사용하는 CSS in JS라는 개념을 조금 알고 본론으로 들어가면 좋을 것 같습니다. CSS-in-JS CSS-in-Js는 간단하게 설명하자면 Javascript Code에서 CSS를 작성하는 방식입니다. CSS 스타일을 추상화한 js 객체를 대신하여 CSS 스타일 문법을 그대로 사용하여 React style component로 사용 이러한 CSS-in-JS는 다음과 같은 장점을 가지고 있는데 .. 스타일을 지역 .. 웹뷰? 웹의.. 풍경 🌌? 너 이거 알아?? 오늘 블로그에서 다뤄볼 내용은 바로 웹뷰입니다. 갑자기 이 웹뷰에 대해서 왜 조사를 하게 되었냐면 .. 제가 최근에 해커톤을 다녀오게 되었습니다. 근데 저희 팀은 팀 전공이 애매하게 웹 Front 저 혼자, AOS 2명 UI/UX 디자이너, Back 1명 총 이렇게 5명으로 구성되어서 프로젝트를 진행하였습니다. 다른 팀들을 보면 웹이 나 앱 이렇게 한 번에 모여있었는데, 저희 팀은 구성이 그렇게 되어 있지 않더라구요 .. 그래서 생각을 해보다가 안드로이드 전공하는 친구가 웹뷰를 해보는 것은 어떠냐고 물어봐서 조사를 해보게 되었습니다. 사실 그 해커톤 에서는 웹뷰 사용은 하지는 않았지만 이번 계기를 통해서 더 알아보려고 합니다. WebView란 무엇일까? 네이티브 앱에 내재되어 있는 웹 브라우저를 이야기합.. [TypeScript] interface와 Type은 뭐가 다를까?? 타입스크립트를 쓰는 당신. interface와 type에 차이점에 대해서 알고 있습니까?!? 저는 프로젝트를 경험하면서 솔직하게 interface라는 개념만 주구장창 사용을 했습니다 .. 근데 다른 개발자님들이 프로젝트를 개발하시는 걸 보면 또 type을 사용하는 걸 보니까 저도 조금 뭐가 다른지 궁금해져서 이번 블로그에서는 interface와 type의 차이에 대해서 조사를 해보려고 합니다. 확장하는 법 먼저 다른 점은 서로 확장하는 방법이 다릅니다. interface일 경우에는 extends를 사용하며 type 같은 경우 & 연산자를 사용하여서 확장을 할 수 있습니다. interface Taerang { name: string; age: number; } interface Taerang extends.. 저 React는 생명이 있어요 .. 🌱 <React Life Cycle> 혹시 React를 사용하시는 당신. React의 생명 주기가 존재한다는 것을 알고 계시나요?? 리액트는 컴포넌트 별로 개발을 하게 됩니다. 이때 각각의 컴포넌트들은 생명 주기 즉 라이프 사이클이라는 개념이 존재합니다. 여기서의 생명 주기는 생성으로 시작하여서 업데이트를 하고 마지막에는 소멸하는 과정을 거치게 된다. 클래스형 컴포넌트는 생명 주기 메서드를 통해서 라이프 사이클에 따라 컴포넌트를 사용하지만 함수형 컴포넌트에서는 생명 주기 메소드가 존재를 하지 않아 리액트 훅을 사용해 생명 주기 메서드와같은 역할을 하는 동작을 구현을 해줘야 합니다. 라이프 사이클의 3가지 단계 (생명 주기) 라이프 사이클은 3가지의 단계로 나뉘게 되는데 생성(mounting) - 업데이트(updating) - 제거(unmou.. [JavaScript] 1타 강사가 알려주는 Closures!! 이젠 알자 자바스크립트를 사용하시는 개발자 여러분은 클로저(Closures)라는 개념을 알고 있으신가요?? 저는 스코프이라는 단어를 찾아서 둘러보다가 스코프라는 개념을 알게 되면서 클로저라는 개념도 같이 알고 있으면 좋겠다 .. 어디선가 들어본 적은 있지만 실제로 따로 찾아본 적은 없어서 이번 블로그를 통해서 클로저를 알아보려고 합니다!! 근데 또 클로저가 프론트엔드 면접 단골 문제라고 하기도 하네요 .. ( 더 열심히 조사를 해야겠군요 .. 🥹 ) 먼저 클로저라는 개념을 알기 전에 스코프에 대한 내용으로 시작을 하면 좋을 것 같습니다ㅏㅏ!! 스코프(Scope) 그게 뭔가 ..? 스코프 한 번씩은 들어보셨나요?? 네 ..? 게임에서 들어봤다구요?? ㅋㅋㅋㅋㅋㅋ 근데 뭔가 느낌은 비슷한 것 같네요 ㅜㅎ 스코프는요 식.. 이전 1 2 다음
