전체 글

[#4] 프론트엔드 개발자가 만드는 Figma 디자인 | 깔끔한 todoList UI

현재 프론트엔드 3명이서 todoList 프로젝트를 진행하고 있다. 해당 프로젝트의 목적은 깃허브 이슈와 Jira를 사용해서 최대한 깔끔한 프로젝트를 하나 완성하는 것이다. 다른 분들은 디자인에 인연이 없다고 하셔서 내가 맡아서 피그마 작업을 진행했다. 처음엔 걱정했지만 꽤 좋은 방법을 찾아서 생각보다 수월하게 디자인 프레임을 완성할 수 있었다. 여기서 내가 이용한 방법은 바로 "Figma Community"이다. 유명한 디자인 웹 사이트인 Pinterest는 디자인 참고용으로는 좋겠지만 비전공자가 참고해서 피그마를 만드는 것에는 좀 어려움이 있어보인다. 피그마로 간단한 디자인 작업을 하기에는 Figma Community를 적극 추천한다. 예를 들어서, 'web todolist'를 검색하면 다양한 자료들..

creacte-next-app 없이 next.js 구축하기

아래의 내용은 중 한 부분입니다. create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI 도구이다. 해당 도구들은 애플리케이션 구축에 필요한 대부분의 작업을 대신해주기 떼문에 프로젝트 구조를 공부하기는 어렵다. 그리고 2023년도에 리액트 팀은 "create-react-app은 미래에 더이상 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이다."라고 했기 때문에 아무것도 없는 상태에서 리액트 프레임워크를 구축하는 방법을 공부할 필요가 있다. CLI란? Command Line Interface의 약자로, 컴퓨터와 사용자 간의 상호 작용을 위해 텍스트 명령어를 사용하는 인터페이스를 의미합니다..

Eslint | react/react-in-jsx-scope off가 작동이 안되는 경우

** 리액트 17버전 부터 import React 구문 필요 없어졌다. npm run build로 자바스크립트 파일 크기 비교하면 트리쉐이킹 덕분에 해당 구문이 있나 없나 크기는 같지만 빌드 시간 감소한다는 장점이 있고 저 코드가 있는게 지저분해보여서 해당 부분의 오류를 없애 주려고 했다. 그래서 아래 코드를 .eslintrc.js > rules 에 추가했다. 하지만 husky로 lint-staged 검사를 했을 때 해당 룰이 먹히지 않고 계속 import React 구문을 넣으라는 에러가 떴다. Error: 'React' must be in scope when using JSX react/react-in-jsx-scope + Warning: React version not specified in esl..

[#3] Co-Task 프로젝트 셋팅 | Package Manager(yarn berry), Development Environment(Eslint, Prettier, husky)

이번주 스프린트로 프로젝트 셋팅을 맡았다. Package Manager(yarn berry)와 Development Environment(Eslint, Prettier, husky)를 리서치 및 셋팅하는 것이다. 꼬박 이틀에 걸친 힘든 싸움이였다..한장에 다 정리하려고 하니 천천히 알아보자 1. Package Manager Package란? - Module을 하나의 블럭이라고 했을 때 이러한 블럭들의 뭉치 NPM의 등장 여러 버전의 동일한 패키지를 한 프로젝트에서 사용할 수 있게 하자 설치 방식을 통일하자 패키지 관련 정보가 들어있는 메타 데이터를 간소화 하자 누구나 배포할 수 있도록 하자 Yarn의 등장 병렬화를 통한 속도 개선 자동화 된 lock 생성 의존성 트리 알고리즘 변경 캐시 사용 Pnpm &..

Eslint error 해결 방법 | 'extensions' has been removed, 'resolvepluginsrelativeto' has been removed.

eslint를 설치했더니 위와 같은 오류가 생겼다. 해당 문제는 eslint가 v.9를 릴리즈하면서 나타나고 있는 문제라고 한다. 그래서 다운그래이딩을 해주면 쉽게 해결된다. 이런 버전 문제들은 ./package.json을 보면서 작업하자. 1. 현재 eslint v9 삭제 yarn remove eslint 2. v8.57.0 설치 yarn add -D eslint@8.57.0 ++ 혹시 yarn berry, zero install 환경인 경우, 3. sdk 업데이트 yarn dlx @yarnpkg/sdks vscode [참고] https://github.com/vercel/next.js/issues/64114

Chat gpt가 알려주는 이미지 최적화 | Next.js Image 태그를 쓴다고 이미지가 최적화되는 것은 아니다

이미지 최적화에 대해 고민하게 된 계기 유저의 프로필 이미지를 사용하는 부분에서 아래의 에러가 떴다. 그래서 Chat gpt와 티키타카를 하며 "왜 Next의 Image를 사용했는데도 이미지 최적화가 자동으로 되지 않았나" 알아보았다. "warn-once.js:16 Image with src "https://AWSURL....á„‘á ³á„ á ©á„€á ³á„ á ¢á„†á ¥á„‰á ³.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maint..

[#2] Github Actions로 Github Issue 생성시, Jira Issue 자동화

들어가며 협업을 제대로 경험해보고 싶어서 투두리스트 "co-task"라는 토이 프로젝트를 시작했다. 목표는 github 컨벤션, issue 발행, CI/CD 등 정말 정석으로 실무처럼 개발해보고 익숙해지는 것이다. 그래서 가장 많이 들어본 Jira를 협업툴로 선택했다. 그러나, 조사를 진행할수록 내 생각과는 달랐다. Jira를 사용하면 우선 시각적으로 깔끔하게 스케줄관리를 할 수 있고 [#1] 포스팅처럼 github과 연동해서 브랜치에 티켓 넘버를 넣어, commit 메세지를 봤을 때 어떤 단계인지 한눈에 알기 쉽다. 하지만, github issue에 리서치 등을 일목요연하게 정리해서 모두에게 공유하고 싶은 우리의 목적과는 다르게 좀 제한된 느낌이 있었다(정말 팀 단위용). 물론 아래의 방법처럼 gith..

[#1] Jira 협업툴 github과 연동 | Husky로 commit message Jira 티켓번호 자동화

1. Jira 설치 및 github 연동 구글링해서 보면 자료가 엄청 많고 쉽다.2.  Husky로 commit message Jira 티켓번호 자동화여기서부터가 시간이 좀 걸렸다.  처음에는 직접 .git/hooks에 prepare-commit-msg를 생성해서 하는 방법을 사용했다. 하지만 더 간편한 방법이 있었다. 바로 husky를 사용하는 것이다. 설정 과정도 매우 간단하다.  터미널 내 위치: ../프로젝트명 (내경우 프로젝트이름이 co-task) -> ../co-task 1) husky 설치npm install husky jira-prepare-commit-msg --save-dev && npx husky install(이때 husky/_ 경로는 잘못된게 아니고 사용하는 ..

맥 vscode 권한 오류 해결법 | react typescript 설치시

vscode에서 파일을 수정한 뒤 저장할 때, 하단에 이 오류가 뜨는 경우, sudo chmod -R 777 ~/Desktop/프로젝트폴더경로 코드를 터미널에 입력해주면 해결 된다.

서버 사이드 렌더링이란? | with Next.js

전통적인 사이드 렌더링과 SPA 비교 위의 이미지를 보면, 최초 요청 이외에도 계속 서버에서 HTML을 받아올지 아닌지의 차이를 볼 수 있다. 쉽게 말하면 웹페이지 랜더링의 책임을 어디에 두느냐에 따라 SPA냐 아니냐가 구분된다. 여기서 Ajax란 브라우저가 갖고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법으로, ES6의 fetch().then()문법과 비슷하다고 생각하면 된다. 서버 사이드 렌더링의 장점 ✓ 최초 페이지 진입이 비교적 빠르다. - 서버에서 HTTP 요청을 수행하고 서버에서 HTML을 그려서 내려주는 것이 클라이언트 단에서 수행하는 것보다 빠름 ✓ 검색 엔진 최적화에 유용하다. - 검색 엔진 작동 과정 1...

Next.js Sever Side Rendering을 위한 함수 | pages router

Next.js에서 서버 사이드 렌더링을 위한 함수를 공식문서에서 한번 흝어보았다. 또한, 각각 함수에 따른 내 블로그 프로젝트에 적용한 예시도 첨부하였다. 서버 사이드 렌더링이 궁금하다면? 아래 링크 참고 서버 사이드 렌더링이란? | with Next.js 전통적인 사이드 렌더링과 SPA 비교 위의 이미지를 보면, 최초 요청 이외에도 계속 서버에서 HTML을 받아올지 아닌지의 차이를 볼 수 있다. 쉽게 말하면 웹페이지 랜더링의 책임을 어디에 두느냐 mariais.tistory.com 1. getStaticPaths와 getStaticProps 블로그, 게시판과 같이 사용자와 관계없이 정적인 페이지에 유용하고 반드시 함께 사용해야 작동한다. 언제 사용해야 할까? SEO를 위해서 미리 렌더링이 되어야하고 빨..

Next.js Image 사진 비율 안깨지게 하는 법 | object-fit cover

새로운 프레임워크나 라이브러리를 쓸 때 가장 시간 아까운 것은 그 도구의 새로운 문법을 익히지 못해서 쉬운 부분에서 머뭇거리는 것 같다. 이번에 Next.js (pages router)를 하면서 이미지 최적화를 위하기도, next에서 권장해서, Image를 사용하고 있다. 보통은 이미지 비율을 그대로 가져기위해 background-size: cover;를 많이 사용할 것 이다. 즉, 본래 이미지의 가로 세로 비율을 그대로 가져가면서 배경을 다 덮는 css 방법이다. Next.js 공식문서를 해석해보자면, "fill" 은 이미지의 가로, 세로 길이를 모를 때 유용하다. 부모 요소는 반드시 position이 "relative", "fixed", "absolute" 중에 하나이어야 한다. 기본값으로는 "abs..

유틸리티 타입 Pick<T, K> 프젝에 적용하기 | TypeScript

얼마 전에 한 입 크기로 잘라먹는 타입스크립트에서 유틸리티 타입을 공부했다. 마침 블로그 프로젝트을 하면서 유저정보등 중복되는 타입 사용이 많아 불편함을 겪고 있었다. 그래서 이번에 프로필 정보 수정 모달을 작업하면서 적용시켜 보았다. 간단하지만 이 타입을 모른다면 절대 사용할 수 없는 코드랄까.. 우선, Pick 타입에 대해 간단히 설명하자면, 원래 만들어 놓은 객체 타입에서 몇 개의 key만 필요할 때 사용가능하다. 즉, 필요한 key만 "Pick"하는 것이다. 내 블로그 프로젝트를 예로 들어보자. a. (/profile/index.tsx) 에서 유저정보를 받아오고 그 타입은 아래와 같이 지정해두었다. const [userInfo, setUserInfo] = useState([]); const { n..

TypeScript, Next.js, React.js 이미지 미리보기 | Image Preview

프론트엔드라면 프로젝트마다 적어도 한번씩은 image preview 작업을 할 것이다. 그래서 필수 코드를 정리해보았다. 아래 코드는 프로필 이미지를 편집하는 모달이다. 스택은 macro.twin, next.js(pages router)이고 css가 생략되어 있을 수 있다. 위의 빨간 줄을 없애기 위해 아래처럼 방어코드를 작성해주었다. const [imagePreview, setImagePreview] = useState("/images/defaultUser.svg"); const addPreviewImage = async (e: React.ChangeEvent) => { if (e.target.files !== null) { const file = e.target.files[0]; if (file) {..

SEO 최적화

SEO는 요즘 빠질 수 없는 개념인 것 같다. SEO때문에 Server Side Rendering을 편하게 쓸 수 있는 Next.js를 사용하는게 아닌가 싶기도 하다. 여기서 태그들의 예시는 예전에 했던 유튜브 클론코딩 프로젝트로 한다. SEO는 무엇일까? 검색 엔진 최적화(Search Engine Optimization)라고 불리며 보통 줄여서 SEO라고 많이 한다. 웹사이트의 검색 엔진 결과 페이지(SERP)에서 높은 순위를 차지하도록 웹사이트를 최적화하는 프로세스이다. 웹사이트를 네이버, 구글과 같은 검색 엔진의 동작에 적합하게 맞추어 관련 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업인데 해당 서비스의 수익성과 직결된다고 볼 수 있다. 대표적인 SEO Tag - Title WETUBE ..