분류 전체보기 229

CSS 정리

회사에서 급하게 화면을 작업해야되는 시기가 있었다. 그래서 화면 UI/UX 화면을 작업하는 업무를 진행했고, react와 styled component로 화면 작업을 하는데 애를 먹은 기억이 있다. css를 공부하기에 앞서 꼭 공부를 따로 해야되나? '작업할 때 필요할 때, 구글링을 통해 진행하면 되지 않을까' 라는 생각을 했다. 하지만 막상 그 때가 오면 내가 원하는 기능에 대해 어렴풋이 알고있지 않다면 오히려 더 많은 시간을 잡아 먹는 일이 발생했다. 회고 UI/UX를 하면서 개인적으로 애를 먹었던 점이 2가지 있다. 1. 이미 font 색상이 #fff인 부분에서 배경을 #ffffff, opacity를 주었을 때, 색상도 #fff 즉 하얀색이여서, 글씨색과 배경색이 겹쳐져 안보이는 현상이 발생했다. ..

Frontend 2023.09.24

웹 접근성

Accessibility 사람들의 능력이 제한되어 있음에도 불구하고 많은사람들이 웹 사이트 접근을 할 수 있도록 만드는 것이 웹 접근성이다. 사실 아래에 semantic 태그를 잘 활용해서 HTML의 구성을 짜는 것의 연장선 같은 의미라 생각 되었다. 태그 안에서 활용할 수 있는 옵션들을 활용해 좀 더 자유롭고, 편안하게 사용할 수 있도록 하는 뜻 같다. 그래서 웹 접근에 있어서 복잡한 콘텐츠도 최대한 접근할 수 있도록 고려하며 구성해야 한다. 2023.09.16 - [Frontend] - What is semantic HTML? What is semantic HTML? HTML을 한 마디로 HyperText Markup Language의 약자다. semantic이란 뜻이 붙으면, 의미를 명확하게 설명하..

Frontend 2023.09.17

What is semantic HTML?

HTML을 한 마디로 HyperText Markup Language의 약자다. semantic이란 뜻이 붙으면, 의미를 명확하게 설명하는 HTML이 된다.(의역을 하자면..) 예를 들면, , , , 등이 있고, 웹페이지에서 다양한 부분들을 정의할 때 각 의미에 맞는 태그들로 구성을 해야한다는 뜻이다. semantic 태그를 사용해야 되는 이유는 뭘까? 검색 엔진과 기타 기술로 사이트 콘텐츠의 구조와 목적을 이해하는데 도움된다. 웹을 이용해 검색하는 유저들이 콘텐츠의 더 쉽게 접근 가능하다. 각 요소의 목적이 명확하기 때문에 코드를 유지보수하기 쉽다. 시각장애인이 웹페이지를 볼 때, 모든 태그가 div, span들로 가득 찼다면 어떤게 제목이고, 어떤게 메인이고, 어떤게 어떤 것인지 알 수 없다. 각 태그..

Frontend 2023.09.16

청년버팀목전세자금대출 후기 (3) - 예산 및 후기

처음 독립한다고 생각했을 때, 보증금외에 돈에 대해 잘 생각하지 않았었다. 보증금만큼 독립할 때 예산을 잘 짜야한다. 난 아래와 같이 테이블을 짜고, 필요 없다면 구입하지 않고 꼭 필요한 것만 구입했다.(예산부족이슈) 그래서 아래와 같이 타임테이블을 적으면서 예산을 정하고, 그 예산안에서 구입하려고 했다. 구매품목 예산 왜 사는가? 꼭 필요한가? 잡다한 물품들(샴푸, 바디워시, 치약, 주방용품 및 빨래 용품 구입) 200,000 집에 필요한 최소한의 물품들로만 구성 O 캡슐커피머신 160,000 집에서 커피를 마시기 위해서 구입한다 X 인터넷이전비 27,500 인터넷을 사용하기 위해서 어쩔 수 없이 이전해야한다 O 집 청소 + 에어컨 청소 303,050 내 몸보다 돈이 우선이다 O 에어컨 리모콘 구입 1..

잡담 2023.09.09

What is DNS?

DNS(Domain Name System)는 인터넷의 전화번호부라고 생각하면 좋다. 도메인 이름을 통해 온라인으로 정보를 얻는다. 웹 브라우저는 인터넷 프로토콜(IP) 주소를 통해 상호작용한다. 즉, 브라우저가 인터넷 리소스를 가지고 올 수 있도록 도메인 이름을 IP 주소로 변환한다. 인터넷에 연결된 각 장치에는 다른 컴퓨터를 찾을 수 있는 고유한 IP주소가 있다. 그래서 우리는 IP주소가 아닌 Domain Name만 알고 있으면 리소스를 얻을 수 있는 것이다. DNS 확인 프로세스에는 도메인이름을 컴퓨터에 적합한 IP주소로 변환하는 과정이 포함되어 있다. 각 장치에는 IP주소가 부여되며, 해당 주소는 적절한 인터넷 장치를 찾는데 필요하다. 웹페이지 로딩에는 4개의 DNS 서버가 관련되어 있다. DNA ..

Frontend 2023.09.08

청년버팀목전세자금대출 후기 (2)

1탄에 이어서 2탄을 작성해보려고 한다. 집을 알아보면서 앱을 이용해 집을 찾았는데 앱과 집을 구하는 타임라인을 기억속에서 끄집어내보려고 한다. 부동산 앱의 장단점 앱 이름 장점 단점 비고 다방 - 앱을 이용해 월세, 전세, 매매에 대한 물건을 볼 수 있다. - 공인중개사와 바로 연락이 가기 때문에 물건에 대한 요청과 응답이 빠르다. - 공인중개사로부터 연락이 올 때 많은 집들에 대한 요청을 했다면, 어느 집을 요청한 공인중개사인지 재차 물어보는 문제가 발생한다. - 실제 공인중개사가 아닌, 약간 알바 같이 집을 소개해주는 역할을 하는 사람을 만날 수 있다. - 사진 사기와 막상 전세대출로 연락하면 안된다고 다른집을 보여준다는 이야기를 할 경우가 조금 많았다. 개인적으로 사실 두 앱이 비슷하다고 느꼈다...

잡담 2023.09.08

청년버팀목전세자금대출 후기 (1)

2022년 5월 ~ 2023년 5월까지 월세를 살다가, 2023년 3월 계약만료전에 집을 어떻게 해야되나 깊게 고민했었다. 그 때 당시 월세였어서, 고정비에 대한 부담과 한 푼이라도 아끼는 마음에 전세를 알아봤다. 이곳 저곳에서 글을 모았었고, 한 달동안 공부를 했었다(?) 공부를 하면서 내가 받을 수 있는 베스트 오브 베스트 대출은 청년 버팀목 전세자금 대출이였다. 나의 상황으로는 아래 3가지가 끝이였다. 30살 수중에 가지고 있는 돈은 엄마에게 빌렸던 월세방 보증금 2,500만원 직장 재직 7개월차 모아둔 돈 없음 그러기에, 대출이 더더욱 필요했다. 그래서 알아봤던 대출은 아래와 같다. 서울시 기준이다. 대출이름 이율 장점 단점 청년버팀목전세자금대출 - 1.5 ~ 2.1(2023년 8월 30일 이후로..

잡담 2023.09.08

What is DomainName?

도메인 이름은 인터넷의 핵심이다. 인터넷에서 사용 가능한 웹서버에 대해 사람들이 읽을 수 있는 주소를 제공하기 때문이다. 인터넷에 연결된 모든 컴퓨터에는 IPv4주소 또는 IPv6주소 중 하나인 공용 IP 주소를 통해 접근할 수 있다. 컴퓨터는 그러한 주소를 쉽게 처리할 수 있지만, 사람들은 해당 주소만으로 어떤 서비스를 제공하고, 무엇을 하는지 알 수 없다. 우리는 Google이라는 도메인 이름을 기억하지, IP주소를 알지 않기 때문이다. 도메인 이름은 점으로 구분되고, 오른쪽에서 왼쪽으로 읽히는 간단한 구조를 가지고 있다. 각 부분은 전체 도메인 이름에 대한 특정 정보를 제공한다. TLD(Top-Level Domain) : TLD는 사용자에게 도메인 이름 뒤에 있는 서비스의 일반적인 목적을 알려준다...

Frontend 2023.09.08

What is HTTP?

HTTP(Hypertext transfer protocol)는 World Wide Web의 기초이며, 하이퍼테스트 링크를 사용하여 웹페이지를 로드하는데 사용된다. HTTP란? 클라이언트와 서버가 서로 통시하는 방식을 표준화하는 TCP/IP 기반 어플리케이션 계층 통신 프로토콜이다. 인터넷을 통해 콘텐츠가 요청되고 전송되는 방식을 정의한다. 클라이언트 및 서버가 통신하는 방식을 표준화하는 추상화 계층임을 뜻한다. 기본적으로 TCP포트 80이 사용되지만 다른 포트도 사용할 수 있다. 하지만 HTTPS는 포트 443을 사용한다. HTTP의 역사 HTTP/0.9 - The One Liner(1991) - 역대 가장 간단한 프로토콜이다. - GET이라는 단일 메서드가 있었고, 클라이언트가 서버의 요청을 보냈다. ..

Frontend 2023.09.04

Recoil에 대해(핵심 요약)

React에서 사용하는 상태관리 라이브러리. React의 Concurrent Rendering(동시성 렌더링) 를 공식지원하는 유일한 라이브러리 핵심개념 Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. Atoms는 런타임에서 생성될 수도 있다. Atoms는 React의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. selectors selectors는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 se..

Frontend 2023.09.03
반응형