DEV (23) 썸네일형 리스트형 [Next] 정적 라우팅과 동적 라우팅 지금 개인적으로나 업무적으로 사용하고 있는 Next.js 에서는 자체적인 라우터를 내장하고 있다. 이번엔 라우터를 통한 라우팅에 대해 적어보고자 한다. 라우팅이란? 위의 사진에서 나와있듯 라우팅은 쉽게 말해 페이지를 이동하는것이다. Next.js 환경에서는 위의 사진처럼 useRouter을 통해 내장된 라우터를 사용하게 되는데 보편적으로 많이 쓰이는 방식으로 router.push("path")가 있다. 또한 라우팅은 정적라우팅과 동적라우팅으로 나누어 지게 된다. 정적라우팅 정적라우팅은 쉽게 말하자면 라우팅을 할 때 경로를 하나하나 수동으로 추가해야되는 프로세스이다. 당연히 장단점이 존재 할 수 밖에 없다. 장점 - 정적라우팅은 다른 네트워크를 거치지 않아 동적라우팅에 비해 보안성이 좋다 - CPU의 부하.. [DEV] 절차지향과 객체지향 프로그래밍 1. 절차지향 컴퓨터의 작업 처리방식과 유사한 방식으로 물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되면서 프로그램 전체가 유기적인 연결이 될수있도록 하는 프로그래밍 기법이다. 장점 컴퓨터의 작업처리 방식과 비슷하다 실행속도가 빠르다 단점 유지보수가 어렵다. 같은 로직을 이용하더라도 순서가 달라졌을때 같은값을 리턴하지 않을 수 있다. 디버깅이 어렵다 시간이 지나면서 컴퓨터의 하드웨어적 성능이 좋아지고 그럼에 따라 새롭게 제시된 방법이 있는데 이것은 객체지향 프로그래밍이다. 2. 객체지향 캡슐화, 상속, 다형성을 가지고 실제 세계를 모델링 하는 방법이라고 하는데, 쉽게 말해서 객체라는 유닛을 가지고 조립해서 하나의 프로그램을 만드는것이다. 레고를 조립하는거라고 생각하면 쉬울것같다. 캡슐화 캡슐.. [디자인패턴] container-presenter 디자인 패턴(컨테이너, 프리젠터) 오늘은 container-presenter 패턴에 대해서 조금 써볼까 합니다. container-presenter 패턴은 처음 코딩을 시작하던 때 부트캠프에서도 사용하던 패턴이고 지금도 아토믹과 함께 업무, 개인 프로젝트에 적용하여 사용하고 있는 패턴입니다. 기존에 atomic구조를 공부하면서 간단하게 올렸던 글이 있는데 이 글도 같이 봐주시면 감사하겠습니다 🙇♂️🙇♂️🙇♂️ [디자인 패턴] atomic과 container,presenter 요즘 개인적으로 사이드 프로젝트를 진행하는데 있어서 디자인패턴에 대한 고민이 생겼다. 기존 내가 사용하던 패턴은 코드캠프에서 배웠던 container-presenter 패턴이었지만, 최근 추세와는 조금 takd.tistory.com container-presen.. [UI] MUI(material UI)는 무엇일까? 요즘 나는 회사에서 MUI를 이용하여 개발을 하고있다. 처음엔 스타일드 컴포넌트가 아닌 MUI를 이용해서 개발을 한다는것에 거부감이 들기도 했지만 mui라는 녀석도 상당히 간편하게 사용할수 있는 친구인것같아서 이렇게 블로그에 글을 적어보고자 한다. 내가 처음 mui를 접하게 된건 부트캠프 기간중 아이콘이나 인풋박스같은 컴포넌트를 개인 프로젝트에 적용하기 위해 사용하게 되었다 하지만 지금 다니는 회사에서는 jsx를 이용한 stylecomponent보다는 MUI를 이용한 디자인 컨벤션을 활용하여 전반적인 UI구조를 사용하고있다. mui는 무엇인가? materialUI 라고 불리던 MUI는 5버전으로 리뉴얼 되면서 기존의 materialUI라는 이름을 버리고 MUI라는 이름으로 바뀌었다. 4버전에서는 mate.. [TypeScript] 타입스크립트에서 type과 interface의 차이점 타입스크립트는 자바스크립트의 상위 집합 언어로 변수, 함수 등에 타입을 명시하여 실수를 줄이고 코드의 안정성을 높이는 장점을 가진다. 타입스크립트에서 타입을 정의할 수 있는 방법으로 'Interface'와 'Type'이 있으며, 둘 다 유사한 기능을 가지고 있는데, 두 기능은 차이점을 알아보겠습니다. Interface Interface는 타입스크립트 만의 고유한 개념으로, 객체의 타입을 정의하기 위한 수단이다. 인터페이스로 사용자 객체를 정의하면 다음과 같다. interface User { name: string; age: number; } 위 코드를 보면 User는 인터페이스 이름으로 사용자 객체를 정의하고 있는데, 앞으로 User 인터페이스를 사용하여 객체를 생성할 수 있다. const myUser:.. [DEV] SOLID원칙이란? 회사 세미나 주제중 솔리드 원칙이라는게 나왔다. 개발을 하면서 한번 쯤은 들어봤을, 전공생이라면 더더욱 들어봤을 원칙인데 SOLID법칙 즉, 솔리드 법칙은 객체지향 프로그래밍에서 사용되는 다섯가지 원칙의 약어로 소프트웨어의 유지보수, 확장성, 재사용성, 테스트 용이성을 위해 개발된 원칙이라고 한다. 1. SRP ( Single Responsibility Principle ) 단일 책임 원칙이라고 불리는 원칙인데 하나의 클래스는 한 가지 책임만 가져야 한다는 원칙 2. OCP (Open-Closed Principle ) 개방-폐쇄 원칙이라고 불리는 원칙이며 소프트웨어의 구성 요소는 확장에는 열려있어나 하지만 변경에는 닫혀있어야 된다는 원칙 기존의 코드를 변경하지 않아도 새로운 기능을 추가할수 있어야 된다는.. [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이 필요할경우 끌수도 있다. .. 이전 1 2 3 다음
