본문 바로가기
취미 공부/Daily

2024. 05. 01 (수) 1주차 - Daily Coding - Day03

by Breadbread2 2024. 5. 1.
반응형

TO-DO-LIST

🔳 개발자 포지션

🔳 프론트엔드(Frontend) / 백엔드(Backend)란 무엇인가?

🔳 프론트엔드(Frontend) / 백엔드(Backend) 장단점

🔳 JD 용어 정리

🔳 CSS 애니메이션 및 미디어쿼리

🔳 프레임워크란?

🔳 CSS 프레임워크의 종류

🔳 CSS의 BEM 네이밍

🔳 공부를 통해 알게 된 점!

 

🔳 개발자 포지션

▪️ 프론트엔드 (Frontend)

▪️ 백엔드 (Backend)

▪️ 인프라 (DevOps)

▪️ 앱 (ios, android)

▪️ 게임

▪️ 머신러닝/AI

▪️ 데이터분석

 

 

🔳 프론트엔드(Frontend) / 백엔드 (Backend) 란 무엇인가?

`프론트엔드`는 직접적으로 이용자들의 눈에 보이는 영역이다

따라서 사용하기 쉽고 사용자의 경험에 맞춰 서비스를 개발해야 많은 사용자들이 사용하기 때문에

최적의 인터페이스를 갖추는 것이 가장 중요하다


`백엔드`는 사용자가 원하는 일을 에러가 나지 않고 원활하게 실행되도록 만드는 것이 중요하다

흔히 티켓팅을 하거나 수강신청을 할 때 서버가 터지지 않게 하고, 응답 시간을 최적화하는 것이 백엔드의 역할이라고 할 수 있다

 

🔳 프론트엔드(Frontend) / 백엔드 (Backend) 장단점

  프론트엔드 백엔드
장점 - 언어 선택에 대한 고민이 없음
- 시각적으로 보이는 부분이기 때문에 문제가 생겼을 때 피드백을
    적용하기 쉬음		 - 개발 환경이 안정적이어서 한 번 배워두면 오래 개발 할 수 음
- 언어와 프레임워크의 옵션도 다양하기 때문에 선택권이 많음
단점 - 기술과 트렌드가 빠르게 변하면서 최신기술을 자주 접하게 되고
   이에 빨리 적응할 수 있어야 함		 - 시각적으로 보이는 부분이 아니기 때문애ㅔ 문제에 빠르게
   대처하기 어려움

 

 

🔳 JD 용어 정리

  • HTML(HyperText Markup Language)
    : 웹 페이지의 구조를 정의하는 마크업 언어로 프론트엔드 개발자는 HTML을 사용하여 웹 페이지의 내용과 구조를 만들고 조작한다.

  • CSS(Cascading Style Sheets)
    : 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어로 CSS를 사용하여 HTML 요소의 디자인, 배치 및 애니메이션을 제어한다.

  • JavaScript
    : 웹 페이지의 동작을 제어하는 프로그래밍 언어로 프론트엔드 개발자는 JavaScript를 사용하여 사용자 상호작용, 데이터 처리, 웹 애플리케이션 개발 등을 수행한다.

  • 프레임워크(Framework)
    : 개발 작업을 보다 쉽게 수행할 수 있도록 미리 구조화된 소프트웨어 환경이다. 프론트엔드 개발자는 주로 Angular, React, Vue.js 등의 프레임워크를 사용하여 웹 애플리케이션을 개발한다.
  • 백엔드(Backend)
    : 웹 애플리케이션의 서버 측 구성 요소를 다루는 영역이다. 백엔드 개발자는 데이터베이스, 서버 로직, API 등을 다루며, 주로 Java, Python, Ruby, Node.js 등의 프로그래밍 언어를 사용한다.

  • 데이터베이스(Database)
    : 데이터를 구조화하여 저장, 관리하는 시스템이다. 백엔드 개발자는 주로 SQL(Structured Query Language)을 사용하여 데이터베이스를 조작하고, 데이터의 효율적인 저장 및 검색을 담당한다.

  • API(Application Programming Interface)
    : 소프트웨어 간 상호작용을 위한 인터페이스이다. 백엔드 개발자는 API를 설계하고 구현하여 다른 시스템과의 데이터 통신을 관리한다.

  • 서버(Server)
    : 클라이언트 요청에 대해 응답을 제공하는 컴퓨터 시스템이다. 백엔드 개발자는 서버를 설정하고 유지보수하며, 웹 애플리케이션의 성능과 안정성을 관리한다.

  • 버전 관리 시스템(Version Control System)
    : 소스 코드의 변경 이력을 관리하는 시스템이다. 개발자는 버전 관리 시스템을 사용하여 소스 코드를 저장, 추적하고 다른 개발자와 협업합니다. 대표적인 예로 Git이 있다.

  • SDK(Software Development Kit)
    : 소프트웨어 개발에 필요한 도구, 라이브러리, 문서 등을 포함한 개발 환경이다. 특정 플랫폼 또는 언어에 맞는 SDK를 사용하여 애플리케이션을 개발할 수 있다. 예를 들어, Android SDK는 안드로이드 애플리케이션 개발을 위한 도구와 라이브러리의 모음이다.

  • IDE(Integrated Development Environment)
    : 통합 개발 환경으로, 개발자가 소프트웨어를 개발, 편집, 디버깅할 수 있는 툴이다. 대표적인 IDE로는 Visual Studio Code, IntelliJ IDEA, Eclipse 등이 있다.

  • Git
    : 버전 관리 시스템 중 하나로, 개발자들이 소스 코드 변경 이력을 관리하는 데 사용한다. Git은 코드의 추적, 분기, 병합 등을 지원하여 팀 협업과 코드 관리를 용이하게 한다.

  • REST(Representational State Transfer)
    : 네트워크 아키텍처 스타일 중 하나로, 웹 서비스 간의 통신을 위한 구조적인 제약 조건을 제공한다. RESTful API는 REST 아키텍처 원칙을 따르는 API를 의미한다.

  • SQL(Structured Query Language)
    : 관계형 데이터베이스에서 데이터를 관리하기 위한 표준화된 쿼리 언어이다. SQL을 사용하여 데이터의 저장, 검색, 수정, 삭제 등을 수행할 수 있다.

  • MVC(Model-View-Controller)
    : 소프트웨어 설계 패턴 중 하나로, 애플리케이션을 데이터 모델(Model), 사용자 인터페이스(View), 그리고 비즈니스 로직(Controller)으로 구분하여 개발한다. MVC는 애플리케이션의 유지보수와 확장성을 향상시키는 데 도움을 준다.

  • Agile
    : 소프트웨어 개발 방법론 중 하나로, 반복적이고 유연한 개발 프로세스를 강조한다. Agile은 작은 단위의 업무를 반복하여 빠른 개발과 변경에 대응할 수 있는 개발 방식을 지향한.

🔳 CSS 애니메이션 및 미디어쿼리

div {
    transition: all 1s ease-in-out;
}

div:hover {
    background-color: cornsilk;
    
}

div:hover img {
    transform: scale(5) rotateX(360deg);
    
}

@keyframes moving-logo{
    0% {
        transform: scale(1);
    } 
    35% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: scale(3);
    }
    45% {
        opacity: 1; 
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 1; 
        transform: scale(3);
    }
    100% {
        transform: scale(1);
    }

}

img {
    width: 100px;
    height: 60px;
    animation: moving-logo 3s infinite alternate;
}

#info-msg {
    opacity: 0;
    position: absolute;
}

@media  screen and (max-width: 800px) {
    div {
        opacity: 0;
    }
    #info-msg {
        opacity: 1;
    }
}

🔳 프레임워크란?

- 개발을 도와주는 도구 세트

- 기본적인 구조와 코드를 제공

- 개발 속도를 높이고 효율적으로 일하기 위함

 

🔳 CSS의 프레임워크의 종류

- Bootstrap

- Tailwindcss

 

🔳 CSS BEM 네이밍 

  1. BEM은 목적 또는 기능을 전달한다.
  2. BEM은 구성 요소의 구조를 전달한다.
  3. BEM은 선택자 특이성을 항상 낮은 수준으로 유지한다.
  4. 블록(Block): 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의한다.
  5. 요소(Element): 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다.
  6. 변경자(Modifier): 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다.

ex) .block__elemental--modifier

<div class="info-bar">
  <div class="info-bar__time">15:15</div>
  <div class="info-bar__icons">
      <img src="/assets/chart-bar.svg" alt="chart-bar">
      <img src="/assets/wifi.svg" alt="wifi-bar">
      <img src="/assets/battery.svg" alt="battery-bar">
  </div>
</div>

 

🧐 알게 된 점🧐 

✔️ padding / margin 전체 적용 시 적용되는 위치 => 시계방향 '위, 오른쪽, 아래, 왼쪽'

    ex) padding: 0 10px 0 10px;

✔️ CSS Reset => https://meyerweb.com/eric/tools/css/reset/

✔️ 무료 아이콘 사이트 => https://heroicons.com/

✔️ svg 저장하는 방법 => heroicons에서 카피한 svg 주소를 VS에 그대로 붙여넣고 'ooo.svg' 형태로 저장

✔️ class의 네이밍 기법 => block__elemental--modifier

반응형
저작자표시 비영리 변경금지 (새창열림)

'취미 공부 > Daily' 카테고리의 다른 글

2024. 05. 06 (월) 2주차 - Daily Coding - Day08  (0) 2024.05.06
2024. 05. 03 (금) 1주차 - Daily Coding - Day05  (0) 2024.05.03
2024. 05. 02 (목) 1주차 - Daily Coding - Day04  (0) 2024.05.02
2024. 04. 30 (화) 1주차 - Daily Coding - Day02  (0) 2024.04.30
2024. 04. 29 (월) 1주차 - Daily Coding - Day01  (3) 2024.04.29

관련글

티스토리툴바