분류 전체보기

[TIL] npm install 시 --save, --save-dev 의 뜻

항상 써왔으면서 제대로 뜻을 몰랐다. 결론부터 말하자면 --save는 package.json의 dependencies에 모듈을 추가하겠다는 의미인데 npm5부터는 명시하지 않아도 추가가 된다고 한다. --save-dev는 개발 시에만 다운받는 dependency라는 걸 명시하는 역할이다. 즉 --save-dev로 다운받을 경우 배포할 때는 모듈을 다운받지 않게 된다. typescript 같은 모듈 다운받을 때 --save-dev 태그를 붙이면 된다. (타입 정의를 도와주기 위해서 개발할 때만 쓰이기 때문이다)

[TIL] 코드 이해하기...프젝 시작 전 각종 복습 벼락치기

자ㅎㅎ CSS!!!! 1. CSS @media - CSS에서 분기 처리 예시) 화면크기 줄이면 navbar 위치 바꾸고 이런 거 가능 2. CSS @layer - 우선순위 정해서 속성 적용,, 이런 거 가능 순위 위에다 써놓고 밑에 적용하면 위에 써놓은대로 적용되고, 위에다 안써놓으면 정의한 순서대로 우선순위 적용됨 (밑에쓴게 순위높음) 3. tailwind CSS @apply 4. CSS --속성 -- (두 개의 대시)는 CSS에서 사용되는 사용자 정의 속성을 나타내는 문법이다. 이를 CSS 변수로도 알려져 있습니다. 이러한 변수는 스타일 시트 내에서 값을 정의하고 참조할 수 있게 해준다. 예를 들어, --background는 사용자가 정의한 이름의 CSS 변수로 특정한 색상 값을 가지며, 나중에 스타..

[AWS] AWS IAM - 2

이 블로그는 유데미 "AWS Certified Solutions Architect Associate 시험합격!" 강의를 바탕으로 작성되었습니다. 목차 1. 사용자 정보 침해 방지 매커니즘 2. AWS에서 MFA 장치 옵션⭐️ 3. 유저들이 AWS 접근하는법 4. AWS CloudShell 5. IAM Roles 6. IAM 보안 도구들 7. IAM 가이드라인 1. 사용자 정보 침해 방지 매커니즘 1. 비밀번호 정책 정의 : 비밀번호가 강력할수록 계정의 보안이 철저해짐 정의방법 - 비밀번호 최소 길이 설정 - 특정 유형의 글자 사용 요구 (대문자 소문자, 숫자, non-alphanumeric chars(특수문자) 등) - IAM 사용자들의 비번 변경을 허용/금지 설정 - 사용자들 비번 만료시켜 바꾸도록 요..

[AWS] AWS IAM - 1

이 블로그는 유데미 "AWS Certified Solutions Architect Associate 시험합격!" 강의를 바탕으로 작성되었습니다. 목차 1. IAM⭐️ 2. IAM과 Permission 3. IAM policies 상속 (Inheritance)⭐️ 4. IAM Policies 구조 (JSON)⭐️ 1. IAM⭐️ - Identity and Access Management의 약자 - 사용자를 생성하고 그룹에 배치 -> 글로벌 서비스 (리전별 서비스 X)!! ex) 우리 Root account (계정을 생성할때만 사용됨. 그후에는 사용, 공유 안됨!) -> 대신 조직 내 User 생성. User들은 그룹으로 묶을수도 o ex) 사용자(User) A, B, C, D, E, F 중 A, B, C는..

[AWS] AWS 클라우드 개요

이 블로그는 유데미 "AWS Certified Solutions Architect Associate 시험합격!" 강의를 바탕으로 작성되었습니다. 목차 1. AWS 용도 2. AWS Regions 3. AWS Regions를 고를 때 고려 요소⭐️ 4. AWS Availability Zones (AZ) 5. AWS Points of Presence (Edge Locations, 전송 지점) 6. AWS Console 1. AWS 용도 1. 복잡하고 확장가능한 앱 만들기 2. 다양한 산업에 활용 (넷플릭스, 21세기폭스, 맥도날드 등) 3. 여러 기술적 용도 - IT 이전, 백업&저장공간, 빅데이터분석 - 웹사이트호스팅, 백엔드생성 - 게임 서버 2. AWS Regions - AWS는 전세계에 리전 있음 -..

[React] 프로젝트 최적화

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. Memoization으로 연산과정 최적화 2. React.memo로 컴포넌트에 리렌더 조건 걸기 3. useCallback으로 함수 전달 4. 기타 최적화 1. Memoization으로 연산과정 최적화 Memoization이란, 이미 계산해본 결과를 기억해뒀다가 동일한 계산을 시키면 기억해놨던 데이터를 바로 반환시키는 방법입니다. memoization을 이용해 일기데이터에서 내 기분의 비율을 분석해주는 기능을 넣어봅시다. 1. 분석 함수 추가 const getDiaryAnalysis = () => { console.log('일기 분석 시작'); const goodCount = data.filter((i..

[React] 일기장 프로젝트 2. 페이지 구현 - 수정, 상세화면

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. 수정페이지 2. 상세페이지 1. 수정페이지(/edit) 수정페이지는 일기 작성페이지와 거의 유사해서 만드는 과정도 간단합니다. 1. id 정보와 일기 데이터 가져오기 id는 App.js의 route에서 path variable로 설정한 후 useParams를 이용해 id 객체로 불러올 것입니다. 또 일기 데이터는 일기 작성화면에서 구현했듯 useContext를 이용해 가져올 것입니다. 1-1. Edit 컴포넌트 만들기 import { useNavigate } from 'react-router-dom'; const Edit = () => { const navigate = useNavigate(); retu..

[React] 일기장 프로젝트 3. 페이지 구현 - 작성화면

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. New.js 작성 2. DiaryEditor.js 3. 감정 선택 섹션 4. 오늘의 일기 작성 섹션 두 번째로 만들 화면은 새 일기 작성 화면입니다. 이전에 만들어뒀던 컴포넌트를 이용해 헤더, 날짜, 감정 선택 섹션, 제출까지 작업해보겠습니다. 또한, 일기 작성화면과 수정 화면이 유사하므로 새 컴포넌트를 만들어 내용을 옮기는 작업도 해보겠습니다. 1. New.js 작성 1. New.js에서 헤더와 뒤로가기 버튼 구현 import { useNavigate } from 'react-router-dom'; import MyHeader from '../components/MyHeader'; import MyBu..