Frontend 81

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

What is DNS?

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

Frontend 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

Context API에 대해

React v16부터 사용가능한 React API로써, 일반적으로 props를 통해 부모요소에서 자식요소로 단방향으로 props를 전달하지만, 이럴 경우 전달하는 props는 많은 구성 요소를 통해 전달한다. Context를 사용해 부모요소에서 필요한 하위 트리의 구성요소로 정보를 전달 할 수 있다. 장점 Built-in 러닝 커브가 낮다. (react API) 전역 상태가 아닌, single state tree에서 유용하다. props drilling을 막아준다. 중첩된 여러 계층의 컴포넌트에 props를 전달해주는 것 단점 컴포넌트 재사용이 어렵다. 렌더링 최적화가 힘들다. props의 변화를 감지해서 react는 리렌더링이 일어나는데, context를 사용하면 props가 변하지 않더라도 리렌더링이..

Frontend 2023.09.03

MobX 라이브러리에 대해

핵심요약 쉽다. 모든 변경사항을 감지하고, 사용중인 위치로 전파한다. 렌더링 최적화를 쉽게 할 수 있다. 데이터에 대한 모든 변경 사항과 사용은 런타임에 추적되어 상태와 출력 간의 모든 관계를 캡처하는 종속성 트리를 구축한다. React 구성 요소와 같이 상태에 따른 계산이 엄격하게 필요할 때만 실행된다. 즉 자동으로 최적화 된다. 구조가 자유롭다. UI 프레임워크 외부에서 애플리케이션 상태를 관리할 수 있다. 이렇게 되면 코드가 분리되고, 테스트 하기 쉽다. 핵심 개념 Observable State - 상태 : 관찰하려는 상태(state)를 뜻한다. state의 변화는 reactions와 computations를 일으킨다. Derivations (computed Value) - 파생 값 : Observ..

Frontend 2023.09.03

How does the Internet Work?

개발자로서 인터넷이 무엇인지, 어떻게 작동하는지 확실하게 이해해야 되는 것은 중요하다. 최신 소프트웨어 어플리케이션이 구축되는 기반이기 때문이다. 효과적이고 안전하며 확장 가능한 어플리케이션과 서비스를 구축하려면 인터넷이 작동하는 방식과 인터넷의 연결성을 활용하는 방법을 확실하게 이해해야 한다. 인터넷 소개 그 전에 네트워크가 무엇인지 이해해야 한다. 네트워크는 서로 연결된 컴퓨터 또는 기타 장치의 그룹이다. 예를 들어 집에 컴퓨터와 네트워크 장치가 있다고 생각해보자. 옆집 이웃도 비슷한 장치를 갖고 있고, 그 이웃에 옆집도 비슷한 장치가 있다. 이러한 모든 네트워크는 함께 연결이 되면 인터넷을 형성하게 된다. 인터넷은 1960년대 후반 미국 국방부가 핵 공격을 견딜 수 있는 분산형 통신 네트워크를 구축..

Frontend 2023.09.02
반응형