최신 글 목록
-
깃 커밋 되돌리기 명령어
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.07.11
-
깃 커밋 컨벤션 VSCode에 적용하기
깃 커밋 컨벤션 (Git Commit Convention) ? 개인 프로젝트를 하거나 여러 사람들과 협업할 때 무조건 커밋로그를 남기게 되어있습니다. 사람마다 커밋을 작성하는 방식이 모두 다릅니다. 서로 의미를 정하지 않은 의미의 이모지를 넣거나, 무조건 소문자로 쓰거나, fix code 와 같이 매우 추상적으로 작성하는 경우도 있습니다. 그렇게 작성하다 나중에 특정 커밋을 취소하거나 누가 어떤 파일 수정하였는지 추적하고 싶을때가 종종 생깁니다. 하지만 작성되어 있는 커밋로그가 fix code, refactor code 의 연속이라면..? (절망에 빠지게 됩니다.) 그런 상황을 방지하고 원활한 협업을 위해서는 커밋 컨벤션이 필요합니다! 그럼 어떤 컨벤션을 선택해야할까? 제가 위와 같은 질문을 받았다면 ..
2022.07.09
인기 글 목록
-
반응형 웹 폰트 크기 설정
html { font-size: 62.5; } 반응형 웹을 만드는 방법 반응형 웹을 만드는 방법은 여러가지가 있는데 그 중 하나는 css의 media-query 속성을 사용하여 브라우저 뷰포트의 크기가 태블릿, 모바일 디바이스 크기가 되었을 때 대응해주는 방법이 있습니다. 이 방법의 단점은 브라우저 특정 뷰포트 크기가 되었을 때 설정이 바뀌기 때문에 뚝 뚝 끊기며 반응하며 유연하지 않습니다. 모바일 시안의 브라우저 뷰포트의 가로 크기를 360px, 데스크탑 시안의 가로 크기를 1200px로 설정했다고 가정하였을 때 361px의 가로 크기부터는 모두 데스크탑 크기의 폰트 사이즈가 적용됩니다. 가로 크기가 361px 이상인 모바일 디바이스가 있다면 데스크탑 폰트 사이즈가 적용되어 매우 불편한 사용자 경험을 ..
2022.07.11
-
React 는 왜 프레임워크가 아니라 라이브러리일까?
React에 관한 글을 작성하다가 React는 왜 라이브러리일까? 그리고 프레임워크와 라이브러리의 차이점은 무엇일까? 에 대한 해답을 얻기위해 포스팅을 작성하게 되었습니다. 1. React 는 프레임워크일까? 라이브러리일까? 그 답은 React 공식 홈페이지에서 얻을 수 있었습니다. - React 홈페이지 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 2. 그렇다면 왜 React는 라이브리리일까? React가 라이브러리인 이유를 생각해 보기 전에 프레임워크와 라이브러리의 간단한 정의를 찾아보았습니다. 1) 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 ..
2020.09.16
-
백오피스 개발에 도움되는 사이트 모음
백오피스 및 관리자 사이트를 제작하는데 도움이 되는 라이브러리를 리서치 또는 직접 사용해 본 도구들을 모아서 정리하였습니다. * ⭐️ 평점 : 제일 프로젝트에 적용하면 좋아보이는 기술이 가장 높은 별점으로 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
-
깃 커밋 컨벤션 VSCode에 적용하기
깃 커밋 컨벤션 (Git Commit Convention) ? 개인 프로젝트를 하거나 여러 사람들과 협업할 때 무조건 커밋로그를 남기게 되어있습니다. 사람마다 커밋을 작성하는 방식이 모두 다릅니다. 서로 의미를 정하지 않은 의미의 이모지를 넣거나, 무조건 소문자로 쓰거나, fix code 와 같이 매우 추상적으로 작성하는 경우도 있습니다. 그렇게 작성하다 나중에 특정 커밋을 취소하거나 누가 어떤 파일 수정하였는지 추적하고 싶을때가 종종 생깁니다. 하지만 작성되어 있는 커밋로그가 fix code, refactor code 의 연속이라면..? (절망에 빠지게 됩니다.) 그런 상황을 방지하고 원활한 협업을 위해서는 커밋 컨벤션이 필요합니다! 그럼 어떤 컨벤션을 선택해야할까? 제가 위와 같은 질문을 받았다면 ..
2022.07.09
-
구조화된 CSS 작성을 위한 BEM (Block Element Modifier)
BEM (Block Element Modifier) : CSS 를 효율적이고 빠르게 작성하기 위한 웹 개발 방법론 1. BEM 사용이유? BEM은 왜 사용해야 할까요? 보통 작은 웹 페이지를 구성할 때에는 CSS, SASS와 같은 방식을 사용해서 시작하게 됩니다. 하지만 점차 웹페이지가 커진다면, 하나의 CSS 파일로는 임의로 작성한 소스코드가 일관성을 유지하기 힘들게 되어 유지보수가 어렵게 될 것입니다. 2. BEM을 사용하면 생기는 이점 이점은 바로 성능과 효율성 입니다. 1) 코드 작성 시간이 줄어든다 : 모듈화 되어 한 번 잘 작성해놓으면 작성한 코드를 불러오면 됩니다. 2) 작성해야 하는 코드양이 줄어든다 : 중첩해서 CSS 코드를 작성할 필요가 없기 때문에 작성할 소스코드 양이 줄어듭니다. 3..
2020.08.18
-
프론트엔드 개발에 도움되는 사이트 모음
이때까지 개발하면서 참고하거나 도움되는 모든 웹 사이트들을 모아봤습니다. 꾸준하게 업데이트 될 예정입니다. 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
-
AbortController를 사용해 API 비동기요청 취소하기
최근 Javascript 웹 페이지 제작을 하면서 fetch를 통한 비동기요청이 진행되는 동안에 요청을 취소해야하는 기능구현이 필요하게 되었다. 페이지 이동, 취소 요청과 같은 이벤트가 발생하게 되면 이전 비동기요청을 취소하는 방법에 대해서 알아보다 이를 더 잘 이해하기 위해 포스팅을 작성하게 되었습니다. 1. AbortController 개요 Fetch 객체는 promise 객체를 리턴하는 비동기함수입니다. 원래 promise 객체는 자체 abort 기능이 없기 때문에 abortcontroller 를 통해서 비동기 동작 중단 기능을 구현 할 수 있습니다. - 사용해야 하는 이유 1) 필요하지 않은 API 호출을 취소하여 웹페이지 성능개선 2) API 호출로 인해 발생하는 비용 절감 2. 기본적인 사용방..
2020.10.03
-
생산성 향상을 위한 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
-
웹 성능 향상을 위한 Throttle과 Debounce 개념부터 활용까지
저는 Javascript 웹 페이지 제작을 하면서 성능 향상을 위해 쓰로틀(Throttle)과 디바운스(Debounce) 기능이라는 것을 알게 되었습니다. 그에 대한 이해를 더욱 깊이있게 하고 배운 것을 공유하기 위해 포스팅 하게되었습니다. 두 가지 기능에 대한 개념부터 활용까지 한 번 알아보겠습니다. 1. 둘의 개념과 사용법은? 1) Throttle 이란? - 개념 : 여러 호출이 발생할 때 일정 시간이 지나기 전에는 기능이 호출 되지 않도록 하는 기능 - 사용예 : 무한 스크롤을 사용한 LazyLoading 기능을 구현할 때 사용, 스크롤로 인한 성능 저하 방지 Throttle을 적용하지 않으면 스크롤이 조금 움직일 때 마다 기능을 계속 호출하게 된다. 스크롤 이동시 많은 기능이 로드되어야 한다면 부..
2020.09.07
-
일관성 있는 코드 포맷팅을 위한 ESLint 톺아보기
Javascript 소스코드를 더욱 정확하고 일관성 있게 작성하기 위해 도움이 되는 ESLint라는 도구가 있음을 알게 되었고 포스팅하게 되었습니다. 1. ESLint의 개념 우선, ESLint가 무엇인지 알기 전에 ES와 Lint에 대해서 알 필요가 있습니다. 1-1. ES란? ES는 ECMA Script 와 동일하며, ECMA Script란 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어진 규격이다. 이 포스팅에서는 (ES = ECMA Script) => Javascript 언어를 가리킨다고 보면 됩니다. 1-2. Lint란? 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운..
2020.08.19
-
백준 2565번 전깃줄
- 문제 설명 두 전봇대 A와 B의 전깃줄이 임의로 연결되어 있을 때, 서로 겹치지 않도록 전깃줄들을 배치할 때 없애야 하는 전깃줄의 최소 개수를 구하는 프로그램 작성 - 입력 첫째 줄에는 두 전봇대 사이의 전깃줄의 개수가 주어진다. (전깃줄의 개수는 100 이하의 자연수) 둘째 줄에는 한 줄에 하나 씩 A전봇대와 B전봇대가 연결되는 위치의 번호가 주어진다. (위치의 번호는 500 이하의 자연수, 같은 위치에 두 개 이상의 전깃줄이 연결될 수 없다.) - 출력 모든 전깃줄이 서로 교차하지 않게 하기 위해 없애야 하는 전깃줄의 최소 개수 * 문제 풀이의 핵심 0. 알고리즘 : LIS 알고리즘 모든 전깃줄이 연결된 상태에서 없애는 것이 아니라, 어떤 전깃줄을 선택하면 서로 교차하지 않고 가장 많이 연결할 수..
2020.08.07