Frontend

자료구조와 알고리즘 1. 뜻 1) 자료구조 : 여러 데이터들의 묶음을 저장하고, 사용하는 방법을 정의한 것 - 메모리를 효율적으로 사용하고 빠르게 안정적으로 데이터를 처리하는 것이 목표 2) 알고리즘 : 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것 - 특정 문제를 효율적이고 빠르게 해결하는 것이 목표 자료구조의 종류 1. 단순 구조 - 정수, 실수, 문자열, 논리 2. 선형 구조 : 자료들이 선형(한 원소뒤엔 하나의 원소)으로 나열되어 있는 구조 - 배열, 연결리스트, 스택, 큐 3. 비선형 구조 : 원소 간 다대다 관계를 가지는 구조(계층형, 망형) - 트리, 그래프 시간 복잡도 [Algorithm] 시간복잡도 이해하기 (tistory.com) [Algorithm] 시간복잡도 이해하기 1. ..

네트워크 기초 1. 웹페이지 로딩 과정 1) URL을 해석한다 (scheme://:@;/) 2) DNS를 조회한다 DNS는 도메인과 IP 주소를 서로 변환 DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조 (있다면 ip를 반환함) DNS는 보통 통신사(ISP)에서 제공하는 것을 사용 DNS을 운영하는 서버를 보통 Name Server라고 부름 3) 해당 IP가 존재하는 서버로 이동 4) ARP를 이용하여 MAC 주소로 변환 * 네트워크 내 ARP를 브로드캐스팅 시 해당 IP 주소를 가진 기기가 MAC 주소 반환 * IP주소 - 논리적 주소, MAC 주소 - 물리적 주소 5) TCP 통신을 통해 Socket을 연다 네트워크를 통해 해당 기기로 패킷을 전달 3 way handshake로 연..

JavaScript와 프론트엔드 개발 1. JavaScript 탄생 배경 최초의 브라우저 : Tim Berners-Lee 에 의해 개발 최초의 상용 브라우저 : 네비게이터 - Brendan Eich에 의해 Mocha라는 이름의 언어 개발 -> LiveScirpt -> JavaScript 2. JavaScript로 무엇을 할 수 있을까? 서버 개발, 앱 개발, 프론트엔드 개발 3. 브라우저 동작 원리 1) 통신 : 서버와의 통신 - 브라우저가 요청을 보내면 서버가 응답함 2) 렌더링 : Dom(트리구조)이란 객체를 화면에 그리는 것 3) 스크립트 실행 : 자바스립트 실행 4. 프론트엔드 개발자의 역할 1) 역할 - 브라우저에서 동작하는 UI를 개발하는 것 - 디자이너와 백엔드 사이 일정을 잘 조율하는 것이..

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Redux 1) 개념 : 크로스 컴포넌트, 앱 와이드 상태를 위한 상태 관리 시스템 - 우리의 상태를 변경하고 화면에 표기하는 데이터를 관리하도록 도와주는 역할 2) State의 종류 ⓐ 로컬 state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 👉 useState를 이용하거나 더 복잡하다면 useReducer을 사용하여 관리할수 있음 ⓑ Cross-componen..

요새 프론트엔드가 js로 코딩테스트 보는게 많아져서 js로 여러 알고리즘 문제를 풀고있는데... 알고리즘 문제를 풀다보면 배열을 초기화 해놓고 그 배열을 이용하는 경우가 많다. 그래서 js도 배열을 초기화하는 메서드 fill 이 있길래 그걸 주로 이용했엇는데 2차원 배열에선 절대 사용하면 안되는걸알았다... let arr = new Array(4).fill([]); for(let i=0;i

1. 클래스 컴포넌트 - 과거에 많이 사용한 컴포넌트 선언 방식 * React 16.8이전에는 사이드 이펙트(훅)를 다루기 위해서는 클래스 기반 컴포넌트를 사용했어야 했다. // 클래스 class User extends Component { render(){ return {this.props.name}; } } // 함수형 const User = (props) => { return {props.name}; }; - props는 this예약어를 사용해야하고, Component를 상속받아야 한다. - render() 를 사용한다. class Users extends Component { constructor(){ super(); this.state = { // 상태 조각과는 상관없이 state는 객체가 된다..

css를 작성하다보면 왜인지 모르게 안잡히는 여백들이 몇가지 있다. 1. flex로 레이아웃 설정 안했을 경우! - div사이에 font-size만큼의 빈 여백이 생긴다. font-size : 0 해주면 해결은 된다. 2. 전체 요소 중 이미지들 크기 확인해보기 ! 이미지 크기 width랑 hight를 둘다 설정해 줘야 한다. width만 설정했을때 height도 줄어든것처럼 보이는데 원인을 찾다보면 이미지가 원래 height만큼 차지하고있다... 일단 내가 겪었던 문제의 해결방법은 위와 같은데, 혹시나 도저히 모르겠다 !!! 하는 분들을 위해 노가다 방법이있다. 모든 요소를 일단 주석처리하고.. 하나하나 주석 풀어보면서 뭐가 여백을 만들어내는지 찾아내는 것이다. 보통 하다보면 뭐땜에 이상한 여백이 생기..

1. JSON(javascirpt object notation) 1) 정의 : 자바스크립트 객체 표기법 ! 2) 특징 - 서버와 웹페이지간의 데이터를 주고받을 때 많이 사용 - key와 value의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷 - 예전에 쓰던 xml을 대체하여 만들어졌다.(xml을 굉장히 복잡하다 !) - 계층적인 구조를 가지며 간결하고 짧다 * xml과 json 비교 > xml : 엔드태그를 사용하여 데이터 표현 Izzy Siamese 6 yes no Izz138bod Colin Wilcox > json : 엔드태그가 필요없다 3) 구조 let people = [ {"firstName" : "길동", "lastName":"홍"}, {"firstName" : "순신", "l..

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Side Effect란? - 애플리케이션에서 일어나는 모든 것 - 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 - 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. - 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEff..