ksw_devlog

유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송합니다. 평문을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할 수 있지만 다이제스트로는 원본데이터를 구할 수 없어야 합니다. 이것을 단방향이라 합니다. 단방향 해시함수는 브루트포스 공격으로 쉽게 당할 수 있기 때문에 이를 보완하기 위해 입력된 다이제스트를 N번 반복해서 생성하는 것인 key stretching과 원문 패스워드에 임의의 문자열을 추가하여 해싱하는 것인 salting을 이용해 보안의 강도를 높힐 수 있습니다.

프로세스: 운영체제로부터 자원을 할당받은 작업의 단위. 스레드: 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위. 프로그램 → 프로세스 → 스레드 프로그램 → 프로세스 먼저 프로세스와 스레드에 대해 본격적으로 설명하기 전에 프로그램에 대해서 설명하고 가야 한다. 항상 프로그램이라는 단어를 들어왔고 써왔지만 프로그램에 대해 정의를 내려보라 하면 선뜻 입이 떨어지지 않을 것이다. 프로그램이라는 단어의 정의는 다음과 같다. 프로그램이란, 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태를 말한다. 이 정의도 무슨 소리인지 이해하기 힘들 수 있다. 지금부터 천천히 설명해보도록 하겠다. 메모리에 올라가 있지 않은: 아직 운영체제가 프로그램에게 독립적인 메모리 공간을 할당해주지 않았..

인코딩이란? Base64 인코딩에 대해 알아보기전에 먼저 인코딩이란게 무엇인지 간략하게 알아보자. 인코딩(encoding)은 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다. 동영상이나 이미지영역에서도 많이 사용되는 용어지만 우리는 Binary Data를 Text로 바꿔주는 Base64 인코딩에 대해서 알아봐야하기 때문에 이하는 생략하겠다. Base64 인코딩 Base64란 Binary Data를 Text로 바꾸는 Encoding(binary-to-text encoding schemes)의 하나로써 Binary Data를 Character set에 영향을 받지 않는 공통 ASCII 영역의 문자로만 이루어진..

데이터 처리 모델 데이터 처리 모델을 쉽게 표현하자면 데이터를 받는 방식이라고 할수 있습니다. 이 방식에는 동기식 처리와 비동기식 처리 모델이 존재합니다. 이 둘의 개념에 대해 알아보고 둘의 차이점을 알아보겠습니다. 💡동기(synchronous) 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말합니다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 사용자가 데이터를 서버에게 요청한다면 그 서버가 데이터 요청에 따른 응답을 사용자에게 다시 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야만합니다. ex) 브라우저를 실행시키는 시간이 약 10분이 소모된다고 가정했을시, 브라우저가 실행되는10분이라는 시간 동안 사용자는 컴퓨터💻의 다른 프로그램들을동작..

block요소는 사용가능한 최대 너비를가지며 높이는 내부 컨텐츠에 맞게 지정됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한 여러개의 block요소가 있을 때 수직으로 쌓이며, 프레임을 잡을 때 사용합니다. 반면 inline요소는 너비와 높이가 내부 컨텐츠 크기만큼 설정되며 임의로 지정할 수 없습니다. padding과 margin은 좌우에만 적용가능하며 여러개의 인라인 요소가 있을 때 수평으로 쌓입니다. 보통은 text나 img관련한 요소에 사용합니다. inline-block? 인라인 블록은 인라인 요소처럼 내부컨텐츠의 크기만큼 너비와 높이가 지정되고, 사용자 정의에 따라 원하는 크기로 지정할 수 있습니다. padding, margin은 블록..

li 요소는 목록 아이템(list item)을 보여주기 위한 요소입니다. 그래서 목록을 담는 ul 요소의 자식 요소여야 합니다. 화면 상으로는 아무런 문제가 없더라도 이렇게 li요소와 ul요소의 의미에 맞게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.

Redux는 전역 상태 관리 라이브러리 중에 하나입니다. 주요 개념에는 컴포넌트, Action, Reducer, Store 입니다. 어떤 방식으로 돌아가는지 설명하자면, 컴포넌트에서 전역 Store에 관리되고 있는 상태에서 변경을 하려 할 때 Reducer를 이용합니다. Reducer는 어떤 Action을 원하는지 확인하고 그에 따라 상태를 업데이트 해주는 함수입니다. 컴포넌트는 dispatch라는 함수를 통해 Reducer에 Action을 발송합니다. Reducer는 이 요청을 받고 내부에 있는 상태를 업데이트 해줍니다. 상태가 업데이트 된 후 이를 참조하고 있는 컴포넌트들에게 리렌더링을 해야 한다는 알림을 줍니다. 다른 상태관리 라이브러리로는 React-query가 있습니다. 이와 비교되는 점은 Re..

Semantic HTML은 웹 접근성, 검색엔진 최적화와 더불어 적절한 의미의 태그들을 사용하기 위해 필요합니다. 예를 들어 div나 span 태그만으로도 모든 마크업이 가능한데 의미가 없는 태그인 div와 span을 남용한다면, 시각적 정보 외의 메타데이터가 부족하여 기계에게 의미전달이 충분하게 되지 않습니다. 그래서 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업해야하고 이것이 Semantic HTML이 필요한 이유입니다. https://velog.io/@jujusnake/HTML-Semantic%ED%95%98%EA%B2%8C-%EC%9E%91%EC%84%B1%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 HTML : Semanti..