[포스코 x 코딩온] 5기 풀스택 웹

이번주 작업 진행 프론트엔드 웹사이트 제작 프로젝트필요한 팀원들과의 협업

Git 및 GitHub 사용에 대해 자세히 알아보세요. 작업 과정에서 발생할 수 있는 상황에 따라

가볍게 연습하고 또 팀원들과 연습했다.

리더 부분과 팀원 부분이 분리되어 Git으로 이어졌습니다.

몇 번 할 수 있을 거라 생각했는데 어떻게 해야 할지 모르겠습니다.

대충 아래와 같이 정리했습니다.

'추천 관련글,

확인: 자식 분기
추가됨: git branch 브랜치 이름
이동: git switch branchname / git checkout branchname
이름 변경: git branch m 기존 브랜치 이름 새 브랜치 이름
삭제: git branch d PR 브랜치 이름이 보이지 않으면 Github 데스크톱에 표시됩니다.
메인을 가져오고 git swtich ssa를 수행하고 내 분기(ssa)로 전환합니다.
이동 후 git rebase main을 실행하여 main에서 변경 사항을 가져옵니다.
내 ssa 지점에서 main에서 얻은 내용을 변경합니다.
편집이 끝나면 git add . → git commit -m “수정” → git push
github 데스크톱 앱을 열고 (풀 리퀘스트 만들기)를 클릭하세요!
그리고 단체 대화방에 글을 올리고 제 풀 리퀘스트를 했다고 합니다.

(한 사람만 수락하면 병합됩니다.

)

분기가 하나만 있기 때문에 Rebase가 더 쉽습니다.

현재 프로젝트에서 그는 우리 업계에서 Rebase를 추천했습니다.

그리고 SCSS를 사용하는 방법또한 배웠다 이전에 CSS로만 작업했다면 알 것입니다.

다른 클래스 및 태그

목록 시간이 많이 필요하고, 눈알을 굴려서 어지러움을 느꼈다.

당신은 이것을 해결할 수 있습니다!

클래스와 태그를 반복적으로 작성해야 하기 때문에 나는 그것이 매우 비효율적이라는 것을 알았습니다.

그리고 오타가 났을 때 쉽게 찾을 수 있어서 좋았습니다.

항상 실수를 하는 부분입니다.

시계 Saas폴더의 변경 사항을 감지하고 CSS 폴더로 컴파일할 수 있다는 점도 흥미로웠습니다.

CSS 코드가 훨씬 더 간결해져서 코드 자체가 더 깔끔해 보여서 좋았습니다.

https://gleeful-lokum-384254.netlify.app/

문서

기쁜-lokum-384254.netlify.app

이것을 사용하여 선생님을 따르십시오. “동영상 기반 랜딩 페이지” 우리는 또한 일등을 위해 투표하고 투표하는 시간을 가졌습니다.

2표를 받아서 영광인데 누군지는 모르겠지만 확실히 말이 되는 것 같습니다.

HTML, 기본 CSS 설정(_reset.scss, style.scss)을 사용하여 스켈레톤을 만들고 JS 기능을 추가했습니다.

메인 화면에서 고품질 무료 비디오 데이터를 제공하는 것으로 알려진 다음 두 사이트의 데이터를 찾을 수 있습니다.

픽셀
https://www.pexels.com/en-us/

픽사베이
https://pixabay.com/en/videos/

구글 글꼴
https://fonts.google.com/

서체는 구글폰트에 들어가서 수업시간에 재빠르게 찾아보면서 영상에 맞췄습니다.

선생님과 함께 코드를 입력하면서 이러한 동작을 직접 수행하는 것이 너무 재미있었습니다.

스타벅스 페이지의 복제본을 코딩하면서 동영상 기반의 랜딩페이지를 만들었는데 별거 없어보입니다.

비쥬얼 짱입니다 역시나 졸업하고 나서도 더 잘하고 싶었고 맛도 있어서 즐거웠어요.

‘음악 플레이어 페이지’또한 완료 프로젝트 팀이 구성되고, 작업을 완료하는 데 충분한 시간이 없는지 궁금합니다.

수업 중에 이 페이지 제작 수업을 건너뛸지 여부에 투표했습니다.

하지만 제 주변에는 만들고 싶어하는 사람들이 많았습니다.

역시나 다수의 찬성으로 강사님과 함께 코드를 따라가며 설명을 듣고 뮤직플레이어 사이트를 만들었습니다.

기본 UI 설정 – HTML, CSS 작업, JavaScript로 회전, 버튼에 대한 JS 처리,

@Keyframes 작업을 처음 따라해본 것이기 때문에 매우 알찬 수업이었습니다.

앞서 배운 애니메이션 효과까지는 시작과 끝만 설정할 수 있었습니다.

키프레임, CSS 속성 사용 각 구간을 정의하여 애니메이션 효과를 연출할 수 있습니다.

이제 코드를 입력하면서 내가 만든 페이지에서 무언가가 움직일 뿐만 아니라 음악이 재생되었습니다!

다른 곡이 나올 때 다른 곡을 멈추게 하는 과정도 헷갈렸지만 하고 나니 뿌듯했다.

https://jade-froyo-e270c7.netlify.app

상아선수

Abigail이 화장실에서 식사를 했을 때.

jade-froyo-e270c7.netlify.app

학원에서 웹프론트엔드 기술을 배울 때 수업 시간에 만든 모든 페이지를 스스로 구현한 척을 했다.

때때로 친구들에게 보내곤 했는데 매번 말을 잘 못하는 친구들만을 위한 특별한 내용을 추가해서 보내기도 했습니다.

그는 아직 집에 있지만 화장실 청소를 하고(남편이 자랑스럽다) 싱크대 배수구를 빼서 다시 청소한다.

묻지도 않은 말 하루라도 빨리 코딩을 배우라고 전화하고 쏟아지는 친구에게 추천합니다.

그리고 LocalStorage, 세션 스토리지또한 배웠다

LocalStorage는 브라우저에 간단한 정보를 저장하는 수단입니다.

[포스코 x 코딩온] 5기 풀스택 웹 7 — 로컬 스토리지가 객체 형태로 잘 관리되고 있음을 알 수 있다.

전경에 무언가를 저장해야 하는 경우 브라우저에 간단히 저장할 수 있는 방법이 있어야 합니다.

JavaScript는 비동기식 프로그램이므로 모든 것을 한 번에 저장하고 먼저 완료되는 것을 처리합니다.

누가 먼저 저장을 끝낼지 모르니 먼저 저장한 애가 들어와서 너무 신기했어요.

LocalStorage가 영구적인 문제를 해결하기 위해 SessionStorage가 출시되었습니다.

저장된 데이터는 브라우저 종료 시 삭제되므로 보안 관련 데이터를 저장하기 위해 SessionStorage를 사용합니다.

https://getbootstrap.com/

부트스트랩

강력하고 확장 가능하며 기능이 풍부한 프런트엔드 툴킷. Sass로 구축 및 사용자 지정하고, 미리 구축된 그리드 시스템 및 구성 요소를 사용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생명을 불어넣으세요.

getbootstrap.com

전면 프레임 부트스트랩 나도 코스를 들었어.

이미 준비된 전면 요소를 사용하거나 단순히 반응 유형을 구현할 수 있습니다.

부트스트랩이 잘 구현한 것을 이용하면 프런트엔드를 편리하게 구성할 수 있습니다.

또한 요소를 사용하는 방법, 클래스로 요소를 제어하는 방법, 그리드를 섹션으로 나누는 방법도 배웠습니다.

반응형으로는 col-sm, col-md, col-lg가 각각 데스크탑/태블릿/모바일 사이즈로 적용되었습니다.

아이디어가 있었는데 빨리 웹페이지를 만들고 싶다면 부트스트랩이 좋은 방법입니다.

(디자인이 그다지 중요하지 않은 웹사이트에 부트스트랩을 사용하는 것이 편리하다고 생각합니다.

)

스스로 칭찬하기

JavaScript 개념의 부족은 손으로 작성한 코드를 이해하는 것입니다.

안 되더라도 포기하지 않고 하루에 프로젝트 페이지 div 한 개 이상은 찾다가 끝내려고 해요.
프로그래머로서 코딩테스트 5문제를 이해하고 답을 외웠습니다.

체력관리를 위해 트레이닝을 시작했습니다.

개선점 / 앞으로의 다짐

써보고 외워도 좋지만 직접 해보는 시간이 필요합니다.

이번 주 안에 할당된 페이지를 정리해야 합니다.

아직 오지도 않은 미래에 대해 너무 걱정하는 것은 그만둬야 합니다.

조급한 마음으로 지금 집중해야 할 일에 방해받지 맙시다.