개발 계발

[TIL] HTML 신기한 태그

HTML 신박한 태그!! 1. 1줄로 진행률 표시줄을 제공 max,value 속성이 있다 두개만 지정해주면 나머지 작업은 브라우저가 알아서 해준다. css로 추가 커스터 마이징이 가능하다. 자바스크립트로 동적 값 설정해서 다양하게 쓸 수 있다. progress[value] ::-webkit-progress-bar{ background-color: whitesmoke; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } #progress[value]{ appearance: none; border-radius: 15px; overflow: hidden; position : relative; display: flex; align-items: center; } #progr..

[TIL] 인증 & 인가

인증, 인가 인증(Authentication) 인증은 왜 필요한가? 우리 서비스를 누가 쓰는지, 어떻게 사용하는지, 추적이 가능하도록 인증에 필요한 것은 아이디, 이메일주소, 비밀번호 등 -> 가장 중요한 것은 비밀번호(개인 정보로써 다른 사람이 알 수 없도록 관리) 비밀번호를 어떻게 관리해야하는가 법규상의 강제 - 법으로 비밀번호, 바이오정보, 주민등록번호 등과 같은 주요 개인정보는 암호화되도록 조치를 취해야한다. 데이터베이스에 저장 시 개인 정보를 해싱하여 복원할 수 없도록 함. 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화(HTTPS) 암호화는 어떻게 하나? 단방향 해쉬(one-way hash function) 단방향 해쉬함수는 암호학적 용도로 사용 원본 메시지를 변환하여 암호화된 메시..

[TIL] 자바스크립트 개념 정리 ver1

자바스크립트 deep dive 간단 요약 ver1 변수 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 -> 값의 위치를 가리키는 상징적인 이름(메모리에 값을 저장할 때는 값 자제를 저장하는 것이 아니라 이진수로 저장) 메모리 - 데이터를 저장할 수 있는 메모리 셀의 집합체 식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(변수 이름) 변수 선언 - 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것 변수의 초기화 - 변수가 선언된 이후 최초로 값을 할당하는 것(변수 선언후 값을 할당하지 않으면 undefined라는 값이 암묵적으로 할당되어 초기화됨) 변수 호이..

[TIL] 깃허브 프로젝트 초기 세팅

팀 프로젝트 순서 프로젝트 초기 생성 한명이 프로젝트 생성 npx create-react-app 프로젝트명 필요한 라이브러리 설치 (dom, sass, router 등) git add . git commit -m ‘메시지’ 깃허브에서 레파지토리 만들기 -> 원격 레파지토리(비어있음)는 만들어진 상태 -> 원격 저장소와 로컬을 연결해야 함 git remote add origin 레파지토리주소 git push origin master gitignore 사용해서 node.modules는 올리지 않는다 원격저장소 로컬과 연결하기 git clone 레파지토리 주소 필요한 패키지를 다운 받아야 하므로(package.json에 설정되어있는 패키지) git install 나의 브랜치 생성후 작업 하기(마스터 브랜치에서..

[TIL] 리액트 컴포넌트의 key

리액트 컴포넌트에서의 Key 📌 Key란? 리액트에서 key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별(어떤 컴포넌트인지)하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.(배열 내부! / 배열이 아닌 항목에 대해서는 지정할 필요가 없다) key는 리스트의 다른 항목들 사이 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋으며 인덱스를 사용하는 것은 권장하지 않는다. const manList = [ { id: 1, name: 'gil-dong' }, { id: 2, name: 'gang-dong' }, { id: 3, name: 'steve' }, { id: 4, name: &#3..

[TIL] HTTP ver.1

📌 HTTP란? 하이퍼 텍스트를 빠르게 교환하기 위한 프로토콜의 일종으로, 서버와 클라이언트 사이에서 어떻게 메시지를 교환할지를 정해놓은 규칙 HyperText - 문서와 문서가 링크로 연결되어 있음을 뜻함 Transfer - HTML로 만든 웹페이지 문서(파일)을 보낸다 Protocol - 컴퓨터끼리 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속 쉽게 생각하면 웹에서 통신을 할 때 어떤 형식으로 통신을 하자고 정해놓은 약속 📌 HTTP 특징 connectionless - http 통신은 리소스 낭비를 피하기 위해 연결을 유지하지 않는 것을 기본 동작으로 가진다. stateless - Http 개별 통신은 모두 독립적이어서, 과거의 HTTP 통신의 결과(상태)를 보존하지 않는다. 매 ..

[TIL] Git 기초

📌 깃이란? git - 로컬에서 관리되는 분산 버전 관리 시스템(VSC), 소스코드 수정에 따른 버전을 관리해주는 시스템 github - 클라우드 방식으로 관리되는 분산 버전 관리 시스템(VSC), 소스코드 수정에 따른 버전을 관리해주는 시스템 간단히 보자면 git은 로컬(본인 컴퓨터)에서 버전 관리 시스템을 운영하는 방식이고 github는 깃허브에서 제공하는 클라우드 서버에서 버전관리리를 하는 방식이다. 📌 깃의 주요 개념 커밋(commit) : git에 파일을 추가하거나 변경 내용을 저장하는 작업 푸쉬(push) : github(원격저장소)에 파일을 추가하거나 변경 내용을 저장하는 작업 풀(pull) : github(원격저장소)에서 파일을 다운로드하는 작업 머지(merge) : 한 branch에서 완..

[TIL] 기초 리눅스

리눅스 1. 운영체제 운영체제란 사용자가 컴퓨터의 하드웨어를 쉽게 사용할 수 있도록 인터페이스를 제공하고 각종 하드웨어적인 자원과 소프트웨어적인 자원을 효율적으로 운영, 관리함으로써 사용자가 시스템을 이용하는데 편리함을 제공하는 소프트웨어이다. 대표적인 운영체제 : 윈도우, 맥, 리눅스 등 쉽게 생각하면 컴퓨터는 0과 1만 인식하기 때문에 사람의 말을 전달하기 위해 os를 통해 사람의 명령어를 컴퓨터가 알 수 있도록 바꿔서 실행. 즉 컴퓨터랑 사람이랑 대화를 할 수 있게 다리 역할을 한다. 커널과 쉘 커널(kernel) - 운영체제의 핵심으로서 프로세스(process) 관리, 메모리 관리, I/O 시스템 관리, 파일 시스템 관리 등을 수행. 쉘 (shell) - 사용자와 내부 커널 사이의 명령어를 해석해..

[TIL] 개발자 도구 Network

Network Network 해당 웹 사이트에서 통신하고 있는 모든 정보가 표시되는 곳 각 소스들을 불러올 때 속도, 요청, 응답을 확인 가능하며 네트워크 문제가 있을 시 비교/분석이 가능하다. (api 호출을 하였을 때 네트워크 탭을 통해서 제대로 호출,응답이 된 것인지 확인이 가능하다.) Network 탭 Filmstrip : 이미지 최상단에 위치한 그래프. 타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시되는 곳. Name : 통신하고 있는 파일의 이름 status : HTTP 응답이 제대로 되었는지의 상태(200 ok, 40X client error, 50X server error) type : 파일의 종류 size : 파일의 사이즈 time : 해당 파일이 로드되는데의 시간 initi..