전체 글 (26) 썸네일형 리스트형 [React/Next] NextJS의 장점 저는 next.js 환경에서 개발을 하고있는데요! 처음에는 그저 부트캠프에서 배운게 next라서, 그리고 ssr에 용이하다 해서 사용했어요! 근데 지금 시점에서 돌아보면 부트캠프에서 배워서 라는 말은 말도 안되고.. react18 버전 부터 SSR도 자체적으로 지원하는데 왜 사용해야 될까요? next.js의 장점 1. 직관적인 라우터 구조 NextJS 는 React와는 다르게 내장되어있는 라우터를 사용하게 됩니다. /pages폴더 하위폴더로 만들어진 폴더명에 따라 페이지의 path를 부여해주기 때문에 react router dom 을 사용 하는것에 비해 더욱 직관적으로 라우터를 관리할수 있습니다. * react와 다르게 pages폴더가 src폴더 외부에 있는 이유입니다. 2. 라우터 구조에 따른 다이나밍.. [Next] next/legacy/image 사용해보기 프로젝트 진행중에 eslint에게 Next/Image를 사용하라는 경고가 나왔는데요.. 처음엔 img 태그를 쓰는데 굳이? 라는 생각으로 무시하고 넘어갔지만 하나 둘 늘어날수록 점점 거슬려져서 도입해보기로 하였습니다! next/image? next에 내장되어 img 태그를 대체하여 사용할수 있게 해주는데 정말 많은 기능을 지원하고 있습니다. 사실 이녀석도 img 태그 기반이라서 css 태그선택자로 img를 잡으면 같이 잡히긴 하는데.. 대체 어떤 장점이 있길래 자꾸 사용하라고 하는것일까요? next/image를 사용해서 얻는 장점은? 자동으로 스켈레톤 UI를 지원해주고 CLS방지도 할수 있다. Lazy Loading 을 통해 이미지 최적화를 해주기도 하고 pre loading이 필요할경우 끌수도 있다. .. [HTML] SEO와 시멘틱 마크업 일을 하면서 SEO 그리고 시멘틱 마크업이라는 이야기를 많이 듣게 된다. 그렇다면 SEO와 시멘틱 마크업은 대체 무엇일까? 1. SEO란? 한국어로는 검색엔진 최적화, 영어로는 Serch Engine Oprimization을 줄여서 SEO라고 한다. 그렇다면 검색엔진 최적화를 위해서 우리는 어떻게 해야될까? 시멘틱 마크업을 통한 홈페이지 구조를 개선해야한다. 세계적으로 유명한 검색엔진인 google은 웹페이지 크롤링에 있어서 HTML마크업을 중요하게 고려한다고 한다. 그중에서도 title과 h태그로 쓰여지는 제목이 페이지의 주제를 알려주는 태그가 될수 있다고 한다. 크롤링 : 웹상을 돌아다니면서 정보를 수집하는 행위 근데 사실 SEO라는것이 일부 검색엔진에서는 크게 작용하지 못하는경우가 있다. 우리나라에.. [DEV] KISS, DRY, YAGNI - 소프트웨어 개발 3대 원칙 1. DRY DRY는 Don’t Repeat Yourself의 줄임말로 같은 기능이 반복되는 코드를 작성하지 말라는 뜻입니다. 2. YAGNI YAGNI는 YouAin't Gonna Need It 의 줄임말로 불필요하게 확장을 고려한 개발을 하지 말라는 이야기이다. 어떻게 보면 solid법칙에서의 개발 폐쇄 원칙과 반대가 되는 의견으로 생각 될수 있는 여지가 있지만, 무조건적으로 확장을 하지 말라는 이야기가 아닌, "미래의 이 기능이 커질거야", 또는 "이런 기능이 생길수도 있겠지?", "이 기능이 지금은 없어졌지만 다시 사용될수 있겠지?" 등의 이유로 불필요하게 확장에 치중한 코드가 생기거나 지금당장 필요하지 않은 로직을 만들지 말자는 원칙입니다. 3. KISS KISS는 앞서 이름에서부터 보이듯이 심.. [JavaScript] == 과 ===의 차이점 ==, ===은 비교를 위해 사용되는 연산자이다. 하지만 두가지가 어떻게 보면 비슷한 역할을 하는데 정확히 어떤 부분에서 차이가 있는지 알아보면 좋을것같다. 💡 각각의 이름 == : Equal Operator === : Strict Equal Operator 1. == : Equal Operator 비교연산을 할때 사용되는 연산자로 a와 b가 있을때 값을 비교하며 같으면 true, 다르면 false를 반환한다. 결국 이녀석에게 있어서 가장 중요한것은 값인것이다. 예를 들어 a=2 , b=”2” 일때 Equal Operator은 true를 반환한다. 아래의 예시를 보자, a와 b는 2라는 값을 동일하게 가지고 있기 때문에 true가 된것이다. 이 밖에도 아래 사진과 같이 값만 같으면 모두다 true를 반환.. [React] JSX는 무엇일까? 일전에 어떤분에게 그런 질문을 받았다, "css-in-js의 단점은 무엇일까요?" 나는 멍청하게도 jsx요? 라고 대답하였고 내 얕은 지식이 드러나게 되었다. 그래서 jsx와 css-in-js를 공부해보았고 일단 jsx부터 정리를 해보려 한다. jsx문법이란? React공식 문서에 따르면 jsx는 자바스크립트의 확장이라고 한다. jsx는 React "엘리먼트"를 생성한다. React는 본질적으로 렌더링 로직이 UI로직과 연결횐다는 사실을 받아들이고 별도의 파일에 마크업과 로직을 넣에 인위적으로 분리하는 대신에 둘다 포함하는 '컴포넌트'라고 부르는 유닛으로 사용한다. 물론 React에서 필수적으로 사용해야되는것은 아니지만 시각적으로 더욱 도움이 될거라고 한다. 그래서인가 React공식문서에서는 HTML보다.. [React] 라이프 사이클(클래스형) "React를 사용하여 개발을 하는 프론트엔드 개발자" 요즘 정말 많이 보인다. 물론 최근에 개발에 입문하게된 나또한 React환경에서 프론트 개발을 하고있다. 그런데 일을하다 문득 든 생각이 있었다. 이놈의 라이프 사이클은 어떻게 될까? 그래서 오늘은 블로그에 적어보려 한다. 라이프 사이클이란? 흔히들 말하는 생명주기, 리액트로 말하자면 컴포넌트의 수명이라고 말할수 있을것같다. 리액트의 라이프 사이클은 페이지가 랜더링 되기 전 준비단계 부터 페이지에서 사라질때까지를 한 사이클로 보면 될것같다. 리액트의 라이프 사이클은? 리액트에서의 라이프 사이클은 크게 세가지 단계로 볼수있다. 마운트 -> 업데이트 -> 언마운트 이렇게 세단계로 볼수있는데 각각의 단계에서는 메서드를 이용하게 된다. 1. 마운트 단계 1.. [디자인 패턴] atomic과 container,presenter 요즘 개인적으로 사이드 프로젝트를 진행하는데 있어서 디자인패턴에 대한 고민이 생겼다. 기존 내가 사용하던 패턴은 코드캠프에서 배웠던 container-presenter 패턴이었지만, 최근 추세와는 조금은 떨어진 부분이 보여 atomic패턴을 도입해볼까 고민을 하게되었다. 그래서 오늘은 atomic과 container-presenter에 대해서 적어보려고 한다 가장 먼저 지금 내가 사용중이었던 디자인 패턴은 container-presenter 패턴인데 container와 presenter는 어떤 역할을 하는 녀석이냐면 container : 로직부분을 담당하는 부분(state관리 변수 및 함수의 생성) presenter : styled와 전체적인 구조, UI를 담당하는 부분 그러면 이녀석의 장점은 무엇일까?.. 이전 1 2 3 4 다음
