본문 바로가기

Basic16

CSS의 position, display 정리하기 positionposition:relative요소를 문서 흐름에 따라 배치하되, 자신이 원래 있어야 할 위치를 기준으로 상대적으로 이동.  position:absolute요소를 문서 흐름에서 제거하고, 가장 가까운 조상 요소를 기준으로 배치(position:relative, absolute, fixed, sticky인 조상 요소). 없다면 뷰포트 기준. top, right, bottom, left로 정확한 위치를 지정.  요약relative: 요소를 약간 이동시키고, 다른 요소와의 관계를 유지하고 싶을 때.absolute: 요소를 특정 위치에 정확하게 배치하고 싶을 때.   displayinline텍스트와 같은 줄에 배치요소의 내용 만큼의 너비만 차지.높이, 너비, 패딩 속성을 설정할 수 없음., , ,.. 2024. 7. 10.
리액트 프로젝트에 CI/CD 적용하기 개요React, TypeScript를 사용한 협업 프로젝트를 진행하면서 프로젝트에 CI/CD를 적용했다. 배포는 vercel로 했는데, vercel은 기본적으로 CI/CD를 지원한다. 레포지토리에 변경된 코드가 새롭게 push되면 자동으로 빌드를 시작한다(Continuous Integration). 이때 에러가 발생하지 않으면 자동으로 새롭게 배포가 일어난다(Continuous Deployment).따라서 Vercel을 사용하면 정말 간단하게 CI/CD 파이프라인을 구성할 수 있다. 다만 문제가 하나 있었다. 개인 레포지토리가 아닌 GitHub Organizations를 사용하여 팀 레포지토리에 협업 레포지토리를 사용하고 있었다는 것이다. Vercel은 기본적으로 개인 레포지토리에서는 무료이지만, 팀 레.. 2024. 5. 29.
협업을 위한 깃, 깃헙 정리(branch, branch protection) 협업을 위한 깃, 깃헙 정리 개요 팀 협업을 위해서 브랜치 사용은 필수가 되었다. 자세히 알아보자!! 브랜치 // 브랜치 만들어서 그 브랜치로 이동(체크아웃) git checkout -b feat/name // 작업하기 ~ // 작업 완료 후 git add . git commit -m 'commit message' git push --set-upstream origin feat/name git push --set-upstream origin feat/name 은 로컬 브랜치를 remote repo에 푸시하면서 해당 로컬 브랜치를 remote repo의 특정 브랜치와 연결한다. 여기서 "feat/name"는 로컬에서 작업하고 있는 브랜치의 이름. --set-upstream 옵션을 사용하면 현재 로컬 브랜치.. 2024. 4. 10.
[Web] URL URL 웹 상의 자원의 위치를 나타내는 주소 http://www.example.com:80/path?q=apple 프로토콜 : 웹 브라우저가 자원을 요청할 때 사용하는 통신 규약. 가장 일반적으로 사용되는 프로토콜은 HTTP(HyperText Transfer Protocol)와 HTTPS(HTTP Secure) HTTPS는 보안이 강화된 프로토콜. 호스트 : 접근할 서버 컴퓨터의 도메인 이름이나 IP 주소. 포트 번호 : 서버가 웹 브라우저로부터 요청을 받는 데 사용하는 네트워크 포트 번호. 웹 브라우저는 포트를 명시적으로 지정하지 않고 기본값인 80(HTTP) 또는 443(HTTPS)을 사용. 경로 path : 서버 내에서 해당 자원의 구체적인 위치. 쿼리 스트링 : 자원에 대한 추가적인 요청 데이터... 2024. 3. 18.
[Web] 웹 관련 용어 정리 웹 웹 World Wide Web의 줄임말. 인터넷으로 연결된 컴퓨터들이 서로 정보를 공유하고 접근할 수 있는 공간. (정보 시스템). URL을 사용하여 문서들을 식별하고 HTTP를 통해 문서를 전송. 웹 페이지라고 불리는 문서들의 모음으로 이루어진 전 세계적인 정보 시스템. 웹 페이지들은 하이퍼링크를 통해 서로 연결되어 있음. 사용자는 웹 브라우저를 통해 웹 페이지를 방문할 수 있음. 인터넷 전 세계 네트워크를 연결한 인프라. 수많은 컴퓨터 네트워크들의 집합체. 웹 vs 인터넷 인터넷 : 컴퓨터와 네트워크의 인프라. 웹 : 인터넷이라는 인프라를 통해 정보를 공유하고 접근하는 방법 중 하나. 그렇다면 다른 방법에는 뭐가 있을까? 이메일, FTP 등. 결론 : 웹은 인터넷의 다양한 기능 중 하나. 네트워크.. 2024. 3. 18.
SEO 검색 엔진 최적화 출처: https://hypemarc.com/seo-crawling-indexing/ https://developer.mozilla.org/en-US/docs/Glossary/SEO 🔎 SEO 검색 엔진 최적화라는 뜻으로, 검색엔진이 정보를 수집하는 과정을 일컫는다. 👾 크롤링 + 인덱싱 크롤링 : 구글의 검색 엔진은 로봇이나 봇이라 불리는 웹 크롤러를 사용해서 웹페이지의 정보를 수집한다. 인덱싱 : 그리고 가져온 정보를 분류하고 인덱스(색인)을 매겨 데이터 베이스에 저장한다. 위의 과정이 이루어졌다면 구글에 검색을 했을 때 검색 결과에 노출될 수 있게 된다. SEO에 따라서 상위에 노출될 수도, 품질이 낮은 웹페이지라면 하위에 노출될 수도 있는 것. 2023. 11. 23.