본문 바로가기
반응형

전체 글132

[AI] 포토샵은 잘 못하는데, 뭘 좀 지워야 한다면? Magic Eraser 포토샵은 잘 못하는데, 뭘 좀 지워야 한다면? 하루가 멀다 하고 최신 AI 기술들이 쏟아져 나오는 시대가 된 것 같습니다. 아이디어도 참 다양하고, AI가 만들어내는 결과물의 퀄리티도 점점 좋아지니 이러한 내용을 접하게 될 때 마다 감탄하지 않을 수가 없더라구요. 아주 유명한 짤입니다. 손정의 회장의 AI, AI, AI. 간혹 재미있는 짤 정도로 소비되고도 있지만, 정말 대단한 미래 예측을 하고 있었다는 생각이 듭니다. 괜히 앞서 가는 사람이 아닌듯. IT 세상은 정말 놀라울 정도로 환경이 급변하고 있는 것 같습니다. 웹 개발을 하다보면 이미지를 다룰 일이 생기게 되고 그래서 포토샵을 사용할 일이 가끔 발생합니다. 주로 불필요한 이미지를 지우거나, 일명 '누끼'라고 부르는 외곽선 따는 일이 주된 일이긴 .. 2023. 1. 7.
switch 구문? - 가끔 사용되니 if와 비교하여 이 참에 정리 코딩을 조금이라도 학습해본 사람이라면, 조건을 핸들링해야 할 때 if 조건문을 가장 먼저 떠 올리게 될 것입니다. 그런데 현업실무에서는 때때로 switch 구문을 이용해서 조건을 처리하는 경우도 왕왕 존재합니다. if 구문와 switch 구문이 비슷하게 동작한다고 하면 어떤 모습으로 서로 다르게 사용되는 지 정리해두면 좋습니다. switch 기본 구문 다음 코드로 살펴봅시다. 사용자가 1 또는 2를 입력(선택)하는 상황을 가정해보았습니다. let yourChoice = 1; switch (yourChoice) { case 1: alert("1을 선택했습니다!"); break; case 2: alert("2를 선택했습니다!"); break; } yourChoice 변수에 1이 담겼으니, case 1: 이하.. 2023. 1. 6.
[Javascript] 반복문 for.. in 과 for.. of 의 차이 지난 포스팅에서 배열이 내장함수인 forEach()에 대한 기초적인 내용들을 정리를 해보았습니다. forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초 프로그램밍을 공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 kincoding.com 그러면서 for.. in 반복문도 함께 살펴보았는데요, 이놈의 Javascript에는 for.. of 라는 반복문 형태가 또! 존재합니다. 비슷한 게 뭐가 이리 많어, 헷갈리게! 싶은데요. 역시나 자.. 2023. 1. 5.
forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초 프로그램밍을 공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 착각도 쉽게 빠뜨려주곤 합니다. 그렇지 않은가요? Javascript에는 다양한 for 문이 존재해서 자칫 혼란스럽기도 한데요, 이번 포스팅에서는 반복문 사용 레벨을 한단계 도약시켜주는 느낌을 갖게 하는 forEach()와 for.. in 반복문에 대해서 정리하고 가보겠습니다 forEach() 반복 forEach는 뭔가 반복문을 돌면서 각(each) 개별로 수행해주는 반복문 같은 느낌이 듭니다. 어떻게 동작하는 지 살펴보기 위해서 다음과 같이 예제 코드를 작성해보았습니다. const nums = .. 2023. 1. 4.
이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리 웹페이지를 해석해서 보여주는 브라우저(Browser)의 동작방식 중에는 '이벤트 버블링(Event Bubbling)'이라는 현상이 존재합니다. 왠지 용어가 일반적이지 않고 뭔가 전문가 포스 같은 느낌이 나서 괜히 어렵게 느껴지는 것도 같습니다. 일반적인 사용 케이스에서 살펴보자면, 버튼을 누른 것도 아니고 배경화면을 클릭한 것 뿐인데도 모달창이 닫히게 되는, 뭐 그런 현상들이 바로 이벤트 버블링 현상이 만들어내는 경우입니다. 이번 포스팅에서는 이러한 '이벤트 버블링'과 관련하여 "전문적"이 아닌 "현상적"인 이해를 경험 해보기로 합니다. 이벤트 버블링(Event Bubbling) 일단 테스트를 위한 코드를 간단하게 작성해보도록 합니다. div 태그로 박스를 세 개 만들었습니다. 이벤트 버블링 아래 이미지.. 2023. 1. 3.
반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2.
반응형

티스토리툴바