전체 글 (28) 썸네일형 리스트형 Next.js 블로그 프로젝트 - YAML 문제 상황 --- title: '리엑트 강의 정리 1' subtitle: 'React props, jsx' date: '2022-05-29' category:'React, Node.js' --- 다음과 같이 mdx파일에 frontmatter를 작성하여 포스팅한다. [ { title: '리엑트 강의 정리 2', subtitle: 'React event, jsx', date: '2022-06-05', category: 'React' }, ... ] frontmatter은 추후 다음과 같은 배열 객체 형식으로 읽혀진다. ❗️나는 포스트 마다 두 개 이상의 category를 작성하여 중복이 없는 카테고리 배열을 받고 싶었다. 내가 생각했던 방법: 1. category:'React, Node.js' 쉼표로 카테고.. ubuntu linux root 암호 설정 계정 생성을 위해 다음과 같이 root 계정으로 전환하는 명령어를 작성했다. $ su - root 비밀 번호를 요구하길래 제일 처음으로 생성한 사용자 계정의 비밀번호를 입력했다. 그런데 무슨 일인지 계속해서 틀린 비밀번호라는 문구가 뜬다. 아무리 생각해봐도 우분투를 첨 다운로드 하고 셋팅을 할 때 root 비밀번호를 입력한 기억이 없다. 설정한 적이 없는데 어떻게 알고 작성하라는 것인가?? 너무나 혼란스러운 맘으로 검색을 해봤더니.. 다음과 같이 root 암호 초기 설정을 해줘야 한다고 한다. 머쓱. $ sudo passwd position: sticky에 관한 내용들 sticky 요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤(scroll)되는 부모요소 안에서 오프셋을 적용한다. div{ position:sticky; top:0; } 부모요소로부터 top 위치가 0 (혹은 뷰포트 기준) 위 div는 relative처럼 위치하다 주어진 영역을 만나면 (부모 범위 내에서)fixed처럼 화면상 고정 위치를 갖게된다. https://developer.mozilla.org/ko/docs/Web/CSS/position 문제상황 상단 Nav 부분에 sticky를 적용했으나 무슨일인지 화면에 fixed 되지 않았다. 단순하게 sticky를 지정하기만 하면 작동할 것이라는 내 오해 때문에 생긴 일이였다. sticky를 잘 적용하려면 다음과 같은 사항을 염두에 두고 사용해야한다. .. Next.js 블로그 수정해야 할 부분들 코딩을 배우고 나서 첫 프로젝트로 next.js 정적 블로그를 만들었다. 지난 5월 나의 실력 미달과 짧은 데드라인 탓에 미완인 상태로 급하게 마무리 지어 vercel 배포했다. 배포 이후 완성하지 못했던 부분들을 구현하려 시도했지만 실패했고 나중에 조금씩 수정하자는 마음을 갖고 일단 계속해서 블로그에 포스팅을 작성했었다. 아무래도 부족한 점 투성이인 블로그 탓에 사용하는데에 불편함이 꽤나 있었다. 그래도 만든 프로젝트니 글을 쓴다면 반드시 이곳에 써야한다는 압박감도 느껴져 점점 블로그에 손이 잘 안 갔던 것 같다.(한동안 공부한 내용을 개인 노션에 정리했다.) 연말이 곧 다가오는데 그때까지 방치해서는 안된다는 생각이 들어서 시간이 좀 걸리더라도 천천히 꾸준히 수정해서 완성해보자는 다짐을 하게되었다. 프.. DAY 3 : 004-010 004 가로세로 1cm 프로세서 칩 전자 회로는 기본 소자들이 모여서 만들어진다. 가장 중요한 소자는 논리 게이트 하나 혹은 두개의 입력값으로 단일 출력 값 회로 소자 중 가장 핵심 부분=트랜지스터 에니악의 진공관은 논리 게이트이다. 논리 게이트는 직접회로 상에서 만들어지고 이 직접회로를 칩, 마이크로 칩이라고 부름 005 무어의 법칙 무어 왈 기술이 향상됨에 딸 일정한 크기의 집적회로에 들어갈 수 있는 트랜지스터는 대략 2 년 마다 두배 따라서 미래에는 말도 안되는 속도로 증가할 것임 => 60년 정도는 이 법칙이 맞는 듯 했으나 현재는 아니다. 이유 칩이 너무 빨라져 열을 너무 많이 발생 시킴 개별 코어의 실행 속도가 빨라지기 보다는 장착 가능한 코어의 개수가 늘면서 성능이 향상되는 추세임 006 정.. react-redux 강의: 생활코딩(2022) react redux 설치 npm install redux react-redux store 생성 import 'redux' import{ createStore } from 'redux'; const store = createStore(reducer); 반드시 reducer 만들어줘야함 store 안에 있는 state 변경 return 값이 새로운 값 action 값바꾸기 function reducer(currentState, action) { if(currentState === undefined) { return{ number: 1, //초기값 }; } const newState = {...currentState}; return newState //원본은 바뀌지 않는다. } import'react-red.. 타입스크립트: 유틸리티 타입 Partial 모든 속성을 ? 선택적으로 만들어줌 Partial interface INewType { name?: string, age?: number } 와 같은 효과 Required 반대. 위와 같은 속성을 필수로 변경(?를 없앰) Required Readonly type의 모든 속성을 읽기 전용으로 만듦 Readonly Record key를 속성으로 type을 그 속성 값의 타입으로 type TName = 'neo' | 'lewis'; const developers: Record = { neo: 12, lewis: 13 }; 같은 효과 interface INewType { neo: number, lewis: number } Pick type에서 key로 속성 선택 Pick interface IUse.. 타입스크립트: 모듈 외부 자바스크립트 모듈을 타입스크립트로 가져올 때 lodash를 가져온다고 가정 검색 $ npm info @types/모듈이름 설치 $ npm i -D @types/lodash main.ts // main.ts import * as _ from 'lodash'; console.log(_.camelCase('import lodash module')); console.log(_.snakeCase('import lodash module')); console.log(_.kebabCase('import lodash module')); $ npx ts-node main.ts # importLodashModule # import_lodash_module # import-lodash-module 정상작동 확인 - 타입.. 이전 1 2 3 4 다음
