Web Front End

[React + Emotion] 리액트에 글로벌 스타일 적용하기

Emotion 라이브러리를 사용해 reset.css를 적용할 수 있는 글로벌 스타일을 적용시키는 방법을 포스팅하려 한다. 1. [reset.jsx] html 기본 스타일을 없애주는 reset.css 스타일을 아래와 같이 넣고 저장한다. reset.css는 https://meyerweb.com/eric/tools/css/reset/ 를 참고해서 넣어주면 된다. 스크린샷에는 일부만 포함시켰다. 2. [App.js] 위의 리셋 스타일이 담긴 Reset.jsx를 import한다. emotion 에서 Global을 import한다. div 태그 안에 을 넣어 준다. Global 태그 아래로 다른 컴포넌트를 넣어주면 Global style이 적용된다.

[React] create-react-app(CRA)의 마법

리액트를 가장 빠르게 시작하는 방법 3가지 1. npx create-react-app my-app 2. npm init react-app my-app 3. yarn create react-app my-app 위의 세 가지 중 하나의 명령어를 입력하면 create-react-app이 설치가 시작돼 마법이 펼쳐진다. webpack, babel 등의 환경 설정을 따로 하지 않아도 바로 리액트로 개발을 시작할 수 있게 된다. 물론 서비스를 만드는 회사에서는 커스텀 환경을 더 많이 쓰겠지만, webpack, babel 등에 대해 완전한 이해가 없는 초보 개발자에게는 바로 개발을 시작할 수 있는 놀라운 환경을 제공해 주는 것이다. 직접 환경 설정을 하는 것도 중요하겠지만, 차근차근 해도 나쁘지 않을 것 같다. 나는..

[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다. 그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다. 이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다. 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :) props란? 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값 사용 예시 function Welcome(props) { // 자식 컴포넌트 return Hello, {props.name}; } function App() { // 부모 컴포넌트 return ( )..

[모두의 네트워크] 3장 물리 계층 : 데이터를 전기 신호로 변환하기

3장[준비편] 물리 계층 : 데이터를 전기 신호로 변환하기 네트워크의 구조 이해하기 목표 전기 신호 랜 케이블 리피터 허브 :one: 물리 계층의 역할과 랜 카드의 구조 데이터 : 전기 신호로 변환되어 네트워크를 통해 전송 물리 계층 OSI 모델의 최하위 계층 데이터(0과 1의 비트열)를 전기 신호로 변환하기 위해 필요 송신 : 데이터 => 전기 신호 수신 : 전기 신호 => 데이터 전기 신호 전압이 일정 패턴으로 변해 생기는 일련의 흐름 전압의 변화가 모여서 만들어진 신호 종류 : 아날로그 신호, 디지털 신호 아날로그 신호 전화 회선이나 라디오 방송에 사용되는 신호 물결 모양디지털 신호 막대 모양 랜 카드 0과 1을. 전기 신호로 변환함 컴퓨터의 네트워크 연결 및 데이터 전송 담당 :two: 케이블(전..

[모두의 네트워크] 2장[준비편] 네트워크의 기본 규칙

2장[준비편] 네트워크의 기본 규칙 네트워크의 기초 지식 익히기 목표 프로토콜 OSI 7 & TCP/IP 캡슐화 & 역캡슐화 프로토콜 통신하기 위한 규칙 데이터를 주고받기 위한 통신 규격 OSI 모델 회사가 달라도 공통으로 사용 가능한 표준 규격 네트워크 기술의 기본이 되는 모델 7계층(레이어)으로 컴퓨터 내부에서 일을 나눠서 함 송신 측의 7계층(상위 계층 => 하위 계층) 수신 측의 7계층(하위 계층 => 상위 계층) 1계층 - 물리 계층 : 시스템 간 물리적인 연결과 전기 신호 변환 및 제어 2계층 - 데이터 링크 계층 : 네트워크 기기 간의 데이터 전송 및 물리 주소 결정 3계층 - 네트워크 계층 : 다른 네트워크와 통신하기 위한 경로 설정 및 논리 주소 결정 4계층 - 전송 계층 : 신뢰할 수 ..

[모두의 네트워크] 1장[준비편] - 네트워크 첫걸음

1장[준비편] - 네트워크 첫걸음 네트워크의 기초 지식 익히기 목차 네트워크 패킷 램(LAN), 왠(WAN) 인터넷 전 세계의 네트워크를 연결하는 거대한 네트워크 패킷(=택배) 데이터를 주고받을 때 네트워크를 통해 전송되는 데이터의 작은 조각 큰 데이터(=대형 트럭)를 보낼 때 네트워크의 대역폭을 너무 많이 점유해 다른 패킷의 흐름을 막을 위험(=교통 정체)이 있어 작게 나누어 보냄 용량이 큰 데이터는 패킷을 분할하여 전송한다 패킷이 도착지에 도착하면 번호순으로 정렬해 다시 합친다 LAN vs WAN LAN WAN 좁은 범위의 네트워크 Local Area Network 넓은 범위의 네트워크 ISP 서비스로 구축된 네트워크 Wide Area Network 범위 특정 지역 LAN과 LAN을 연결 예시 가정,..