티스토리

About Tech

검색하기

블로그 홈

About Tech

about-tech.tistory.com/m

Software-Tech 관련 포스팅이 업로드 됩니다.

구독자: 12

방명록 방문하기

주요 글 목록

[iOS Swift] SwiftUI란? UIkit vs SwiftUI 비교 SwiftUI란? 애플의 디자인 프레임워크의 변화는 빠르게 진행되었습니다. 애플은 2019년 WWDC에서 애플은 SwiftUI라는 새로운 디자인 프레임워크를 소개합니다. 더 빠르고 쉽게 개발을 할 수 있도록 하기 위해 개발된 SwiftUI는 실시간 테스트 기능과 선언적 구문 그리고 데이터주도 기반을 철학을 가지고 있습니다. SwiftUI의 특징적인 부분은 선언적 구문, 데이터 바인딩, 프리뷰 기능, 애니메이션 기능으로 압축해서 살펴볼 수 있습니다. 1. 선언적 구문(Declarative Syntax) SwiftUI는 선언적 구문을 사용합니다. 선언적 구문의 반대는 명령적(Imperative) 구문인데요, 둘의 차이점을 간단하게 비교하면 다음과 같습니다. 선언적 구문 명령적 구문 - 코딩을 할 때 무엇을 .. 공감수 0 댓글수 0 2024. 1. 16.
[iOS Swift] 스위프트에서 Error Handling 하는 방법 Swift Error Handling 안녕하세요. 개발자 AboutTech입니다. 이번 포스팅에서는 스위프트 언어를 사용한 아이폰 앱 개발에서 에러를 어떻게 처리할 수 있는지 알아보도록 하겠습니다. 모든게 완벽한 코딩이라면 에러가 발생할 일도 없을 것입니다. 하지만 현실에서는 앱을 사용하던 중에 네트워크가 꺼질 수도 있고, 사용자가 예상치 못한 지점에서 앱이 정상작동하지 않는 경우가 무수히 많습니다. 개발자도 사용자도 예상하지 못한 에러가 발생했을 때 예기치 못한 심각한 오류로 사용자 경험이 훼손되지 않게 하기 위해서는 적절한 그리고 우아한 에러 처리가 필수입니다. 아이폰 앱 개발에 사용되는 스위프트에서는 에러 핸들링 작업을 위해 guard, defer, do-catch, 그리고 throwing met.. 공감수 0 댓글수 0 2024. 1. 15.
[iOS Swift5] 프로퍼티 래퍼 Property Wrapper? 안녕하세요. AboutTech입니다. 이번 포스팅에서는 Swift 5.1 버전부터 적용되기 시작한 Property Wrapper에 대해 알아보고자 합니다. 이전에 OOP를 알아보면서 연산 프로퍼티 사용을 조금 더 간단하게 도와주는 개념입니다. 만약 클래스나 구조체 내부에 선언된 연산 프로퍼티의 로직을 다른 클래스나 구조체에서도 동일하게 사용하기 위해서는 어떻게 해야 될까요? 해당 로직을 복사해서 붙여 넣는 방식으로는 한계점에 직면하게 됩니다. 이 문제를 해결해주는 것이 바로 프로퍼티 래퍼입니다. Property Wrapper 사용법 간단한 구조체를 선언했고, 인스턴스를 생성해서 name이라는 프로퍼티를 출력하고 있습니다. name 연산 프로퍼티는 구조체 내부의 value 값을 통해 새로운 값을 할당하고.. 공감수 0 댓글수 0 2024. 1. 13.
[iOS Swift5] Collection, 배열과 딕셔너리, Set 기본 안녕하세요. AboutTech입니다. Swift에서 다양한 데이터와 객체들을 집합체로 묶어 관리할 수 있는 타입을 컬렉션이라고 합니다. 컬렉션 타입에는 대표적으로 배열과 딕셔너리가 있는데요 데이터들을 한 번에 담아서 관리할 수 있는 방법에 대해 알아보도록 하겠습니다. Swift Array, 배열 배열은 순서있는 컬렉션입니다. 따라서 배열은 다양한 타입의 데이터를 순서대로 저장할 수 있습니다. 먼저 배열을 선언하는 방법은 다음과 같습니다. var array = [타입]() String 타입의 값을 담고 있는 배열을 선언하려면 타입에 String을 적어주시면 됩니다. var array = [String]() 초기값을 N개 가진 배열을 만들기 위해서는 repeating, count 매개변수에 인자를 전달해 주.. 공감수 2 댓글수 2 2024. 1. 11.
[iOS Swift5] 열거형 구조체 기본 기초 Swift에서 클래스만큼이나 자주 사용되는 타입이 바로 구조체입니다. 이번 포스팅에서는 클래스와 구조체를 비교하면서 SwiftUI를 활용한 iOS 앱 개발에 필요한 구조체와 열거형의 개념에 대해 간단히 알아보도록 하겠습니다. Value type VS Reference Type Swift에서 데이터를 다루는 방식은 크게 (값 타입)Value Type과 (참조 타입)Reference Type이 있습니다. 차이점을 간단하게 알아보면 값 타입은 값 자체가 복사되어 전달됩니다. 이를 pass by value라고 합니다. 반면 참조 타입은 참조가 전달되어 같은 인스턴스를 공유하게 됩니다. 이를 pass by reference라고 합니다. 즉 데이터의 값만을 전달하기 위해서는 값 타입을 사용하고, 참조를 전달해서 공.. 공감수 0 댓글수 0 2024. 1. 10.
[iOS Swift5] 객체지향 프로그래밍 기초 클래스 프로토콜 익스텐션 Swift는 객체 지향 프로그래밍 언어(Object Oriented Programming)입니다. 그만큼 객체를 사용한 프로그래밍을 지원하고 있다는 말인데요, 객체는 재사용가능한 독립 기능 모듈로 클래스 구조체의 형태로 지원되고 있습니다. 이번 포스팅에서는 Swift에서 바로 사용가능한 클래스의 기본 개념에 대해 알아보고자 합니다. 클래스는 왜 사용하나요? 먼저 클래스를 사용하는 이유에 대해 알아보겠습니다. #1 캡슐화 OOP에서 클래스는 멤버를 하나로 묶어 캡슐화 할 수 있습니다. 이는 데이터를 보호하고 유지보수하는데 용이하다는 장점을 가지고 있습니다. 또한 접근제어자를 통해서 클래스 멤버에 접근할 수 있는 안전장치를 걸 수 있기 때문에 안전하게 데이터를 사용할 수 있습니다. #2 추상화 클래스를 사용.. 공감수 1 댓글수 0 2024. 1. 9.
[iOS Swift5] 함수, 메서드 그리고 클로져 기본 개념 프로그래밍 영역에서 함수는 반복적인 작업을 대폭 줄여주는 장점이 있습니다. 애플의 스위프트 언어 또한 함수를 제공하고 있는데요, 이번 포스팅에서는 Swift의 함수에 대해 알아보도록 하겠습니다. Swift 함수와 메서드 기본 함수 Function은 특정 기능을 수행하기 위한 코드 블럭입니다. 특정 데이터를 매개변수로 받을 수도 있고, 함수의 결과물을 반환받을 수도 있습니다. 일반적으로 특정 기능을 수행하기 위한 코드 블럭을 함수라고 지칭합니다. 함수와 유사하게 사용되는 개념이 메서드인데요, 메서드는 특정 클래스나 구조체 내에서 사용하는 함수를 통상 메서드라고 지칭합니다. 함수와 메서드가 작동하는 방식은 동일하지만 사용방법에서 조금 다르다는 차이점이 있습니다. Swift에서 함수를 사용하는 기본 방법은 다.. 공감수 1 댓글수 0 2024. 1. 8.
[iOS Swift5] if else, guard 제어 흐름 관리하기 Swift5 제어흐름 관리하기 안녕하세요 About Tech 입니다. 이번 포스팅에서는 Swfit 언어에서 제어흐름을 어떻게 관리할 수 있는지 알아보고자 합니다. 제어흐름은 조건식이라고도 불리는 if 문이나 guard 문을 말하는데요, 개발은 로직을 이용하는 것이기도 하고, 프로그램의흐름을 통제하는 것이기 때문에 제어흐름(Control Flow)로 불리고 있습니다. 제어흐름에는 크게 조건부 제어흐름(Conditional Control Flow)과 반복제어(Loopin Control Flow) 문으로 구분됩니다. 코드를 몇번 반복해서 실행할지를 결정하는 반복 제어흐름과 특정 조건에 따라 코드를 실행할지 뛰어넘을지를 결정하는 조건식으로 구분됩니다. Swift 조건부 제어흐름 조건부 제어흐름은 크게 두가지가 .. 공감수 1 댓글수 2 2024. 1. 5.
[iOS Swift5] 연산자와 표현식 Swift 연산자와 표현식 변수에 값을 할당하는 방법은 기본적으로 표현식을 따릅니다. 피연산자와 할당자 그리고 연산자를 통해 값을 생성하고 변수에 데이터를 저장할 수 있습니다. var number = 1 + 2 1. 할당 연산자 (=)를 사용해 변수에 값을 저장합니다. 2. 복합 할당 연산자 (+=) (-=) 처럼 산술연산자나 논리연산자를 할당연산자에 결합해서 사용하는 형태입니다. var num = 10 // Addition assignment operator (+=) num += 5 // Equivalent to: num = num + 5 print(num) // Output will be 15 // Subtraction assignment operator (-=) num -= 3 // Equivale.. 공감수 0 댓글수 0 2024. 1. 5.
Xcode Playground 사용법 주석 라이브뷰 사용하는 방법 플레이그라운드란? 플레이그라운드는 xcode의 추가적인 기능으로 실시간으로 코드를 실행해볼 수 있는 개발환경입니다. 아이폰 앱을 개발하기 위해서 코딩부터 컴파일 그리고 디버깅의 일련의 과정을 거치게 되는데, 플레이그라운드에서는 코드를 바로 실행해보고 코드에 대한 주석 기능도 제공하고 있기 때문에 코드를 문서화 할 때도 좋은 툴이 될 수 있습니다. Swift 언어를 공개한 애플은 플레이그라운드를 함께 공개하면서 많은 개발자들에게 보다 편리한 환경을 제공하고 있습니다. 이번 포스팅에서는 플레이그라운드의 여러 기능들을 학습해보도록 하겠습니다. 먼저 플레이그라운드를 시작하기 위해서는 xcode를 실행해줍니다. 단축키는 ⌥[option] + ⇧[shift] + ⌘[command] + N입니다. 플레이그라운드를 처.. 공감수 0 댓글수 1 2024. 1. 4.
[iOS Swift5] 상수와 변수 데이터 타입 옵셔널, 옵셔널 바인딩, 강제언래핑 Swift5 상수와 변수 프로그래밍 언어에서 데이터를 표현하는 방법은 다양합니다. iOS 8 이전까지는 Objective-C로 개발했지만 스위프트 언어가 등장하고 나서는 대부분 흐름이 스위프트로 새로운 기능들이 대체되고 있는 상황입니다. 스위프트 언어에서 가장 먼저 익혀야 되는 부분은 데이터타입입니다. 프로그램은 RAM에 올라가 CPU의 자원을 사용해 Bit라고 불리는 0 혹은 1의 데이터에서 시작합니다. 비트가 바이트가 되고, 우리가 원하는 2진수 혹은 문자열의 데이터를 저장할 수 있게 됩니다. 여기서 변수와 상수가 나뉘게 됩니다. 변수 Variables는 애플리케이션에서 사용되는 데이터를 저장하기 위해 생성하는 컴퓨터 메모리 내의 위치를 의미합니다. 개발자는 메모리 주소에 이름을 지정하고 값을 할당하.. 공감수 1 댓글수 0 2023. 12. 26.
[iOS Swift5] Objective-C를 넘어선 Swift5 언어의 등장 Swift 5 언어의 출현 현재 애플의 기기에 들어가는 소프트웨어를 개발하기 위해서는 Swift언어를 사용합니다. 애플 에코시스템에서 개발자가 되기 위해서는 Swift 언어를 익혀야 하는데요, Swift 프로그래밍 언어는 2014년 WWDC에서 공개되면서 2023년 현재 Swift5까지 발전에 발전을 거듭하고 있습니다. 기존의 소프트웨어 개발에서는 전통적인 프로그래밍 언어인 C를 개량한 Objective-C를 사용했었는데요, 한계와 어려움을 극복하서 2010년 초반 Swift 프로젝트가 가동되었고, 2014년 새롭게 첫 선을 보이게 됩니다. 애플의 스위프트 언어 소개 스위프트가 공개되고 난 후 쉬운 언어 문법과 강력한 기능이 더해지면서 애플 생태계에서 개발을 하기 위한 필수 언어로 자리 잡았습니다. 물론.. 공감수 0 댓글수 1 2023. 12. 26.
[티스토리 스킨 만들기 #1] 치환자 이해하기 [티스토리 스킨 만들기 #1] 치환자 이해하기 티스토리 스킨을 만들어 볼 작정입니다. 최근 티스토리에서 자체 광고를 신설하고 상단 혹은 하단의 광고 영역을 침범(?)한다고 공지한 이후 티스토리 블로거들의 거센 반발에 부딪혔는데요, 그럼에도 불구하고 티스토리 만큼 자유롭고 무료로 사용할 수 있는 블로그는 또 없기 때문에 애증을 담아 스킨을 한번 만들어 보려고 합니다. 티스토리에 적용할 스킨을 만들기 위해서는 치환자를 이해해야 하는데요, 스킨 제작이 처음이신 분들은 티스토리 스킨 가이드를 참고하셔야 합니다. 우리가 웹 애플리케이션을 만들 때 프론트랑 백엔드랑 2개를 만듭니다. 여기서 티스토리 스킨 가이드는 백엔드 영역을 담당해주고 있습니다. 프론트에서 get 요청을 보내지 않아도 HTML에 치환자를 심어주면.. 공감수 1 댓글수 0 2023. 6. 9.
프로그래머스 마법의 엘레베이터 JavaScript 프로그래머스 마법의 엘레베이터 Javascript 프로그래머스 마법의 엘레베이터는 재귀를 활용한 풀이를 요구하는 문제입니다. 특정 층에서 0층으로 이동하기 위해서는 주어진 선택의 숫자를 조합해서 최소의 수로 이동해야 합니다. 문제에서 주어진 -1, +1, -10, +10 ... 으로 이동하기 위해서는 숫자 별로 조합해보면서 최소의 수를 만드는 공식을 우선 작성해봐야 합니다. 예를 들어 0층에서 16층으로 이동하기 위해서는 간단하게 2가지 방법을 생각해볼 수 있습니다. 각각의 방법을 공식화 하면 다음과 같은 공식을 만들어낼 수 있습니다. solution 함수를 재귀로 돌리면서 몫과 나머지를 구한 다음 각 숫자들을 조합해서 최소의 수가 나오는 결과값을 반환하면 됩니다. 프로그래머스 마법의 엘레베이터 Java.. 공감수 0 댓글수 0 2023. 4. 10.
프로그래머스 가장 큰 수 Javascript 프로그래머스 가장 큰 수 Javascript 프로그래머스 가장 큰 수 문제는 Level 2에 해당하는 문제로 문자열 Sorting 능력을 테스트하는 문제입니다. 문제의 핵심은 numbers 배열로 주어지는 숫자들을 어떤 규칙에 따라서 배치할 것인가 인데요, 이 문제만 해결하면 간단하게 sorting 함수를 작성해서 풀어볼 수 있습니다. 예를 들어 [41,40,4]로 구성된 배열이 주어졌을 때 각 원소들을 여러번 반복해서 4자리를 끊어서 반복된 숫자를 비교해 볼 수 있습니다. 41 vs 40 : 4141과 4040을 비교했을 때 4141이 더 크기 때문에 41이 앞에 와야 됨을 알 수 있습니다. 40 vs 4 : 4040과 4444를 비교했을 때 4444가 더 크기 때문에 4가 앞에 와야 됨을 알 수 있습.. 공감수 0 댓글수 0 2023. 4. 7.
프로그래머스 자전거 공장 문제 Javascript 프로그래머스 자전거 공장 문제 Algorithm 프로그래머스 자전거 공장 문제는 스택을 이용해서 풀어낼 수 있다. 기간별로 다른 누진세가 적용되기 때문에 최대한 저렴한 가격으로 자전거를 생산하기 위해서는 최대한 앞쪽에 물량을 몰아서 생산기간 동안 최대한 적은 숫자의 자전거를 매월 생산하도록 하는 것이 관건이다. 총 3단계로 나누어 알고리즘을 설계할 수 있다. 1. 얼마까지 자전거를 생산해야 한다라는 개념을 향후 몇개월 동안 얼마만큼의 자전거를 생산해야 되는지 order 배열을 재배치한다. 2. 새롭게 정의된 주문서에서 월별 생산량을 비교해서 뒷쪽에 물량이 몰려있는 경우 앞으로 추가하면서 물량을 조절할 수 있다. 3. 생산해야 하는 물량과 기간을 고려해서 최종 생산비를 뽑아낸다. 프로그래머스 자전거 공장 .. 공감수 0 댓글수 0 2023. 4. 6.
프로그래머스 체육복 Greedy 탐욕법 문제 Javascript 프로그래머스 체육복 문제 프로그래머스 체육복 문제는 탐욕법으로 풀어보는 것이다. 탐욕법 알고리즘은 각 단계에서 최적이라고 고려되는 것을 선택하는 것을 반복하는 방법이다. 현재 선택이 마지막까지 적용되는 경우 탐욕법으로 문제를 풀어볼 수 있다. 체육복 문제에서는 앞에있는 학생이 체육복을 빌려줄수도 있고, 뒤에 있는 학생이 빌려줄수도 있다. 따라서 가장 우선해서 옷을 빌려줄 순서를 정해야 한다. 먼저 옷을 잃어버린 학생과 빌려줄수 있는 학생 배열을 생성하고, 학생순서대로 스캔해나가면서 옷을 빌려줄 관계를 설정해주면 된다. 프로그래머스 체육복 자바스크립트 배열이 생성된 후로 옷을 잃어버린 학생들의 배열을 순회하면서 옷을 빌려줄 수 있는 경우(Math.abs(r-l) === 1) count를 증가하면서 최종적으.. 공감수 0 댓글수 0 2023. 4. 5.
프로그래머스 완주하지 못한 선수 해시 맵 사용 풀이 파이썬 프로그래머스 완주하지 못한 선수 해시 맵 사용 파이썬 완주하지 못한 선수 문제는 인자로 participant와 completion이 주어집니다. 참가자 중 단 한명의 선수만 완주하지 못하는데요, 완주하지 못한 선수를 찾아내야 합니다. 문제 제약 조건은 다음과 같습니다. 참여선수는 1 ~ 10,000명 participant - competion = 1 참가자 이름은 알파벳 20자 이하 참가자 중 동명이인 존재할 수 있음 문제의 핵심은 동명이인이 있다는 점입니다. 단순하게 문자열만 비교해서 문제를 풀 수 없습니다. 해시 맵 사용 파이썬 이 문제가 요구하는 핵심 개념은 해시 맵입니다. key ~ value로 이루어진 자료구조를 통해서 선수들의 이름과 완주 여부를 체크해주어야 합니다. 문제에서 요구하는 hash.. 공감수 0 댓글수 0 2023. 3. 22.
Github CLI Install Ubuntu 22.04 1. 터미널 실행 아래 코드 입력. 터미널에 Github CLi install type -p curl >/dev/null || sudo apt install curl -y curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \ && sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg \ && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archi.. 공감수 1 댓글수 0 2023. 2. 9.
Nginx Docker 웹 서버 배포하기 Nginx는 웹 서버 프로그램입니다. 로컬 환경에서 개발을 완료하셨다면 이제 본격적으로 우리가 만든 웹 애플리케이션을 도메인을 붙여 사용자에게 hosting을 해줘야 합니다. 웹 서버에는 크게 Apache와 Nginx가 있는데요, 후발주자임에도 빠르게 점유율을 차지하고 있는 Nginx와 Docker를 사용해서 간단한 웹 애플리케이션을 배포하는 방법을 알아보도록 하겠습니다. Nginx Docker 기본 Nginx와 Docker로 정적 파일을 호스팅하기 위해서는 크게 3가지 파일이 필요합니다. index.html Dockerfile default.conf 우선 HTML 파일을 작성합니다. 저는 아래처럼 간단하게 작성했습니다. Nginx에서 받아온 페이지입니다. Dockerfile을 작성해줍니다. 혹시 Doc.. 공감수 2 댓글수 0 2023. 1. 31.
Naver 광고 API 사용법 (Javascript) Naver 광고 API 사용법 블로그 관련 사이트를 제작하면서 키워드 품질 검사를 해야 하는데, 국내에서는 여전히 네이버가 1위를 달리고 있기 때문에 네이버 포털에서 검색량 체크를 해보려고 합니다. 자체적으로 데이터를 수집하기에는 엄두가 안나서 네이버 광고 API를 사용하기로 결정했습니다. 네이버 광고 API 사용법을 정리한 문서가 있지만 샘플 코드로 제공되는게 Java, PHP, C# 3가지 정도가 나와있습니다. 어차피 원리는 동일하니 우리는 Javascript로 키워드 API를 사용해보겠습니다. Naver 광고 API 사용법 사이트 네이버 깃 페이지로 호스팅되어 있는 searchad-apidoc 으로 접속합니다. 개발자들을 위한 문서라고 하기에는 정말 불친절하게 되어 있습니다. searchad-api.. 공감수 1 댓글수 0 2023. 1. 26.
CI/CD #5 배포 구성하기 Github Actions EC2 Docker .env 생성하기 [추가자료] 이전글 CI/CD #1 배포 구성하기 Node.js 빌드 CI/CD #2 배포 구성하기 Dockerfile CI/CD #3 배포 구성하기 Github Actions CI/CD #4 배포 구성하기 AWS EC2 [최종] Github Actions 배포 Github Actions를 통해 CI/CD 파이프라인을 구성해서 배포하는 방법까지 알아보았는데요, 추가로 환경변수를 사용해 프로젝트 완성도를 높여보도록 하겠습니다. 실제 프로젝트에서 JWT Token Secret이나 DB URL등은 secret 하게 관리해야 하는 변수들입니다. 따라서 .env 파일을 생성해서 환경변수를 관리하게 됩니다. 하지만 git repository에는 .gitignore에 .env 파일을 추가해서 repo에 업로드하기 때문에 Gith.. 공감수 0 댓글수 0 2023. 1. 20.
Docker Hub 사용법 (push pull) Docker Hub 사용법 push pull Docker Hub는 로컬에서 생성한 이미지를 업로드해서 클라우드로 관리할 수 있는 환경입니다. CI/CD 를 구성하실 때 Docker Hub를 통해 코드를 컨테이너 단위로 관리할 수 있습니다. 이번 콘텐츠에서는 Docker Hub를 어떻게 사용하는지 알아보도록 하겠습니다. 기본 프로젝트 구성 아래 명령어로 기본 Node.js 기반 프로젝트를 실행합니다. $ npm init -y 간단한 서버를 구성하기 위해 index.js파일을 생성하고 아래 코드를 입력합니다. 추가적으로 express 모듈을 설치합니다. const express = require('express'); const app = express(); app.get('/', (req, res)=>{ r.. 공감수 1 댓글수 1 2023. 1. 19.
React 정적 웹 페이지 배포하기(S3, AWS CodePipeline, 환경변수) React를 통해 멋진 웹 애플리케이션을 만들었다면 많은 사람들이 이용할 수 있도록 배포를 진행해야 할 것입니다. 웹 애플리케이션을 배포하는 방법은 여러가지가 있는데요, 이번 콘텐츠에서는 React를 AWS의 S3 버킷과 CodePipeline 제품을 사용해 CI/CD 를 구성해보도록 하겠습니다. 배포 아키텍처 클라이언트 파트 배포 아키텍처는 다음과 같습니다. 사용자가 웹 사이트에 접속하면 빌드된 React 웹 애플리케이션을 전달받습니다. 우리가 코드를 push 하면 CodePipeline이 작동하면서 Gihub에서 코드를 가져옵니다. 가져온 코드를 CodeBuilder를 통해 build 합니다. build가 완료된 코드는 AWS S3 버킷에 담기게 됩니다. 사용자는 새롭게 배포된 코드를 받아볼 수 있습.. 공감수 0 댓글수 0 2023. 1. 19.
맥북프로 14 M2 모델 드디어 출시 ! 맥북프로 14 M2 드디어 출시 아마도 많은 분들이 기다리셨을 애플 맥북프로 14인치 M2가 드디어 출시되었습니다. 애플 제품의 비수기 중의 비수기인 1월달에 공개된게 이례적이지만 아무튼 나왔습니다. M1를 탑재한 맥북프로 14보다는 높은 성능에 오래가는 배터리를 장착하고 등장했습니다. 당연한 소리죠? 외관을 봤을 때는 전작에 비해 달라진 점이 없습니다. 높은 성능을 탑재한 칩을 넣었고, RAM 지원이 늘고, 배터리가 조금더 늘었다 정도 입니다. 애플은 기존 인텔 기반 맥북에 비해 최대 6배 가까운 성능을 보인다고 합니다. 14인치 맥북프로 M2 기본 사향부터 M2 Pro 칩을 탑재하고 출시되었습니다. 기본 제품이 10코어 16코어 GPU를 탑재하고 있습니다. M2 Max 칩을 탑재한 구성은 12코어, .. 공감수 0 댓글수 0 2023. 1. 18.
HTML5 웹페이지 만들기 #3 CSS3 선택자(seletor) CSS 선택자 우선 CSS 선택자는 HTML로 구성된 문서에서 특정 요소를 선택하는 기능을 가집니다. HTML 요소를 선택해서 스타일을 적용할 수 있습니다. CSS3 에서는 HTML 요소를 앞에 적고 {CSS 블록} 내부에 스타일 세부사항을 기록합니다. HTML 문서에서는 태그 내부에 스타일 태그를 적용할 수 있습니다. 💡 inline style을 사용하면 안되는 이유 CSS를 적용하는 방법은 3가지가 있습니다. 그 중에서 inline 스타일을 최대한 자제해야 하는 이유는 2가지가 있습니다. 1. 유지보수가 힘들어집니다. HTML 태그에 직접적으로 스타일이 적용되어 있기 때문에 스타일이 변경되면 코드별로 찾아서 스타일을 변경해줘야 합니다. 코드 유지보수가 복잡해집니다. 2. 우선순위가 높다 inline .. 공감수 2 댓글수 0 2023. 1. 16.
CSSOM 트리 DOM과 무엇이 다른가? 웹이 전달되는 방향 서버로 부터 정적인 html 파일을 전달받은 웹 브라우저는 렌더링을 위해 HTML 파일과 CSS 파일을 파싱하여 하나의 계층 구조를 형성하게 됩니다. 이 때 HTML을 파싱한 모델이 DOM(Document Object Model)이고 CSS를 파싱한 것이 CSSOM(CSS Object Model) 입니다. CSS Object Model은 Javascript에서 CSS를 조작할 수 있는 API입니다. 즉 사용자가 JS를 사용해서 동적으로 CSS 스타일을 동적으로 관리할 수 있게 됩니다. HTML 문서가 계층적으로 작성되어 있기 때문에 HTML에 스타일을 적용하는 CSS 또한 계층 모델을 가지게 됩니다. 즉, CSSOM과 DOM 모두 트리 형태의 계층 구조를 가지지만 CSSOM은 CSS를.. 공감수 2 댓글수 0 2023. 1. 16.
HTML5 웹페이지 만들기 #4 CSS3 사용법 CSS3 사용법 HTML 문서에서 CSS를 적용하는 방법은 크게 3가지가 있습니다. ① style 태그 사용 ② inline style 속성 사용 ③ Stylesheet 적용 CSS3 크기 지정 CSS3에서 크기를 지정할 수 있는 방법은 크게 3가지가 있습니다. 단위 설명 % 상대크기(백분율 단위) em 상대크기(배수 단위) - 상위요소의 배수 rem 상대크기(배수 단위) - 루트요소의 배수 px 절대크기(픽셀) vh 브라우저 창 단위 가로 vw 브라우저 창 단위 세로 em : hello world rem : hello world vh vw %, 백분율 단위 첫번째 문장이 100%의 크기가 됩니다. %로 크기를 늘려가면 100%에 비해 백분율 단위로 요소의 크기를 지정할 수 있습니다. Lorem ipsu.. 공감수 2 댓글수 0 2023. 1. 13.
HTML5 웹페이지 만들기 #2 용어 정리 HTML5 기본 요소 HTML5는 태그 요소 속성으로 구성됩니다. 태그는 HTML 페이지에서 하나의 객체를 만듭니다. 태그를 통해 하나의 객체가 만들어집니다. 태그 태그는 2 종류가 있습니다. 시작 태그와 끝 태그가 있습니다. 두개의 태그가 하나의 객체를 형성하게 됩니다. 단독으로 사용되는 태그도 있습니다. 크게 HTML5 표기법과 XHTML5 표기접으로 구분됩니다. br, image, em 태그들이 단독으로 사용되는 빈 태그입니다. 속성 태그를 통해서 객체가 생성됩니다. 반면 속성은 생성된 객체에 추가적인 정보를 삽입할 때 사용됩니다. 객체에 적용할 수 있는 속성들은 W3C 재단에서 미리 정해놓고 있습니다. 주석 HTML5에서도 주석을 사용할 수 있습니다. 보통 슬래시(/)가 사용되지만 HTML5에서는.. 공감수 2 댓글수 0 2023. 1. 8.
HTML5 웹페이지 만들기 #1 웹의 발전 웹 이란 무엇인가? 팀 버너스리가 창시한 월드 와이드 웹은 인터넷에 접속한 사람들이 정보를 공유하고 저장할 수 있는 공간으로 사용되고 있습니다. 여기서 WWW(월드 와이드 웹)은 인터넷이라는 국제 정보 통신망 인프라 위에서 작동하는 서비스를 의미합니다. 1991년 최초 등장한 WWW은 벌서 30년이 넘는 세월동안 많은 발전을 거듭해오고 있습니다. 최초 인터넷은 러시아의 인공위성 발사에 위협을 느낀 미국이 ARPA 부서를 만들고 핵 무기에 대비해 정보를 안전하게 전송할 수 있는 ARPANET을 개발하기에 이릅니다. 이 후 군사용과 민간용 ARPANET으로 구분되는데, 민간용 네트워크가 현재 인터넷의 모습으로 발전하게 됩니다. 실제로 웹을 개발한 팀 버너스리 또한 유럽 공동 원자핵 연구소에서 근무했었습니다... 공감수 1 댓글수 0 2023. 1. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.