😆 My name is Ez : 쉽다 쉬워 개발life

이번 프로젝트는 가장 작은 아톰형식의 컴포넌트부터 시작한다. 그래서 각 같은 공통컴포넌트를 먼저 하나 만들어보고 리뷰하기로 했다. 오늘까지 작업은 했고 내일 같이 모여서 리뷰를 하기로 했다. 우리 프로젝트에서 아주 많이 사용되는 Input을 먼저 만들기로 했는데, InputBasic이라고 정했다. 단순 텍스트뿐 아니라 , 숫자, 음수, 소수점, 계좌번호, 온도, 전화번호 등.. 다양한 형태의 텍스트를 입력받고 컨트롤해야 한다. 그리고 인풋 내부 라벨(단위 표기), 검색창의 돋보기 등 다양한 형태도 가지고 있어서 어떻게 처리할지 고민을 많이 했다. 일단 CSS 관련된 부분은 퍼블리싱이 나오면 적용한다고 생각하고 각각의 위치를 먼저 잡았다. Prop로는 간단하게 value, setValue, classNam..

주말에 디자인했던 부분 중 카드가 겹쳐있는 형식의 디자인을 퍼블링 했다. ㅋ 간단하게 hover 하면 카드 scale이 커지고, 위로 올라가는 형태로 먼저 만들어봤다... 머릿속에 있는 형태를 만들려면 많은 시간과 노력이 필요하겠지만 ㅋㅋ 그래도 오랜만에 퍼블리싱해서 재밌다. #2 오늘의 결과물 매일 강의도 듣고.. 운동도 해야 하고 할게 많지만.. 차근차근해보자🔥

처음 개발자 취업을 했을 때 만든 자기소개페이지를 보니 너무 허전하고... 뭔가 많이 부족한 것 같고... 요즘은 디자인이 들어가거나 퍼브리싱 등.. 뭔가 재미난 요소를 만들기 회가 없었다. 그래서 이번에는 좀 시간 날 때마다 틈틈이 디자인도 다시 해보고 퍼블리싱도 다시 하면서 새롭게 내 페이지를 만들고 싶다. 지난주 목요일에 예전에 찾아둔 디자인 레퍼런스를 가지고 뭐라도 해보자 해서 일러스트로 생각나는 데로 그냥 일단 작업했다. 가만히 있으면 되는 게 없더라 ㅋㅋ 일단 디자인만 간단하게 해서 아마 많은 변경이 생길 것 같다.... 그래도 뭐 하나씩 과정을 남겨봐야지😆 #1 오늘의 결과물 정말 어떻게 Layout을 잡을지 생각 없이 했다. ㅋㅋㅋ 틈틈이 레퍼런스 더 찾아보고 수정해야지~

금요일에 프로젝트 기본 구조와 사용하는 스택에 대한 설명을 듣고 css관련된 부분에서는 한 번도 써본 적 없는 방법으로 사용한다고 해서 블로그 피드를 작성하게 됐다. CSS적용하는 방법 중 오늘은 CSS-in-JS 관련된 부분이다. CSS-in-JS에서 내가 아는 방법은 styled-component를 사용하는 방법이다. ( 컴포넌트별 css를 작성해서 관리하는 방식) styled-jsxs styled-jsxs는 nextjs 공식문서에서도 기본적으로 포함하고 있는 방법이라고 한다. 'use client'; import classNames from 'classnames'; import { useRouter } from 'next/navigation'; import css from 'styled-jsx/cs..

다시 시작하는 프로젝트에서는 Next.js 13 버전에서 사용하는 App Router 방식을 사용한다고 한다... (권고사항이라고 해서 사용한다고 함) 사실 많은 자료나 참고할만한 레퍼런스가 부족해서 아직까지 걱정이 되긴 한다. 기존의 Page Router 방식이 더 익숙해서 그런 걸까?.. 13 버전에서는 일단 Page 폴더 안에서 원하는 ____. tsx를 만들어서 라우팅 했다면 App Router는 폴더를 만들고 그 안에 page.tsx를 만들어야지 경로가 생긴다고 한다. 사실 라우팅정도야 금방 익숙해지니깐.... 그리고 개별 폴더마다 아래 이미지처럼 File Convention이 존재했다. (공식문서 참고!!) https://nextjs.org/docs/app/api-reference/file-c..

새롭게 다시 진행하는 프로젝트에서는 Moment.js를 버리고 Day.js로 변경하면 좋겠다고 했다. 더 이상 업데이트가 진행되지 않기 때문이다... (이 부분은 매우 불안😥) Moment.js 홈페이지에만 가도 메인 배너옆에 이런 글이 적혀있다. (다른 권장 사항들을 안내) Moment에서 추천해 준 라이브러리 다운로드 현황이다. 그중에서 Day.js를 선택한 건 사용방법이 Moment.js와 동일하고 가벼운 용량 때문이다. 일단 변경하는 부분에서 굉장히 편리하다. 설치방법 npm install dayjs --save 사용방법 (간단한 사용법만 소개) /** 1. 날짜 객체 생성하기 */ //현재 날짜 객체 생성 dayjs(); // 원하는 날짜 객체 생성하는 방법 dayjs('2023-07-24');..

Atomic Design Pattern에 대해서 공부하고 지금 하고 있는 프로젝트에서 Storybook을 적용해서 컴포넌트를 관리하면 좋을 것 같다는 생각이 들었다. 2023.07.20 - [⌨️ Web Front-End/NextJs] - [Design Pattern] : Atomic Design (아토믹 디자인) 사실 처음 리액트를 배웠을 Storybook에 대해서 들었지만 그때는 리액트조차 이해하지 못한 상태라서 그냥 듣고 넘겼는데 갑자기 떠올랐다. 시니어분에게 적용하면 좋을 것 같다고 말씀을 드렸는데... 사실 뭘 할 줄 알아야 적용할 텐데.. 그래서 며칠 전부터 시간 될 때마다 공식문서와 블로그들을 참고해서 기본 세팅과 버튼 정도 구분하는 것까지 해보았다. 1. StoryBook이란? StoryB..

🤦🏻‍♂️ 모르는 게 너무나도 많다... 오늘은 아침 Front개발자 회의를 하다. 백앤드 시니어분께서 input에 타이핑만 해도 모든 화면에서 랜더링이 된다고 해서 어떻게 처리하면 좋을지 프론트 시니어분께 질문을 하셨다. 그때 하신 말씀이 lodash - Debouncing을 사용하면 좀 줄어들 거라고 하셨는데 난 무슨 말인지 몰라서 ㅎㅎ 메모장에 개념만 써두었다. 정말 모르는 게 너무나도 많다... (개념은 가볍게 익히고 실제로 적용하는 방법정도 작성해볼까 한다.) - lodash 사용 예정 1. Debouncing(디바운싱) 디바운싱이란? 유저가 요청을 보낼 때 일정한 시간격차를 두고, 연속에서 발생한 이벤트를 하나로 묶어서, 처음이나 마지막 한 번에 해당 요청(이벤트)을 실행하는 방식을 말한다. ..

프로젝트를 시작하면서 기존에 React를 왜 사용했는지를 모를 만큼 작성된 코드에는 React의 장점? 강점? 을 전혀 찾아볼 수가 없었다... 😭 😭 😭 😭 한 페이지에 길면 10000라인이 넘는 코드들이 있고, 누군가 수정을 하려고 그 페이지 코드를 보면 닫고 싶은 마음이니깐... (재사용 가능한 부분이 전혀 없음... 단순한 컴포넌트 몇 개를 제외하면...) 지난주 새로 오신 시니어 프런트분이 코드를 보고 분석하고, 새로운 프로젝트를 시작함에 앞으서 우리가 새롭게 적용해야 할 방향성을 제시해 주셨다. ( 물론 선택된 방향의 결과만 듣게 되었지만... 선택한 이유를 물어볼 예정 🥲) 그중에서 오늘은 우리가 사용하는 NextJs에서 사용할 디자인 패턴 Atomic Design에 대해서 간단하게 적어보고..

개발자 취준생일때 개발블로그를 하다가 드디어 다시 블로그를 시작하게 되었다. 두 번째 회사에서 진행하던 프로젝트가 1년 6개월 정도 지나고 프로젝트에 많은 문제가 있다는 것을 느끼고 새롭게 프로젝트를 시작하게 되었다. 마음 한편으로는 꽤 오래동안 진행했던 프로젝트를 다시 처음부터 시작하기 때문에 지칠 수도 있고, 처음에 가졌던 열정이 많이 사라졌을 거라고 생각도 들었다. 한편으로 생각하면 지금까지는 주어진 일에 수동적으로만 참여하고, 당장 눈앞에 보이는 결과물만 만들어내는데 그친 작업이라는 생각도 들었다. 새롭게 재시작하는 프로젝트를 통해서 이전에 실패했던 경험을 바탕으로 더 발전된 모습으로 프로젝트에 임하면서, 많은것을 배우고 느끼고 싶다. 다시 시작하는 프로젝트는 내가 처음부터 참여하기 때문에 기존과..