MOLLY

0. 들어가며1. 부트캠프 수료 직후부터 4개월 | 방황의 시간 및 깨달음 너무 두렵고 회피하고 싶었던 것, 그리고 해결책2. 9월부터 12월까지 | 스스로의 이슈 디버깅 (1) 내 발전과 성장이 눈에 보이지 않을 때의 해결책 (2) 한 달 인턴 (3) 프로덕트 캠프 (4) 2024년에 다녔던 컨퍼런스, 세미나, 네트워킹 중 일부 (5) 팀 프로젝트 시작3. 현재 | 진행 중인 팀 프로젝트 & 커밋 리그 1등4. 마무리하며 0. 들어가며2024년 말에 들어서면서부턴 정말 바빠졌다.연말마다 새해로 넘어가는 자정을 기다리고 한 해를 회고하는 시간을 보통 갖곤 했는데, 이번은 그러지 못했다. 새해가 온 줄도 모르고 팀 프로젝트 프로그래밍하기 바빴기 때문이다. 그래서 힘들었냐고?NOPE. 눈코 ..

0. 폰트 파일 다운로드 선택 기준1. 폰트 파일 추가2. 로컬 폰트 설정3. Tailwind CSS 설정4. RootLayout 의 body 태그에 폰트 주입5. globals.css 에서 한글 폰트를 font-family 에 주입해 프로젝트 전역에 자동 적용6. 영어는 className 에 font-sans 를 넣어서 사용OTHER | 1. ttf, woff 차이OTHER | 2. 폰트 파일에 이미 굵기가 지정돼있는데 weight: '400' 처럼 또 따로 지정해 줘야 하는 이유  Next.js에서 폰트 전역으로 설정하는 방법이번 프로젝트에서는 영어 텍스트에만 자동으로 Montserrat 폰트를 적용하고, 한글 텍스트는 Pretendard 폰트를 적용하는 것으로 디자인 시스템이 나왔다. 폰트를 불러오..

1) Storybook 사용 이유2) Storybook 설치3) Storybook 세팅4) Storybook 실행   Storybook: UI 컴포넌트를 독립적으로 개발, 테스트, 문서화하는 도구 주로 디자인 시스템을 구축하거나 공용 컴포넌트를 여러 프로젝트에서 재사용하려고 할 때 사용한다. 상태가 복잡한 컴포넌트(UI 상태, 에러 상태 등)를 개발할 때, 디자이너와의 협업 과정에서 컴포넌트를 자주 공유해야 할 때 유용하다. 효율적인 개발 환경을 만들고, 디자인 시스템 구축 과정에서의 혼란을 줄일 수 있다.읽어보면 좋을 자료(https://fe-developers.kakaoent.com/2022/220609-storybookwise-component-refactoring)  1) Storybook 사용 ..

1. 폴더 구조2. Icon.tsx 컴포넌트3. iconSizes.ts: Icon 크기 관리4. tailwind.config.ts 에 제공되지 않는 크기(30px) 추가5. globals.css에서 SVG에 적용할 기본 스타일 설정6. 아이콘 컴포넌트 생성7. 아이콘 사용8. [참고] SVG 최적화 방법 2가지  이번 프로젝트에서는 사용하는 아이콘이 많으므로, 아이콘을 개별적으로 import해서 사용하는 방식이 아닌 Icon.tsx 을 만들어 중앙 관리 컴포넌트를 사용하는 방식으로 관리할 것이다. 직전 프로젝트에서 아이콘의 SVG 코드가 반복되고, 관리가 불편했어서 이번 프로젝트에선 그 부분을 해결하고자 한다. Icon.tsx와 같은 아이콘 컴포넌트를 만드는 이유는 아이콘 관리 및 사용의 일관성과 편의성..

1. 디자인 시스템이 필요한 이유2. 디자인 시스템을 구축하면 좋은 점3. 디자인 시스템 구축 순서 및 방법 (with storybook)  설문 조사에서 디자인 시스템을 사용하는 응답자의 약 90%가 주당 최소 1시간의 작업 시간을 절약했다고 보고했다. 약 50%는 매주 6시간 이상 작업을 절약할 수 있다고 말했다.- Invision DSM ‘디자인 시스템을 왜 도입해야 하는 거지? 🤔’ 라는 의문이 떠오른다면 이 링크(https://yozm.wishket.com/magazine/detail/1830/)를 참고하길 바란다. - 프로젝트 초기에 주요 UI 패턴을 분석하여 디자인 시스템에 반영- 팀의 요구사항에 맞는 워크플로우를 설정하고 지속적으로 개선    1. 디자인 시스템이 필요한 이유1) 중복 개..

(1) 해결을 위한 시도(2) 드디어 해결  Run autofix to sort these imports! (simple-import-sort/imports) 에러 Qodana에서 알려줬던 에러를 해결하고 push 했더니 이번엔 또 import가 정렬되지 않는다는 에러가 생겼다.아니 한 번에 좀 알려주지 왜 자꾸 하나씩 늘어나는 거냐? 그래도 간단하지 않을까 싶었는데, 해결하기까지 생각보다 더인 2시간 반 정도 걸렸다.. 어떤 시도를 했고, 어떻게 해결했는지에 대한 이야기를 이제 시작하겠다.  (1) 해결을 위한 시도1. eslint-config-airbnb와 일부 패키지의 버전 충돌 경고 해결을 위해 호환되는 버전으로 재설치했던 게 문제인가 싶어, pnpm update --latest 명령어를 통해 모..

1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생2. 해결을 위한 시도 및 추측3. 드디어 해결4. Referenced UMD global variable 경고  1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생 우리팀은 Qodana를 통해서 정적 코드 분석을 하고 있다.GitHub Actions를 통해 Qodana를 실행시켜보니 위와 같은 에러가 발생했다. 위 에러는 ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생하는 에러로, 정적 코드 분석 도구에서 ESLint를 인식하지 못할 때 나타난다.  2. 해결을 위한 시도 및 추측가장 먼저 원인을 예상해보았다. 1. ESLint 패키지 누..

1. 왜 eslint-config-prettier와 eslint-plugin-prettier를 사용할까?2. 설치 및 설정 방법3. .eslintrc.json 파일의 불필요한 항목 정리4. 정리 완료한 .eslintrc.json 파일 ESLint를 사용하여 팀으로 코드 스타일과 규칙을 동일하게 하면 코드 스타일의 일관성이 지켜지고 협업을 원활하게 할 수 있다. 하지만 우리가 지정한 ESLint 패키지와 옵션 때문에 매우 번거롭고, 개발 속도가 늦어질 것을 우려해서 Prettier와 통합해 코드 자동 정렬과 포맷 충돌 방지를 하려고 한다. 코드를 저장할 때마다 코드 스타일이 Prettier 규칙에 따라 정렬되고, ESLint와 충돌하지 않도록 관리하면 더 편해지고 개발 속도 또한 더 빨라지지 않을까? 이..

1. eslint-config-airbnb 사용 이유2. eslint-plugin-simple-import-sort 사용 이유  1. eslint-config-airbnb 사용 이유: eslint-config-airbnb는 엄격한 규칙을 기반으로 하고 있지만, 필요에 따라 설정을 커스터마이징하여 팀의 요구에 맞출 수도 있음   최신 JavaScript와 React 프로젝트에 강력한 가이드라인을 제공하는 것이 가장 큰 장점 [결론] 사용하는 이유- 품질 보장: 코드의 안정성과 오류 방지- 협업 최적화: 팀 간 일관된 코드 스타일 유지- 최신 기술 지원: React와 ES6+ 규칙 내장- 생산성 향상: 접근성과 유지보수성 강화  (1) 엄격하고 일관된 코드 스타일- Airbnb 스타일 가이드는 엄격한 규칙을..

목차 >1. 로컬에 폰트 파일 저장2. layout.tsx에서 폰트 주입3. font를 className에 일일이 넣지 않아도 글로벌로 적용되게 하는 법4. 폰트, 자간/행간 적용된 결과물5. 색상 적용하는 법  1. 로컬에 폰트 파일 저장가장 먼저 폰트를 저장해야 한다.  public 폴더에 font를 넣으면 반영되지 않고, Next.js의 에러가 뜬다.그래서 font는 꼭 app 폴더 하위에 넣어줘야 font가 잘 반영된다. 로컬에 폰트 파일을 저장해 사용하면 성능, 안정성, 보안 측면에서 유리하단 이점이 있다. 1. 성능 향상: 폰트 파일을 서버(CDN)가 아닌 로컬에서 불러오므로 네트워크 요청 지연을 줄여 로딩 속도가 빨라짐. 캐싱이 더 효율적이며, 브라우저가 폰트를 빠르게 로드함2. 외부 의존성..

(1) 브랜치 종류(2) Git Flow 사용한 개발 흐름(3) Git Flow, 언제 사용하면 좋을까?  Git Flow 전략 Git Branch 전략은 여러 가지가 있지만, 대표적으로 여러 프로젝트에서 널리 사용되고 있는 대표 브랜치 전략 중 하나인 Git Flow에 대해서 알아보도록 하자. (위 출처의 내용 중 필요한 부분만을 뽑아서 요약했다는 것을 참고해주었으면 좋겠다.) Git Flow는 가장 전통적으로 많이 사용되는 방식이다.  (1) 브랜치 종류1. master: 제품 출시 버전을 관리하는 메인 브랜치2. develop: 다음 출시 버전을 위해 개발하는 브랜치3. feature: 새로운 기능을 개발하는 브랜치4. release: 다음 출시 버전을 준비하는 브랜치5. hotfix: 출시된 제품..

0. 한 줄 요약1. unknown 타입2. never 타입3. enum 타입  TypeScript의 unknown, Never, 열거형인 enum 타입의 개념 및 특징에 대해 알아보자.  0. 한 줄 요약- unknown: 타입을 모를 때 안전하게 처리하려고 사용- never: 절대 실행되지 않을 코드를 명시- enum: 한정된 값의 집합을 정의하여 가독성과 유지보수를 높임  1. TypeScript 컴파일러 옵션 중 암묵적인 any 타입 비허용 옵션 on   1-1) [효과] 개발자가 냅다 any 타입으로 작성하고 잊어서 코드가 JavaScript처럼 동작하는 상황을 미연에 방지 가능 ⇒ 안정적인 개발 가능   1-2) [방법] tsconfig.json 파일에서 noImplicitAny 옵션을 tru..

1. Page Router2. App Router (Next.js 13+)3. 주요 차이점  Next.js 공식 문서: https://nextjs.org/docs/app/building-your-application/routing Next.js에서의 Routing 방식은 총 2가지다.전통적인 파일 라우팅 방식인 Page Router와 서버 중심의 렌더링 최적화를 제공 중인 새로운 라우팅 방식인 App Router. 이 둘의 차이점과 Next.js에서 추천하고 있는 라우팅 방식에 대해 알아보자. 결론부터 말하자면, Next.js에선 App Router를 추천 중이다.정확히 어떤 차이가 있길래 Next.js는 App Router를 추천할까?바로 App Router에서는 최신 기술과 구조적 이점을 최대한 활용..

1. Git 초기 세팅 명령어(1) npm으로 pnpm을 전역에 설치(2) Next.js 설치(3) Tailwind CSS 설치 및 세팅(4) TanStack Query, Zustand 설치 및 세팅(5) eslint-config-airbnb 설치 및 세팅(6) .gitignore(7) 끝! 커밋을 잊지 말자2. 팀원들과 따옴표, 쌍따옴표 Prittier가 안 맞아요!3. GitHub에 빈 폴더를 넣고 싶어요!  pnpm 패키지 매니저를 사용해서 Next.js + TypeScript + Tailwind CSS + TanStack Query + Zustand 를 설치하려고 한다면 축하한다. 지금부터 프로젝트 설치 명령어와 세팅을 아주 상세하게 알려주겠다. 터미널에 다음과 같은 명령어를 입력하면 된다.  1..

(1) 문제 인식(2) 해결을 위한 고민과 시도들(3) 해결(4) 문제의 원인이었던 pnpm과 패키지 매니저에 대하여  배포 시, NextUI 적용이 안 되는 에러 → .npmrc 파일 추가 및 pnpm을 다시 설치해 해결yarn을 사용했었던 직전 프로젝트에서는 NextUI가 잘 적용됐었는데, pnpm을 사용하는 이번 프로젝트에서는 적용이 수월하지 않아 2일 간 우울하기도 했고 고생했다. 하지만 깊게 몰입하여 문제를 해결한 경험이 하나 더 생겼다. UI 관련 문제로 꽤나 시간을 보내게 되다 보니 아예 ‘다른 디자인 시스템으로 변경’하거나 ‘내가 직접 CSS를 할지’에 대해 깊게 고민하며 갈등하였다.하지만 문제를 포기하는 것은 내키지 않아서 더욱 다양한 관점에서 바라보고, 시도를 해보았다. 다른 분들은 나..

0. TL;DR1. 이진수와 2의 보수법2. 부동 소수점3. 문자 인코딩과 디코딩  0. TL;DR이진수: 모든 양수를 0과 1로 표현하는 방법2의 보수: 모든 음수를 0과 1로 표현하는 방법부동 소수점: 모든 소수(분수)를 0과 1로 표현하는 방법문자 집합 & 인코딩: 모든 문자를 0과 1로 표현하는 방법  들어가며컴퓨터는 0과 1만을 이해한다.데이터가 컴퓨터 내에선 어떠한 방식으로 표현이 되는지 알아보자. 이진수, 2의 보수, 부동 소수점, 문자 집합과 인코딩에 대해 중점적으로 살펴볼 것이다. 참고로,‘문자 집합’은 컴퓨터가 이해할 수 있는 문자들의 모음이다.‘인코딩’은 문자 집합을 이용해서 0과 1로 변환하는 과정이다.  1. 이진수와 2의 보수법이진법: 0과 1로 모든 수를 표기하는 방법이진수: ..

0. TL;DR1. 명령어2. 연산코드3. 주소 지정  0. TL;DR명령어: 무엇을 대상(오퍼랜드)으로 무엇을 수행(연산코드)하는 것주소 지정: 유효 주소*를 찾는 방법즉시 주소 지정직접 주소 지정간접 주소 지정레지스터 주소 지정레지스터 간접 주소 지정  1. 명령어: 무엇을 대상(오퍼랜드)으로 무엇을 수행(연산코드)하는 것이처럼 명령어는 명령의 대상과 동작으로 이루어진다. 명령어는 컴퓨터를 동작시키는 실질적인 정보다. 오퍼랜드(operand): 명령어를 수행할 대상대상(데이터)이 직접 명시되기도 하고, 대상의 위치*가 명시되기도 함연산코드(op-code): 오퍼랜드로 수행할 동작 👾 [중요] 대상의 위치: 레지스터(CPU에 있는 작은 임시 저장 장치)의 이름, 메모리 주소  실제 컴퓨터로 동작시키는..

0. 들어가며1. 저급 언어의 두 종류2. 고급 언어 → 저급 언어로 변환되는 대표적인 방식3. 컴파일과 인터프리트의 차이4. 명령어 관찰하기  0. 들어가며컴퓨터는 명령어를 이해한다.소스코드는 실행되기 전, 명령어(+ 데이터)로 변환되어 실행된다. 소스코드: 사람(개발자)가 이해하기 편한 언어 [고급 언어]명령어 & 데이터: 컴퓨터가 이해하기 편한 언어 [저급 언어] 즉, 고급 언어로 작성된 소스코드는 내부적으로 저급 언어로 구성된 명령어와 데이터로 변환된다.  1. 저급 언어의 두 종류기계어: 컴퓨터(CPU)가 이해하는 언어어셈블리어: 기계어를 사람이 이해하기 편하게 변환시킨 언어 CPU 혹은 컴파일러의 종류에 따라서, 변환되는 명령어의 종류(생김새)가 달라질 수 있다.  2. 고급 언어 → 저급 언..

컴퓨터 구조모든 프로그램은 컴퓨터 부품이 실행한다. 컴퓨터 구조는 ‘컴퓨터의 부품을 학습’하는 것이다.그리고 컴퓨터 공학을 배워야 하는 이유는 성능, 용량, 비용 때문이다. (1) 프로그램을 이루는 정보 2가지즉, 0과 1로 이루어진 정보를 의미한다.명령어: 컴퓨터를 동작시키는 실질적인 정보데이터: 명령어의 대상 (재료) (2) 컴퓨터의 4가지 핵심 부품스마트폰, 태블릿, 데스크탑 모두 컴퓨터라고 볼 수 있다. 이것에 공통으로 들어가는 핵심 부품 4가지가 중요하다.  CPU: 명령어 해석 및 실행하는 장치레지스터: 임시 저장 장치ALU: 계산기 회로제어 장치: 명령어 해석, 제어 신호 내보냄메인 메모리 & 캐시 메모리: 실행 중인 프로그램(= 프로세스)을 저장하는 장치 (전원 꺼지면 삭제)보조기억장치: ..

0. Map과 Set 딥 다이브 계기1. Set2. Map3. Set과 Map 차이4. Set과 Map, 일반 객체의 차이점5. 왜 일반 객체는 키가 문자열로 변환되는 거고, Map은 객체나 배열도 키로 저장되게끔 설계된 걸까?  0. Map과 Set 딥 다이브 계기 여느 때처럼 알고리즘 문제를 풀기 위해 돌아다니던 중, '캐시'라는 문제를 발견했다.기업에서 실제로 낸 코테 문제를 좋아하는 나는 어렵든 말든 일단 도전해봤다.  LRU랑 cache hit, cache miss가 뭔지 도통 전혀 모르겠어서 다른 분의 풀이를 보며 찬찬히 이해하기 시작했다. function solution(cacheSize, cities) { // DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 let answer..

0. 문제 설명 및 제한 조건1. 작성한 답안 코드2. 풀이 과정3. AI가 한 리팩토링4. Date 객체  0. 문제 설명 및 제한 조건  1. 작성한 답안 코드function solution(a, b) { const date = '2016-0'+ a + '-' + b; const week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; return week[new Date(date).getDay()];}  2. 풀이 과정문제를 봤을 때, 되게 흥미로웠다. 날짜를 반환하거나 날짜 포맷을 변환하는 것은 보고, 코드를 직접 작성해 본 적도 있었지만 요일 반환은 해본 적이 없기 때문이다. 그래서 어떻게 코드를 작성해야 할지 감이 안 옴과 ..

0. TL;DR1. 정규화, 반정규화2. PK, FK 순서 조정3. 컬럼 수가 많은 테이블의 1:1 분리4. 대용량 테이블 파티셔닝*5. 복잡한 모델의 단순화로 성능 향상6. 일관성 있는 데이터 타입7. 좋은 모델링이란  0. TL;DR정규화, 반정규화 성능 향상: 데이터 무결성 및 관리에 대한 주의 필요PK, FK 순서 조정[매우 중요] PK가 여러 속성으로 구성된 복합 식별자일 경우, PK 순서에 따라 성능 차이가 발생FK로 사용되는 컬럼에 인덱스를 추가하여 성능 향상일관성 있는 데이터 타입 설정: 동일한 속성의 컬럼에 데이터 타입이 맞지 않으면 DB는 같은 데이터라고 생각하지 않음비즈니스 도메인을 잘 이해하는 것이 좋은 모델링을 도출함  1. 정규화, 반정규화정규화가 잘 되어 있으면 입력, 수정, ..

0. TL;DR1. 1:1 관계2. M:N 관계3. 엔티티 타입 통합4. 이력(log, 기록) 엔티티 타입 설계  0. TL;DR1:1 관계1개의 엔티티 타입으로 통합: PK가 동일하게 사용 or 한 시점에 2개의 엔티티 타입이 동시 발생 금지부분 통합: PK 속성들의 구조가 모두 비슷한 경우, 편의상 하나로 통합하여 표현슈퍼 엔티티 타입 생성: PK와 의미가 동일하고, 속성의 일부만 다를 경우 슈퍼 타입으로 통합M:N 관계관계 엔티티 타입 분리주 식별자 통합부모 엔티티 타입에 속성 추가이력 엔티티 타입 설계이력 관리: 하나의 업무가 시간 흐름에 따라 발생하는 데이터이력 데이터 발생 유형발생 이력변경 이력진행 이력  1. 1:1 관계: 엔티티 타입 간 관계가 1:1로 대응하는 것즉, 해당 엔티티 타입의 ..

0. TL;DR1. 정규화2. 오브젝트 분석과 정규화 엔티티 타입 분석 차이점3. 1차 정규화4. 2차 정규화  0. TL;DR3차 정규화: 속성에서 종속적인 속성을 분리하는 것보이스-코드 정규화: 복잡한 식별자 관계에 의해 발생하는 문제를 해결하기 위해 3차 정규화를 보완한 정규화4차 정규화: 보이스-코드 정규화를 만족해야 하며, 다치 종속(Multi-Value Attribute)이 없어야 하는 정규화5차 정규화: 중복을 제거하기 위해 분해할 수 있는 만큼 전부 분해하는 과정  1. 3차 정규화: 속성에서 종속적인 속성을 분리하는 것 1차 정규화 및 2차 정규화 이후, 속성 간의 종속관계가 발생한다면 3차 정규화 진행이행적 함수 종속 제거, 기본키가 아닌 모든 속성 간에서는 서로 종속될 수 없음  [예..

0. TL;DR1. 정규화2. 오브젝트 분석과 정규화 엔티티 타입 분석 차이점3. 1차 정규화4. 2차 정규화  0. TL;DR정규화: 다양한 유형의 검사를 통해 데이터 모델을 구조화하고, 개선시켜나가는 절차에 관련한 이론데이터 모델을 견고하고, 잘 만들기 위해서는 정규화 과정이 필요1차 정규화: [속성에 대한 분리] 모든 속성이 반드시 1개의 원자값만 보유하게 하는 것2차 정규화: [종속에 대한 분리] 주 식별자에 종속적이지 않고, 주 식별자를 구성하는 일부 속성에 종속적인 속성을 분리하는 것  1. 정규화: 다양한 유형의 검사를 통해 데이터 모델을 구조화하고, 개선시켜나가는 절차에 관련한 이론 정규화의 기본 원칙: 하나의 테이블에 ‘중복된 데이터가 없도록’ 하는 것데이터를 수학적인 방법에 의해 구조화..

0. TL;DR1. 논리적 데이터 모델링2. 개념적 모델링과 논리적 모델링 매핑3. 물리적 데이터 모델링4. ERD (Entity Relationship Diagram)  0. TL;DR논리적 데이터 모델링: 개념적 모델을 상세화하는 과정물리적 데이터 모델링: 논리적 데이터 모델을 특정 DBMS 기술에 매핑하고, 소프트웨어의 용어를 사용ERD: 시스템의 엔티티가 무엇이 있는지, 어떤 관계가 있는지를 나타내는 다이어그램  1. 논리적 데이터 모델링: 개념적 데이터 클래스를 기술적 데이터 구조에 매핑하는 단계즉, 개념적 모델을 상세화하는 과정을 의미한다. 개념적 데이터 모델에서 식별된 데이터 개념과 복잡한 데이터 관계에 대한 자세한 내용을 제공한다. 다양한 속성의 데이터 유형 (e.g. 문자열 or 숫자)데..

0. TL;DR1. 타임라인 다이어그램 그리는 단계2. 더 빠르게 동작하는 타임라인3. 모든 병렬 콜백을 기다리는 Cut(컷)4. 멱등성*을 적용해, 여러 번 호출하더라도 한 번만 실행되도록5. 명시적 시간 모델6. 기타 | 어떠한 응답이 다른 응답보다 가끔 늦어지는 이유?  드디어 쏙쏙 들어오는 함수형 코딩 스터디 마지막이다!유익한 내용도 꽤 있었지만 설명이 좋지 않아서 이해하는 데 시간이 꽤 걸리기도 하였다. 다음에 읽을 땐 하이라이트 처리한 부분 위주로 읽어야겠다. 스터디 내용은 블로그와 개인 노션에 핵심 정리하며 읽었는데 확실히 큰 도움이 되었다.이해가 안 되는 부분이나 이해는 되었으나 필자가 제대로 설명하지 못해 헷갈리는 부분은 내 표현대로 다시 개념과 내용을 정립했다. 기억에 오래 남을 것 같..

0. TL;DR1. 데이터 모델링 5단계2. 데이터 모델링 관점에 따른 분류3. 요구사항4. 개념적 데이터 모델링  0. TL;DR데이터 모델링 5단계: 요구사항 분석 → 개념 모델링 → 논리 모델링 → 물리 모델링 → 데이터베이스구체화 및 세분화 될수록 현업에 적용할 수 있는 단계가 됨요구사항 분석: 업무 및 기능 수행에 필요한 정의 분석요구사항 주요 작업: 업무 영역의 설계 범위를 결정개념적 모델링 단계주제 영역 도출핵심 데이터 집합 도출관계 설정핵심 속성 정의식별자 정의  1. 데이터 모델링 5단계 요구사항 분석: 업무 및 기능 수행에 필요한 정의 분석개념 모델링: 정보 표현의 상위 수준 모델로 핵심 엔티티 도출 및 관계 정의 (개념 ER 모델)논리 모델링: 업무 요건을 명확하게 표현 및 설계 (상..

0. TL;DR1. 식별자 (indentifier)2. 식별자 구분3. 관계 (Relationship)4. 관계 카디널리티  0. TL;DR식별자: 하나의 엔티티 타입에서 각각의 엔티티를 구분할 수 있는 결정자식별자 구분주 / 보조내부 / 외부단일 / 복합원조 / 대리관계 (Relationship): 2개의 엔티티 타입 사이의 논리적인 관계로, 서로에게 영향을 주는 것관계 페어링: 각각의 엔티티들이 자신과 관련된 엔티티들과 관계의 *어커런스로 참여하는 형태관계 카디널리티: 엔티티 타입 간 관계에서 ‘참여자 수’를 표현한 것1:11:NM:N  1. 식별자 (indentifier): 하나의 엔티티 타입에서 각각의 엔티티를 구분할 수 있는 결정자 모든 엔티티 타입에는 반드시 하나 이상의 식별자가 필요하다.DB..

0. TL;DR1. 엔티티 타입2. 엔티티 타입 특징 6가지3. 엔티티 타입 분류4. 엔티티 타입 명명5. 속성  0. TL;DR엔티티(Entity): 정보를 저장하고 관리하는 단위엔티티 타입: 엔티티의 집합정보가 저장될 수 있는 사람, 장소, 물건, 개념을 정의할 수 있음식별자를 부여해 유일하게 만들어야 함속성: 엔티티에서 더 이상 분리되지 않는 최소 데이터 단위엔티티는 고유 성격을 표현하는 속성 정보를 1개 이상 포함  1. 엔티티 타입: 업무에 필요한 정보를 저장하고 관리하기 위한 것으로, 영속적으로 존재하는 단위  엔티티: 정보를 저장하고 관리하는 단위엔티티 타입에 속한 하나의 인스턴스정보가 될 수 있는 사람, 장소, 물건, 개념을 정의할 수 있는 것엔티티 타입: 엔티티의 집합  e.g.엔티티 타..

0. TL;DR1. 데이터 모델링2. 모델링 관점 3가지3. 데이터 아키텍트 (Data Architect)4. 데이터 모델링 진행 시, 중요한 요소  0. TL;DR데이터 모델링: 조직의 정보 수집과 관리 시스템을 정의하는 시각적 표현 or 청사진을 생성하는 프로세스정보 시스템의 모습을 적절한 표기법으로 표현한 것데이터 세트 간 관계, 데이터를 저장하고 분석에 사용하는 방식을 설명데이터 관점, 프로세스 관점, 데이터와 프로세스 상관 관점데이터 모델링엔 프로젝트와 관련된 모든 사람이 참여  1. 데이터 모델링: 조직의 정보 수집과 관리 시스템을 정의하는 시각적 표현 or 청사진을 생성하는 프로세스 정보화 시스템을 구축하기 위해 어떤 데이터가 존재하는지 or 업무에 필요한 정보는 무엇인지 분석하는 방법정보 ..

0. TL;DR1. 보안2. 권한 관리를 통한 DB 보안3. 역할 (role)  0. TL;DR물리적 DB 보안: 자연재해 or 데이터베이스에 물리적으로 손실을 발생시키는 위험으로부터 보호권한 관리를 통한 DB 보안 | 로그인 사용자 관리: 로그인 단계에서 접근 제한 기능 제공권한 부여: GRANT권한 삭제: REVOKE역할 (role): 데이터베이스 객체에 대한 권한을 모아둔 집합  1. 보안기업의 데이터베이스는 중요 정보를 담고 있어, 데이터의 유출은 기업의 생존과도 연결돼 있다.DBMS는 정보 유출을 막기 위해 여러 가지 안전장치가 존재한다.  물리적 DB 보안: 자연재해 or 데이터베이스에 물리적으로 손실을 발생시키는 위험으로부터 보호 물리적 공간 확보 및 잠금 장치보안 카메라가 적용된 하드 메탈..

0. TL;DR1. 트랜잭션의 개념2. 트랜잭션의 4가지 성질3. 동시성  0. TL;DR트랜잭션: DBMS에서 데이터를 다루는 ‘논리적 작업 단위’트랜잭션의 4가지 성질: 원자성, 일관성, 고립성, 지속성락(lock): 트랜잭션이 데이터를 읽거나 수정할 때 데이터에 표시하는 잠금장치  1. 트랜잭션의 개념: DBMS에서 데이터를 다루는 ‘논리적 작업 단위’ 단일 SQL문을 사용하기도 하지만 여러 개의 SQL문을 순차적으로 수행하기도 함장애 시에 데이터를 복구(롤백)하는 단위가 되기도 함DB에서 여러 작업이 같은 데이터를 동시에 다룰 때, 작업을 분리하는 단위가 되기도 함전체가 수행되거나 아예 수행되지 않아야 함 (all or nothing)DB에 저장된 데이터를 다루고, DBMS에 의해 처리됨 BEGI..

0. TL;DR1. 관계대수2. 관계연산3. 집합연산4. 조인5. 디비전 (division)  0. TL;DR관계대수: 릴레이션에서 원하는 결과를 얻기 위해 수학의 대수와 같은 연산을 이용해 질의하는 방법을 기술하는 것관계연산셀렉션: 릴레이션의 튜플을 추출하기 위한 연산프로젝션: 릴레이션의 속성을 추출하기 위한 연산으로 단항 연산자집합연산: 합집합(∪), 교집합(∩), 카티션프로덕트(X)합집합 (union): 2개의 테이블(릴레이션)을 합해서 하나의 테이블을 반환교집합 (intersection): 2개의 테이블이 공통으로 가지고 있는 튜플을 반환차집합 (set-difference): 첫 번째 릴레이션엔 속하고, 두 번째 릴레이션엔 속하지 않는 튜플 반환카티션프로덕트 (cartesian product): ..

0. TL;DR1. 릴레이션2. 관계 데이터 모델 (Relation Data Model)3. 무결성 제약 조건  0. TL;DR릴레이션: 행과 열로 구성된 ‘테이블’스키마: 테이블(릴레이션)이 무엇을 가지고 있는지를 나타내는 것인스턴스: 릴레이션 스키마에 저장된 ‘데이터의 집합’관계 데이터 모델: 데이터를 2차원 테이블 형태인 릴레이션으로 표현데이터 무결성(integrity): 데이터의 일관성과 정확성을 지키는 것  1. 릴레이션: 행과 열로 구성된 ‘테이블’데이터를 표(Table) 형태로 표현한 것으로, 구조를 나타내는 릴레이션 스키마와 실제 값들인 릴레이션 인스턴스로 구성된다.  용어한글 용어relation릴레이션 테이블relational data model관계 데이터 모델relational data..

0. TL;DR 1. 타임라인 다이어그램 | 기본 규칙 2. 타임라인 다이어그램 | 좋은 타임라인의 원칙 3. 타임라인 다이어그램 | 타임라인 단순화 4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결 0. TL;DR 타임라인 다이어그램: 코드가 순서대로 실행되는지 or 동시에 실행되는지 알림 자원을 공유하는 부분: 버그 발생 확률이 높음 자원을 공유하지 않는 부분: 독립적으로 이해하고 실행 가능 타임라인 다이어그램의 기본 규칙 두 액션이 순서대로 나타나면 같은 타임라인에 넣음 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음 좋은 타임라인의 원칙 타임라인이 ‘적을수록’ 이해하기 쉬움 타임라인이 ‘짧을수록’ 이해하기 쉬움 공유하는 자원(e.g. 변수)이 적을수록..

0. 문제 설명 및 제한사항1. 작성한 코드2. 풀이 및 의사코드3. 소감  0. 문제 설명 및 제한사항 그렇게 어려운 문제는 아니었다. 점수 배열을 내림차순(큰 점수순)으로 정렬하여 k번째 점수까지 끊고,배열 숫자 하나 돌 때마다 현재까지 나온 수 중에 가장 작은 수를 계산해서배열에 넣은 것을 return 하면 됨 대충 어떻게 하는지는 알겠었지만 정확하게 의사코드를 작성하지 않고 코드를 작성하면 코드 짜다가 헷갈리거나 헤매는 경우가 많아서 의사코드를 최우선으로 작성하려고 하는 중이다. 그리고 메서드 사용법을 계속 익혀야겠다.어떤 메서드를 써야겠다는 것은 알겠는데 사용법이 헷갈린 경우가 있어서 말이다. 틈틈이 MDN 문서를 보든가 자주 출제되는 건 정리해서 공부하는 게 맞는데 잊는 게 문제다,,, 이번엔..

[들어가며] 저장 방법에 따른 데이터베이스 종류0. TL;DR1. 계층형 데이터베이스2. 네트워크형 데이터베이스3. 키 - 값 데이터베이스4. 관계형 데이터베이스    [들어가며] 저장 방법에 따른 데이터베이스 종류데이터베이스 종류에는 크게 4가지가 있다. 하나씩 자세히 살펴볼 것이다.계층형 데이터베이스네트워크형 데이터베이스키 - 값 데이터베이스관계형 데이터베이스  0. TL;DR계층형 데이터베이스: 데이터가 트리 구조로 구성돼 있고, 반복적인 부모 - 자식 관계 정보를 표현함네트워크형 데이터베이스: 데이터를 노드와 집합구조로 표현키 - 값 데이터베이스: NoSQL의 한 종류로, key - value를 1:1 대응해 데이터를 저장함관계형 데이터베이스: 데이터를 테이블 형태로 저장하며 열과 행으로 구성 우..

0. TL;DR1. 데이터와 정보 차이2. 데이터베이스란?3. 데이터베이스 관리 시스템 | DBMS  0. TL;DR데이터: 단순히 현실 세계를 관찰하거나 측정해서 수집한 사실 or 값정보: 데이터를 목적에 맞게 처리해, 의미를 가지는 단위로 만든 것데이터베이스(DB): 논리적으로 연관된 데이터를 모아 일정한 형태를 저장해 놓은 것으로, 중복 데이터를 최소화해 조직의 목적에 맞게 관리함데이터베이스 관리 시스템(DBMS): 데이터 입력 / 수정 / 삭제 / 검색 기능 제공  1. 데이터와 정보 차이데이터: 단순히 현실 세계를 관찰하거나 측정해서 수집한 사실 or 값정보: 데이터를 어떤 방식으로 처리해, 의미를 가지는 단위로 만든 것. 즉, 의사결정에 유용하게 활용할 수 있는 결과물정보처리: 데이터에서 정보..

0. 파일 입출력 (I/O)1. 예외 처리2. 예외 발생시키기  파이썬에서 파일 입출력과 예외 처리는 데이터를 저장하고 읽어오는 작업 및 프로그램의 오류를 다루는 중요한 기능이다. 파일 입출력과 예외 처리의 핵심 개념과 방법을 알아보자.  0. 파일 입출력 (I/O)파일 열기파일을 열 때는 open() 함수를 사용한다. 이 함수는 파일 객체를 반환하며, 다양한 모드로 파일을 열 수 있다.모드(Mode):'r': 읽기 모드 (기본값)'w': 쓰기 모드 (파일이 없으면 새로 생성, 있으면 덮어씀)'a': 추가 모드 (파일이 없으면 새로 생성, 있으면 끝에 추가)'b': 바이너리 모드 (예: 'rb', 'wb')'x': 배타적 생성 모드 (파일이 없을 때만 생성)# example.txt 파일을 읽기 모드로 엶..

[들어가며] 알아둬야 할 개념0. TL;DR1. 복잡한 반복문을 함수형 도구 체인으로 바꾸는 방법2. 반복문을 함수형 도구로 리팩토링3. 체이닝 디버깅을 위한 Tip    [들어가며] 알아둬야 할 개념시퀀스: 컴퓨터 과학 & 프로그래밍에서 ‘특정한 순서대로 내열된 데이터’를 표현하는 자료구조 or 데이터 유형데이터의 순서가 중요각 요소가 그 순서에 따라 접근할 수 있는 특성을 갖고 있음e.g. 자바스크립트에선 배열, 문자열이 해당항등 함수: 인자로 받은 값을 그대로 return 하는 함수아무 일도 하지 않지만, 아무것도 하지 않아야 할 때 유용하게 사용 가능  0. TL;DR체인: 여러 단계를 조합하는 것원하는 결과에 가까워지도록 데이터를 한 단계씩 변환기존에 있던 반복문을 함수형 도구 체인으로 리팩토링..

0. 리스트1. 튜플2. 집합 자료형 | set3. 딕셔너리(Dictionary)  내가 사용할 자료들의 형태(Type)를 고민 → 자료형 결정 후, 담기 데이터 타입에는 리스트, 튜플, 집합, 딕셔너리가 있다.# 리스트 (대괄호)data_list = ["A", "a", 1, "@"]data_list # 출력 결과: ['A', 'a', 1, '@']# 튜플 (소괄호)data_tuple = ("A", "a", 1, "@")data_tuple # 출력 결과: ('A', 'a', 1, '@')# 집합 (중괄호)data_set = {"A", "a", 1, "1", "@"}data_set # 출력 결과: {'1', 1, '@', 'A', 'a'} # 딕셔너리 (중괄호)data_dictionary = {"A": "..

0. 터틀 라이브러리1. 문자열(string)과 문자열 조작 명령어  0. 터틀 라이브러리이 챕터에서는 라이브러리를 불러오고, 사용하는 방법을 아는 것이 핵심이다.도서관의 책을 하나의 module(모듈)이라고 한다면, 내가 원하는 책 여러 권을 언제 어디서든 쓸 수 있게끔 하고 싶다고 가정해 보자. 그러려면 책들이 있는 도서관(library)을 불러와야 하는데, 이러한 라이브러리를 불러오는 명령어를 import라고 한다. # 기본 골격import turtleturtle.명령어(값)    1. 문자열(string)과 문자열 조작 명령어 배열에서 양수로 n번째 값을 출력할 때,0, 1, 2, 3, 4와 같은 식으로 수를 세는 건 알고 있었지만  음수로 수를 셀 때는-1, -2, -3, -4처럼 0이 아니고 ..

0. while: 조건 반복1. for 반복 (iteration, 자료 순회)2. for문과 while문의 차이3. for ~ range ()4. continue, break  0. while: 조건 반복# 기본 골격while 반복조건(참): 수행할 명령# 예시i = 1while i number: print("Up") elif answer > number: print("Down") elif answer == number: print("Right") # 출력 결과: 예상 숫자를 입력해 보세요:  1. for 반복 (iteration, 자료 순회): 주어진 자료를 순회하는 for 반복  # 기본 골격for 변수명 in 리스트명: 수행할 명령# 예시a = ["호", "랑", "이"]for b in a:..

0. 전반적인 소감1. 프로그래밍 언어의 종류2. 컴퓨팅 사고력의 과정3. 파이썬 기초4. 알고리즘 & 의사코드    0. 전반적인 소감CS와 AI에 대한 강의를 듣고 있다. 전공생과의 차이를 줄이기 위해서도, 개발에 대한 베이스를 다지기 위해서도 꼭 필요한 내용이라 강의를 결제하여 열심히 듣는 중이다. 정말 대학 수업처럼 개강되는 시기가 파트마다 다른데, 지금까지 개강된 파트만 해도 벌써 60시간이 넘는다. 수학까지 다루다 보니 확실히 시간이 길 수밖에 없는 것 같긴 하다. 아직 초반이지만 내용 굉장히 재밌다 ㅎㅎ ; (세미콜론): 한 줄 안에 2줄에 해당되는 영역으로 쓰고 싶을 때 사용True: 1, False: 0 예전에 부트캠프 완전 초반에 코드에서의 세미콜론이 어떤 걸 의미하는지 튜터님, 그리고..

[들어가며] 알아둬야 할 개념0. TL;DR1. 카피-온-라이트 리팩토링2. 함수를 return 하는 함수   [들어가며] 알아둬야 할 개념일급 함수: 함수가 다른 데이터 타입(숫자, 문자열 등)과 동일하게 취급되는 것⇒ 함수를 변수에 할당하거나, 함수의 인자로 전달, 함수에서 반환할 수 있는 함수를 의미. 자바스크립트에서 함수는 일급 객체다.고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수[차이점] 일급은 인자로 ‘전달’할 수 있음. 고차는 함수가 다른 함수를 인자로 ‘받을’ 수 있음  0. TL;DR고차 함수 사용 시, 장점패턴 or 원칙을 코드로 만들 수 있음 ⇒ 중복된 많은 코드를 없애줌 (사용하지 않으면 일일이 수작업 해야 함)함수를 리턴하는 함수를 만들 수 있음단점: 가독성이 안 좋을 수..

[들어가며] 알아둬야 할 개념0. TL;DR1. 추상화 벽2. 작은 인터페이스3. 편리한 계층4. 호출 그래프   [들어가며] 알아둬야 할 개념소프트웨어 설계(software design): 코드를 만들고, 테스트하고, 유지 및 보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는 것계층형 설계(stratified design): 바로 아래 계층에 있는 함수로 현재 계층의 함수를 구현해, 소프트웨어 코드를 계층으로 구성하는 기술  0. TL;DR추상화 벽: 신경 쓰지 않아도 되는 부분을 나누고, 계층 간의 역할과 책임을 명확히 하는 것[효과] 팀 간 커뮤니케이션 비용을 줄이고, 복잡한 코드를 명확히 함작은 인터페이스: 추상화 벽에 있는 코드를 최소화하고, 새로운 기능은 추상화 벽 위 계층에..

0. [프로그래머스] Lv.2 피보나치 수1. 해결한 코드2. 피보나치 수열에 대한 설명  0. [프로그래머스] Lv.2 피보나치 수 요즘은 레벨 1, 2 위주로 프로그래머스 문제를 보고 있는데, 오늘은 프로그래머스 설명만으론 이해하기 어려운 '피보나치 수' 문제를 풀게 되었다. 문제 이해가 안 되니 코드 짜는 것도 도통 감이 안 와서 일단 정답을 봤다. 여러 풀이가 있었지만 가장 간단하면서 보기 좋은 코드를 선택해 코드 분석을 하였다. 그 내용은 아래와 같다.  1. 해결한 코드function solution(n) { let fib = [0, 1]; // 피보나치 수는 0과 1로 시작하므로 첫 두 항을 초기화 for (let i = 2; i  처음 보는 개념이 늘 바로 이해되면 좋겠지만, ..

1. replace() 메서드2. JWT | Access Token과 Refresh Token의 존재 이유3. JWT | Access Token과 Refresh Token의 개념과 관리 전략4. 쿠키, 세션, 토큰의 개념5. 유닛 테스트의 필요성6. 프론트엔드 에러 모니터링 및 로그 데이터 수집의 필요성  1. replace() 메서드: 문자열에서 특정 부분을 다른 문자열로 교체하는 데 사용원본 문자열을 변경하지 않고, 변경된 새로운 문자열을 반환함. replace()를 활용하면 문자열의 특정 부분을 효율적으로 대체할 수 있음  기본 사용법const str = "Hello, world!";const newStr = str.replace("world", "JavaScript");console.log(new..

0. TL;DR1. 방어적 복사는 원본이 바뀌는 걸 막아준다2. 방어적 복사 구현하는 법3. 방어적 복사를 사용하는 실제 사례4. 카피-온-라이트 & 방어적 복사 비교   Ch7 | 신뢰할 수 없는 코드를 쓰면서 불변성 지키기[들어가며] 이 챕터에서 배울 핵심 내용*레거시 코드나 신뢰할 수 없는 코드로부터 내 코드를 보호하기 위해 방어적 복사 만들기얕은 복사, 깊은 복사의 차이카피-온-라이트 & 방어적 복사를 언제 사용하면 좋을지 🍯 레거시 코드 (legacy code): 오래 전에 만든 것으로, 지금 당장 고칠 수 없어서 그대로 사용해야 하는 코드  0. TL;DR방어적 복사: 신뢰할 수 없는 코드 or 데이터가 안전한 코드로 들어오고 나갈 때마다 복사본을 만듦 → 들여보내거나 내보냄불변성을 구현하는..

0. TL;DR1. [원칙] 암묵적 입력과 출력은 적을수록 좋다.2. [원칙] 설계: 엉켜있는 코드를 푸는 것3. [적용] 함수를 분리해 더 좋은 설계 만들기   0. TL;DR암묵적 입력과 출력은 ‘인자’와 ‘리턴값’으로 바꿔 없애는 게 좋음암묵적 입력: 인자가 아닌 모든 입력암묵적 출력: 리턴값이 아닌 모든 출력‘설계’란 엉켜있는 코드를 푸는(분리하는) 것. 풀려있는 건 언제든 다시 합칠 수 있음코드를 분리해 각 함수가 하나의 일만 하면, 개념을 중심으로 쉽게 구성 가능  들어가기 전, 가벼운 Q&A를 살펴보자.Q1. 코드 라인 수가 적어야 좋은 코드인가?A. 코드 라인 수만으로 유지보수하기 좋은 코드인지 판별하기는 어렵다.측정할 수 있는 여러 가지 지표 중 하나는 ‘함수의 크기’다. 작은 함수는 이..

0. TL;DR1. ~ (Bitwise NOT 연산자)2. ~~ (Double Bitwise NOT 연산자)3. >>> (부호 없는 오른쪽 시프트 연산자)   코딩 테스트 문제를 풀고 다른 사람의 풀이는 어떨지 궁금해서 봤다. 위와 같이 처음 보는 연산자를 사용해서 문제를 풀었길래 신기해서 ~~ 연산자에 대해서 공부해봤다.   0. TL;DR~: 비트 단위 NOT 연산을 수행하여 비트를 반전시킴~~: 숫자의 소수 부분을 제거하고, 정수 부분만 반환함~와 ~~ 연산자는 비트 연산과 관련된 특정 작업이나 최적화된 정수 변환 등에 유용하게 사용될 수 있음 >>>: 피연산자의 이진 표현을 오른쪽으로 시프트하며, 부호에 상관없이 빈 자리를 0으로 채움부호 없는 정수로 처리하여 음수도 양수처럼 시프트함주로 부호를 ..

0. TL;DR1. 액션, 계산, 데이터를 나눠서 생각하기2. 쿠폰 보내기 예제3. 액션의 다양한 형태    0. TL;DR함수형 프로그래머는 액션, 계산, 데이터를 구분액션: 외부 세계에 영향을 주거나 받는 것 [함수]계산: 입력값을 출력값으로 만듦. 어떤 걸 결정, 계획함 [함수]데이터: 이벤트(일어난 일)에 대해 기록한 사실 [기본 데이터 타입]액션 순서로 선호하기  1. 액션, 계산, 데이터를 나눠서 생각하기액션: 외부 세계에 영향을 주거나 받는 것 [함수]실행 시점이나 횟수 혹은 둘 다에 의존함수형 프로그래밍에서 가장 중요!순서(언제 실행되는지), 반복(얼마나 실행되는지)액션을 부르는 함수가 있다면 그 함수도 액션이 됨 ⇒ 액션이 코드 전체로 퍼져나감순수하지 않은 함수, 부수 효과 함수라고도 ..

0. TL;DR1. 컴퓨터2. 전송 매체3. 네트워크 장비4. 정리  오늘은 네트워크의 기초 관련한 좋은 글을 읽게 되어 그 내용을 요약하려고 한다.정말 일목요연하게 핵심 위주로 설명을 잘해두셔서 많은 부분을 그대로 작성하여 재구성하였다. 원본 링크: https://better-together.tistory.com/39   네트워크: 컴퓨터와 컴퓨터를 연결하여 데이터를 보내고(송신) 받을(수신) 수 있게 하는 시스템 (= 데이터 통신, 컴퓨터 통신)  네트워크의 구성 요소 3가지 2대 이상의 컴퓨터 (컴퓨터 아이콘)데이터가 이동하는 통로인 전송 매체 (화살표 아이콘)데이터의 이동을 돕는 네트워크 장비 (클라우드 아이콘): 데이터가 정확한 수신지에 도착할 수 있도록 도와주는 네트워크 장비들로 구성되어 있음..

0. TL;DR 1. Custom Hook: 컴포넌트 간 로직을 공유할 때 사용 2. 컴포넌트로부터 Custom Hook 추출하기 3. 작명 규칙 4. Custom Hook은 state 자체를 공유하는 게 아니라 state 저장 로직을 공유함 5. Custom Hook 작명법 6. Custom Hook으로 Effect를 감싸는 것이 종종 유용한 이유 헐 이게 대체 뭐야?! 아아.. 모르는가? 이건 바로 'Custom Hook’이라고 하는 것이다. Custom Hook 최고!!!!! 0. TL;DRCustom Hook을 사용하면 컴포넌트 간 로직을 공유할 수 있음Custom Hook의 이름은 use 뒤에 대문자로 시작되어야 함Custom Hook은 state 자체가 아닌 state 저장 로직만 공유함Cus..

0. TL;DR1. 불필요한 Effect를 제거하는 방법2. 비용이 많이 드는 계산 ⇒ 캐싱 처리3. prop 변경 시 모든 state 초기화4. prop이 변경될 때 일부 state 조정5. 이벤트 핸들러 간 로직 공유6. 데이터 Fetching할 때 고려할 점   Effect가 필요하지 않을 수도 있다 (You Might Not Need an Effect)외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우), Effect가 필요하지 않다.  0. TL;DR비용이 많이 드는 계산을 캐시하려면 useEffect 대신 useMemo를 추가하자전체 컴포넌트 트리의 state를 초기화하려면 다른 key를 전달하자컴포넌트가 표시되..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때  Effect로 동기화하기 (Synchronizing with Effects)Effect를 사용하면 렌더링 후, 특정 코드를 실행하여 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.  0. TL;DREffect는 특정 상호작용이 아닌 렌더링 자체에 의해 발생코드가 다시 실행되길 원하지 않는 경우, Effect 내부 코드를 수정하여 의존성 배열에 해당 종속성이 필요하지 않도록 만들자Effect를 사용하면 컴포넌트를 외부 시스템(타사 API, 네트워크 등)과 동기화 가능Effect는 모든 렌더링(초기 렌더링 포함) 후에 실행됨Effect가 다시 마운트로 인해 중단된 경우 클..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때 Ref로 DOM 조작하기 (Manipulating the DOM with Refs)React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없다.   그럼 뭐 어쩔 때 사용하냐특정 노드에 포커스를 옮기거나스크롤 위치를 옮기거나위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때⇒ React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에, DOM 노드에 접근하기 위한 *ref*가 필요  0. TL;DR한 컴포넌트에서 하나 이상의 ref를 가질 수 있다.ref는 보통 포커싱, 스크롤..

0. TL;DR1. ref 사용하는 법2. ref와 state의 차이3. refs를 언제 사용해야 할까?   Ref로 값 참조하기 (Referencing Values with Refs)0. TL;DR컴포넌트가 일부 정보를 “기억”하게 하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하고 싶을 때 Ref를 사용하자!ref는 읽거나 변경할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체ref를 변경하더라도, 리렌더링 되지 않는다.렌더링 중에 ref.current를 읽거나 변경하지 말자. 건들면 컴포넌트를 예측하기 어렵게 된다.  1. ref 사용하는 법// (1) useRef를 import 해서 ref 추가import { useRef } from 'react';export de..

0. 수정된 코드 및 과정 요약1. 코드에서 Column name을 수정2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정4. 결론  에..?.. 제가 수척해진 농담곰으로 보이시나요?..  해결은 했지만 6시간 삽질해서 햄듭니다..   한 장소의 스크랩 여부가 다른 장소와도 동일하게 적용되는 문제 해결0. 수정된 코드 및 과정 요약    [원인] 전에 Supabase 컬럼을 설정할 때 id가 user_id와 study_place_id로, 총 2가지가 들어가는데 어떤 id에 기준(u..

1. 노베이스에서 토스 합격까지 (출처: Eddy)2. Managing State  |  Reacting to Input with State3. Managing State  |  Choosing the State Structure4. Managing State  |  Sharing State Between Components5. 금일 소감  1. 노베이스에서 토스 합격까지 (출처: Eddy) https://velog.io/@eddy_song/retrospective 위 글이 꽤 와닿아서 갖고 와봤다. 위 사진은 내가 전에 부트캠프에서 프로그래밍을 배우다가 그만둬야 하나 싶은 생각이 들던, 한창 힘들 때 봤던 내용의 그림이다. 유명한 글이긴 하나, 링크 속 블로그에서도 그 내용이 나와있어서 좀 놀랐다. 글..

1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트2. [프로필 정보] - [유형]이 안 보임  ⮕ NextUI Select의 defaultselectedkeys 속성이 적용되지 않아서 placeholder로 대체해 해결3. 금일 소감  1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트몰랐는데 수정하고 나서 수정되었다는 토스트 알림도 안 뜨고, 수정한 댓글이 새로고침 해야만 반영이 되고 있었다. 토스트 알림은 코드를 작성하지 않아서 안 떴던 것수정한 댓글이 새로고침 해야만 반영되는 건 댓글을 수..

1. Immer2. React에서 State 변형을 권장하지 않는 이유 5가지3. State의 배열 업데이트하는 법4. 금일 소감  오늘은 Study 때 내가 맡지 않았던 React 공식 문서 파트를 읽었다. 약간 밀렸어서 직전 스터디까지의 분량을 후루룩 읽었다. 새롭게 알게 된 부분과 궁금했던 부분에 대한 호기심이 풀려서 그 내용을 위주로 작성해 보려 한다!  1. Immer : React에서 불변성(immutable state)을 관리하기 위한 라이브러리Immer는 상태 업데이트 로직을 간단하고 읽기 쉬운 방식으로 작성할 수 있도록 해, 복잡한 객체의 불변 업데이트를 간단한 방법으로 처리할 수 있다. 기본적인 useState 훅과 유사하게 작동하며, 상태를 불변성을 유지하면서 업데이트할 수 있도록 도..

1. Adding Interactivity | Responding to Events2. Adding Interactivity | State: A Component's Memory3. Adding Interactivity | Render and Commit4. Adding Interactivity | State as a Snapshot5. 금일 소감 1. Adding Interactivity | Responding to Events0. TL;DR이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙이는 것이 일반적규칙에 따라 이벤트 핸들러 prop은 on으로 시작해야 하며 카멜케이스로 작성e.stopPropagation(): 위의 태그에 연결된 이벤트 핸들러의 실행을 중지e.preventDefault(..

1. React Thunk2. Promise3. React Query4. 금일 소감    1. React Thunk : Redux의 *미들웨어로, 비동기 작업(예: API 호출)을 쉽게 처리할 수 있도록 도와줌 Thunk는 액션 크리에이터가 단순히 액션 객체를 반환하는 대신 함수를 반환할 수 있게 해준다.  * 미들웨어?정의: 요청과 응답 사이에서 '중간 역할'을 하는 코드이유: 요청/응답 처리, 코드 재사용, 유지보수성 향상예시: 요청 로깅, 인증, 데이터 검증 등  TL;DR정의: Redux 미들웨어로, 액션 크리에이터에서 함수를 반환할 수 있게 해줌이유: 비동기 작업 처리, 복잡한 액션 로직 분리, 상태와 디스패치 접근 가능사용법: Thunk 설치 및 미들웨어 적용, 비동기 액션 크리에이터 작성, ..

1. 엘리먼트(Element)와 노드(Node)의 차이점2. DOM(Document Object Model) 요소와 React의 작동 원리2-1) DOM(Document Object Model)2-2) React의 작동 원리3. 가비지 컬렉터(Garbage Collector)4. 금일 소감 1. 엘리먼트(Element)와 노드(Node)의 차이점엘리먼트와 노드는 웹 개발에서 중요한 개념이며, 둘은 HTML 문서의 구조와 콘텐츠를 정의하고 설명하는 데 중요한 역할을 한다. 그러나 이 둘은 서로 다른 의미를 가지고 있다.  TL;DR노드(Node): HTML 문서의 기본 단위로, 엘리먼트 노드, 텍스트 노드, *어트리뷰트 노드 등 다양한 종류가 포함됨엘리먼트(Element): HTML 태그로 정의된 문서의 ..

1. Markup(마크업)2. Describing the UI  |  Passing Props to a Component3. Describing the UI  |  Conditional Rendering4. 금일 소감    프로그래밍은 법학처럼 나오는 단어, 단어마다의 의미를 정확히 모르면 이해가 잘 안 가는 듯하다. 같은 내용을 보더라도 저번에 읽었을 땐 분명히 이해했다고 생각했는데, 나중에 다시 보면 정말 기초적인 개념의 의미조차 모르는 경우가 많다.    오늘도 위 사진처럼 공식 문서를 읽다가 나온 개념인 markup이 정확히 어떤 의미인지 모르겠어서 해당 개념을 알아보았다.  1. Markup(마크업) 뜻 : 텍스트를 정의하고 표현하기 위해 고안된 것 하이퍼텍스트 마크업 언어(HyperText M..

1. Describing the UI  |  Your first component2. Describing the UI  |  Importing and exporting components3. 금일 소감  1. Describing the UI  |  Your first component0. TL;DR컴포넌트: UI를 구성하는 코드 단위, 노드: DOM의 기본 구성 요소[React Component vs. DOM Node] Component: ‘재사용 가능’한 UI 조각(’함수’ or 클래스 형태), Node: ‘HTML’ 요소(HTML 덩어리 정도로 이해해도 좋을 듯)즉, 컴포넌트와 노드의 차이는 태그명 맨 앞 글자의 대소문자 차이! 컴포넌트는 대문자, 노드는 소문자로 시작한다. 1. React Compo..

1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')2. This3. Binding(바인딩)4. 고차함수(Higher-Order Function)5. Map과 Set  개념과 차이6. API와 메서드의 차이7. Data Type | 기본형, 참조형8. 얕은 복사(Shallow Copy)9. 유사배열객체(Array-like Object)  1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')  위와 같은 에러가 뜨길래 '엥? 토글 세팅이 뭐가 문제지?' 싶어서 토글 관련 코드를 모두 알아봤다.    위처럼 정말 샅샅이 찾아봤는데..

1. [회고] 4개월 부트캠프, 어떤 일이 있었나?2. [계획] 앞으로는 어떻게 할 것인가3. User Test 전, SPL4. 댓글 작성 시, 실시간 반영 안 됨5. 헷갈리거나 몰랐던 내용 정리(1) 스키마(schema)(2) 클래스와 인스턴스(3) JWT (JSON Web Token)  1. [회고] 4개월 부트캠프, 어떤 일이 있었나?  오늘은 내 얘기를 좀 해볼까 한다. 만으로 4개월 동안 진행된 부트캠프가 종료되며 드디어 끝마쳤다는 시원함과 함께 내가 원하는, 진정 목표로 하는 회사에 입사하기 위해 어떻게 해야 하는가? 에 대한 약간의 불안감이 급습했다. 이미 부트캠프 1개월차부터 지금의 상황을 예상하였고 이를 위해 최종 때 혼자서 개인 프로젝트를 선택한 이유도 있다(최종 프로젝트로 개인 프로젝..

1. 우수 TIL로 선정되었다! 2. 네이버 Map API 사용하다가 카카오 Map API로 전향하여 공부 장소에 따른 Marker 구현 3. POST https://njltrjqccgmfpfdlyldi.supabase.co/rest/v1/user_profiles?on_conflict=email 409 (Conflict) ➡️ if문으로 프로필이 존재하지 않을 경우도 추가해 해결 4. 카테고리 클릭 시, URL에 장소 데이터 저장 (동적 Routing 없이 구현) 5. 카테고리를 클릭했을 때, 바로 장소 정보가 나타나지 않음 ➡️ Loading State를 만들어, 동기적으로 작동하게 해서 해결 6. 카테고리 클릭 시, 깜빡이며 정보 불러옴 & 모든 데이터 불러올 때도 있음 ➡️ 코드를 동기..

1. Warning: Each child in a list should have a unique "key" prop. ➡️ 부모 컴포넌트의 map 돌리는 곳 최상위 태그에서 key prop 전달해 해결 2. [다크모드 Error] Warning: Extra attributes from the server: class,style ➡️ 현재 마운트 상태를 확인하는 State 추가해 해결 3. Encountered two children with the same key, `faded`. ➡️ `faded` key 속성을 제거해 해결 4. commentsData 객체를 Comment[] 타입으로 강제 변환하려 발생한 Error ➡️ runtime에 데이터를 검증하는 코드 추가해 해결 5. GET h..

1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 2. 작성된 댓글 데이터가 안 가져와짐 ➡️ 장소 정보를 가져오는 useEffect 안에 댓글 정보 받아오는 코드 넣음 3. 프로필 이미지와 닉네임만 수정이 안 됨 ➡️ Supabase 테이블 외래 key 참조 해제해 해결 4. Error: Hydration failed because the initial UI does not match what was rendered on the server. 5. 금일 소감 1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 와 대체 이것 때문에 몇 시간을 삽질한 건지... 메인 페이지에서 공부 장소를 눌렀을 때, 동적 Routing을 통해..

1."The data that you are trying to import is incompatible with your table structure" 2. PR 템플릿 생성 및 첫 PR 등록 3. Next-UI Select: onChange가 안 돼서 Next-UI 공식 문서 참고해 해결 4. string Type에 배열 할당하면 Error 뜸 5. 로컬 브랜치명 변경 6. 데이터 필터 처리가 안 됨 ➡️ Supabase에서 Filter 처리해서 해결! 7. '매핑(mapping)'이란? 8. 금일 소감 1."The data that you are trying to import is incompatible with your table structure" "The data that you..

오랜만의 블로그 포스팅이다. 이번 주까지 너무 많은 일이 있어서 블로그 쓸 여력이 안 됐다. 이제부터 다시 꾸준하게 작성해야겠다. 오늘은 직전 심화 프로젝트 관련 내용과 배우긴 하였으나 정확히 무슨 의미인지 뇌에 남지 않은 내용 위주로 담으려고 한다. 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 2. 이메일, 비밀번호 | 입력 필드 초기화, 텍스트 토글 기능 3. Git Pull 안 됨 | git pull --rebase로 해결 4. BaaS (Backend as a Service) 5. CI/CD 6. MVP (Minimum Viable Product) 7. 금일 소감 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 기능 구현을 완료..

며칠 전에 이런 글을 봤다. 어떤 게 재밌어지는 순간은 '내가 그것을 잘하게 되기 시작했을 때'라는 글이다. 얼마 전까지만 해도 나는 코딩이 어려운 걸 넘어서 '내가 정말 재밌게 이걸 하는 게 맞나' 싶은 생각이 계속 들었다. 그러던 와중에 본 글이 바로 저 글이다. 생각해 보니 내가 그간에 해온 것들과 내 경쟁력이 된, 잘하는 것들이 처음부터 재밌지는 않았다. 보통은 어려웠고 또 재미가 없었다. 특히 내가 재작년에 시작했던 운동은 심각했다. 너무 어렵고, 재미도 없고, 열심히 하고는 있는데 잘하고 있는 건지 정말 전혀 모르겠었다. 하루에 3시간 ~ 3시간 30분씩 운동하고 끝나서 집에 가면 곧장 잠들기 일쑤였다. 운동 이후엔 아무것도 못할 정도여서 정말 잠만 잤다. 첫 3개월까지는 헬스장 직원분들께 들..

1.인스턴스(instance) 2. Pull Request (PR) 3. REST API 4. 금일 소감 1.인스턴스(instance) : 객체 지향 프로그래밍(OOP)에서 클래스(class)에 소속된 개별적인 객체 자바스크립트에서 클래스는 특정한 타입의 객체를 생성하기 위한 일종의 템플릿이라고 할 수 있다. 예를 들어, 만약 '자동차'라는 클래스가 있다면, 이 클래스는 자동차가 가져야 할 기본적인 속성(색상, 모델, 브랜드 등)과 기능(운전하기, 정지하기 등)을 정의한다. 이제 여러분이 특정 자동차를 만들고 싶다고 할 때, 예를 들어 "빨간색 테슬라 모델 S"를 생성하고 싶다면 '자동차' 클래스를 사용해 이 특정 자동차의 인스턴스를 만들 수 있다. 이 인스턴스는 '자동차' 클래스의 속성..

1. Next.js | npm run dev 실행이 안 될 때 2. Code Splitting (코드 스플리팅) 3. 도메인 4. API (Application Programming Interface) 5. REST API 6. HTML | 자주 사용하는 태그 7. 금일 소감 1. Next.js | npm run dev 실행이 안 될 때 프로그래밍 + 인터넷 창을 많이 띄워두다 보니 노트북이 너무 느려져서 이번에 맥북으로 노트북을 새로 샀다. 도착하기 전에 Next.js npm run dev로 개발자 모드를 실행했을 때, 안 열리는 적이 많았어서 컴퓨터 CPU 이슈로 구동이 안 될 때는 어떻게 해야 하는지에 대한 해결책을 튜터님이 알려주셔서 기록해두려 한다. 그럴 땐 위 사진과 같이 .Ne..

1. Authentication 구현하는 법 - Authentication - Authorization 2. 금일 소감 1. Authentication 구현하는 법 Authentication 웹 애플리케이션에 기본 이메일-비밀번호 인증을 추가하는 프로세스다. 이 방법은 기본적인 수준의 보안을 제공하지만 일반적인 보안 위협에 대한 보호를 강화하려면 OAuth 또는 비밀번호 없는 로그인과 같은 고급 옵션을 고려하는 것이 좋다. 사용자가 로그인 양식을 통해 자격 증명을 제출한다. 이 양식은 서버 작업을 호출한다. 인증에 성공하면 프로세스가 완료되어 사용자가 인증에 성공했음을 나타낸다. 인증에 실패하면 오류 메시지가 표시된다. 사용자가 자격 증명을 입력할 수 있는 로그인 양식 코드 import { ..

1. Data Fetching 2. Caching Data 3. Revalidating Data 4. 금일 소감 1. Data Fetching 1) async와 await를 fetch와 함께 사용하여 데이터를 가져올 수 있다. async function getData() { const res = await fetch('https://api.example.com/...') // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to f..

Next.js 로고부터 해서 공식 사이트, 그리고 서버 실행했을 때 그려지는 UI까지 '멋'이 없는 게 없다.. 에러도 잘 뜨고 끄떡하면 서버 종료 후 다시 켜야 하는 불편함이 있긴 하지만 그마저도 왠지 모를 간지로 인해 모두 상쇄가 된다.... 폴링 인 럽 해버린 Next.js,, 핵심 요약 및 정리, 오늘부터 시작해 보자 1. Next.js란? 2. Next.js 자동 설치 명령 3. 프로젝트 구조 4. Routing 기본 5. 금일 작성한 코드 6. 금일 소감 1. Next.js란? : Full-stack 웹 애플리케이션을 구축하기 위한 React 프레임워크 React 구성 요소를 사용하여 사용자 인터페이스를 구축하고, Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로..

1. 프레임워크와 라이브러리 | 공통점과 차이점 2. TTI (Time to Interactive) 3. TTV (Time to View) 4. Hydration (하이드레이션) 5. Routing (라우팅) 6. 금일 소감 1. 프레임워크와 라이브러리 | 공통점과 차이점 : 둘 다 소프트웨어 개발에서 코드의 재사용성을 높이고 개발 시간을 단축하기 위해 사용됨 이 두 개념을 흔히 집 짓는 과정으로 비유하곤 한다. 예시를 통해 차이점을 쉽게 이해해 보자 위 두 개념의 차이를 '집을 짓기 위한 과정'으로 비유하면, 프레임워크는 모델하우스를 짓는 것으로 볼 수 있고 라이브러리는 구매한 재료로 가구를 조립하는 것으로 볼 수 있다. 따라서, 프레임워크는 통제권을 프레임워크가 가지고 있고, 라이브러리는..

1. join 2. while 3. for...in 4. trim 5. Event.preventDefault 6. 오늘 작성한 코드 7. 금일 소감 공부할 게 많은 관계로 오늘은 코드카타를 건너뛸 예정이다 ㅠㅠ 오늘은 모르는 개념 위주로 정리하려고 한다. 1. join() : 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환 배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환된다. 문법 join() join(separator) [매개변수] separator Optional : 배열의 인접한 요소의 각 쌍을 구분하는 문자열 생략되면 배열 요소는 쉼표(",")로 구분된다. 반환 값 : 배열의 모든 요소들을 연결한 하나의 문자열을 ..

1. [09:00~10:00] 코드카타 문제 풀이 - 문자열 다루기 기본 2. parseInt() 3. toUpperCase() 4. 오늘 작성한 코드 5. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 - 문자열 다루기 기본 문제 설명 : 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성해보자. 예를 들어, s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 된다. 제한 사항 : s는 길이 1 이상, 길이 8 이하인 문자열이다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있다. 내가 작성한 코드 // s의 길이가 4 or 6인지 체크 // 문자가 들어가면 False, 아니면 Tru..

1. [09:00~10:00] 코드카타 문제 풀이 (1) 수박수박수박수박수박수? (2) 내적 (3) 약수의 개수와 덧셈 2. Number.isInteger() 3. Math.sqrt 4. 오늘 작성한 코드 5. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 (1) 수박수박수박수박수박수? 문제 설명 : 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하라. 예를 들어, n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 된다. 제한사항 : n은 길이 10,000이하인 자연수다. 문제를 보고 답안 작성하며 '뭐야.. 왜 이렇게 easy하지?.. 뭔가 이상해' 하면서 풀었다. 심지어 테스트 돌렸는데 통과됐길..

1. [09:00~10:00] 코드카타 문제 풀이 - 가운데 글자 가져오기 2. substr() 3. Set 4. switch 5. 오늘 작성한 코드 6. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 - 가운데 글자 가져오기 문제 설명 : 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보자. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 된다. 제한사항 : s는 길이가 1 이상, 100이하인 String 삼항연산자를 사용하는 것과 짝수임을 확인하기 위해 2로 나누었을 때 나머지가 0인 것을 구하는 것까진 알았다. 그런데 가운데 두 글자를 가져오려면 어떻게 해야 하지? 하는 생각이 들었다. 다른 답안을 찾다가 효율적으로 작성한 것으로 판단되고 또 subs..

오늘, 주특기 플러스 주차 챕터에 들어섰다. 팀원이 전부 바뀌었다. 챌린지에 속해 있는 다른 분들과도 함께 협업할 수 있는 기회에, 스탠다드 반 분들과도 교류할 수 있어서 기쁘다. 하지만 가장 기쁜 건,, 이번엔 처음으로 팀 인원이 5명이라는 것이다. 감격 그 자체다 ㅠㅠ ,,, 이번은 아무도 안 나가시겠지..? ㅠㅠ 쭉 부족한 인원 + 잠수 타거나 하는 팀원이 있어 개인 공부 시간이 턱없이 부족했는데 이번은 마음이 좀 놓인다. 그래서 오늘도 내 부족한 공부를 확실하게 채우기 위해서 열심히 공부하였다. 1. [09:00~10:00] 코드카타 문제 풀이 (1) 하샤드 수 (2) 콜라츠 추측 2. TypeScript 사용 이유 3. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 (..

그동안 하려고 했었던 JavaScript 문법 종합반 강의를 다시 완강하였다. 보면서 작성한 코드만 해도 양이 엄청 많다. 이번 연휴엔 너무 졸리고 피곤해서 자고, 쉰 시간이 많긴 하지만 그래도 JS 문법을 전반적으로 다시 공부함으로써 코드에 대한 이해력이 많이 오른 듯하다. 1. 재귀적 수행 (재귀 호출) 2. Scope Chain (스코프 체인) 3. 실행 컨텍스트 4. JS 문법 종합반 들으며 작성한 코드 5. 금일 소감 1. 재귀적 수행 (재귀 호출) : 함수가 직접적으로 또는 간접적으로 자기 자신을 호출하는 과정 재귀 함수는 특정 조건(기저 조건)이 충족될 때까지 자기 자신을 계속해서 호출한다. 기저 조건은 재귀가 무한히 반복되는 것을 방지하기 위해 설정된다. 재귀적 수행은 복잡한 ..

내일 있을 발표를 위해 오늘 시연 영상 촬영하고 PPT 제작 완료했다. 휴... 일찍 끝낼 줄 알았는데 예상 외로 배포에서 Error가 계속 생겨서 그거 트러블 슈팅 하느라고 정말 하루 중, 대다수의 시간을 보냈다. 하... 그래서 Git 공부 할 때 배포 공부도 같이 해야겠다. 서버랑 이래저래 연결된 게 많고 고려할 게 많아서 배포 공부도 필수일 것 같다. 1. PPT 제작 완료 2. 금일 소감 1. PPT 제작 완료 어제 밤에 배포를 완료해서 오늘은 거의 해야 할 게 없을 줄 알고 공부 계획 다 짰는데, 어제 배포할 때 사용한 Glitch 서버가 안 깨고 계속 잠들어 있어서 배포 링크의 UI가 하나도 안 떴다. 어떻게 해야 할지 반나절을 고민하고 이래저래 시도하다가 튜터님이 JSON se..

1. Vercel 배포 완료! | 도메인에 URL 등록 2. 헷갈리는 개념 요약 1) async - await 2) fetch - then 3) Optional Chaining (옵셔널 체이닝) 4) Hook의 정의, 사용법 3. 금일 소감 1. Vercel 배포 완료! | 도메인에 URL 등록 배포 절차에 따라 진행한 뒤, 최종적으로는 KAKAO Map API를 발급받은 계정 사이트 도메인에 Redirect URL을 등록해 주어야 정상적으로 배포 링크를 들어갔을 때, 카카오 맵이 UI에 나온다. 배포는 지금껏 다른 팀원이 했었어서 배포 방법을 자세히 알지 못했는데 이번 팀 프로젝트 때엔 팀원들과 화면 공유하며 내 손으로 직접 배포를 해서 뿌듯하기도 하고, 하나 더 배워서 너무 좋았다. 배포..

1. KAKAO Map이 화면에 나오지 않음 | API Key 절대 확인하기 2. gitignore에 env 추가해두자 3. 즉시 반환 조건문에 꼭 안 넣어도 되는 조건은 제외하기 4. 정확한 위치 정보로 등록되게 하기 5. 금일 소감 1. KAKAO Map이 화면에 나오지 않음 | API Key 절대 확인하기 이유는 index.html에 API Key를 넣어주지 않았기 때문이다. 초기세팅 때 같이 넣은 줄 알았는데, 아니었던 것이다. 작성한 코드가 문제인가 했더니 원인은 그게 아니었다. 다소 댕청한 실수이지만... 아무튼 해결되었다. 우리가 사용한 API는 ReactKakaoMapSDK에서 제공하고 있는 Map API다. SDK는 소프트웨어 개발 키트(Software Development ..

오늘까지 해서 팀 프로젝트 3일차다. 금요일에 시작해서 금, 토, 일. 이제 각자 페이지 구현한 것 마무리하는 단계다. 사실상 금요일에는 프로젝트가 어떻게 진행되는지 발제 듣고 S.A. 작성하고 팀원들과 초기 세팅 맞추느라 하루를 다 썼다. 본격적으로 각자 구현에 돌입한 것은 토요일부터였다. 나는 토요일에 거의 뻗어서 잠 좀 보충하고 거의 밤부터 집중해서 개발에 들어갔다. 1. 개발 배우기가 정말 어려운 이유 2. env에 따라 알맞은 경로 작성 3. 금일 소감 1. 개발 배우기가 정말 어려운 이유 https://brunch.co.kr/@jypthemiracle/14 개발 중간중간 잠시 쉬는 틈을 활용해 이런 글을 읽게 되었다. 저번과 이번 챕터에서 어려움이 많았어서 공감이 되려나 싶어서 들..

코드를 작성하는 데 있어서 어려움을 느끼는 이유를 좀 더 곰곰이 생각하다가 자료구조에 대해서 더 명확하게 알고, 또 정리해 두는 게 필요하겠다 싶어서 오늘은 포함해 이번 주말까지는 자바스크립트 자료구조에 대해서 공부할 생각이다. 1. JavaScript 주요 자료구조 2. 각 자료구조의 예문 & 용도 3. 금일 소감 1. JavaScript 주요 자료구조 1) 배열(Array) : 연속적인 메모리 공간에 동일한 타입의 데이터를 순서대로 저장 인덱스를 사용해 데이터에 접근 가능 다양한 메서드(push, pop, shift, unshift, slice, splice 등)를 통해 배열 조작 가능 2) 객체(Object) : 키(key)와 값(value)의 쌍으로 데이터를 저장 유연한 데이터 구조를..

오늘은 다소 짧은 포스팅이 될 것 같다. 과제 하고 하루 종일 코드 짜느라 개념이나 다른 걸 공부할 여유가 없었다. 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 2. Uncaught TypeError: Cannot read properties of undefined (reading 'filter') 3. 금일 소감 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 이번 과제에선 타인의 코드를 읽는 능력도 함께 길러보자 하는 생각으로, 어려운 길이 되겠지만... 내 코드..

1. [Redux 미들웨어] Thunk 2. Custom Hook (커스텀 훅) 3. 금일 소감 1. [Redux 미들웨어] Thunk : Dispatch를 할 때, 객체가 아닌 함수를 Dispatch 할 수 있게 됨 Dispatch(객체)가 아니라 Dispatch(함수)를 할 수 있게 되는 것! => 중간에 하고자 하는 작업을 함수를 통해 넣을 수도 있고 그것이 중간에 실행되는 것 [중요] '함수'를 Dispatch 할 수 있게 해줌! 액션이 리듀서로 전달되기 전, 중간에 어떤 작업 더 할 수 있음 Dispatch 하면 Action이 reducer로 전달되고, reducer는 새로운 state를 반환하는 과정에서 미들웨어를 사용하면, 하고 싶은 작업들을 넣어서 할 수 있음 [사용 이유] :..

1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 2. Uncaught TypeError: Cannot read properties of null (reading 'map') 3. Failed to load resource: net::ERR_CONNECTION_REFUSED 4. Uncaught (in promise) ReferenceError: process is not defined 5. 컴파일 에러(Compile Error) & 런타임 에러(Runtime Error) 6. 금일 소감 1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 JSONPlaceholder를 복습하다가 위 사진에 하이라이트 처리한 부분이 이해..

오늘 팀 배정이 다시 됐다. 다행이다. 팀이 바뀔 때마다 기여 가능한 인원이 한 명씩 줄어서 이번 팀에서는 '혼자 다 해야 하는 거 아냐??' 했는데 걱정하지 않았어도 좋았을 팀원분들로 배정이 되었다. 1. Vite UI가 로드되지 않음 2. 데이터, 함수 그리고 Custom Hooks ① Redux, Action, Dispatch ② 함수를 작성할 때 고려해야 할 점 3가지 3. 금일 소감 1. Vite UI가 로드되지 않음 와 진짜 Vite 갑자기 로드가 안 되길래 정말 너무 조마조마했다. 이러면 공부 하나도 못 하는데 어쩌나 싶었다. 그리고 강의에서 나온 코드 그대로 작성했는데 안 되길래 대체 뭐가 문젠가 싶은 마음이었다. 에러 메시지라도 보고 싶은데 개발자도구를 사용하지 못 하니 정말..

햐 드디어 News Feed 프로젝트가 끝났다. 14시부터 발표 시작인데 발표 순서 룰렛 돌린 결과, 내가 첫 번째 발표라 기뻤다. 나중에 할수록 순번 기다리면서 지치고 또 다른 팀 발표 내용과 피드백이 머리에 잘 안 들어오기 때문이다. 이번에도 운이 좋았던 나 1. 우리 팀 발표 Feedback 내용 2. 프로젝트 관리 및 협업 시스템 개념 정리 ① 업무분류 체계(Work breakdown structure, WBS) ② 업무 분류 체계의 2가지 유형 ③ 칸반 보드 ④ 프로젝트 매니저 3. 금일 소감 및 KPT 회고 1. 우리 팀 발표 Feedback 내용 [칭찬] 큰 글자로 설정한 것 좋고, 취소 버튼 클릭 시 내용이 초기화되는 불상사가 발생할 수 있는데 그것을 미연에 방지함으로써 UX적..

1. CSS 수정해서 진짜 완성된 모습 2. 금일 소감 1. CSS 수정해서 진짜 완성된 모습 최최최종이다. 기능에만 일단 집중을 하느라고 어제 올린 게시글처럼 CSS가 여러모로 뭉개져있어서 새벽에 잠 안 자고 총 여섯 페이지 모두 CSS를 수정했다. 그러니 그냥저냥 볼 만한 정도로는 됐다. 오늘은 정오까지 최종 완성된 코드와 시연 영상을 제출해야 해서 잠이고 뭐고 일단 내는 게 중요해서 끝까지 보완하고 수정할 부분 하고 제출했다. 그러고 한 3시간 정도 자고 PPT 준비하고. 시연 영상이 마음에 들지 않아서 다시 촬영했다. 귀여운 아바타 넣어서 하려고 했는데, 귀여운 아바타로 화면 녹화하면 자꾸 저장이 안 돼서 그냥 정장 입은 아바타로 바꿔서 촬영했다. 아쉽다..... PPT 표지는 위와 ..

1. 내가 구현한 페이지 및 기능2. [Error]  missing in props validation     - props의 타입 검증 방법3. 깨달은 핵심 포인트   (1) Merge   (2) 기획 및 설계, 와이어프레임의 중요성   (3) 완성된 코드를 다른 데에도 저장해두자4. 금일 소감   1. 내가 구현한 페이지 및 기능  총 세 페이지를 맡았다. My Page, Detail Page, Write Page다.CRUD랑, 이미지 업로드, 로그인 된 정보를 가지고 글을 다르게 보여주는 기능 등을 구현하였다. 메인 페이지랑 마이 페이지가 연결되는 부분이 있다 보니 기능의 일부는 안 되는 것도 있었다. 원래 더 일찍 주말에 Merge 해서 기능 완벽히 완성시키고 필수 기능 마무리 작업까지 끝냈어야..