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

• 

  구조화된 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

• 

  백준 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

• 

  생산성 향상을 위한 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

• 

  깃 커밋 컨벤션 VSCode에 적용하기 깃 커밋 컨벤션 (Git Commit Convention) ? 개인 프로젝트를 하거나 여러 사람들과 협업할 때 무조건 커밋로그를 남기게 되어있습니다. 사람마다 커밋을 작성하는 방식이 모두 다릅니다. 서로 의미를 정하지 않은 의미의 이모지를 넣거나, 무조건 소문자로 쓰거나, fix code 와 같이 매우 추상적으로 작성하는 경우도 있습니다. 그렇게 작성하다 나중에 특정 커밋을 취소하거나 누가 어떤 파일 수정하였는지 추적하고 싶을때가 종종 생깁니다. 하지만 작성되어 있는 커밋로그가 fix code, refactor code 의 연속이라면..? (절망에 빠지게 됩니다.) 그런 상황을 방지하고 원활한 협업을 위해서는 커밋 컨벤션이 필요합니다! 그럼 어떤 컨벤션을 선택해야할까? 제가 위와 같은 질문을 받았다면 .. 2022.07.09

• 

  2020 정보처리기사 실기 대비 내용 정리 11-20 2020 정보처리기사 실기를 대비하기 위해 보았던 관련 실기 책의 내용을 정리한 노트를 공유하는 포스팅입니다. - 키워드 : APM, SQL 성능개선 순서, 연계 메커니즘 및 시스템, 연계 데이터 식별 및 표준화 절차, 암호화 알고리즘, EAI, ESB 11. APM (Application Performance Management) - 정의 : 운영중인 시스템의 가용성 확보, 다운 타임 최소화 등을 통해 안정적인 시스템 운영을 위하여 부하량과 접속자 파악 및 장애진단을 하는 성능 모니터링 도구 - 유형 : 리소스 모니터링 (CPU, 메모리, 디스크), 엔드 투 엔드 모니터링 12. SQL 성능개선 순서 1) 문제 있는 SQL 식별 : APM, TKPROF, SQL-Trace 사용 2) 옵티마이저 통계 확.. 2020.10.15

• 

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

• 프로그래머스 이름이 있는 동물의 아이디 (IS NULL) - 문제 핵심 조건 1. 동물 보호소에 들어온 동물 중, 이름이 있는 동물의 ID를 조회하는 SQL 문을 작성해주세요. => 이름이 있는 동물의 ID를 조회 : IS NULL 2. 단, ID는 오름차순 정렬되어야 합니다. => 오름차순 정렬 : ORDER BY - 정답 코드 SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NOT NULL; - 문제링크 : programmers.co.kr/learn/courses/30/lessons/59407 코딩테스트 연습 - 이름이 있는 동물의 아이디 ANIMAL_INS 테이블은 동물 보호소에 들어온 동물의 정보를 담은 테이블입니다. ANIMAL_INS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATE.. 2020.12.02

• 

  백준 1759번 암호 만들기 - 문제 설명 암호는 L개의 알파벳 소문자들로 구성되며, 최소 한개의 모음(a,e,i,o,u)과 두개의 자음으로 구성되어 있다. 암호를 이루는 알파벳은 증가하는 순서로 배열되었을 것으로 추측된다. 암호로 사용했을 법한 문자의 종류는 C가지일 때 가능성 있는 모든 암호들을 구하여라 - 입력 첫째 줄에 두 정수 L, C가 주어진다. (3 ≤ L ≤ C ≤ 15) 다음 줄에는 C개의 문자들이 공백으로 구분되어 주어진다. - 출력 사전식으로 가능한 암호를 모두 출력 * 문제 풀이의 핵심 1. 브루트포스 이 문제는 브루트포스 방법을 사용해 모든 경우의 수를 구한뒤 조건에 맞는 암호를 찾는 방식으로 해답을 구해야 풀 수 있는 문제입니다. 브루트포스 문제는 순열의 구해야 하는 수가 모든 순열을 구하는 시간복잡도가 O.. 2020.10.30

• 

  백준 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