ez-dev-oo

포트폴리오 사이트를 만들기 시작한 지도 어느덧 2주가 지나간다. 이제 project 부분 데이터 넣어주고 상세페이지 제작만 하면 디테일한 부분 빼고 거의 완성이지만, 난 오늘 프로젝트를 갈아엎기로 결심했다. (완전히 버리고 새로 시작하는 건 아니지만,, 그래도 두 번째 디자인을 좀 더 공들여 할 예정이다.)  결심한 첫 번째 이유. 오른쪽 사이드바. 남들 다 하는 헤더나 왼쪽 사이드바 말고, 유니크하게 오른쪽 사이드바를 제작했다. 처음엔 독특해서 마음에 쏙 들었지만 제작을 하면 할 수록 왼쪽에 들어오는 내용들의 길이가 제각각인데 오른쪽에 고정된 사이드바가 있으니 뭐랄까.. 좀 구렸다. 왼쪽에서 오른쪽으로 글을 읽는 게 익숙하기에 오른쪽엔 당연하게도 여백이 나와야 할 것만 같은데, 비어있어야 할 공간에 뭔..

먼저 인증을 위한 앱 비밀번호를 발급받는다.◾ 앱 비밀번호 발급받기 생성한 비밀번호는 다시 조회할 수 없으니 바로 .env에 설정해 둔다.만약 까먹었으면 삭제하고 다시 생성하면 된다.  ◾ problem 1외부 라이브러리 nodemailer가 인식되지 않는다. 🔽 타입스크립트에서 외부 라이브러리를 사용할 때 불편한 점 {포스팅하기} [Typescript/타입스크립트] declare 모듈 타입 & 전역 타입 typeRoots 와 paths0. 목차 1. 개요 2. 모듈 타입 3. 전역 타입 1. 개요 typescript를 쓰면서 가장 불편한 부분은 외부 라이브러리를 설치해서 사용 할 때이다. 사용하려는 라이브러리의 사용도가 높다면 사실 크게 문제kong-dev.tistory.com  ◽ solve 1 타..

◾ WHY이메일 receive form을 만들던 중, 본문을 입력받는 textarea의 height을 고정된 값으로 설정해주었더니 디자인이 조금 둔해보였다.나는 스크롤을 굳이 늘릴 필요도 없을 뿐더러, 조금 더 사용자 반응형으로 만들고 싶었기 때문에 사용자 입력에 따라 높이가 조절되도록 변경해주었다. 아래의 블로그를 참고하여 코드에 적용해주었다. [css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ? 자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 자동 높이 조절 textarea ? 기본적joyful-deve..

◾ WHY진행중인 프로젝트에서는 모든 페이지가 섹션 소제목과 그 밑에 각 섹션에 맞는 내용을 보여준다.그런데 각각의 페이지에서 동일한 구조를 반복하다보니 중복되는 코드가 많아졌고, 내용이 많아질수록 가독성도 떨어져 코드 구조를 한눈에 파악하기가 점점 어려워졌다.게다가 모두 동일한 디자인의 섹션과 페이지 구조를 갖고 있어 중복되는 css 코드 또한 많아졌기에 분리의 필요성을 느끼게 되었다.  ◾ Section 컴포넌트 분리하기먼저 모든 페이지에서 동일하게 사용하는 Section 컴포넌트를 만들어주었다.각 페이지마다 사용할 소제목을 name으로 받아왔다.// Section.tsxinterface SectionProps { name: String;}export default function Section({..

며칠 전 시작한 portfolio 프로젝트에서 처음 써보는 tailwind css를 도입했다. 처음 사용해보는 tailwind의 경험은 그닥 좋지 않았다.  tailwind 사용기 여러 단점이 있었지만 그 중 테일윈드만의 방대한 css 작성법이 너무나도 큰 불편함으로 다가왔고 결국 기존의 css 방식으로 돌아가 다시 시작하기로 했다.  tailwind css를 도입했던 이유는 nextjs와 tailwind의 호환성이었다. 아무래도 next에서 만든 css이다 보니 여러가지 이점이 있었지만, 스타일링 코드가 명확히 구분된 구조를 선호하고 또 이미 익숙해진 나에게 테일윈드는 잘 맞지 않았다.  그래서 다시 기존에 주로 사용하던 css-in-js 를 사용하려고 했으나, nextjs와 css-in-js는 궁합이..