I_TStory (19) 썸네일형 리스트형 [Cursor AI 활용] 프론트엔드 개발자의 UI, UX 개선하기 프론트 화면 개선 과정 정리기존 디자인의 문제점기존 업무 관리 화면에서는 업무 단위가 많아질수록 세로 스크롤이 과도하게 길어지는 문제가 있었습니다.사용자는 필요한 정보를 찾기 위해 계속해서 아래로 스크롤해야 했고, 이는 가독성과 사용성 모두에 부정적인 영향을 미쳤습니다.1차 개선 시도: 생산일 기준 필터링처음 시도한 개선은 생산일 기준으로 데이터를 필터링하여, 초기 렌더링 시 한 달 단위의 데이터만 표시되도록 한 것이었습니다.이를 통해 초기 화면 로딩 시의 스크롤 부담은 어느 정도 줄일 수 있었습니다.하지만 이 방식은 데이터가 누적될수록 여전히 스크롤이 길어질 수밖에 없다는 한계가 있었습니다.즉, 근본적인 해결책은 아니었습니다. 2차 개선: 카테고리별 그룹화보다 근본적인 해결을 위해 업무를 카테고리별로 .. CSR, SSR, SSG… 이젠 진짜 확실히 구분해보자! “이 페이지는 CSR로 구현돼서 SEO가 약해요.”“SSR로 바꾸면 첫 페이지 로딩이 더 빨라질 수도 있어요.”“SSG로 미리 렌더링해서 정적 페이지로 배포해요.”CSR, SSR, SSG가 어떻게 다르고, 언제 어떤 걸 써야 하는지 헷갈리는 경우 많은데오늘 이 글로 한 방에 정리해보자1. CSR (Client Side Rendering)브라우저(클라이언트)에서 JS로 화면을 만드는 방식어떻게 작동하나요?:사용자가 페이지에 접속하면브라우저는 HTML 틀(div#root)만 받고JS 번들을 다운받은 후 그때서야 화면이 보이기 시작함대표 예시:React 앱을 Vite/CRA로 만들었을 때SPA(Single Page Application) 대부분장점빠른 페이지 전환 (앱처럼 동작)백엔드 없이도 작동 가능단점JS.. 코딩테스트 알고리즘 종류 1. 정렬 (Sorting)버블 정렬: 인접한 두 개를 비교하며 정렬하는 방식 (비효율적)선택 정렬: 가장 작은(혹은 큰) 값을 선택해 앞으로 보내는 방식삽입 정렬: 이미 정렬된 부분에 새로운 데이터를 삽입하는 방식퀵 정렬: 피벗(pivot)을 기준으로 작은 값과 큰 값을 나누며 정렬병합 정렬: 데이터를 반으로 쪼개 정렬한 후 합치는 방식💡 코딩테스트에서는 보통 sorted()나 sort()를 활용하면 됨2. 탐색 (Search)선형 탐색 (Linear Search): 데이터를 하나씩 확인하는 방식 (O(N))이진 탐색 (Binary Search): 정렬된 배열에서 중간값을 기준으로 찾는 방식 (O(logN))DFS (깊이 우선 탐색): 한 방향으로 계속 탐색하다가 더 이상 갈 곳이 없으면 되돌아옴 (.. 브랜치 생성하기 (branch, switch) 브랜치 생성이유:새로운 기능 추가, 버그 수정, 병합&리베이스 테스트 (임시브랜치로 테스트하고 잘못되면 삭제하면됨), 이전 코드 개선, 특정 커밋으로 돌아갈 때 (hard 리셋은 커밋이 없어질 수도 있고, 리버트는 사용이 좀 까다로워서 브랜치 새로 만들어서 작업한 후 리베이스나 병합하는것이 좋음) 👩🏻🏫 브랜치 다루는 명령과 옵션 👩🏻🏫 git branch: 현재 브랜치 확인, 생성git branch: 현재 브랜치 확인git branch 브랜치명: 새로운 브랜치 생성 HEAD 가 main, newbrach1 을 가리키고있음: HEAD는 현재 작업 중인 브랜치의 최근 커밋을 가리킵니다. 👩🏻🏫 git checkout, git switch git switch 는 Git 2.23(2019.. 맥북 터미널에서 git init 하고 github에 업로드하는 방법 👩🏻🏫 용어 짚고 넘어가기로컬 저장소.git 폴더원격 저장소로컬 저장소를 업로드하는 곳 : GitHub 저장소워킹트리Git에서는 작업폴더를 워킹트리라고 함.정확히는 작업 폴더에서 .git폴더(=로컬 저장소) 를 뺀 나머지 부분Git 저장소엄밀하게는 로컬 저장소를 의미하지만넓은 의미로 작업폴더(워킹트리 + 로컬 저장소)를 의미하기도함즉, .git 폴더를 포함한 작업폴더 전체영역 바탕화면에 호호 폴더를 만들었구요 cd 호호 명령어로 호호 폴더로 접근했습니다.pwd로 현재경로를 탐색했더니 호호가 잘 나오네요+ 바탕화면 호호 폴더에서 git status 했더니 .git 이 없다고 뜹니다.git init -b main 명령어로 git 저장소를 생성하고 main 브랜치 초기화 해줘야합니다.ls -a 로 .. 터미널 명령어 정리 이건 설명을 읽기만 하는 것보다 터미널 켜서 아래 명령어를 직접 쳐보시는 게 이해가 빠릅니다.+ 폴더명 입력할 때 앞글자까지만 치고 Tab키 누르면 자동입력 됩니다.Desktop일경우 Des 까지만 입력 후 Tab 하면 Desktop 입력됨(D만 입력할 경우 Derectory, Downloads 등 앞글자가 동일한 파일 여러개가 나옵니다.)pwd현재 폴더 위치 확인ls현재 폴더 파일 목록 확인ls -a현재 폴더 파일 목록 확인 (숨김 파일도 볼 수 있음)cd홈 폴더로 이동 (터미널 처음 켰을 때 그 경로)cd 폴더이름특정 폴더로 이동cd ../ 현재 폴더의 한단계 상위 폴더로 이동mkdir 폴더이름현재 경로에 새로운 폴더를 만듬👻현재 경로 Desktop 이지요? 맥북 바탕화면 경로입니다. 이 상태에서 .. [Github 사용법 A to Z] 풀리퀘스트, 브랜치 보호 규칙 풀리퀘스트 할 때 의미를 담은 제목 짓기 풀리퀘스트를 병합하는 세가지 방법1. 병합 커밋 생성 (기본 방법)2. 스쿼시해서 병합3. 리베이스해서 병합 깃허브에서 풀리퀘스트 되돌리기풀리퀘스트에 있는 커밋들을 전부 리버트 하고 싶을 때PR이 완료된 페이지에 Revert 버튼이 있음 브랜치 보호 규칙 (branch protection rule)풀리퀘스트 할 때 승인 받아야 진행가능하게 하고협업하는 브랜치에 바로 push 할 수 없게 하는 등 협업 브랜치를 보호 [Github 사용법 A to Z] 스태시: 로컬저장소에서 임시저장 (커밋 X) git stash를 사용하여 저장하면, 스택(Stack) 으로 저장된다. (가장 최근 임시저장된 리스트가 상위에 쌓임 ) 1. git stash: 임시저장 로컬 저장소 목록에 변경 사항을 임시 저장git stash git stash는 새로 생성된 파일들엔 적용안된다. 새로 생성된 파일도 임시저장하고 싶다면 git add 후 git stash 진행git add . git stash 2. git stash list : 임시저장 리스트 확인리드미 수정 => git stash => 리드미 수정 => git stash => 리드미 수정 => git stash stash 총 세 번 후 git stash list로 저장 내역을 확인해보니 총 3개의 스태시 리스트가 나오는 것을 볼 수 있다.스택형식으로 쌓인.. 이전 1 2 3 다음
