JH 개발 블로그

이 포스트에서는 ORM 의 기본적인 개념과 장단점을 설명하고 Prisma 의 장단점에 대한 내용을 다룹니다. ORM 프리즈마를 알기 전에 ORM 에 대해서 먼저 알아보자. ORM (Object-relational mapping) 은 DB 데이터(스키마)를 객체로 매핑해주는 역할 모델링된 객체와 관계를 바탕으로 SQL 을 자동으로 생성해주는 도구 ORM 이란? 다시 말해서,,, ORM (object-relational mapping) 이란 객체(클래스)와 관계(관계형 데이터베이스) 와의 설정을 의미한다. 객체 지향 프로그래밍은 클래스를 사용하고 관계형 데이터베이스는 테이블을 사용한다. 여기서 객체 모델과 관계형 모델 간에 불일치가 존재하는데 이 객체간의 관계를 바탕으로 SQL 을 자동 생성하여 불일치를 해..

let age:number = 3; let isAdult:boolean = true; let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; let mrgintCtsfd:string | undefined = undefined; let nullableNumber:number | null = null; let color:'red' | 'orange' = 'red'; color = 'orange'; color = 'green'; // 에러 // yarn run tsc 시 오류된 부분 나옴 funtion sum( x:number..

git rebase -i main 맨 상단만 pick 하고 나머지 커밋은 s 로 남겨둔다. 그 다음 에디터가 떴을 때, 남기고 싶은 커밋 메시지만 남긴 후 나머지 커밋 메시지는 지워준다. 보통 마지막 커밋 메시지를 남김 (커밋을 깔끔하게 하나로 관리하기 위한 행위를 하고 있는 중인 것이다.) 그리고 보통 git rebase 를 하기 전에 main 브랜치에서 git pull 해주는 것은 필수이다. 또한 현재 작업하고 있는 브랜치로 가서 "git rebase -i master" 명령어로 git merge 와 같은 역할을 해줘야 브랜치가 최신 상태로 업그레이드 된다.

이번 주 할일 페이지네이션 실습 영상 보기 - (월)까지 이력서 - (월)까지 소셜 로그인 통신 - (월)까지 상세페이지 라우팅 장바구니 담기 기능 구현 (상품 id, 수량) 리뷰 달기 기능 구현 (페이지네이션) 이번 주는 금요일에 git rebase 를 안보고 명령어를 쳐봤다가 대형 사고가 일어나서 git reset 을 10번 사용했고 이마저도 정상적으로 작동이 안되는 것 같아서 멘붕이 되었다. 주말에 천천히 기능 구현이나 해볼까 했더니 git rebase 와 몇시간 동안 씨름했다.... 결국엔 모든걸 바탕화면에 백업하고 완전 초초초초초초기 상태로 돌아갔다.... 그리고 branch 를 삭제해버리고 강제로 push... (아 이거 강제로 push 해도 될란지 모르겠다.) => 원래 하는거였다! 암튼 이..

원격 저장소에서 로컬 저장소로 소스를 가져오는 명령어 pull fetch fetch 와 pull 의 차이는 가져온 소스를 merge 하느냐 안하느냐의 차이 pull과 fetch의 차이는 무엇일까? git pull: git remote 명령을 통해 서로 연결된 원격 저장소의 최신 내용을 로컬 저장소로 가져오면서 병합한다. git push의 반대 성격이라 생각하면 된다. git fetch: 로컬 저장소와 원격 저장소의 변경 사항이 다를 때 이를 비교 대조하고 git merge 명령어와 함께 최신 데이터를 반영하거나 충돌 문제 등을 해결한다. 일반적으로 브랜치를 만들지 않고 혼자서만 작업하면서 Git과 Github를 사용한다면 pull과 fetch를 사용할 일이 거의 없을 것이다. 하지만 대체적으로 Git을 ..

위코드 2주차....바쁘게 지나간 일주일이었다. 나는 이 일주일을 기록해보고 회고해보고자 한다. 월 - 금 우선 이번 주 중점적으로 했던 일은 HTML + CSS + JS 로 인스타그램을 따라 만들어 보는 것이다. 아래는 결과물이다. 인스타그램을 따라 만들면서 느꼈던 생각은... 역시 난 프론트엔트 개발자가 적성에 맞는다는 느낌이었다. 기능 하나하나를 구현하고 원하는 대로 결과가 이루어질 때마다 희열이 느껴졌다. 사실 나는 HTML 과 CSS 가 좋아서 프론트엔드 개발자가 되기로 맘 먹은 거였는데 JS 로 기능을 구현할 때, 내가 이런 기능을 구현하려면 어떤 순서와 절차가 필요할까? 내가 빼먹은 순서, 절차가 있는가? 그게 화면에서 구현이 잘 되어지는가? 이렇게 수학 문제를 푸는 느낌이고 직접적으로 해결..

깃(Git) 에서 브랜치(branch) 를 사용하는 방법에 대해서 알아보자. 깃(Git) 은 동시에 여러 개발자들이 프로젝트에서 각기 다른 기능을 개발할 수 있도록 브랜치 기능을 제공한다. 각자 각기의 작업공간에서 작업하므로 서로에게 영향을 주지 않는다는 면에서 서로 다른 개발 작업을 수행할 수 있다. 브랜치의 기본 동작과정 기본적으로 Git 저장소를 만들면 자동적으로 마스터 브랜치가 생성이 되는데, 이 브랜치는 일반적으로 배포가 가능한 수준의 안정화된 버전을 포함하고 있다. 마스터 브랜치는 항상 안정화되고 배포가 가능한 상태여야 한다. ↓ 즉, 합치기(Merge) 가 수행되기 전까지는 안정적으로 배포가 이루어지고 있다가, 모든 기능이 합쳐진 이후에 또 다시 배포할 수 있으므로 개발의 안정성이 매우 뛰어..

사이트에 이미지를 넣는 방법은 두 가지가 있다. 하나는 태그를 사용하는 것이고, 다른 하나는 태그에 background-image 속성을 추가하는 것이다. 이 두가지의 방법의 차이점은 뭘까? 그리고 어떤 경우에 사용하는지 알아보자. 이것을 이해하기 위해서는 먼저 시멘틱 웹과 시멘틱 태그에 대한 이해가 있어야 한다. 먼저 Semantic 시멘틱은 '의미의' '의미론의' 라는 뜻을 가지고 있다. 시멘틱 웹에 대해서 좋은 자료가 있어서 가져와 보았다. ↓ 시맨틱 웹은 컴퓨터가 정보 자원의 뜻을 이해하고 논리적 추론까지 하는 차세대 지능형 웹이다. 지금의 웹은 특정 검색어를 치면 불필요한 문서가 모두 나와 일일이 찾아 보아야 하는데 지능형 웹은 다르다. 단어의 유사성과 상관관계 등을 파악해서 원하는 결과물만 찾..

const hello = document.querySelector('.hi h1'); function handleTitleClick() { const currentColor= hello.style.color; let newColor = hello.style.color; if (currentColor === 'blue') { newColor = 'orange'; } else { newColor = 'blue'; } } hello.addEventListener('click', handleTitleClick); 이렇게 작성하면 잘 실행될 줄 알았는데 원하는대로 결과가 나오지 않았다. 마침 나와 같은 궁금증을 가진 사람이 있었고, 여러가지 답변이 있었다. ↓ h1.style.color = newColor 라고 ..

오늘은 flexbox 부분을 다시 복습했고 grid 에 대해서 공부 및 정리를 하였다. 특히 grid 는 5년 전 강의와 최신 강의를 둘 다 봤는데 역시 최신 기술로 인해서 좀 더 편하게 HTML, CSS 를 짤 수 있게 된 것 같다고 느꼈다. 옛날엔 하나하나 다 계산을 했구나... 내일은 rem 단위 같은 것들을 공부해야겠다. -> 유튜브 드림 코딩! 그리고 CSS 애니메이션, transition 공부해야지