TIL

[Next.js] 프로젝트 때 쓸 프론트 라이브러리들

1. radix ui https://www.radix-ui.com/ Radix UI Components, icons, and colors for building high‑quality, accessible UI. Free and open-source. www.radix-ui.com 많이 쓰는 컴포넌트들(Dialog, 프로필, 메뉴바 등등)을 지원하되 가볍고 개발중심적. 커스텀도 자유로움 2. class-variance-authority https://cva.style/docs cva Class Variance Authority cva.style 재사용가능한 ui 생성 3. fort awesome https://fortawesome.com/ Fort Awesome Custom Icons Want to ad..

Application Architecture

개발자의 입장에서 봤을 때, 서버에서 요청을 처리하려면 개발자가 먼저 코드를 빌드, 배포해야한다. 물론 서버 컴퓨터에도 디스크가 있지만 한계가 있으므로, 데이터베이스처럼 storage를 분리해서 네트워크로 연결시키는 경우가 많고, 이를 distributed storage라고 한다. 사용자 입장에서 보면, 사용자 브라우저가 서버에 요청해서 프론트의 경우 JS 코드를 반환할 거고 백엔드의 경우 API요청을 해서 데이터를 JSON 등의 형태로 받을 것이다. 그런데 사용자가 많아진다면, 서버가 병목현상때문에 느려지거나, 메모리 용량에 한계가 있을 수도 있다. 그래서 하나의 해결책으로 해당 서버컴 하나의 CPU나 메모리를 좋게 할 수 있는데, 이를 vertical scaling이라고 한다. 하지만, 컴퓨터 한대..

[TIL] npm install 시 --save, --save-dev 의 뜻

항상 써왔으면서 제대로 뜻을 몰랐다. 결론부터 말하자면 --save는 package.json의 dependencies에 모듈을 추가하겠다는 의미인데 npm5부터는 명시하지 않아도 추가가 된다고 한다. --save-dev는 개발 시에만 다운받는 dependency라는 걸 명시하는 역할이다. 즉 --save-dev로 다운받을 경우 배포할 때는 모듈을 다운받지 않게 된다. typescript 같은 모듈 다운받을 때 --save-dev 태그를 붙이면 된다. (타입 정의를 도와주기 위해서 개발할 때만 쓰이기 때문이다)

[TIL] 코드 이해하기...프젝 시작 전 각종 복습 벼락치기

자ㅎㅎ CSS!!!! 1. CSS @media - CSS에서 분기 처리 예시) 화면크기 줄이면 navbar 위치 바꾸고 이런 거 가능 2. CSS @layer - 우선순위 정해서 속성 적용,, 이런 거 가능 순위 위에다 써놓고 밑에 적용하면 위에 써놓은대로 적용되고, 위에다 안써놓으면 정의한 순서대로 우선순위 적용됨 (밑에쓴게 순위높음) 3. tailwind CSS @apply 4. CSS --속성 -- (두 개의 대시)는 CSS에서 사용되는 사용자 정의 속성을 나타내는 문법이다. 이를 CSS 변수로도 알려져 있습니다. 이러한 변수는 스타일 시트 내에서 값을 정의하고 참조할 수 있게 해준다. 예를 들어, --background는 사용자가 정의한 이름의 CSS 변수로 특정한 색상 값을 가지며, 나중에 스타..

[html/css] 100일 코딩 챌린지 - css position

css로 아이템을 배치하는 방법 중 하나는 position 속성을 이용한 것입니다. 오늘은 position 속성에 대해 알아봤습니다. 목차 1. relative 2. absolute 3. fixed relative position: relative; position 속성을 relative로 바꾸면 주변 요소로부터 간격을 자유롭게 조정할 수 있습니다. position이 static일 때는 이렇게 생겼던 화면입니다. Element 2의 position을 relative로 바꾸고 top:20을 주면 position: relative; top: 20px; 이렇게 Element 2가 20px 아래로 밀리는 것을 볼 수 있습니다. 아래로 밀렸지만, 나머지 요소들은 그 위치 그대로 있습니다. Element2와 3 두..

[html/css] 100일 코딩 챌린지 - flex 박스

목차 1. flex-direction 2. flex-wrap 3. flex-row 4. align-items 5. justify-content css에서 정말 유용하게 쓰이는 중 하나가 flex박스입니다. display 속성을 flex로 하게 되면, 주축을 설정해 편리하게 아이템을 배치할 수 있습니다. header{ display: flex; } 위는 예시로, 헤더 박스의 display를 flex로 설정한 css 코드입니다. Mozilla 공식 사이트에서 flex박스의 정보를 더 확인할 수 있습니다. 다음은 display:flex;를 설정했을 때 같이 사용할 수 있는 여러 부가적인 속성들입니다. 1. flex-direction flex-direction: row; 주축의 방향을 설정하는 속성입니다. 주축..

[Git/Github] 100일 코딩 챌린지 - 깃허브란?

저번 글에서는 로컬에서 깃을 다뤄보고, 로컬에서 쓸 수 있는 여러 깃 명령어를 써보았습니다. 이번에는 깃허브를 이용해, 로컬에서 벗어나 깃허브 클라우드에 우리의 레포지토리를 올려봅시다. 목차 1. 깃허브를 쓰는 이유 2. 깃허브 시작하기 3. 깃허브에서 프로젝트 불러오기 4. 다른 프로젝트에 기여하기 깃허브를 쓰는 이유 1. 우리의 프로젝트를 클라우드에 저장 가능 만약 다른 컴퓨터의 코드를 이용해 작업한다면 클라우드 환경은 큰 장점이 됩니다. 원격 레포지토리에 우리의 진행상황을 업데이트하므로, 쓰던 환경이 아니어도 클라우드에서 코드를 가져와 작업이 가능합니다. 또한 우리 컴퓨터가 고장났을 때, 데이터 손실이 일어나도 클라우드에는 데이터가 남아있어 작업 재개가 가능합니다. 2. 개인 포트폴리오 제작 가능 ..

[Git] 100일 코딩 챌린지 - Git 기본 명령어

Git은 내 프로젝트가 수정될 때마다 버전을 저장해 관리할 수 있게 하는 프로그램입니다. 코드는 add 명령어를 통해 staging area에 들어가, 변경사항이 트래킹됩니다. 트래킹 완료된 파일들은 commit 명령어를 통해 버전이 저장됩니다. git init 깃 저장소를 초기화하는 명령어입니다. 프로젝트 폴더를 워킹 디렉토리로 바꾸고 코드 파일을 깃으로 관리할 수 있게 됩니다. git add . git commit -m "커밋메세지" 이렇게 add와 commit이 가능합니다. 커밋메세지는 이전 버전과 비교해 어떤 부분이 수정되고 추가되었는지를 간략하게 작성하면 됩니다. git status git status는 현재 staged되지 않은(즉 add되지 않은) 파일들, 그리고 staging area에서 ..