1. 정규화의 개념과 이상 현상 이상 현상 : 불필요한 데이터 중복으로 인해 릴레이션에 대한 데이터 삽입, 수정, 삭제 연산을 수행할 때 발생할 수 있는 부작용 정규화 : 이상 현상을 제거하면서 데이터베이스를 올바르게 설계해 나가는 과정 이상현상의 종류 삽입 이상 : 새 데이터를 삽입하기 위해 불필요한 데이터도 함께 삽입해야 하는 문제 [예시] 이벤트에 참여하지 않았고 아이디가 "melon", 이름이 "성원용", 등급이 "gold"인 신규 고객의 데이터는 이벤트 참여 릴레이션에 삽입 불가 삽입하려면 실제로 참여하지 않은 임시 이벤트번호를 함께 삽입해야함 갱신 이상 : 중복 투플 중 일부만 변경하여 데이터가 불일치하게 되는 모순의 문제 [예시] 아이디가 "apple" 인 고객의 등급이 "gold" 에서 "..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/QnFM9/btrRSPTmjxi/es6CFQvbCzyuolSMnLPYrK/img.png)
1. 데이터베이스 설계 사용자의 다양한 요구 사항을 고려하여 데이터베이스를 생성하는 과정 2. 관계 데이터베이스의 대표 설계 방법 E-R 모델과 릴레이션 변환 규칙을 이용한 설계 정규화를 이용한 설계 : 요구사항분석 -> 개념적설계 -> 논리적설계 -> 물리적설계 -> 구현 설계 과정 중에 오류를 발견하여 변경이 필요하면 이전 단계로 되돌아가 설계 내용 변경 가능 3. 설계 1단계 : 요구 사항 분석 목적 사용자의 요구 사항을 수집하여 분석하고 개발할 데이터베이스의 용도 파악 결과물 요구 사항 명세서 주요 작업 데이터베이스를 실제로 사용할 주요 사용자의 범위 결정 사용자가 조직에서 수행하는 업무분석 면담, 설문조사, 업무 관련 분석 등의 방법을 이용해 요구사항 수집 수집된 요구 사항에 대하 분석 결과를 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/pO39W/btrRR9Sfkau/lYAaTglr9VikQjKMEiVcJ1/img.png)
프론트엔드 직무를 원한다면 절대 몰라서는 안되는 필수 CS 입니다. 많이많이 중요합니다! DOM : 문서 객체 모델 (The Document Object Model) HTML, XML 문서의 프로그래밍 인터페이스이다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라고 한다. # DOM 의 기능 1. HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree 라고 한다. 2. HTML 문서 내의 각 요소에 접근/수정 DOM 은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/emeSsW/btrRLKZXBxA/QW20EY4lkEYkcrZbbkwre1/img.png)
오늘은 SSR 과 CSR 의 차이에 대해서 알아보려고 한다. 실제 면접에서 받았던 질문이기도 하다. 1. SSR Server Side Rendering 의 약자로, 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 구동 방식은 서버에서 렌더링을 하여 완성된 HTML 파일을 로드해준다. 클라이언트에게 요청을 할때마다 각 상황에 맞는 HTML 을 넘겨주기 때문에 페이지가 여러개이다. - 장점 첫 페이지 로딩 속도가 CSR 에 비해 빠르다. 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링 하기때문에 초기 로딩 속도가 CSR 에 비해 빠르다. 검색엔진최적화(SEO)가 가능하다. JS 가 다운로드 되는동안 사용자가 무언가를 보고 있을 수 있다. - 단점 초기 로딩 이후 페..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ccFFtV/btrPhmTKFU8/wKjrVoeCsmsw2j5vexEMr1/img.png)
1. 기본 자료형 - 프로그램이 처리할 수 있는 모든것 : 자료 - 자료 형태에 따라 나뉘는것 : 자료형(숫자, 문자열, 불) - 외부에 작은 따음표, 내부에는 큰 따음표 사용 혹은 외부에 큰 따음표, 내부에는 작은 따음표 사용 'For example "Hi"' "For example 'Hi'" - 따음표를 문자 그대로 사용 하고 싶으면 이스케이프(\) 문자 사용 'For example \"Hi\"' -> 'For example "Hi"" "For example \'Hi'\" - 문자열 사이에 기호를 사용하여 문자열을 연결한 것 즉, 덧셈 기호를 문자열 연결 연산자 - 문자열 내부 문자 하나를 선택 할땐 문자 선택 연산자 문자열[숫자] - 문자열 내부의 문자 갯수 : 문자열 길이 문자열.length - ..
Figma 완성된 디자인을 이용하여, html + css 위주로 작업하여 WebApp제작 1. css에서 선언 할 때🙌 .클래스명 #아이디명 2. css 이름 규약✌ _ 불가, - 가능 number1, number2 처럼 추상적인것보다는 내가 알기쉬운 명으로 정하기 ex) main-number 3. web-app 에서 사용할때는 float를 사용안함🚫 float:right, float:left 등을 사용하니 반응형 웹사이트 답지 않게 사이즈가 깨지는 현상 발생 따라서, float 를 사용하지않고 display:flex 로 margin 이나 padding 값으로 조절 4. display , position 은 잘알고가자!🔔 display:inline-block; -> 가로로 텍스트나 이미지 붙일경우 사용 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/B8kyB/btrzzqKS4ji/v7BRu0adIGRvxEqSi4Ni1K/img.png)
1. 유닉스 편집기 유닉스에서는 편집기를 이용해 파일 작성 및 수정 가능함 주로 행 단위 편집기/ 화면 단위 편집기 (gedit,gvim) 를 사용 유닉스 편집기의 종류 행 단위 편집기 ed : 유닉스 초기에 사용 ex : 단독으로 사용하기보단 vi와 연결해 사용 화면 단위 편집기 윈도우처럼 전체 내용을 화면 단위로 보면서 커서를 이동하며 작업 (emacs, vi) 모드형과 비모드형 - 비모드형 입력한 모든 키는 데이터로 간주됨 명령은 특수키 (Ctrl,, Alt등) 와 일반키의 조합으로 구성 예 : 아래 한글, 워드 - 모드형 명령모드에서 입력한 키는 명령으로 간주 입력모드에서 입력한 키는 데이터로 간주 모드를 바꾸기 위한 특수 키가 있음 (예 : ESC) vim은 모드형 비모드형에서의 키보드의 a는 ..