본문 바로가기

전체 글306

코드잇 학습일기 day3. JSON 데이터 자바스크립트 객체 변환, Request와 메소드 종류 한 주의 시작은 코드잇으로~ 원래 하루에 강의 한개씩은 꼬박꼬박 듣고 있었기 때문에, 습관적인 면에서는 어렵지 않지만... 하루에 다섯개 강의를 들어야 하는 것은 조금 부담이다. 그래도 일주일에 두 번 정도라면, 업무가 바쁘지 않은 날이나 점심시간을 이용해서 들을 만 하다. JSON 데이터 자바스크립트 객체로 변환하기 어떤 변수의 데이터 타입을 확인할 때에는 typeof 연산자를 사용하면 된다. 위와 같이 typeof 연산자를 사용하면 JSON 데이터가 string 타입이라는 것을 알 수 있다. 그런데 데이터가 string 타입이라면 작업하는 것이 쉽지 않다. 다행히도 string 타입의 JSON 데이터는 그대로 자바스크립트 객체로 변환할 수 있다. 위와 같은 JSON 데이터에 parse 라는 메소드를 .. 2023. 2. 6.
코드잇 학습일기 day2. 웹환경 이해하기 - web, URL, https 오늘 학습일기는 자바 스크립트와 관련된 내용은 아니긴 하지만... 그래도 자바스크립트 웹기초 커리큘럼에 있는 내용이기도 하고, 학습일기가 자연스럽게 이어지는 것이 좋을 듯 하여, JavaScript 카테고리에 포스팅을 하도록 하겠다. 오늘도 어김없이 코드잇 공부~ 출근길을 이용해서 빠르게 강의 5개를 들었다. 코드잇 강의는 길지 않아서 출퇴근길, 점심시간 등 여유시간이 생겼을 때에 부담없이 들을 수 있다. 웹(WEB)은 무엇인가? 웹은 World Wide Web의 약자로, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말한다. 하이퍼 텍스트 형식으로 표현된 인터넷의 다양한 정보를 효과적으로 검색할 수 있는 시스템이며, 전 세계적으로 가장 널리 보급되어 있다. URL은 무엇인가? U.. 2023. 2. 2.
코드잇 학습일기 Day1. 개발자 도구, 자바스크립트 fetch 함수 코딩 강의 사이트인 코드잇에서 "오늘도 코드잇 학습일기 챌린지" 이벤트를 진행하고 있다. 평소에 코드잇을 애용하며 1일 1강의를 듣는 나에게는 넘나 참여하기 쉬운 이벤트~ https://blog.codeit.kr/post/63d1de818120e3265cbbfb52 코드잇 :: 오늘도 코드잇 학습일기 챌린지 2023년도 어느덧 1달이 벌써 다 지나갔네요. 새해 목표였던 코딩 공부는 모두 잘하고 계신가요? 여러분이 코드잇과 함께 꾸준히 공부하며 코딩 습관 만들고 원하는 목표 모두 이루기를 응원하는 blog.codeit.kr 그래서 2월부터 공부하려고 계획하고 있던 '자바스크립트 웹 개발 기본기' 강의로 학습일기를 써보려고 한다. 브라우저 개발자 도구에서 자바스크립트 코드 실행하기 크롬 브라우저에서 개발자 .. 2023. 1. 31.
UX / UI 개념과 차이점에 대해서 알아보자! UX와 UI의 차이점은 무엇인가요? UX(User Experience)는 사용자가 응용 프로그램, 웹 사이트 또는 제품을 사용할 때의 경험을 의미한다. 이는 사용자 입장에서 제품을 이해하고 사용할 수 있는 쉬운 방법을 제공하는 것을 포함하고 있다. 그리고 UI(User Interface)는 사용자와 제품이 상호 작용하는 방법을 의미한다. 이는 사용자가 제품을 제어하고 정보를 얻는 데 사용하는 버튼, 메뉴, 입력 상자 등의 인터페이스를 포함한다. 따라서 UX는 제품을 사용하는 경험을 설계하는 것이고, UI는 사용자와 제품이 상호 작용하는 방법을 설계하는 것이다. UX 디자이너가 하는 일은? UX(User Experience) 디자이너는 사용자가 제품을 사용할 때의 경험을 설계하는 일을 한다. 이를 위해 다.. 2023. 1. 21.
국세청 홈택스 연말정산 간소화 자료 다운로드 방법 연말정산 기간이 되면 직장인들은 소득, 세액공제, 각종 증빙자료들을 찾아서 회사에 제출해야 한다. 다행히도 국세청 홈택스에서 연말정산 간소화 자료를 제공하고 있어서, 자료 준비하는 난이도가 그리 높지는 않다. 이번 포스팅에서는 2023 연말정산 기간을 대비하여, 국세청 홈택스에서 연말정산 간소화 자료를 다운로드 하는 방법에 대해서 설명하도록 하겠다. 먼저 홈택스 사이트에 접속해야 한다. http://www.hometax.go.kr/ 국세청 홈택스 www.hometax.go.kr 구글 등의 포털에서 홈택스라고 검색해도 쉽게 찾을 수 있다. 홈택스 사이트에 방문했다면 상단에 있는 로그인 버튼을 눌러서 로그인을 진행하도록 한다. 공동인증서, 금융인증서가 없어도 간편인증을 할 수 있어 편리하다. 나는 홈택스 사.. 2023. 1. 18.
2023 연말정산 주요 일정 & 연말정산 간소화 자료 일괄제공 서비스 일정 직장인들에게 연초는 연말정산으로 분주하다. 연말정산이란 직장인이 1년간 납부한 근로소득세를 매년이 끝나고 나서 다시 따져보는 절차로, 급여소득에서 원천징수한 세액의 과부족을 따져 다시 정산하는 것이다. 만약 덜 납부했다면 추가로 징수하고, 반대로 더 납부했다면 세액을 환급받을 수 있다. 이러한 이유로 연말정산은 직장인에게 13월의 보너스라고 불리기도 한다. 2023 연말정산 기간이 되었다. 나도 작년에는 취업을 했기 때문에 회사에서 연말정산을 진행했다. 내가 연말정산을 진행하며 도움을 받았던 정보들을 블로그에 정리하고 공유하려고 한다. 오늘 첫번째 포스팅에서는 2023 연말정산의 주요 일정과 간소화 자료 일괄제공 서비스 일정에 대해서 소개하도록 하겠다. 연말정산 주요 일정 2022년 귀속 연말정산 주요 .. 2023. 1. 17.
피그마로 글래스모피즘 스타일의 오브젝트 만들기 지난 포스팅에서 클레이모피즘 스타일의 버튼을 만드는 방법에 대해서 알아보았다. (궁금하면 아래 링크 클릭!) 2023.01.17 - [디자인/Figma] - 피그마로 클레이모피즘 스타일의 버튼 만들기 피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데 heinafantasy.com 이번 포스팅에서는 피그마로 글래스모피즘 스타일의 오브젝트를 만드는 방법에 대해서 설명하려고 한다. 글래스모피즘이란? 글래스모피즘(glassmorphism)이란, 반투명 재질을 사용하여 오브젝트 간의 시각적 계층을 표현한 그래픽 스타일이다. 반투명한 유리를 댄.. 2023. 1. 17.
피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데, 이것을 보완한 것이 뉴모피즘이다. 뉴모피즘은 미니멀리즘을 계승한 디자인으로 심플한 그래픽에 그림자를 두어 입체적으로 표현한 것이 특징이다. 그리고 뉴모피즘에 이어 클레이모피즘이 2023 UX/UI 디자인 트렌드로 선정되었다. 클레이모피즘(Claymorphism)은 내외부 그림자의 조합으로 부드럽고 푹신한 느낌을 주는 그래픽 스타일이다. 흡사 점토로 만든 3D 모형 같아 보이기도 한다. 글래스모피즘과의 궁합도 나쁘지 않아 함께 사용하면 새롭고 신선한 결과물을 얻을 수 있다. 나도 3D 프로그램을 사용해서 클레이모피즘을 만들어보.. 2023. 1. 17.
MacOS > homebrew 이용해서 MySQL 설치하기 지난 포스팅에서는 MySQL 공식 사이트에 접속하여 MySQL과 Workbench 설치하는 방법을 알아보았다. 오늘은 MySQL을 설치하는 또 다른 방법, homebrew를 이용한 설치 방법을 알아보도록 하겠다. homebrew가 궁금한 사람들은 아래 링크를 클릭! 2022.08.14 - [혼자서도 잘 해요/macOS] - macOS 패키지 관리자 Homebrew 설치하기 macOS 패키지 관리자 Homebrew 설치하기 이번에 데이터 공부를 해보고 싶어서 MySQL을 설치하다가 Homebrew 라는 관리자 프로그램을 알게 되었다. 사실 homebrew는 몇 년 전에 Ruby 설치할 때 사용해 본 적이 있지만, 그 때는 맥북도 처음이었고 heinafantasy.com 이미 macOS에 homebrew가 .. 2023. 1. 13.
리액트 엘리먼트(Element) & 컴포넌트(Component) 리액트의 엘리먼트(Element)와 컴포넌트(Component)의 차이점이 무엇인지 알아보았다. 리액트 엘리먼트(React Element) 자바스크립트 객체 (JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨) 리액트로 화면을 그려내는 데에 가장 기본적인 요소 우리가 실제로 보게되는 화면을 구성하고 있는 블럭 바로 사용되지는 않고 컴포넌트에서 리턴을 받아서 사용함 한 번 생성되면 다시는 변형되지 않음 import ReactDOM from 'react-dom'; const element = Hello, World!; console.log(element); ReactDOM.render(element, document.getElementById('root')); 리액트 컴포넌트(React Com.. 2023. 1. 13.