React를 공부하며 Next.js와 같은 여러 프레임워크를 접해보고 있다.그러며 Tailwind CSS도 접하게 되었는데, 여러 시니어분들도 추천을 하시고 실제 현업에서도 사용 비율이 점점 높아지고 있다는 이야기를 들으며 더 알아보고자 정리해보려고 한다.처음 Reac

데이터를 삭제하는 방법은 크게 두 가지다. Hard Delete는 DELETE 쿼리로 DB에서 행을 완전히 제거하는 방식이에요. 단순하고 DB를 깔끔하게 유지할 수 있지만, 한 번 지우면 복구가 어렵고 연관된 데이터까지 사라질 수 있어요. Soft Delete는 실제로

스터디 습관 관리 앱을 개발하는 프로젝트를 진행 중 모달 안에서 여러 습관 항목의 이름을 자유롭게 편집하고, "수정 완료" 버튼 하나로 한 번에 저장하는 기능을 구현해야 했다.항목을 클릭하면 인풋으로 전환되어 이름을 수정할 수 있고, "수정 완료"를 누르면 변경사항이

프로젝트에서 '오늘의 습관' 기능을 구현하며 가장 고민됐던 부분은 접근 제어 방식이었다.페이지의 흐름은 아래와 같다.생성된 스터디(studyId)에 대해 비밀번호를 입력하고 일치하면 '오늘의 습관'페이지로 이동할 수 있다.하지만 로그인 기능이 없는 상태였기에 다음과 같

Prisma에 대해 지난 포스팅에서 살펴보며 느낀 점은 DB 개념을 알아야 이것이 효과가 있다는 것이었다.그래서! 다시 정리해서 기록해두고자 한다.관계형 데이터베이스데이터를 테이블(표) 형태로 저장하는 구조like Excel테이블 -> 시트행(Row) -> 데이터 한

직접 DB를 다뤄야 하는 순간이 찾아왔고 그렇게 Prisma를 처음 접하게 되었다.처음부터 무엇인지에 대한 감은 전혀 잡히지 않았기에 이렇게 정리해보며 다시 공부해보고자 한다.Prisma는 ORM으로, 객체를 스키마(schema)로 정의한 다음 그 객체와 내가 선택한

데이터베이스를 설계하다 보면 '데이터베이스를 나누는 기준'에 대한 고민이 생긴다.이걸 정립해주는 개념이 정규화(Normalization)이다.정규화란 정규화를 하지 않았을 경우 발생하는 문제에 대해서 살펴보자.❌ 1. 중복 데이터 발생👉 학생 A가 여러 번 반복됨❌

React에서 배열을 랜더링할 때 key를 설정해야하는 이유 그리고 주의점에 대해서 알아보고자 한다. React에서 배열을 랜더링 하는 코드는 자주 사용된다. 예를 들어 간단한 리스트를 출력한다고 해보자.

프로젝트를 시작하면서 가장 먼저 고민했던 것 중 하나가 폴더 구조였다.Flutter로 프로젝트를 진행했던 것과는 여러 구조들이 다를 것이라고 생각해서 관련된 내용을 정리하고 시작하고자 한다.React에서 가장 기본적인 폴더 구조를 알아보자.재사용 가능한 UI 조각But

디자인 시스템 정의 시 .css 와 .js 어느 것이 더 유리할까?

useMemo, useCallback에 대하여

React 컴포넌트의 개념부터 함수형·클래스 컴포넌트의 차이까지, 구조와 흐름을 중심으로 핵심만 정리해보았다.

React에서 컴포넌트 분리 컴포넌트 분리, 이전에 Flutter에서 Widget을 따로 분리해서 사용했던 것처럼 쉬울 줄 알았다.

React를 처음 배우면서 가장 많이 사용하게 되는 것이 바로 state다.그런데 사용하다보니 한 가지 의문이 들었다.모든 값을 state로 관리해야 할까?처음에는 이렇게 생각했다.값이 있으면 일단 state로 만들자바뀔 가능성이 있으면 state그러다 보니, 그냥 다

React 과정에 들어가면서 todolist 만들기 실습이 있었다. lv.1 ~ lv.3까지 있었는데 우선 lv.1을 정리해보고자 한다. 핵심 개념 정리 🔹 useState React에서 데이터를 관리하기 위해 사용한다. title → input 값 저장 tod

📦 구조분해 할당 (Destructuring)배열이나 객체에서 값을 “꺼내서 변수에 바로 담는 문법”아직 제대로 구조분해 할당의 개념을 이해하지 못한 것 같아 다시 정리하면서 공부해보고자 한다.기본 형태👉 순서대로 들어간다 (중요)일부만 꺼내기👉 필요 없는 값은

JavaScript에서 변수를 선언하는 방법은 크게 세 가지가 있다.이 세 가지는 모두 변수를 선언하는 키워드이지만 스코프(scope), 재선언 여부, 호이스팅 방식 등이 서로 다르다.특히 ES6 이후에는 let과 const가 등장하면서 var의 사용이 점점 줄어들게

자바스크립트에서 객체나 배열을 복사할 때 단순히 값이 복사되는 것이 아니라 참조가 복사되는 경우가 있다.특히 객체와 배열 같은 참조 타입(Reference Type)에서는 복사의 방식에 따라 결과가 달라진다.이때 등장하는 개념이 바로\*\*- Shallow Copy (

우리는 백 번을 살아도 다 쓰지 못할 잠재력을 가지고 태어났다 - 데니스 웨이틀리최근 읽은 책에서 마음에 와닿았던 말이다. 모두가 특출난 장점을 가지고있다고 나는 확신한다.단지 사회와 어울리거나 어울리지 않는 것으로 재능이 인정받거나 그렇지 않거나라고 생각한다.시대를

앞서 자바스크립트의 비동기 구조와 Event Loop에 대해 살펴보았다.비동기 작업은 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행한다는 특징이 있다.그렇다면 여기서 한 가지 문제가 생긴다.비동기 작업이 언제 끝나는지 어떻게 알 수 있을까?예를 들어 서버에서 데