22. 06. 20 - [ CSS 레이아웃 ] 웹페이지 구현 발표 준비하기 + [ 상담 ]

 

1. 과제 

• [ 주제 자유 ] 
• [ 웹 페이지 만들어보기 ]

 

---

 

2. 어떤 웹 페이지를 만들어 볼까?

• 고민을 하다가 배운 것도 활용할 수 있고,
• 새로운 스타일도 따라 해 볼 수 있는 웹페이지를 찾다가
• [ T-Story ] 메인 페이지를 클론 해보기로 정하였다.

 

---

 

3. T-Story 메인 페이지 확인

 

 

< header > + < main >부분 

 

 

 

< content > 부분

 

 

< footer > 부분 

 

 

 

---

 

 

 

4. T-Story 포럼 페이지 확인

 

 

< header > + < main > 부분

 

 

 

< sector > 부분

 

 

 

< footer > 부분

 

 

 

 

---

 

 

 

5. Check Point

 

 

 

## 메인페이지에서 - 체크 포인트

 

 

< header > 부분

• fixed로 스크롤을 내려도 고정되었다. 
• main이미지 부분 지나면 애니메이션 효과가 적용돼서 변형된 모습으로 나오는데
• 이 부분은 fixed만 해주기로 결정.

 

< main > 부분

기본 화면에서 특정 시간 흐르거나 화살표(<,>)를 누르면

다음 이미지로 넘어가는 것이 반복되는데 일단 이미지 하나로 구현하기로 결정

 

 

< content > 부분

• 효과도 화려하고 새로운 것들이 많았지만 따라 해 보기가 버거웠다.
• 텍스트 효과 적용된 부분 골라서 클론 해보기로 결정

 

< fooer > 부분

• 검색어 입력 보이는 -  input 태그 안에 버튼 이미지 부분

 

 

 

---

 

 

 

## 포럼페이지에서 - 체크 포인트

 

 

< header > 부분

• fixed 해서 고정해주기
• main이미지 가리지 않고 보여주는 것 체크

 

< main > 부분

• 이미지로 백그라운드 해주기
• 검색어 입력창 만들기

 

< sector> 부분

• [ 전체 / 블로그 소개/블로그 운영 팁 ··· ] 이 라인 - hover 효과 적용해주기
• 메인 게시글들 위치랑 태그 참고해서 잘 잡아주기

 

 

---

 

6.  상담 진행 

 

## 저번에 했던 설문조사 -  Q/A 바탕으로 상담 진행 

## 추가적인 진로/개인 상담 진행

 

몇 개 뽑아 왔다.

 

---

 

 

1. 다음 프로젝트는 조별로 하고 싶은지 개별로 하고 싶은지

• 조별로 진행해보고 싶습니다.
• 등원을 다 같이 하지 못하는 상황에서 
• 같은 조로 편성되어서 이야기도 하고 소통하니 가까워진 느낌을 많이 받았습니다.

 

Comment -

• 직접 얼굴도 보지 못한 분들도 많으시죠.
• 등원 제한이 빨리 풀려서 모두 다 같이 강의실에서 뵐 수 있으면 좋을 것 같습니다.  

 

 

---

2. 수업시간 외 공부 시간

• 5시간 정도 
• 복습 블로그 작성
• 전날 배운 내용 복습
• codeup, 프로그래머스 문제 풀이

 

 

Comment -

• 5시간 너무 좋습니다~
• 복습이 중요하고요. 
• 감을 잃지 않도록 java와 DB 부분도 꾸준히 공부하시면 좋습니다.
• 문제풀이와 함께 배웠던 부분도 다시 보시면 좋을 것 같습니다.

 

---

 

3. 플젝 진행 간 어려움

• Github의 예상 못한 오류 발생 시 대처도 어려웠고, 
• 기능 구현 부분에서 내가 원하는 결과의 쿼리를 작성하는 부분
• 협업 부분에서 정해진 시간을 지키지 않는 팀원과의 문제

 

Comment -

• 깃허브는 처음 활용해보시는 거라 어쩔 수 없습니다. 여러 문제들을 겪고 직접 해결해보셔야 합니다.ㅎㅎ
• DB 부분을 중요하지 않다고 생각하셔서 소홀히 하시는 분들이 많으신데 쿼리에 대한 공부도 중요합니다.
• 코딩보다도 어려운 것이 협업. 쉽지 않습니다.

 

 

---

 

 

4. 기타 질문사항

 

 

Question1 ) 

강사님이 자주 보시는 유튜브 채널(개발자 관련) 궁금합니다!

 

 

Comment -

• 백기선 / 조코딩 / 노마드코더  지금 생각나는 것이 이 정도입니다.

 

---

 

 

Question2 )

수업 내용 말고도 여력이 된다는 가정하에 준비하면 좋을 것들이나

조금 더 공부하면 좋을 부분들에 대해 조언을 듣고 싶습니다. 

 

 

Comment -

• 코딩 테스트 문제를 풀어보세요. -- 하루에 한 문제, 두 문제씩 꾸준히
• 영어 공부는 언제든 좋습니다.

 

---

 

 

Question3 )

취업을 하게 되면 이미 짜여있는 코드나 진행 중인 프로젝트를 만나게 될 텐데

그런 상황에서 구조를 수월하게 파악할 수 있는 순서나 방법이 있을까요? 

 

 

Comment -

 

도메인 지식 /  맨땅에 헤딩 / 

• 예를 들어 키오스크 프로세스를 만드는 회사이다
• 키오스크가 어떤 것인지, 어떤 기능을 하는지, 어떤 순서로 작동되는지
• 도메인 지식이 있으면 프로세스의 흐름과 기능을 파악하기가 용이합니다. 

 

모든 부분 보기

• 깃허브나 부서의 권한에 따라서 볼 수 있는 부분이 정해져 있을 겁니다.
• 볼 수 있는 부분은 다 보세요.
• 저의 경우에는 클래스에 있는 메서드 명을 쭉 다 써놓고 파악했습니다.
• 메서드명만 봐도 대강 어떤 기능을 구현해놓았는지 어떤 기능이 있는지 파악 가능합니다. 

 

맨땅에 헤딩

• 보통 B2B 회사들이 많습니다.
• 그런 경우에는 도메인 지식을 쌓기도 기능을 파악하기도 힘듭니다.
• 맨땅에 헤딩하는 식으로 하나하나 해보셔야 하는 경우도 있습니다.

 

---

 

 

Question4 )

솔루션 회사와 SI 회사에서 원하는 개발자의 특징이나 차이점이 있나요?

좀 더 중요하게 보는 면이 있을까요? 

 

 

Comment -

• 일을 하는 스타일은 다르지만 두 회사 모두 개발자를 원하는 회사입니다.
• 특별한 것보다도 개발자의 능력을 보여주시면 모두가 원하는 개발자로 인정받으실 겁니다.
• 굳이 차이점을 생각해보자면
• 솔루션 회사는 - 하나를 끝가지 제대로 파고들어 가는 스타일이라면
• SI회사는 - 안되면 일단 어떻게든 되게 하고, 다른 거를 하는 스타일입니다.

 

 

---

 

 

review


직접 따라서 웹 페이지를 만들어보려고
웹페이지 소스를 보면서 파악해보려고 했는데
애니메이션이나 효과가 많이 적용된 것들은
지금 배운 내용들로는 파악하기 어려웠다.

여기에 더해서 레이아웃을 짜는 것도 쉽지 않았다.
하나하나 해볼 때는 쉬워 보였는데
여러 개를 동시에 적용해서 구성하려니
HARD
후후.


상담 시간도 가졌는데
학습내용에 대한 것이 아닌
진로상담이나 개인적인 상담이 좋았다.
모든 내용을 다 공개하진 않았지만
좋은 시간이었다.
자주 요청하고 조언을 얻어야겠다.