본문 바로가기
웹 동작 원리 (SPA, CSR, SSR) 2020. 5. 14. SPA는 웹 개발을 하다보면 한 번쯤 보는 단어이다. SPA란 Single Page Application의 약자로, 단 하나의 HTML 문서로만 돌아가는 웹페이지로 사용자의 요청(request)에 따라 내용이 동적(dynamic)으로 바뀐다. 더 정확한 이해를 위해 정적인 사이트와 동적인 사이트에 대해 알아보자. 정적인 사이트 (Static Website) 동적인 사이트 (Dynamic Website) 서버에 미리 저장된 파일(HTML, CSS, JavaScript 등)이 그대로 전달되는 사이트 서버에 있는 데이터를 가공처리 후 전달되는 사이트 항상 같은 내용을 보여줌 실시간으로 데이터가 변경됨 ex. 회사 홈페이지 ex. Youtube 추천 영상 예전에는 대부분 정적인 사이트였지만, 요새 데이터가 점점..
Git & GitHub (4) - rebase 2020. 5. 12. 같이 협업하는 사람이 몇 없다면 굳이 rebase를 쓰지 않아도 되지만, 팀 단위가 몇 백명 이상이 됐을 때 각자 commit을 2-3개만 날려도 검토해야 할 것이 수백개로 늘어나도 merge 할 때마다 commit이 새로 쌓인다. 따라서 git의 history를 깨끗하게 사용하기 위해 rebase가 필요하다. rebase ㅁ base: 기초, 기본 ㅁ re-base: 기초를 다시 세우다 => 현재 내 branch를 master와 동일시 하고(같은 base 사용), commit을 하나로 합치는 작업이다. 단점이 있다면 conflict가 엄청 많이 난다. 각 commit 마다 생기는 conflict를 단계적으로 해결해야 하고, 잘 못하다간 내가 썼던 코드가 통째로 없어져 버릴 수 있으니 충분히 숙련 후 사..
Git & GitHub (3) - branch 2020. 5. 1. git remote add origin https://github.com/계정/repo 브랜치 관리는 git에서 필수이다. 만들 것이 있다면 해당 브랜치를 새로 만들고, push 후 merge가 끝났다면 해당 브랜치는 삭제하고 다시 새로 브랜치를 생성하여 사용하는 것이 좋다. Git에서는 local 브랜치와 remote 브랜치로 나뉠 수 있다. 사용이 완료된 브랜치는 삭제 할 때 두 가지 브랜치 모두 삭제하는 것이 혼선을 방지할 수 있다. 브랜치 생성 git checkout feature/브랜치명 브랜치 삭제 git branch --delete feature/브랜치명 local 브랜치를 삭제하고, remote 브랜치를 삭제하기 위해 한번 push해 준다. git push origin :feature/브랜..
데이터 자료 구조 (5) - Stack & Queue 2020. 4. 20. Stack과 Queue는 비슷한 구조이지만, 자료를 읽는 순서가 다르다. Stack Queue 구조 LIFO(Last In First Out) FIFO(First In First Out) 설명 마지막으로 저장한 데이터가 처음으로 읽힘 처음으로 저장한 데이터가 처음으로 읽힘 메소드 push, pop enqueue, dequeue 유즈케이스 함수 호출 기록을 stack으로 저장, 웹브라우저 방문기록(뒤로가기) 및 실행취소 미로찾기 알고리즘 맛집 예약, 티케팅 등의 예약 시스템 OS 프로세스 스케쥴링 시스템(priority queue) 프린터 인쇄 대기목록
자료 구조(Data Structure) (4) - Dictionary / HashMap / HashTable 2020. 4. 16. Dictionary(혹은 HashMap, HashTable)는 Key-Value 형태의 값을 저장할 수 있는 자료구조이다. 자바스크립트의 객체와 같다. Dictionary 특징 - Set처럼 특정 순서대로 데이터를 리턴하지 않음 - Key의 값이 중복될 수 없으며, 만약 중복된 key가 들어가면 먼저 있던 key와 value를 대체 - 수정 가능(mutable) Dictionary 구조 - Set과 비슷하게 key값의 해쉬값을 구한 후, 해쉬값에 속해있는 bucket에 값을 저장 - set과 마찬가지로 순서가 없고 중복된 key값은 허용되지 않음 Dictionary 사용 - 데이터베이스처럼 key-value를 묶어서 데이터를 표현해야 할 때 - 실제 데이터베이스에서 읽어들인 값을 dictionary로 변..
자료 구조(Data Structure) (3) - Set 2020. 4. 15. Set은 array나 list같은 순열 자료 구조이지만 순서가 존재하지 않는다. Set 특징 - 데이터를 비순차적(unordered)으로 저장할 수 있는 순열 자료구조(collection) - 삽입 순서대로 저장되지 않고, 특정한 순서를 기대할 수 없는 자료구조 - 수정 가능(mutable) - 동일한 값 여러 번 삽입 불가 (동일 값을 여러번 넣을 경우 하나의 값만 저장됨) - Fast Lookup(특정 값을 포함하고 있는지 확인)이 필요할 때 주로 사용 Set 구조 - Set 저장 순서 1. 저장할 요소의 값의 hash 값 구하기 2. 해시값에 해당하는 공간(bucket)에 값 저장 - 저장하고자 하는 값의 해시값에 해당하는 bucket에 값을 저장하기 때문에 순서가 없음 (index도 없음) - 해..
HTTP 기초 2020. 4. 8. HTTP(HyperText Transfer Protocol) - 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 프로토콜(통신 규약) - hypertext markup language - 웹 상에서 네트워크로 서버끼리 통신을 할 때, 어떠한 형식으로 서로 통신하자 규정해 놓은 것이 '통신 형식' 혹은 '통신 구조' - 프론트엔드 서버와 클라이언트 간의 통신, 백엔드와 프론트엔드 서버간의 통신에 사용 ㅁ HTTP 문자 이해하기 - HyperText(연결된 HTML), Transfer(전송), Protocol(규약) - 규약은 서로 약속or합의한 내용으로, 컴퓨터 끼리 의사소통을 하기 위해 만든 언어이다. - 사람은 목소리로 소통하듯이, 컴퓨터는 HTTP에서 정한 규약인 이진법(비트)로 서로 어떤 내용..
자료 구조(Data Structure) (2) - Array(배열) 2020. 4. 7. Array(배열)는 자바스크립트 카테고리에서 한 번 다룬적이 있다. (2020/03/03 - 배열(Array) (1) - 생성, 접근, length) 이번 글은 배열을 어떻게 쓰는지 보다, 배열의 특성, 장단점에 대해 다룰 것이다. (자료 구조에 저장하는 데이터는 일반적으로 요소(element)라 한다) Array 특징: "순차적(ordered)으로 데이터를 저장한는 자료 구조" - 주로 서로 연결된 데이터들을 순차적으로 저장할 때 사용 - 순서가 상관 없더라도, 서로 연결된 데이터들을 저장할때 사용 - 삽입(Insertion) 순서대로 저장 (즉, 새로 삽입되는 요소는 배열의 맨 끝에 위치한다) - 이미 생성된 것도 수정 가능(mutable) - 동일한 값 여러번 삽입 가능 - Multi-dimenti..

티스토리툴바