TIL 1. 페이지 레이아웃 2. 웹 앱 화면 설계하기 3. [실습] 와이어프레임 만들기 - 풋몹(fotmob.com) 점검 및 평가 ⭐ 난이도 : ⭐⭐⭐ 이해도 : ⭐⭐⭐ Comment - 와이어프레임 만들기로 첫 실습을 해봤다. 개발자다운(?) 코드 입력도 아니었고, 백엔드 분야가 아닌 프론트엔드 분야였지만 부트캠프 과정에서 내가 만든 첫 결과물이라고 생각하니 꼼꼼하게 만들게 되고, 완성하니 뿌듯하다. - 학습내용 정리 블로깅을 당일 저녁에 마무리하려다보니 수면시간이 늦어지고, 아침운동 후 수업에 참여하면 피곤해져서 주객이 전도되는 느낌이다. 평일에는 간단하게 TIL만 써서 수면시간을 챙기고, 주말에 학습 내용 정리와 밀린 To-Do List를 처리하며 복습하는 방향으로 계획을 세워야겠다. To-Do..

CSS(Cascading Style Sheets) - HTML로 작성된 웹 애플리케이션의 구조에 디자인을 적용하는데 사용되는 스타일시트 언어 인터페이스와 UI/UX - 인터페이스 : 컴퓨터와 교류하기 위한 연결고리 - UI(User Interface, 사용자 인터페이스) : 일반 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 만든 인터페이스. 아무리 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없다. - UX(User Experience, 사용자 경험) : UI를 포함해 사용자가 특정 서비스를 직/간접적으로 경험하면서 느끼는 종합적인 만족도. UX는 직관적이고 쉬운 UI에서 나온다. CSS의 문법 구성 - 셀렉터(Selector) : 특정 태그(요소)의 이름, id, 또는 class ..

백엔드 개발자가 왜 프론트엔드 기술을? - 웹 개발 초창기에는 프론트엔드/백엔드 구분이 없었지만, 기술이 발전함에 따라 영역이 구분됨 - 그럼에도 불구하고, 웹 서비스는 협업을 통해 만들어지기 때문에 각 영역의 개발자는 상대 영역의 기본적인 내용에 대해 필수적으로 이해해야 함 - 백엔드 개발자도 기본적인 프론트엔드 개발 지식에 대한 이해가 필요하므로, HTML과 CSS에 대한 학습 필요 프론트엔드 3총사 - HTML : Structure. 구조, 뼈대 작성 - CSS : Presentation. 스타일, 디자인 - JavaScript : 상호작용, 동적 움직임 HTML(HyperText Markup Language) - 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 마크업 언어 HTML의 기본 구조..

TIL 1. HTML 2. CSS 점검 및 평가 ⭐ 난이도 : ⭐⭐ 이해도 : ⭐⭐⭐⭐ Comment - 프론트엔드 분야지만, 백엔드 개발자에게도 협업을 위해 알고있어야 할 HTML과 CSS의 기초적인 내용을 배웠다. 학부 때도 살짝 공부했던 내용이라 배우다 보니 기억이 떠오르면서 나름 이해는 한 것 같다. 하지만 완벽히 이해했다는 것은 배운 것을 설명할 줄 아는 정도라고 했는데 아직 그 정도는 아니라고 느껴진다. To-Do List ⬜✔️ - 아침운동 ✔️ - Study에 참여하거나 직접 만들기 ⬜ - Learn IntelliJ IDEA 완료 ⬜ - W3Schools - CSS Exercise 풀어보기 ⬜ 내일 학습 내용 키워드 - 페이지 레이아웃 - 웹 앱 화면 설계하기 - 와이어프레임 만들기 실습

클라이언트-서버 아키텍처(2티어 아키텍처) - 리소스(e.g. 상품 정보)가 존재하는 곳(=서버)과 리소스를 사용하는 앱(=클라이언트)을 분리시킨 것 - 데이터베이스(리소스를 저장하는 공간)을 추가하여 3티어 아키텍처라고 한다. 일반적으로 서버는 리소스를 전달해 주는 역할만 담당 프론트엔드와 백엔드 - 프론트엔드 : 클라이언트 앱. 사용자가 직접 눈으로 보고, UI를 클릭 또는 터치하는 등의 상호작용을 할 수 있는 앱 개발 - 백엔드 : 서버 앱. 상품 정보를 API로 노출, 로그인/로그아웃, 권한 관리 등 사용자 인증을 주로 다룸. 데이터베이스 등 시스템 설계까지 도맡아 하는 경우도 있음 클라이언트와 서버의 종류 - 클라이언트 종류 : 웹사이트(웹 앱), 스마트폰/태블릿 앱, 데스크탑 앱 - 서버 종류..