본문 바로가기

분류 전체보기69

깃 커밋 되돌리기 명령어 git reset [옵션] HEAD~[N] 프로젝트 작업 도중 실수로 커밋 메시지를 잘못 입력하거나 최근 커밋을 되돌리고 싶을 때가 있는데 그럴 때 사용하면 되는 명령어 입니다. 커밋을 어떤 옵션으로 되돌릴까? 우리가 로컬 변경 내역을 원격 저장소로 등록하기 위한 과정은 크게 4가지로 나눌 수 있습니다. 파일 수정 (Change) -> git add (Stage) -> git commit -> git push (원격 저장소 등록) 위 과정을 reset 명령어와 옵션으로 순차적으로 되돌린다고 생각하시면 됩니다. 위에 표시된 명령어에서 골치아픈 부분은 [옵션] 부분입니다. 3가지만 기억하면 됩니다. 1. --soft git reset --soft HEAD~ 가장 마지막 커밋을 Stage (Staged Cha.. 2022. 12. 30.
SSR과 SEO가 웹 서비스에서 왜 중요할까? 0. SSR이 필요한 이유? SSR(Server Side Rendering)은 왜 해야하는 것일까? 에 대한 답을 우선 해야 현재 프로젝트에 알맞는 기술스택을 선정하고 도입을 고려해볼 수 있다. 그 대답은 SEO로 요약할 수 있다. 1. SEO에 관하여 SEO 란 무엇일까? (Search Engine Optimization) 위키백과 정의는 다음과 같다. 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다 - Wiki - 그럼 검색 엔진이 왜 중요할까? 1-1. 국내 인터넷 이용률 → 93% 1-2. 국내 인터넷 이용자 중에서 검색엔진을 통해 웹사이트에 방문하게 되는 비율 1) 차트를 보면 (구글 + 네이버)를 통해 웹사이트로 유입되는 비율이 전체의 약 90% 정.. 2022. 12. 18.
생산성 향상을 위한 Hygen 도입 컴포넌트 제작 생산성을 높이고 싶을 때는 컴포넌트 제너레이터 Hygen을 도입해보자 1. Hygen 이란? 1-1. 특징 1) 디자인 시스템과 코딩 컨벤션이 그라운드룰로 정해져있는 경우 유용함 2) 자바스크립트 기반의 코드 제너레이팅 툴 3) 특정 프레임워크나 라이브러리에 의존적이지 않음 1-2. 장점 1) 같이 개발하는 사람들과 컴포넌트 구성요소 및 디렉터리 구조를 통일 시킬 수 있다. 2) 반복적으로 작성해야 하는 코드를 쉽게 만들어 개발 생산성을 향상 시킬 수 있다. 3) 약간의 node.js 지식을 가지고 있으면 쉽게 템플릿 생성자를 만들 수 있다. 1-3. 단점 1) react snippet extension 을 추가하는 것 처럼 명령어를 추가로 기억해야한다. 2) 코딩 컨벤션이 바뀌게 되면 지.. 2022. 12. 14.
패키지 전략 모노레포(Monorepo) 알아보기 모노레포가 등장하게 된 배경에 대해서 정리해볼 필요가 생겨서 글을 작성하게 되었습니다. 모노레포의 등장 배경, 모노레포 도구, 참고 블로그, 시작하기 위한 지식을 습득할 수 있습니다. 1. Repository Strategy Git을 통한 레포지터리 구성 전략은 크게 3가지로 나누어 볼 수 있습니다. http://dsparch.sciomagelab.com/2022/03/12/monorepo-vs-multirepo/ dsparch.sciomagelab.com 1-1. Monolith 1) 한 레포지터리 내에 모듈화 없이 모든 서비스(프론트, 백엔드 등)가 들어가 있는 것 2) 관심사의 분리(separation of concerns)가 되어있지 않음 => 모듈화를 통해 한계 해결 => 멀티레포 등장 1-2... 2022. 11. 25.
백오피스 개발에 도움되는 사이트 모음 백오피스 및 관리자 사이트를 제작하는데 도움이 되는 라이브러리를 리서치 또는 직접 사용해 본 도구들을 모아서 정리하였습니다. * ⭐️ 평점 : 제일 프로젝트에 적용하면 좋아보이는 기술이 가장 높은 별점으로 1점부터 3점까지 존재한다. 1. 디자인 프레임워크 1. Chakra UI ⭐️ Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui... 2022. 11. 23.
프론트엔드 개발에 도움되는 사이트 모음 이때까지 개발하면서 참고하거나 도움되는 모든 웹 사이트들을 모아봤습니다. 꾸준하게 업데이트 될 예정입니다. 1. 정보성 블로그 1-1. 카카오 FE 블로그 - 카카오 FE 지식 블로그 1-2. 네이버 DEVIEW 1-3. 서핏 - 기획, 디자인, 마케팅, 개발 등 모든 분야 지식 1-4. 토스트UI - 개인적으로 웹 FE 관련 블로그 중에 가장 실무에 도움이 되는 내용이 많은 블로그 1-5. Javascript.info - 모던 JS를 제대로 배우고 싶다면 좋은 사이트 1-6. Chrome Developers - 크롬 개발자 도구에 대한 지식을 얻기 좋은 사이트 1-7. Typescript - 한글 번역 공식 문서도 있지만 아직은 번역이 이해하기에는 부족한 부분이 꽤 있어서 차근차근 공식 문서를 보는게 .. 2022. 11. 20.
반응형 웹 폰트 크기 설정 html { font-size: 62.5; } 반응형 웹을 만드는 방법 반응형 웹을 만드는 방법은 여러가지가 있는데 그 중 하나는 css의 media-query 속성을 사용하여 브라우저 뷰포트의 크기가 태블릿, 모바일 디바이스 크기가 되었을 때 대응해주는 방법이 있습니다. 이 방법의 단점은 브라우저 특정 뷰포트 크기가 되었을 때 설정이 바뀌기 때문에 뚝 뚝 끊기며 반응하며 유연하지 않습니다. 모바일 시안의 브라우저 뷰포트의 가로 크기를 360px, 데스크탑 시안의 가로 크기를 1200px로 설정했다고 가정하였을 때 361px의 가로 크기부터는 모두 데스크탑 크기의 폰트 사이즈가 적용됩니다. 가로 크기가 361px 이상인 모바일 디바이스가 있다면 데스크탑 폰트 사이즈가 적용되어 매우 불편한 사용자 경험을 .. 2022. 7. 11.
깃 커밋 컨벤션 VSCode에 적용하기 깃 커밋 컨벤션 (Git Commit Convention) ? 개인 프로젝트를 하거나 여러 사람들과 협업할 때 무조건 커밋로그를 남기게 되어있습니다. 사람마다 커밋을 작성하는 방식이 모두 다릅니다. 서로 의미를 정하지 않은 의미의 이모지를 넣거나, 무조건 소문자로 쓰거나, fix code 와 같이 매우 추상적으로 작성하는 경우도 있습니다. 그렇게 작성하다 나중에 특정 커밋을 취소하거나 누가 어떤 파일 수정하였는지 추적하고 싶을때가 종종 생깁니다. 하지만 작성되어 있는 커밋로그가 fix code, refactor code 의 연속이라면..? (절망에 빠지게 됩니다.) 그런 상황을 방지하고 원활한 협업을 위해서는 커밋 컨벤션이 필요합니다! 그럼 어떤 컨벤션을 선택해야할까? 제가 위와 같은 질문을 받았다면 .. 2022. 7. 9.
React JSX 개념부터 적용까지 React 를 사용해 웹 프로그래밍 개발을 시작하게 된다면 만나게 될 JSX 가 무엇인지에 대해서 알아보겠습니다. 1. JSX 란? 1) JSX 의 Full name 은 Javascript XML 입니다. 2) JSX 는 React 코드에서 HTML 을 쉽게 사용할 수 있도록 만들어 줍니다. 2. JSX 를 쓰면 좋은점? ex) 3 가지 방법으로 'lets use the JSX' 라는 글자를 가진 p 태그를 만들어 보겠습니다. 1) Vanilla Javascript const target = document.querySelector('.target'); const p = document.createElement('p'); p.innerText = 'lets use the JSX'; target.appen.. 2020. 12. 10.

티스토리툴바