Web Front End

[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을 연결 예시 가정,..

[Javascript] 코딩할 때 먼저 고민하면 좋을 10가지

프로젝트를 진행하고 코드리뷰를 받으면서 공통적으로 여러 번 받거나 다수에게 남겨진 코드리뷰 피드백을 정리해 보았다. 경험적으로 지키지 않아 좋지 않은 결과를 가져온 부분에 대해서도 작성했다. 다음 프로젝트에서는 잊지 않고 적용해 보기 위함이다. 1. env(환경변수) 활용하기 dotenv 라는 npm 라이브러리를 설치하고 프로젝트 루트에 .env 파일을 만들어 환경변수를 넣을 수 있다. 이를 활용하여 매직넘버를 줄이자. env에는 API 주소 등이 포함될 수 있다. 2. 커밋 단위를 작게작게 줄이자 함수 하나가 동작이 된다면 커밋을 날리는 습관을 들여 보자. 함수 = 하나의 기능으로 생각하고 함수가 완료되면 커밋을 보낸다면, 커밋 로그를 보다 자세하게 기록할 수 있다. 위의 이미지는 나의 일주일 동안 프..

Windows 10에 VirtualBox로 Ubuntu 18.04 설치하기

Windows 10에 VirtualBox로 Ubuntu 18.04 설치하기 윈도우에 우분투를 설치하기 위해서는 가상환경이 필요하다. 가상환경은 VirtualBox 외에도 Docker, VMWare, Parallels 등이 있다. 자신의 환경에 맞는 가상환경을 설치하면 된다. 나는 그 중 VirtualBox를 사용했다. 가상환경(VirtualBox) 설치하기 1. VirtualBox 설치파일 다운로드 VirtualBox 홈페이지 접속 - Download - Windows host 2. VirtualBox 설치 설치가 완료될 때까지 Next 클릭 중간에 Warning 메시지가 나와도 놀라지 말고 무시해도 된다. 3. 설치 완료 아래와 같은 페이지가 나온다면 설치가 완료된 것이다. 이제 우분투를 시작해 보자!..