this-is-blog

최신 글 목록

• 깃 커밋 되돌리기 명령어 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

• 

  패키지 전략 모노레포(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

• 

  백준 17420번 깊콘이 넘쳐흘러 - 문제 설명 기프티콘 N개 선물 받은 정우는 기한 연장을 최소 횟수로 연장을 하면서 기프티콘을 다 쓸 수 있도록 하고 싶다. - 조건 1) 한 기프티콘을 한 번 연장할 때마다 기한이 30일씩 늘어난다. 2) 남은 기프티콘 중 기한이 가장 적게 남은 기프티콘만 사용할 수 있다. 3) 하루에 여러 기프티콘을 사용하거나 연장하는 것 모두 가능하다. - 입력 첫 째 줄에 기프티콘의 수 N 이 주어진다. (1 N; int i; for (i = 0; i > A[i]; } for (i = 0; i > B[i]; } for (i = 0; i < N; i++) { arr.push_back({ A[i], B[i] }); } // 32 비트 정수 초과 경우 고려.. 2020.09.28

• 깃 커밋 되돌리기 명령어 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

• 프론트엔드 개발에 도움되는 사이트 모음 이때까지 개발하면서 참고하거나 도움되는 모든 웹 사이트들을 모아봤습니다. 꾸준하게 업데이트 될 예정입니다. 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

• 

  백준 1463번 1로 만들기 - 문제 설명 정수 X 에 사용할 수 있는 연산은 3가지 이며, 정수 N 이 주어졌을 때 연산을 적절히 사용해서 1을 만드려고 한다. 연산을 사용하는 횟수의 최솟값을 구하여라 연산 1. X 가 3 으로 나누어 떨어지면, 3 으로 나눈다. 2. X 가 2 로 나누어 떨어지면, 2 로 나눈다. 3. 1 을 뺀다. - 입력 첫째 줄에 1 보다 크거나 같고, 106 보다 작거나 같은 정수 N 이 주어진다. - 출력 연산을 하는 횟수의 최솟값 출력 * 문제 풀이의 핵심 동적 계획법을 사용해서 어떻게 큰 문제를 작은 문제로 나누어서 해결 할 것인지, 점화식은 어떻게 세울 것인지를 할 수 있어야 풀 수 있는 문제입니다. 1. 동적 계획법 동적 계획법 문제를 풀기 전에 확인해야할 사항 2가지가 있습니다. 1) 부분 문.. 2020.10.22

• 

  AbortController를 사용해 API 비동기요청 취소하기 최근 Javascript 웹 페이지 제작을 하면서 fetch를 통한 비동기요청이 진행되는 동안에 요청을 취소해야하는 기능구현이 필요하게 되었다. 페이지 이동, 취소 요청과 같은 이벤트가 발생하게 되면 이전 비동기요청을 취소하는 방법에 대해서 알아보다 이를 더 잘 이해하기 위해 포스팅을 작성하게 되었습니다. 1. AbortController 개요 Fetch 객체는 promise 객체를 리턴하는 비동기함수입니다. 원래 promise 객체는 자체 abort 기능이 없기 때문에 abortcontroller 를 통해서 비동기 동작 중단 기능을 구현 할 수 있습니다. - 사용해야 하는 이유 1) 필요하지 않은 API 호출을 취소하여 웹페이지 성능개선 2) API 호출로 인해 발생하는 비용 절감 2. 기본적인 사용방.. 2020.10.03

• 프로그래머스 보호소에서 중성화한 동물 (JOIN) - 문제 핵심 조건 1. 보호소에 들어올 당시에는 중성화 되지 않았지만, 보호소를 나갈 당시에는 중성화된 동물의 아이디와 생물 조회 => 보호소에 들어올 당시에는 중성화 되지 않았지만, 보호소를 나갈 당시에는 중성화된 동물 : ins 테이블과 outs 테이블 모두 동물의 ID가 같아야 하고 존재해야 하므로 INNER JOIN => 보호소에 들어올 당시에는 중성화 되지 않음 : Spayed 와 Neutered 를 포함하지 않음 -> LIKE, AND => 보호소를 나갈 당시에는 중성화 되지 않음 : Spayed 또는 Neutered 를 포함함 -> LIKE, OR * 중성화를 거치지 않은 동물 : Intact, 중성화를 거친 동물 : Spayed 또는 Neutered 2. 이름을 조회하는 아이디 순으로 조.. 2020.11.20

• 

  Javascript 메모리 관리 (가비지 컬렉션) 알고리즘 알아보기 자바스크립트의 메모리 관리 및 가비지 컬렉션과 관련해 공부한 내용에 대해서 포스팅을 작성해 보았습니다. 1. 가비지 컬렉션이란? (GC) 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다. 그렇다면 메모리는 언제 생겨나고 없어질까? 메모리의 생존주기는 아래와 같다. 1-1. 메모리 생존주기 1) 필요할때 할당한다. 2) 사용한다. (읽기, 쓰기) 3) 필요없을 때 해제한다. 1)과 3)은 가비지 컬렉션을 사용하는 Javascript 에서는 암묵적으로 작동하며, C 언어와 같은 저수준 언어에서는 아래와 같이 명시를 해주어야 한다. #include int main() { int pNum = malloc(sizeof(int)); // 4 byte, int 형 데.. 2020.10.19