웹개발 메모장(44)
-
워드 클라우드를 사용한 키워드 찾기
원티드 킥오프에서 미션을 나온 워드 클라우드 사용한 키워드 뽑기 내가 찾은 키워드는 아래 이미지와 같다. Free online word cloud generator and tag cloud creator Wordclouds.com is a free online word cloud generator and tag cloud generator, similar to Wordle. Create your own word clouds and tag clouds. Paste text or upload documents and select shape, colors and font to create your own word cloud. Wordclouds.com can www.wordclouds.com 워드 클라우드 사..
2023.04.11 -
Redux 상태관리
상태관리 라이브러리의 필요성 Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다. 기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해줬습니다. 이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도 오로지 상태를 전달해주기 위해서props를 받아야 했고, 이를 props drilling이라고 합니다. 상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 이 props drilling 문제를 해결해줍니다. 전역 상태 저장소가 있다면 props를 내려줄 필요없이 바로 이 저장소에 접근해서 필요한 상태 를 가져다 사용하면 되기 때문입니다. Redux의 주요 개념들과 연결 관계 Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있..
2023.04.06 -
Semantic Elements in HTML
Semantic Elements? 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다. 비의미적 요소 의 예 : 및 - 내용에 대해 아무 것도 알려주지 않는다. 의미론적 요소 의 예 : , 및 - 내용을 명확하게 정의한다. Semantic Elements in HTML 많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 와 같은 HTML 코드가 포함되어 있습니다. HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 시맨틱 요소가 있습니다. 1. 기계와 사람의 일치 Semantic 하게 마크업을 한다는 것은 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업한다는 것이다. 좋은 정보구조는 해당 문서를 사람과 기계가 동일하게 이해하도록 도와준다. 사람..
2023.04.06 -
React의 state와 props
State와 Props state는 컴포넌트 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다. const 배열 = useState (데이터 초기값); 배열[0]: 데이터 초기값이 들어간 변수 배열[1]: 데이터를 수정할 수 있는 Set 함수 const [변수명, Set함수명] = useState (데이터 초기값); useState를 사용하여 할당받은 변수는 불변값(Immutable)이다. 따라서 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Set 함수를 사용한다. const App = () => { const [count, setCount] = useState(0); return setCount(count + 1)}>+ ..
2023.04.05 -
순수함수(pure function)
순수함수란? 사이드 이펙트가 없어야 합니다. 몇번을 호출해도 반환 값이 동일해야 합니다. 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다. 현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다. 순수함수의 장점 유닛테스트에 용이합니다. 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다. 신뢰할 수 있습니다. 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다. SRP(Single Responsibility Principal) 를 지키기 쉽습니다. 함수를 순수하게 구성하다보면, 함수가 짧게 작성되고 하나의 역할만할 확..
2023.04.05 -
Cookie의 MaxAge, Expires 옵션에 대해서
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에 접속..
2023.04.04