recent
-
[CSS] Float, Flex, Grid
Float CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임 절대위치 요소는 float 속성을 무시한다 자주 사용되는 Value left : 블록의 좌측으로 이동 후 부동 right : 블록의 우측으로 이동 후 부동 none : 기본값으로 기본속성 그대로 유지 inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 Flex-box CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 ..
-
[SWR] Data의 reavalidate, mutate 활용
swr의 기본적인 사용방법에 대해서는 다른 글을 참고하는게 낫다 이것은 오로지 swr을 통해서 가져온 data를 어떻게 revalidate하는게 좋고 mutate를 어떨 때 사용하는게 좋고 optimistic UI를 어떻게 사용해야하는지에 대해서 내가 볼려고 적어 놓은 것임 개요 SWR의 이점 revalidate란? mutate란? optimisticUI란? key의 활용 (조건부 데이터 가져오기, token전달) SWR 장점 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 React-query와 마찬가지로 데이터를 불러올 때 사용되는데 SWRconfig를 통해 전역설정만 하고 fetcher만 설정해 놓는다면 간단하게 사용할 수 있는 구조이다. (전역설정 안해도 됨 그러면 따로 fetcher를 매번 작성..
list
-
[Mac] 움짤만들기(동영상 -> 이미지로 변환)블로그 정리용 2025.03.19 11:31
개발 도중 블로그를 작성하다보면 이미지로는 표현하지 못할 실행하는 UI를 보여줘야 이해하기 빠른 경우가 많다. 하지만 5 ~ 7초 내외 간단한 영상을 동영상으로 도중에 집어넣는다면 보기에도 그렇게 좋지 못하다는 느낌이 들기에 Mac의 Keynote를 활용해서 동영상을 이미지로 만드는 간단한 방식을 소개하려 한다. 📌 출처: T-story 블로그 1️⃣ 화면 녹화먼저 이미지로 변환할 동영상이 필요한데 Mac의 화면녹화(cmd + shift + 5)를 활용해서 원하는 동영상 파일을 만든다.이렇게 만들게 된 영상 파일을 keyNote를 통해서 이미지로 변환할 예정이다. 2️⃣ Keynote 활용keynote를 통해 새 프레젠테이션을 열어서 원하는 동영상을 keynote에 끌어넣는다.keynote의 슬라이..
-
[코드 팩토리의 플러터 프로그래밍] 3일차카테고리 없음 2025.03.06 14:43
📋 목표- Dart 인프런 강의 완강- Chapter 05 플러터 입문하기 1️⃣ 비동기 프로그래밍(AP)과 3.0 업데이트 문법📦 비동기 프로그래밍(Async Programing)CPU를 최대한의 효율로 사용할 수 있는 프로그래밍으로 Thread에 대한 간단한 개념작업을 수행할 때 가장 작은 수행 단위 하나의 작업(Thread)가 수행되는 동안에 CPU는 다른 작업을 수행할 수 없다(동기적 처리 방식) 이러한 방식으로 보았을 때 어떠한 작업에서 서버 요청하는 부분이 있다면 이 요청의 response를 받기 전까지 CPU는 다른 작업을 수행할 수 없다(가장 기본적인 처리방식) 이러한 방식은 실제로 그닥 유용하지 않기에 비동기 프로그래밍을 통해서 이러한 문제의 해결을 할 수 있다. 그리고 Dart언어는..
-
[코드 팩토리의 플러터 프로그래밍] 2일차코드팩토리의 플러터 프로그래밍 2025.03.05 15:11
📋 목표- 코드팩토리 Dart 언어 입문 강의 2~3강 수강- 후기 및 이후 목표 1️⃣ 객체지향 프로그래밍(OOP)과 함수형 프로그래밍(FP)객체 지향과 관련된 내용은 옛날에 Javascript에서 객체지향 과 관련된 내용을 공부할 때 접한 적이 있고 함수형 프로그램이은 Javascript의 거의 기본이라서 어떤 내용인지 유추가 될 것 같다. javascript와 관련이 깊은 Dart인만큼 호이스팅의 개념을 가지고 있는지 앞선 화살표 함수가 Javascript와 얼마나 유사한지는 좀 궁금하다. 📦 객체 지향 프로그래밍 (OOP)처음 설명하는 부분을 듣고 있자니 정처기 준비하면서 배웠던 디자인 패턴 중 팩토리 메서드와 유사한 부분이 있는 것 같다.Object를 상속받기에 OOP라고 불림 생성자를 통해..
-
[코드팩토리의 플러터 프로그래밍] 1일차코드팩토리의 플러터 프로그래밍 2025.03.04 20:51
📋 목표 - 플러터 환경세팅- 다트 언어 공부하기- 후기 및 이후 목표 1️⃣ 플러터 환경 세팅기존에 웹 개발에서 사용하던 세팅과 플러터의 세팅 과정에서 어떤 차이점이 있고 어떤 것을 활용하는지 알아보자.- MacOS를 기준으로 환경 세팅을 시작하였으며 Flutter SDK, Xcode, 안드로이드 스튜디오, Homebrew, JAVA v.17 5가지에 대한 세팅을 하였다. 세팅 과정에서 터미널에 명려어를 입력(CLI)하는 방식이 많았으며, 특히나 PATH 변수에 위치를 등록하는 과정에서 조금씩 헤메는 부분이 있었지만 정상적으로 잘 설치를 하였다. 교재에 나와있는대로 따라가기만 해도 충분한 것 같다. 2️⃣ 다트 언어 공부하기책에 나와있는 내용도 있지만 인프런에 5시간짜리 강의가 있어 이 강의를 보면서..
-
[Baekjoon] 약수와 소수와 배수코딩테스트 문제 정리 2025.02.27 15:01
단계별 풀이 중 9단계인 약수, 소수, 배수에 대한 알고리즘 풀이 과정에서 느낀 점 및 내 풀이 결과를 나타내었다. 해당문제: https://www.acmicpc.net/step/10🌈 파이썬 코드📦 5086 1번 문제문제 풀기 전 내 생각일단 입력부분에서 0 0이 오면 반복문을 종료하는 구문을 짜야겠고만. break와 같은 탈출문구? 를 넣으면 될 듯 factor인지 multiple인지 neither인지를 출력하는 함수를 만드는 게 목표def solution(): # 연산의 횟수가 정확히 정해지지 않았으므로 while while True: a, b = map(int, input().split()) # 탈출 구문 if a + b == 0: ..