분류 전체보기

next.js 의 page 란 무엇일까?

개요 next.js 에서 page 란, pages 디렉토리 내부에 있는 .js, .jsx, .ts, .tsx 확장자를 가진 파일에서 export 된 리액트 컴포넌트 를 말한다. next.js 프로젝트 내부의 pages 디렉토리에 리액트 컴포넌트 파일(component.js)을 두면, next.js는 해당 파일을 읽어서 http://localhost:3000/component 경로에 접근했을 때, 해당 컴포넌트를 제공한다. 예시 pages/about.js 라는 리액트 컴포넌트를 생성하면 http://localhost:3000/about에 접속했을 때 about.js가 보이는 개념이다. const About = () =>( 안녕하세요. jake seo입니다. ); export default About; ne..

이펙티브 자바, 쉽게 정리하기 - item 43. 람다보다는 메서드 참조를 사용하라

이펙티브 자바, 쉽게 정리하기 - item 43. 람다보다는 메서드 참조를 사용하라 메서드 참조 사용 예 메서드 참조 사용 전 @Test public void mapMergeTest() { Map scoreMap = new HashMap(); String[] names = {"John", "Jake", "Jack", "Ted", "Paul"}; scoreMap.put("Jake", 10); for (String name : names) { scoreMap.merge(name, 5, (o, n) -> o + n); // (*) 여기 } for (String name : scoreMap.keySet()) { System.out.println("name = " + name); System.out.println..

이펙티브 자바, 쉽게 정리하기 - item 42. 익명 클래스보다는 람다를 사용하라

이펙티브 자바, 쉽게 정리하기 - item 42. 익명 클래스보다는 람다를 사용하라 메서드 파라미터로 함수 객체를 받는 경우: 람다 미사용 @Test public void sortTest1() { System.out.println("beforeSort: " + words.toString()); Collections.sort(words, new Comparator() { @Override public int compare(String o1, String o2) { return Integer.compare(o1.length(), o2.length()); } }); System.out.println("afterSort: " + words.toString()); } 기존에는 위와 같이 익명 클래스를 이용해 처리..

6월 2주차 기술 회고

토이 프로젝트 (모여봐) 회고 이번주에 프로젝트에서 어떤 것을 했는지 되돌아보자. 이번주에 한 것 thymeleaf 로 프론트 페이지를 띄웠다. html form 을 이용해 기존에 작성해둔 REST API 와 통신하여 데이터의 추가 및 리스트 조회를 구현했다. 느낀것 간단하게라도 화면을 그리면 프로젝트 진행률이 착착 올라가는 느낌이다. 이 앱에서 무엇을 할 수 있을지도 조금 더 구체화되는 느낌이다. MVP (Minimum Viable Product) 에 대한 중요성을 느꼈다. HTML Form 이 구형이 된 느낌을 받았다. 요즘 대세는 REST API 이다. HTTP Form 의 기본 전송 Content-Type은 application/x-www-form-urlencoded 이다. REST API 에서 ..

6월 2주차 주간 회고

개발 학습 방법 회고: 학습의 가성비 2 5월 4주차 회고 에서도 학습의 가성비를 생각했었는데, 여기에 연계된 생각이 또 났다. 예전에 김영한님 강의를 듣다가 요즘 잘하는 친구들은 야생형이라는 이야기를 하셨는데, 생각해보면 야생형 학습이라는 학습법이 학습의 가성비를 최대로 가져가는 학습법이란 생각이 든다. 일단 활용해보고, 차차 필요한 이론을 익힌다. 이 과정에서 쓸데없이 토끼굴로 빠지는 것을 막고 알아봤자 활용하기 힘든 것들이 배제된다. 만일 알아봤자 활용하기 힘든 것이라고 가정했는데 추후에 아니란 것이 밝혀진다면 그때 학습한다. 구슬이 서 말이라도 꿰어야 보배라 세상의 모든 진리를 알고 있더라도 이로운 무언가를 만들어내지 못하면 아무런 의미가 없다. 계속 개발 공부만 하는 것이 아니라 그 공부로 회사..

tailwind css 세팅 방법

tailwind css 세팅 방법 세팅 방법으로는 총 4가지가 있다. Tailwind CLI: Tailwind CLI 도구를 이용한 설치 방법으로 가장 빠르고 간결하다. input.css 를 지정하면 그에 따른 output.css 가 나오게 되는 간단한 원리를 가지고 있다. Using PostCSS: Webpack, Rollup, Vite, Parcel 과 같은 빌드 도구와 가장 깔끔하게 통합되는 방법이다. Framework Guides: 프레임워크 가이드를 보고 세팅하는 것이다. 공식문서에 자세하게 나와있다. Play CDN: CDN 을 이용하는 방법인데, 브라우저에서 간단하게 스크립트를 하나 추가하면 할 수 있다. 그러나 프로덕션에 권장되진 않고 개발용으로 사용하면 괜찮다. tailwindcss 초기..

Glob 이란 무엇일까?

개요 glob이란, 파일 이름의 집합을 wildcard characters 로 명시하는 패턴을 말한다. 예시로 Unix Bash shell 에서 mv *.txt textfiles/ 명령어를 입력하면, .txt 로 끝나는 모든 파일을 textfiles 디렉토리로 이동시킨다. * 은 / 를 제외한 모든 문자열을 뜻한다. ? 는 1 글자의 어떤 문자를 뜻한다. 기원 벨 연구소의 유닉스 최초버전에서 비롯되었다. global 을 줄여서 glob 이라고 표현한 것이다. 벨 연구소에서 개발한 B 언어 에서 비롯되었다. 이전 유닉스에서는 숨김 파일을 보고 싶을 때 숨김 파일 앞에 . 이 들어간다는 점을 이용해 .* 와 같은 형식으로 많이 이용했었다. 와일드카드별 기능 *: 길이에 상관없이 모든 문자열을 매칭한다. ex..

PostCSS 의 Autoprefixer 란 무엇인가?

개요 Autoprefixer 는 PostCSS 플러그인 중 하나이다. CSS 를 파싱하고 vendor prefixes 를 추가한다. Can I Use 로부터 얻은 결과를 이용한다. 사용 예 적용 전 ::placeholder { color: gray; } .image { background-image: url(image@1x.png); } @media (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } } 위와 같이 vendor prefixes 가 포함되지 않은 CSS 를 작성하면, 적용 후 ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ..

PostCSS 란 무엇인가?

개요 PostCSS 란 JS 플러그인을 통해 스타일을 변환하는 도구이다. 이 플러그인들을 통해 CSS 에 대한 린팅을 할 수도 있고, 변수와 믹스인 을 지원하기도 하고, 미래의 CSS 문법과 인라인 이미지를 변환하는 등의 일을 한다. Autoprefixer 는 가장 많이 쓰이는 인기있는 PostCSS 플러그인 중 하나의 예시이다. PostCSS 는 CSS 파일을 가져가서, 규칙을 분석 및 변경하기 위한 API 를 제공한다. CSS 를 Abstract Syntax Tree 로 변환함으로써 이를 제공한다. 이렇게 제공되는 API 는 PostCSS 를 이용하는 플러그인들에 의해 사용된다. 이를 통해 에러를 찾거나 vendor prefixes 등을 추가할 수 있다. Autoprefixer 는 이를 통해 vend..

SCSS 의 믹스인 (@mixin) 키워드에 대해 알아보자

개요 @mixin 과 @include 는 sass 혹은 scss 에서 자주 볼 수 있다. @mixin 을 통해 스타일 그룹을 지정하고 @include 를 통해 만들어놓은 그룹을 이용할 수 있다. 자바에서 사용되는 믹스인과 같은 맥락으로 사용된다. 자바에서의 믹스인 참고 @mixin 기본 사용 예 @mixin 정의 @mixin red-box { padding: 10px; margin: 5px; background-color: red; } red-box 라는 믹스인을 정의했다. @mixin 으로 정의했다면, @include 를 이용해 사용할 수 있다. @include 사용 div { @include red-box } 위와 같이 입력하면, div { padding: 10px; margin: 5px; backg..

Abstract Syntax Tree (AST) 란 무엇인가?

개요 AST 는 Abstract Syntax Tree 혹은 단순히 Syntax Tree 라고 불린다. 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조의 트리이다. 추상적이라는 이유는 실제 구문에서 나타나는 모든 세세한 정보를 표현하지 않는다는 것을 의미한다. 이를테면 코드에서 이해를 돕기 위한 그룹핑을 위한 괄호까지 명시적으로 분리된 노드로 표현될 필요는 없다. 비슷하게, if-condition-then 구문은 3개의 브랜치를 가진 단일 노드로 표현될 수 있다. (위의 예제 그림에서 condition, assign (if-body), assign (else-body) 을 살펴볼 수 있다.) 이렇게 세세한 정보까진 표현하지 않는다는 것이 Concrete Syntax Trees 와 구분된다. AST 가..

자바 웹 프로젝트 배포에 쓰이는 용어 및 개념 정리

개요 자바 언어를 쓰는 사람들의 대부분은 웹 프로젝트를 구성하기 위해서 자바 언어를 사용한다. 이 때 우리는 보통 빌드와 배포를 도와주는 Maven 이나 Gradle 과 같은 도구를 활용하여 빌드 및 배포를 진행한다. 배포를 하다보면 생각보다 다양한 문제 상황들이 생기는데, 때로는 프로젝트에서 대부분의 파일은 그대로 두고 몇개의 파일만 새로 배포하고 싶을 때도 있고 때로는 통째로 모든 파일을 뒤엎어버리고 싶을 때도 있다. 도구에서 지원하는 버튼 하나로 매일 배포하다가 특수한 상황에서 배포를 할 때, 배포에 대한 지식이 없으면 혼란스러운 경험을 할 수 있다. 용어 정리 기본적인 용어를 알아야 배포 관련 설명을 이해할 수 있다. 빌드 (Build) .java 파일을 .class 파일로 컴파일하고, 기존의 파..