[기초지식]

빈번한 데이터 업데이트가 필요한 경우,리소스가 존재하는 곳(서버)와 리소스를 사용하는(클라이언트)를분리시키는 것이 유리(=프론트엔드)손님프론트앤드 앱: 리소스(ex:데이터)에 접근하려는 앱(=백엔드)서버 앱 : 리소스를 전달해주는 앱데이터베이스 : 리소스 저장 공간리소

어떤 기능을 수행하기 위한 코드모음HTTP를 사용하여 서버와 통신할때,REST하게 활용한다. 이게 무슨말이냐고?예를들어,UPI만 보고도 어떤 정보를 요청하는지 구체적으로 알 수 있도록 API를 작성하도록 하는 방법론 같은 것API를 만들면 무료/유료로 모두에게 공개할

1) 컴포넌트 문서화2) 컴포넌트 시각화=> CDD(Component Driven Development)할 수 있도록 돕는 도구

컴포넌트 기반 개발(Component Driven Development)재사용할 수 있는 UI 컴포넌트의 필요성예를 들어,기획안에 맞춰 개발을 하다가기획 세부 내용이 바뀐다면?개발자는 이 부분을 새로 만들어야하는가?만약, 프로젝트 시작부터 Component로 작업했다면

!codesandboxstyle-component-test-hm54mj?fontsize=14&hidenavigation=1&theme=dark코드샌드박스에서 실습!

!codesandboxfocused-shamir-5dgrz9?fontsize=14&hidenavigation=1&theme=darkstyle component import하기styled 이용해서 Btn 만들기hover이벤트 주기전역스타일 설정하기스타일 & 전역스타일 적

라이브러리 설치하기 package.json에 추가하기 import 해주기

useRef 사용하여 DOM요소에 접근하기!그 중에서도 자주 쓰인다는 focus() 연습해보자useRef 임포트useRef 사용하여 변수 선언useEffect 사용해서 처음 랜더링될때만, inputRef.current에 .focus() 메소드 주기return 안에 실제

전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망(ex: 웹, 온라인게임, 모바일앱, 이메일 등을 연결하는 통신망)인터넷으로 연결된문서, 이미지, 영상 등 다양한 정보를 사람들과 공유할 수 있는 공간웹에서 표준적으로 사용되는 규칙사용자가 어떤 브라우저,운영체제를 사용

검색 엔진 최적화 (Serch Engine Optimization)1) On-Page SEO : 웹 페이지 내부에서 진행하는 SEO 프론트엔드 개발자가 웹페이지를 만들때 신경써야 하는 요소!2) Off-Page SEO : 웹 페이지 외부에서 진행하는 SEO인스타그램 광

어떤 사람이든 웹을 통해 제공되는 정보에 동등하게 접근할 수 있도록 보장한다.2008년 4월 11일부터 시행된 장애인 차별 금지 및 권리 구제 등에 관한 법률에 의거해 현재 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 강제성이 부여되었음2021년

1969년, 미 국방성에서 진행했던 아루파넷 프로젝트이 프로젝트는 냉전시대에 핵전쟁을 대비하는 통신망 구축을 위해 추진짜잔 ! IP기반의 네트워크가 탄생미리 할당된 전용선 사용즉시성이 떨어짐이를 보완해서 나온 것이 패킷 교환 방식!패킷이란? 데이터를 잘게 쪼갠 단위패킷

네트워크 표준규격이다.네트워크게 표준규격이 왜 필요한가?표준규격이 없다면, 실제 업계 표준은 TCP/IP 4 계층에 가깝다.

하이퍼텍스트 전송 프로토콜(HTTP)HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 서버가 클라의 상태를 보존 하지 않음상태가 유지안되는데 어떻게 서버가 요청을 처리하냐고?클라가 상태를 유지하면된다! 캐시를 이용해서! ( 캐시는 뒤에

데이터나 값을 미리 복사해 놓는 임시 장소동일 데이터 요청시 빠름클라가 서버에 데이터를 요청할 때, 동일한 요청일 경우가 있다.이런 경우 같은 데이터를 다시 다운로드 하지 않고, 브라우저의 웹 캐시로 저장하여 빠르게 불러올 수 있음!개인/공통 데이터에 따라 개인/프록

특징 : 해커가 작성한 악의적 SQL쿼리문 을 서버로 전송=> DB에 접근 => DB변경 및 사용자 정보 유출 위험대응방안 : (1) 입력값 검증 (2) Prepared Statement 구문 사용 (3) Error Message 노출 금지특징 : 해커가 웹 사

사용자에게 전달할 파일을 묶어주는 과정여러개의 파일을 하나의 파일로 합쳐줌HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고이를 하나의 묶음으로 조합해 번들링하는 도구웹팩 외에도 parcel, rollup 등의 다른 번들러들도 있다.webpack은 왜 하는가

디렉토리 생성npm init=> init 후 package.json이 나오면 성공!파일 생성 및 연결3-1) index.html3-2) style.css3-3) main.js웹팩 설치하기=> node_module 생기면 성공!웹팩 config 파일 작성번들링하기npm

코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미테스트코드 작성-> 실제코드 작성-> 리팩토링 수행의 과정 반복Write Failing Test: 실패하는 테스트 코

1. HTML, CSS 코드 최적화 TML 파일은 DOM 트리를, CSS 파일은 CSSOM 트리를 만듬 랜더링시 두 트리를 결합 이 두 트리 중에서 하나라도 변경되면 리렌더링을 유발 이때 트리의 크기가 크고 복잡할수록 더 많은 계산이 필요하기 때문에 리렌더링에 소모

Tree Shaking이란? JavaScript 트리쉐이킹 1. 필요한 모듈만 import 하기 2. Babelrc 파일 설정하기 3. sideEffects 설정하기 4. ES6 문법을 사용하는 모듈 사용하기

사이트를 검사하여 성능 측정을 할 수 있는 도구구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있음검사할 페이지의 url을 Lighthous

state로 데이터 바인딩만 할 줄 알았지..버튼에 붙여서 스타일 변경하는 것도 가능하다!!codesandboxstatero-seutail-byeongyeonghagi-npjmop?fontsize=14&hidenavigation=1&theme=darkApp.js (부모

프로젝트의 코드를 분석하다가백틱의 향연속에서 나는 정신을 차리지 못하였다.동적인 값을 주는건 알겠는데...링크 주소에 백틱에 중괄호 들어가버리고 이래버리니까어질어질JSX랑 백틱이랑 템프릿리터럴이랑 분간이 안되기 시작개발 팀장님이 넘겨준 링크(https://ww

표현식은 값으로 평가될 수 있는 문이다.리터럴 표현식10'Hello'식별자 표현식sum (선언이 이미 존재한다고 가정, 변수명 )person.name (객체에 접근)arr0 (배열에 접근)연산자 표현식10+20sum = 30sum !== 10리터럴 사용 : 값을 사용하