프로젝트를 시작할 때 가장 기본! (포맷까지 했지만) 널뛰기 하는 것 같아서 차마 적지 못하고 따로 뺀 프론트엔드 개발환경 설정 2편! 오늘은 VS Code에서 ESLint와 Prettier를 설정해보자. 항상 Reference는 마지막에 표시하는데 다들 읽어보면 좋을 것 같아서 이번에는 최상단에 표시한다. 나는 이 블로그의 글을 직접 적용해보며 작성한 것이라 정확한 내용은 아래 블로그를 참고하는 것이 좋다. ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그 he..
이 글을 적기 위해서 컴퓨터를 포맷했다. (아님) 한 번 쯤은 정리하고 넘어가야하는 프론트엔드 개발환경 기초 설정! 1. VS Code 설치 VS Code는 마이크로소프트에서 개발한 에디터이다. 프론트엔드를 개발하려면 코드를 작성하고 편집하는 툴이 필요할텐데 VS Code가 그 대표적인 예시이다. MS는 에디터라고 주장하지만 사실상 IDE 취급을 받고 있다. 즉, VS Code는 프론트엔드 개발에서 코드를 편집하고 작성할 수 있는 가장 대중적인 프로그램이다. 다양한 확장자와 플러그인을 지원하기 때문에 프론트엔드 개발 이외에도 많이 사용된다. 이를 쓰고 싶지 않다면 자신이 편한 IDE를 다운로드해서 사용해도 된다. 2. Git 설치 Git은 변형을 추적할 수 있는 형상 관리 도구이다. 말이 굉장히 어려운데..
프로젝트에 아토믹 디자인 도입하기 치스톡 프로젝트를 재개하면서 가져가려했던 목적 3가지가 있었다. 그 중 하나가 바로 디자인 시스템을 통한 효율적인 프론트엔드 개발이었는데 이의 연장 선상으로 아토믹 디자인을 치스톡에 적용해보려한다. 이전에 진행했던 프로젝트에서 야심차게 CDD를 도입했다가 야심차게(?) 실패했던 적이 있다. CDD는 작은 컴포넌트부터 만들기 시작해서 이를 조립해 하나의 커다란 페이지를 만드는 상향식 개발 방법론이다. 때문에 먼저 디자인이 나오고, 이를 바탕으로 컴포넌트를 분류한 뒤에 개발해서 짜올리는 방식으로 진행해야하는 것이 쉬운데 당시에는 이를 모르기도 했고 개발자가 디자인과 개발을 병행하다보니 너무 혼란스러워 제대로 진행되지 못했었다. (그래서 이번에는 디자인부터 차근차근 체계적으로..
디자인 완료 디자인 작업이 드디어 끝났다. 사실 남은 부분이 있긴 한데, 그런 부분들은 구현 우선순위가 낮은 편이고 또 디자인만 하다가 개발에 못 들어갈 것 같아서 마무리하려한다. 포트폴리오 화면을 따로 만들려고 했었는데 너무 힘들어서 홈화면의 자산 부분을 최근 조회한 종목으로 바꾸고 포트폴리오 화면을 아에 삭제했다. 이 프로젝트에 존재하는 화면은 단 두 개, 홈 화면과 개별 종목 화면이다. 포트폴리오는 나중에 기회가 되면..........먼 훗날에.......... 또, Secondary 색상과 Tertiary 색상이 바뀌었다. 원래 분홍색과 주황색으로 가져가려 했으나 빨간색도 있고 분홍색도 있고 주황색도 있고 하는게 너무 혼잡스러웠고, 주식이라는 도메인 특성상 그래프를 빨/파로 그리는 경우가 많기 때..
먼저, 디자인 현재 치스톡 프로젝트 디자인 작업 중이다. 8px 그리드 기반으로는 처음 작업해보는데 신경써야 할 것도 많고 재밌긴한데 어렵다. 그래도 지금이 꿈과 희망이 가득할 시점이니까.........기능 구현 생각 안하고 디자인 마구 그리는........... 모바일 대응도 하고 싶은데, 일단 PC 디자인이 빨리 끝나고 모바일 디자인을 호다닥 해봐야겠다. PC는 12 Column, Gutter 16px로 작업 중..... 모바일은 4 Column, 8px Gutter로 작업 예정.... 여러 레퍼런스에서 디자인 틀을 조금씩 가져왔다. 모방은 창조의 어머니라 하지 않던가.... 네이버 증권, 토스 증권, 인베스트 인포, 매일경제 증권, 기타 컨셉 디자인 등등등등 감사합니다... 그래도 전체적인 색 톤이..
2022년 6월 10일에 시작한다 선언해놓고 퍼블리싱 끝나고 손도 안 댄 치스톡 프로젝트. 변명을 하자면 부스트캠프 참가 같은 일들 때문에 2.0 개편을 시작하기도 전에 엎어져 버렸다...는 변명을 들 수 있겠다. 그리고 2023년 초복을 맞아(?) 무덤에서 꺼내와 프로젝트 개편을 다시 시작해보려고 한다. 왜 새 프로젝트를 안하고 기존 프로젝트를 다시 하는지? 그렇게 부스트캠프를 수료하고 졸업 후에 공고들을 많이 보는데, Next.js와 데이터 시각화와 관련된 요구사항이 많이 보였다. 치스톡 프로젝트에서 주식 대시보드 프로젝트로 실시간 주식 차트를 보여준다는 점에서 데이터 시각화를 차트 컴포넌트만 React Server Component를 적용한다면 뉴스나 회사 정보에는 Next.js를 사용해볼 수 있지..
출처 : 백준, https://www.acmicpc.net/problem/16235 16235번: 나무 재테크 부동산 투자로 억대의 돈을 번 상도는 최근 N×N 크기의 땅을 구매했다. 상도는 손쉬운 땅 관리를 위해 땅을 1×1 크기의 칸으로 나누어 놓았다. 각각의 칸은 (r, c)로 나타내며, r은 가장 위에서부터 www.acmicpc.net # 같은 곳에 여러 개의 나무가 심어질 수 있다. # 모든 나무는 나이를 한 살 씩만 먹는다. # 새로 추가되는 모든 나무의 나이는 1살이다. # NxN의 격자에 M개의 나무를 심어서 K년 동안 키울 것 # 나무 좌표의 r, c는 1부터 시작 # 모든 칸은 처음에 양분이 5만큼 들어있음 # 봄 # 나무는 땅에서 나이만큼의 양분을 먹고 나이 + 1 # 하나의 칸에 여..
출처 : 프로그래머스, https://school.programmers.co.kr/learn/courses/30/lessons/68645 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 먼저, 생각해야 할 부분 1. 규칙 찾기 각 행을 내려가면서 행 내의 모든 숫자를 배열에 추가하면 좋겠지만, 그럴 수 있는 규칙은 보이지 않는다.즉, 일일이 구현해야하는데, 달팽이 모양을 따라가면서 쉽게 구현하기 위한 규칙을 찾아보자. 풀이 def solution(n): triangle = [[0 for _ in range(i + 1)] for i in range(n..
* 본 글은 2022.06.21에 작성한 글을 업데이트한 글입니다. 목록을 표시하는 방법에는 여러가지 방법이 있습니다만 모바일 환경에서 주로 구현되는 방법은 무한 스크롤입니다. 오늘은 이 무한스크롤을 구현하고 독립적인 컴포넌트 형태로 꺼내 쓸 수 있도록 만들어보려합니다. - 무한스크롤 구현 무한 스크롤을 만들 때 생각해야할 부분은 다음과 같습니다. 1. 사용자가 목록의 끝에 도달했다는 것을 어떻게 인지할 것인가? 2. 목록의 갱신은 어떻게 할 것 인가? 2번의 경우 우리는 자바스크립트의 비구조화 할당(... 문법)과 State를 통하여 쉽게 갱신할 수 있습니다. 갱신된 목록 역시 map 함수를 통하여 손쉽게 렌더링 할 수 있습니다. 그렇다면 문제가 되는 부분은 바로 1번, 사용자가 목록의 끝에 도달했다는..
출처 : 프로그래머스, https://school.programmers.co.kr/learn/courses/30/lessons/150369 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr # n개의 집에서 i번째 집은 i만큼 떨어져있고 모든 집은 일자로 놓여있음. # 트럭에는 cap개 싣을 수 있다. # 모든 집에 배달/수거해야하는 택배 개수를 알고 있다. # 모든 택배를 보내고 수거하는데 드는 최소 이동 거리 더보기 풀이 def solution(cap, n, deliveries, pickups): answer = 0 while True: while del..
출처 : 백준, https://www.acmicpc.net/problem/1062 1062번: 가르침 첫째 줄에 단어의 개수 N과 K가 주어진다. N은 50보다 작거나 같은 자연수이고, K는 26보다 작거나 같은 자연수 또는 0이다. 둘째 줄부터 N개의 줄에 남극 언어의 단어가 주어진다. 단어는 영어 소문 www.acmicpc.net # n개의 단어가 있고 k개의 글자를 가르칠 거임 # 모든 단어는 anta로 시작하고, tica로 끝남. # 단어 내의 모든 글자를 알고 있다면 단어를 읽을 수 있음. # 1
출처 : 프로그래머스, https://school.programmers.co.kr/learn/courses/30/lessons/42579 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr # 많이 플레이된 장르순 -> 장르 내에서 가장 많이 플레이된 노래 순으로 2개 수록 # 같은 경우 idx가 작은 것부터 수록 더보기 먼저, 생각해야 할 부분 1. 많이 플레이된 장르 순으로, 장르 내에서 플레이 수가 상위 2개인 노래를 담아야한다. 이를 위해서는 장르별 플레이수, 장르별 플레이 순으로 정렬된 노래가 필요하다. 위 둘을 구하면, 플레이 수가 많은 장르를 가져..
