기본 서식 스타일 font-size: 텍스트의 크기를 지정하는 속성 value: px em pt % rem font-weight: 글꼴 두께를 지정하는 특성 100-900 bold bolder lighter normal (400=normal, 700-bold) line-height: 줄 간격을 지정하는 특성 value: px(22px이 보통 사이즈) em(제일 많이 씀, 1.6em이 보통) pt % rem font-family: 글꼴을 지정하는 속성 value: 'font name' font-style: 문자 스타일(기울림체) value: normal italic(기울림) oblique color: 글꼴 색을 지정하는 특성 value: color name #000000 rgb(0,0,0) rgba(0,0..
Critical Rendering Path Critical Rendering Path는 브라우저가 웹 페이지를 렌더링하기 위해 수행하는 필수 단계를 설명하는 용어입니다. 이 과정은 HTML, CSS, JavaScript 파일을 사용자의 화면에 픽셀로 렌더링하는 데 필요한 작업을 포함합니다. 다음은 Critical Rendering Path의 주요 단계입니다: 1. HTML 다운로드와 분석: 브라우저가 HTML 파일을 다운로드하고 분석하여 DOM (Document Object Model) 트리를 생성합니다. DOM 트리는 웹 페이지의 모든 요소와 그 구조를 나타냅니다. 2. CSS 다운로드와 분석: 브라우저는 CSS 파일도 다운로드하고 분석하여 CSSOM (CSS Object Model) 트리를 생성합니다..
BEM이란? BEM은 "Block, Element, Modifier"의 약자로 CSS를 작성하는 방법론 중 하나입니다. 이 표기법은 Yandex에서 개발되었으며, 웹 사이트의 스타일을 더 쉽게 유지하고자 하는 웹 개발자들 사이에서 널리 사용되고 있습니다. BEM 방법론에 따르면 CSS 클래스는 다음 세 가지 유형으로 나눌 수 있습니다. Block: 독립적으로 의미를 가지는 구성 요소로, HTML에서 재사용 가능한 독립적인 엔티티를 나타냅니다. 예를 들어, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. Element: 블록 내부의 구성 요소로, 자체적으로는 의미를 가지지 않지만 블록의 일부로서 의미를 가집니다. 예를 들어, 메뉴 항목, 헤더 제목, 체크박스 레이블 등이 이에 해당합니다. Modi..
팀스파르타 내일배움캠프 진행 중. 저번주까지 자바스크립트 팀프로젝트를 진행 후 이번주부터는 리액트 과정이 시작되었다. 5일안에 리액트 강의를 다 들은 후 투두리스트를 구현해야한다. 머리가 터질 것만 같지만 걱정은 접어두고 그냥 한다는 마인드로 임하겠다.
react 프로젝트를 만들고 yarn install 한다음에 yarn start 를 하거나, 애초에 터미널에서 yarn create react-app 이름 입력 할 때 이렇게 뜬다면 권한이 없어서 일어나는 에러이다. powershell을 관리자 권한으로 실행해 준 다음 get-help Set-ExecutionPolicy 입력 후 y 입력. Set-ExecutionPolicy RemoteSigned 또 이렇게 입력 후 y 입력. 이렇게 하면 RemoteSigned 권한이 되면서 설치가 잘된다.
금요일 오후 1시까지 제출기한이었는데 미리미리 진행 상황 계산해 왔어서 그런지 여유 있게 목요일에 프로젝트를 완성했다. 팀프로젝트 깃허브 링크 https://github.com/jei1211/team_MovieProject GitHub - jei1211/team_MovieProject Contribute to jei1211/team_MovieProject development by creating an account on GitHub. github.com team_MovieProject 🖥️ 프로젝트 소개 TMDB API를 이용한 영화 정보 검색 사이트입니다. 사이트 주소 https://weekly-jei.netlify.app/ 🕰️ 개발 기간 23.06.05 - 23.0..
기능 구현이 어느 정도 완성이 되어서 팀원 개개인의 브랜치에서 진행하였던 코드들을 메인 브랜치로 통합하는 과정을 시작했다. 이전 팀 프로젝트에서 깃허브 협업 해 본 경험이 있어 이번에는 크게 헤매지 않고 브랜치 통합을 할 수 있었다. merge 할 때마다 충돌이 생겼다고 뜨는 부분들을 수정해 가면서 결국 완료된 것을 보면 뭔가 짜릿하다. 이거 이거.. 어쩌면 나.. 개발자가 적성에 맞을지도..?
TMDB api를 이용해서 필요한 정보들을 배열로 추출 한 다음 다시 뿌려주는 과정을 하고 있는데, 역시나 쉽지 않다. 이론 공부는 되어 있다고 생각해서 뭘 써야 하는지 느낌은 오는데 진작 쓰려고 하니 뭘 어떻게 연결을 시켜서 보내줘야 작동이 제대로 되는지 도통 알 수가 없다. 구글링과 들었던 강의들을 뒤적거리면서 하나하나씩 해결해 나가고 있는데 하나하나씩 작동이 될 때마다 어? 되네? 하면서 기분이 좀 좋은 느낌도 있다. 이런 느낌이 오는 거 보면 나... 개발이 적성에 맞으려나? 기능이 제대로 작동되었을 때부터는 뭔가 코드를 더 효율적이고, 더 높은 기술력으로 바꾸고 싶은 욕심이 생겨서 조금씩 조금씩 공부해 가면서 변경하였다. 프로젝트 진행 사항을 보니 팀원분들 중에 어려움을 겪고 있으신 분이 있는 ..
내가 맡은 기능에 대해 구현을 시작했다. 홈페이지에서 검색된 영화를 선택하면 그 해당 영화의 TMDB id 값을 받아와서 영화 포스터, 제목, 줄거리, 감독, 평점 등의 정보들을 상세페이지에 뿌려주어야 한다. 내가 상세페이지를 기본 토대로 만들어낸 후에 나머지 팀원분들이 각자 구현한 기능들을 내 상세페이지에 합쳐야 하는데.. 각자의 js 파일들을 내 detail.js에 모두 가져오는 과정이 쉽지 않을 거 같다. 난 사전 공부를 통해 export, import로 js 파일끼리 연결시키는 것을 할 줄 알았기 때문에 다른 팀원분들의 기능들을 합치는걸 내가 도와줄 수 있겠다 싶었는데 생각해 보니 머리가 터질 것만 같았다. 하루정도 고민해 보다 계획을 변경하는 것으로 결정했다. 5일 안에 팀프로젝트를 완성해야 하..
(이번 팀프로젝트는 내일 끝날 예정이고 그동안 배웠던 점과 과정들을 기록할 예정) 스파르타 내일배움캠프 자바스크립트 개인 과제 주차가 끝이 나고 팀프로젝트가 시작되었다. 영화검색리뷰사이트 TMDB사이트의 API를 이용해서 영화 정보를 가져와서 검색, 해당 영화에 대한 리뷰 작성 기능이 있는 사이트를 구현하는 게 주제였다. 자바스크립트에 대한 공부가 2주 정도밖에 되어 있지 않은 상태에서 진행된 프로젝트라 높은 기술력으로 만들기 위해 시도하다 미완성으로 끝날 위험성을 안고 가기 보다는 현실적으로 자신이 구현할 수 있는 기능을 잘 구현하고 서로 작업한 것을 같이 깃허브로 합쳐보면서 협업에 대한 경험을 갖는 것을 우선적인 목표로 삼았다. 사다리 타기 게임을 통해서 내가 팀장에 당첨이 되어버렸고, 팀장이 되었기..
