Next.js를 실무에서 사용했는데 제품 특성 상 버전업이 쉽지 않아 계속 12버전만 사용해왔다. 13버전 부터 바뀌거나 추가된 내용이 많고, 15버전 까지 나와서 관련 내용을 공식 문서를 활용해 학습할까 한다. 굳이 14버전을 고른 이유는 가장 최신 버전은 안정화되지 않은 경우가 많고 13, 14, 15 중 13버전 부터 많은 변경사항이 생겼기 때문에 최신 버전에서 한 단계 낮은 14버전을 포트폴리오 프로젝트에 학습하며 적용해보기로 했다. 1. Routing1-1. 구조URL구조는 Segment와 Path로 나뉜다.1. Segment: /로 구분되는 부분.2. Path: Segment의 집합.폴더 구조는 아래와 같이 구분한다.1-2. app routerNext 13이후로는 Server Component..

Figma를 사용해 화면 설계와 동시에 디자인을 진행하려고 했는데, 디자인이 큰 고비였다. 업무 중에도 디자인을 직접 했어야 하는 경험이 있었는데 나름 페이스북 디자인을 벤치마킹해서 만들었지만 돌아온 팀장님 평가는 "이딴게 페북이냐.." 상처 받았다. 1. 화면 설계1.1 메인 페이지기획을 바탕으로 기능 별 레이아웃 구역을 간단하게 잡아봤다. 전체적인 레이아웃 구조는 Header + Contents + Footer 형태를 생각했는데, 나를 소개하는 페이지로써 적합하고 방문자 입장에서 단순히 스크롤만으로 전체 내용을 확인할 수 있는게 편할 거 같아서 선택했다. 1.2 Modal개인정보 관리 모달에서는 아래 항목을 수정할 수 있다.연락처: 전화 번호, 이메일, 외부 사이트 링크 (Github, tistory..

프로젝트 초기 구성에 이어 기획은 해본적이 없지만, 실무 경험을 바탕으로 나름의 기획을 해보려 한다. 기획 단계에서 가장 경계해야 하는 것은 잦은 변경!! 꼭 픽스 시키고 시작해보자.1. 개요우선, 전문적으로 기획을 공부해보지 않았기 때문에 아주 간단하게 작성하면서도 개발자로써 사전에 정의되면 좋을 것 같은 내용들을 기획하고 작업에 들어가보고자 한다.항목내용기획 배경나만의 포트폴리오가 필요한 이유.1. B2B 솔루션 회사에 재직했기 때문에 외적으로 보여줄만한 결과물이 없었다.2. 외부에 보여줄 수 있는 개인 프로젝트를 진행하고, 그 과정을 포트폴리오로 활용하면 좋겠다는 생각이 들었다.3. 겸사 겸사 번뜩이는 아이디어가 있다면 나의 자산으로써 소개하는 공간을 만들어보자.기획 목표(나에게의 요구 사항)이 프..

개인 프로젝트를 시작해보려고 하는데, 여러 프로젝트를 진행하려면 개인적으로 템플릿이 필요하다고 생각이 들었다. 그래야 추후에 아이디어가 떠오를 때 빠른 시작이 가능하니까!  1. 기술스택구분기술선정 이유프레임워크Next.js 14개인적으로 12버전으로 경력을 쌓아왔는데, 현재 15버전 까지 나온 상황에서 최신 버전은 아무래도 어려움이 많을 거 같아서 한 버전 낮은 걸 골랐다.라이브러리React 18기존엔 17버전을 써왔는데, 이번엔 18을 써보기로.언어 Typescript, JavascriptTypescript는 사용한 경험이 있지만, 아직 Javascript만큼 익숙하지는 않기도 하고 런타임 에러를 고려하면 당연히 사용하는 걸로? Javascript는 말해 뭐해디자인 프레임워크tailwindcsscss..

✏️개요 오랜만에 작성하는 이번 글의 주제는 공공데이터 포털의 오픈 API 사용방법이다. 공공데이터 포털은 정부에서 운영하는 오픈 API 서비스로 정부의 공공기관들이 운영되는 과정에서 수집한 다양한 종류의 데이터를 일반 기업들 및 국민 모두가 무료로 자유롭게 사용할 수 있도록 하나의 포털에서 제공하는 서비스이다. 필자가 공공데이터 포털의 오픈 API 서비스를 처음 접하게 된 것은 대학교 시절이었는데, 그 당시 졸업 작품을 위한 아이디어를 도출하는 과정에서 도저히 일반 대학생들이 수집할 수 없는 방대한 양의 데이터가 필요했어서 관련 정보를 찾는 과정을 통해 접할 수 있었다. 그러나 다른 아이디어가 채택되면서 사용해 보지는 못하게 되었다. 이와 같은 서비스에 대한 흥미를 느껴 한 번쯤 사용해보고 싶다는 생각..

✏️개요 이번에 작성할 글의 주제는 root-context와 servlet-context에 관하여다. 이번 주제를 component-scan을 주제로 한 글에 작성할까 생각했지만, 분리해서 작성하는 게 주제에 좀 더 집중할 수 있다고 생각했다. 이 주제에 대해서는 입사 초기에 시간이 많을 때 스프링과 자바에 대해 공부하는 과정에서 한번 접하고 넘어갔었는데, 이번에 component-scan에 대해 알아볼 때 component-scan이 2개가 존재하는 이유에 대해 궁금하여 찾아보는 과정에서 다시 한번 접하게 되어 글로 정리해보려고 마음먹게 되었다. ❗ 본 게시글은 필자 개인적인 의견이므로 틀린 부분이 있을 수 있습니다. 댓글을 통해 지적해주시면 감사하겠습니다. ✏️root-context와 servlet-..

✏️개요 이번에 작성할 글의 주제는 context:component-scan(이하 component-scan) 필자가 이것을 처음 접한 것은 취업 준비를 위해 Spring Framework를 독학하고 있던 시절, XML을 이용한 bean 등록 방법 이후에 어노테이션을 이용한 bean 등록에서 알게 되었고, component-scan이 제공하는 편한 기능을 단순히 감탄하며 사용하기만 해왔다. 현재 실무에서 진행되는 프로젝트에 기능 추가를 무사히 마친 뒤, 시간이 남게 되어 Java의 개념에 집중했던 이전과는 달리 스프링에 대한 기초 지식을 단단히 하고자 스프링 설정 파일을 열었고 그곳에서 component-scan을 만날 수 있었다. 그곳에 있던 것은 역시 독학하며 사용한 기본적인 형태의 component..

✏️개요 이번에 작성할 게시글의 주제는 리플렉션(Reflection)이다. 리플렉션 역시 다른 개념들과 마찬가지로 실무에서 사용하는 코드를 분석하는 과정에서 마주친 개념이다. 필자가 리플렉션이라는 단어를 처음 듣게 된 것은 취업 준비를 하던 시절에 Java 개발자를 위한 면접 질문 리스트에서였다. 그러나 그 당시에는 그렇게 중요해 보이는 개념이 아닌 것 같았고, 실제로 학부생 시절에도 학습했던 적이 없어 넘어갔었지만 실무에서 사용되는 것을 보고 이번 기회에 개념을 잡아보고자 하여 글을 작성하기로 마음먹었다. ❗ 본 게시글은 필자 개인적인 의견이므로 틀린 부분이 있을 수 있습니다. 댓글을 통해 지적해주시면 감사하겠습니다. ✏️Reflection, 리플렉션 필자가 코드를 분석하는 과정에서 리플렉션이라는 개념..

✏️개요 이번에 작성할 게시글의 주제는 가변 인자(Varargs)이다. 필자는 이 가변 인자 역시 학부생 시절이나 취업을 준비하는 과정에서 접해본 적 없던 개념이었다. (뭐 이렇게 처음 보는 게 많은 건지) 가변 인자를 처음 접하게 된 것은 역시 현재 실무에서 분석하고 있는 프로젝트에서 접할 수 있었다. 이 과정에서 Java의 Reflection이라는 개념도 접하였는데, 이에 대한 게시글은 다음에 작성하고자 한다. ❗ 본 게시글은 필자 개인적인 의견이므로 틀린 부분이 있을 수 있습니다. 댓글을 통해 지적해주시면 감사하겠습니다. ✏️Varargs, 가변 인자 필자는 처음에는 가변 인자라는 단어 자체도 모르고 있던 상태에서, 프로젝트에서 아래와 같은 형식의 문법을 발견할 수 있었다. public Object..

✏️개요 이번에 작성할 게시글의 주제는 정규 표현식이다. 정규 표현식은 학부생 시절부터 여러 언어를 학습할 때마다 등장하는 챕터였는데, 필자는 개인적으로 Thread와 마찬가지로 기피했던 챕터였다. Thread는 내용 자체가 이해하기 어려웠다면, 정규 표현식은 이해하고 싶지가 않았다. ^\\d {3}-\\d {3,4}-\\d {4}$