개요A 페이지는 Mui같은 라이브러리 써서 간단하게 구현할 거고, B 페이지는 Radix ui에 Tailwind Css 붙여서 디자인할 거 예요.곧 진행할 프로젝트의 PM님이랑 얘기 나누다가 들은 이야기 중 일부다. 분명 입사할 때 즈음에 프론트엔드 생태계에 대한 전반적인 이야기를 들을 때 모두 들어본 단어이긴한데, 정확히 어떤 차이가 있고, 특히 FE를 아예 안 건드려 본 나로써는 처음 본 영단어 외우듯이 노트에 받아 적기 바빴다. Radix ui가 뭔데Radix ui에서 제공하는 라이브러리는 크게 Themes, Primitives, Icons, Colors가 있는데, 보통 얘기하는 Radix ui는 Radix/Primitives를 이야기한다.Radix Primitives is a low-level U..
Next/Image 컴포넌트의 기능LazyLoading => 기본적인 image태그를 통한 lazy loading을 구현하려면 Intersection Observer를 통해서 element가 보일 때 이미지를 로드하도록 직접 구현해야한다(현재 크롬에서는 loading="lazy"옵션으로 쉽게 구현할 수는 있다. 이미지 사이즈 최적화(webp)이미지를 그대로 내려받는 것이 아니라, webp 형식으로 가져오기 때문에 원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있다.quality의 기본 값은 75이다. placeholder 제공placeholder를 제공하여 이미지가 불러오는 동안에 영역의 높이가 변경되어 레이아웃이 흔들리는(CLS) 문제를 방지해준다. 어떻게 이런 기능을 제공할까?내부 이미지Ne..
next-link로 라우팅하기(CSR)import Link from 'next/link'; const Links = () => { return ( Links /getStaticProps ); }; export default Links;next/link의 Link 컴포넌트를 이용해서 라우팅하는 방식으로, HTML의 a태그와 완전히 동치된다.그럼 a태그를 안 쓰고 Link 컴포넌트를 사용하는 이유는 무엇일까? Next.js의 라우팅은 CSR처럼 동작한다./links로 접속하면 위와 같이 네트워크 탭에 뜨는데, 제일 밑을 보면 getStaticProps.json과 js가 있는 것을 볼 수 있다.여기서 json파일은 props 데이터를, js파일은 해당 페이지의 HTML을 그리기 위해 미리 가져온다.다시 한 번..
CSR SSR SSG ISR 비교CSR(Client Side Rendering)리액트의 그것. 만 있는 html과 javascript파일 1개만 받은 뒤, 클라이언트에서 javascript로 모든 걸 그리는 방식장점: 화면 깜박이 없음, js 캐시 가능단점: SEO제약, 보안, 초기 용량 큼. SSR(Server Side Rendering)레거시한 블로그, 홈페이지에서 사용하는 방식PHP/JAVA 템플릿엔진을 통한 구현서버에서 매 요청마다 HTML을 만들어서 클라이언트에게 내려줌.장점: SEO, 보안, 초기 용량 적음.단점: 화면 깜박임, 서버 부하. SSG(Static Site Generation)pre-rendering: Static한 HTML을 빌드타임에 미리 반들어 둠(SSR는 요청타임에 만들기 ..
10.1 도메인 전용 언어DSL은 특정 도메인 문제를 해결하기 위해 만든 언어이다. 특정 비지니스 도메인을 인터페이스로 만든 API라고 생각할 수 있다.DSL을 이용하면 사용자가 특정 도메인의 복잡성을 더 잘 다룰 수 있다. 저수준의 구현 세부 사항 메서드는 private로 만들어서 저수준 구현 세부 내용은 숨길 수 있다. 이런식으로 사용자 친화적인 DSL을 만들 수 있다. 10.1.1 DSL의 장점과 단점DSL은 만병통치약이 아니다. DSL을 도메인에 이용하면 약이 될 수도 독이 될 수도 있다.장점단점간결함DSL설계의 어려움가독성개발 비용유지보수추가 우회 계층집중새로 배워야 하는 언어관심사분리호스팅 언어의 한계 10.1.2 JVM에서 이용할 수 있는 다른 DSL 해결책내부 DSL내부 DSL은 순수 자바..
벌써 23년의 절반이 지나갔다.살면서 이렇게 오랫동안 쉬어 보는 건 처음이라 여러 계획을 세우긴 세웠는데, 대부분 달성하지 못 한 것이 심히 아쉽다.그래도 나름 힐링이라면 힐링이고, 고난이라면 고난을 겪어온 시간이다. 한 가지 확실한 점은 가장 빠르게 인간적으로 성장한 시간이라는 것이다. 1월: 스키, 홍대1월엔 동아리 후배들과 스키장에 놀러갔다.스키타는데 무릎 힘이 필요하다는 걸 몰라서… 기대하고 갔는데 무릎때문에 결국 포기했다. 같이 간 친구들에게 좀 미안했는데 어쩌겠노… 더 이상 내 무릎은 내가 컨트롤이 안 되는디,,, 😢그래도 저녁에 추억팔이하면서 이것저것 얘기하고, 다음날 아침에 썰매 같이 타준 덕분에 나름 잘 즐기고 왔다(shout to 1jeong, eyi) 백준 대회 겸 서울에 사는 친구들..
9.1 가독성과 유연성을 개선하는 리팩토링람다 표현식은 익명 클래스보다 코드를 더 간결하게 만들어준다. ⇒ 3장에서 확인해봤었다. 게다가, 재활용이 가능하므로 더 큰 유언성을 갖츨 수 있다. 9.1.1 코드 가독성 개선익명 클래스를 람다 표현식으로 리팩토링하기람다 표현식을 메서드 참조로 리팩토링하기명령형 데이터 처리를 스트림으로 리팩토링하기 9.1.2 익명 클래스를 람다 표현식으로 리팩토링하기주의할 점이 있는데, 모든 익명 클래스를 람다 표현식으로 바꿀 수 없다.익명 클래스의 this와 super는 람다 표현식에서는 다른 의미를 갖는다. 익명 클래스에서 this는 익명 클래스 자신을 가르키지만 람다 표현식에서 this는 람다 표현식을 포함하는 캘르스를 가르킨다.익명 클래스는 감싸고 있는 클래스의 변수를 ..
5.1 필터링5.1.1 프레디케이트로 필터링List menu = Arrays.asList( new Dish("pork", false, 800, Dish.Type.MEAT), new Dish("beef", false, 700, Dish.Type.MEAT), new Dish("chicken", false, 400, Dish.Type.MEAT), new Dish("french fries", false, 530, Dish.Type.OTHER), new Dish("rice", true, 350, Dish.Type.OTHER), new Dish("season fruit", true, 120, Dish.Type.OTHER), new Dish("pizza", true, 550, Dish.Type.OTHER), new ..
컬렉션(Collection)을 활용하면 데이터를 그룹화하고 처리할 수 있다. ⇒ 너무 익숙하다,,Collection과 Stream의 차이를 정리하여 표로 정리해보았다.CollectionStream동작 형식명령형선언형병렬성가능한데, 복잡간단(선언형)유연성복-붙함수 파라미터화특징- Sequantial, Random Access - 데이터 표현에 집중 - 외부 반복(반복문을 직접 작성)- Sequantial Access - 데이터 처리에 집중 - 내부 반복(반복문 작성 X) - 파이프 라이닝 4.1 스트림이란 무엇인가?스트림을 사용하면 선언형으로 컬렉션 데이터를 처리할 수 있고, 데이터를 투명(transaparent)하게 병렬적으로 처리할 수 있다.선언형으로 코딩을 할 경우의 장점은 새로운 기능을 구현할 때 ..
2장에서 동작 파라미터화를 이용해서 요구사항에 효과적으로 대응하는 코드를 구현해봤다.이번 장에서는 인터페이스와 형식 추론의 기능을 확인해보고, 메서드 참조기능을 공부한다. 3.1 람다란 무엇인가?람다 표현식은 메서드로 전달할 수 있는 익명 함수를 단순화한 것이라고 할 수 있다.익명보통의 머세드와 달리 이름이 없으므로 익명이라 칭한다.함수람다는 특정 클래스에 종속되지 않으므로 메서드가 아닌 함수다. 하지만 메서드처럼 파라미터, 바디, 반환 형식, 예외 리스트를 포함한다.전달람다 표현식을 메서드 인수로 전달하거나 변수로 저장할 수 있다.간결성익명 클래스처럼 많은 자질구레한 코드를 구현할 필요가 없다.람다를 통해서 간결한 방식으로 코드를 전달할 수 있다. 람다를 통해서 Java8 이전에 불가능했던 일을 가능하..
