프론트엔드 001

 [프로그래밍과 웹개발의 이해]

• 프로그래밍의 개념
• 개발자의 종류

 

코딩 → 프로그래밍 이해

        → 컴퓨터에게 일을 시키려면 어떻게 해야 할까?

             ex) 파이썬 검색 → 검색 결과를 보여줘라고 일을 시키는 것

                                                                 ↓ (어떤 원리?)

                                            기계가 정해진 순서대로 일을 하기 때문

 

           user가 '검색창에 특정 단어를 입력하고 엔터를 치면 너는 검색결과를 찾아다가 그 사람에게 보여줘.'

           라고 하는 정해진 규칙에 따른 일을 순서대로 진행

              → 프로그램

    

           기본적으로 컴퓨터에게 일을 시킬 때는 프로그램이라는 걸 만들어서 시킨다.

 

• 프로그램의 예시 

ex) 워드, 엑셀, ppt, 카톡, 웹사이트, 게임 등.

 

웹개발자는 프로그래밍으로 웹서비스(프로그램)를 만드는 사람

 

[웹서비스] 

•  컴퓨터, 모바일에서 브라우저 앱을 사용해서 보는 프로그램
•  웹서비스를 만드는 사람이 웹 개발자
• ex) 네이버, 쿠팡

[웹브라우저의 가장 기본적인 원리]

 

          웹 브라우저의 일

•  우리가 아는 화면으로 바꿔주는 역할
•  웹 브라우저는 문서 한 장을 요청이라는 작업을 할 때마다 보여주는 것
•  우리가 보는 모든 웹 서비스는 코드들을 주고받으면서 통신을 한다. 

 

[웹 브라우저의 원리]

" 브라우저는 내 컴퓨터 화면에 그려주는 역할을 수행한다."

---

 

[프런트엔드와 백엔드의 차이]

 

• 프런트엔드란?

사람이 보는 부분을 만드는 게 프런트엔드(클라이언트)

 

 

 

.

 

[프론트엔드]	[백엔드]
클라이언트	서버
사용자가 직접 보고 경험하는 부분	뒤에서 모든걸 원활하게 돌아가게 하는 부분(데이터, 보안)
UI구현	웹 서버 로직 구현
동적 웹 기능 구현	API구현 및 데이터 반환
API요청 및 데이터 처리	데이터 베이스 구축
사용자 경험 개선

 

 

 

 

• 백엔드란?

사람이 봐야 할 부분을 제공해 주는 것(서버 만드는 것) 

 

 

[프론트엔드 개발자가 하는 일]

 

- 동적 웹 기능 구현 : ex)버튼을 누르면 창이 뜬다.

- 주로 react를 통해서 주로 개발을 하게 됨.

 

[ What is React? ]

 

- 밀키트 ( 웹서비스를 만드는 밀키트 )

- HTML, CSS, JS 로 화면에 그림을 그리는데 서비스가 커질수록 느려지고, 복잡해지며 재활용도 어렵댜.

             → 서비스가 커질수록 쓰는것이 REACT. (프론트엔드 개발자들의 대부분이 REACT 사용)

 

 

 

[HTML, CSS, JS]

• HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드입니다! 웹의 전반을 HTML을 통해서 작성할 수 있습니다!
• CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드입니다!
• JS는 HMTL과 CSS로 작성된 코드에 동적인 효과를 추가 할수있습니다!