간혹 프론트엔드 개발자 분들에게 React를 왜 사용하는지 물어보면 "Virtual DOM을 사용하여 빠르게 렌더링이 가능하기 때문에 사용합니다" 라고 말씀하시는 분들이 있습니다. 일반적으로 사용자 인터렉션이 많고, 자주 렌더링이되는 애플리케이션의 경우 DOM보다 빠를 수 있지만, Virtual DOM과 DOM 각각 장단점이 있어 어떤게 빠르다 비교할 수는 없다고 생각합니다. 우선, Virtual DOM이 어떤 개념인지 먼저 살펴보겠습니다.  Virtual DOM 이란?Virtual DOM 혹은 가상 돔이라고 하는 기술은 React와 Vue와 같은 라이브러리 혹은 프레임워크에서 사용합니다. 이름에서도 알 수 있듯이, 실제 DOM을 대신해서 메모리 상에서 DOM을 가상으로 만들어 관리하는 방식입니다.메모리..

백준 문제를 풀고 이력이랑 풀이를 남기기 위해 git에 올렸었는데, LeetHub 크롬 확장프로그램과 같이 백준허브라는 Extension이 있었네요 적용 방법크롬 익스텐션 검색창에 "백준허브"를 검색하거나 아래 링크를 통해 extension을 설치합니다. 백준허브(BaekjoonHub) - Chrome 웹 스토어Automatically integrate your BOJ submissions to GitHubchromewebstore.google.com  이후 설치된 extension을 누르면 github 인증하는 버튼이 있습니다. 클릭합니다.   풀이를 저장할 Repository 이름을 입력합니다. 이제 백준에 들어가서 문제를 풀면 아래와 같이 문제를 자동으로 git에 올려줍니다. 아래 사진과 같이 메모..

Monorepo모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다. 모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다. 단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다. TuborepoTurborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborep..

다국어 처리flutter에서는 다국어 처리를 할때, easy_localization을 많이 사용합니다. easy_localizationflutter cli를 이용하여 easy_localization 의존성을 추가합니다.flutter pub add easy_localization 추가한 뒤에, 다국어 번역이된 json 파일을 관리할 디렉토리를 생성합니다. 위치는 크게 중요하지 않습니다. 보통 assets 하위에 리소스를 많이 보관합니다. 본 글에서는 번역 json 파일도 assets/translations 하위에 생성했습니다. 그리고, 영어와 인도네시아 번역 처리가 필요하여 id-ID.json 과 en-US.json 을 생성했습니다.assets└── translations ├── id-ID.json ..

Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..

문제도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 순서대로 적혀져 있다. 바구니는 일렬로 놓여져 있고, 가장 왼쪽 바구니를 1번째 바구니, 그 다음 바구니를 2번째 바구니, ..., 가장 오른쪽 바구니를 N번째 바구니라고 부른다. 도현이는 앞으로 M번 바구니의 순서를 역순으로 만들려고 한다. 도현이는 한 번 순서를 역순으로 바꿀 때, 순서를 역순으로 만들 범위를 정하고, 그 범위에 들어있는 바구니의 순서를 역순으로 만든다. 바구니의 순서를 어떻게 바꿀지 주어졌을 때, M번 바구니의 순서를 역순으로 만든 다음, 바구니에 적혀있는 번호를 가장 왼쪽 바구니부터 출력하는 프로그램을 작성하시오. 입력첫째 줄에 N (1 ≤ N ≤ 100)과 M (1 ≤ M ≤ 100)이 주어진..

문제아직 글을 모르는 영석이가 벽에 걸린 칠판에 자석이 붙어있는 글자들을 붙이는 장난감을 가지고 놀고 있다. 이 장난감에 있는 글자들은 영어 대문자 ‘A’부터 ‘Z’, 영어 소문자 ‘a’부터 ‘z’, 숫자 ‘0’부터 ‘9’이다. 영석이는 칠판에 글자들을 수평으로 일렬로 붙여서 단어를 만든다. 다시 그 아래쪽에 글자들을 붙여서 또 다른 단어를 만든다. 이런 식으로 다섯 개의 단어를 만든다. 아래 그림 1은 영석이가 칠판에 붙여 만든 단어들의 예이다. 한 줄의 단어는 글자들을 빈칸 없이 연속으로 나열해서 최대 15개의 글자들로 이루어진다. 또한 만들어진 다섯 개의 단어들의 글자 개수는 서로 다를 수 있다. 심심해진 영석이는 칠판에 만들어진 다섯 개의 단어를 세로로 읽으려 한다. 세로로 읽을 때, 각 단어의 ..

문제동혁이는 오래된 창고를 뒤지다가 낡은 체스판과 피스를 발견했다.체스판의 먼지를 털어내고 걸레로 닦으니 그럭저럭 쓸만한 체스판이 되었다. 하지만, 검정색 피스는 모두 있었으나, 흰색 피스는 개수가 올바르지 않았다.체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다.동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오. 입력첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다. 이 값은 0보다 크거나 같고 10보다 작거나 같은 정수이다. 출력첫째 줄에 입력에서 주어진 순서대로 몇 개의 피스를 더하거나 빼야 되는지를 출력한다. 만약 수가 ..

문제예제를 보고 규칙을 유추한 뒤에 별을 찍어 보세요. 입력첫째 줄에 N(1 ≤ N ≤ 100)이 주어진다. 출력첫째 줄부터 2×N-1번째 줄까지 차례대로 별을 출력한다. 예제 문제 풀이마름모 모양이므로, 위 삼각형과 아래 삼각형을 나눠서 출력하도록 하였습니다.n = int(input())for i in range(n): print(" " * (n - i - 1) + "*" * (2 * i + 1))for i in range(n - 1): print(" " * (i + 1) + "*" * (2 * (n - i - 1) - 1)) 채점 결과 문제 출처https://www.acmicpc.net/problem/2444

문제알파벳 소문자로만 이루어진 단어가 주어진다. 이때, 이 단어가 팰린드롬인지 아닌지 확인하는 프로그램을 작성하시오.팰린드롬이란 앞으로 읽을 때와 거꾸로 읽을 때 똑같은 단어를 말한다.level, noon은 팰린드롬이고, baekjoon, online, judge는 팰린드롬이 아니다. 입력첫째 줄에 단어가 주어진다. 단어의 길이는 1보다 크거나 같고, 100보다 작거나 같으며, 알파벳 소문자로만 이루어져 있다. 출력첫째 줄에 팰린드롬이면 1, 아니면 0을 출력한다. 예제 문제 풀이왼쪽의 첫번째(l)부터 +1씩 이동하고, 오른쪽의 마지막(r) 문자부터 -1씩 이동하여 해당 인덱스의 문자가 동일한지 비교합니다.l과 r이 만나면 반복문을 종료합니다.w = input()l, r = 0, len(w) - 1whi..