본문 바로가기
반응형

분류 전체보기299

[Next.js] 컴포넌트에 props로 useState값 넘기기 컴포넌트를 재사용하기 위해 분리시켜 props를 넘겨 제어할 때 useState를 props 넘겨줘야 하는 상황이 온다. * useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예를 들어 아래와 간은 DatePicker UI를 컴포넌트방식으로 만든다고 하자. 예제 코드는 다음과 같다. 1. 이번달의 첫 날과 마지막 날을 선언해주고 각각의 DatePicker로 전달할 useState값 또한 초기화 한다. const firstFormat = dayjs().startOf("month").toDate(); const lastFormat = dayjs().endOf("month").toDate(); const [selectedDate1,.. 2023. 5. 15.
[Linux] ssh 접속 시 Permission denied 현상 해결 방법 ssh 접속 시 Permission denied 현상 해결 방법 AWS의 EC2 혹은리눅스 기반 서버에서 *.pem파일을 이용해 ssh 접속시 Permission denied 현상 발생시 chmod 400 [파일이름].pem 위 명령어로 *.pem파일의 권한을 읽기만 가능하게 수정해주면 Permission denied 현상이 사라진다 2023. 5. 11.
[Linux] 동작 중인 특정 포트 죽이기 동작 중인 특정 포트의 PID를 찾기, PID를 사용하여 특정 포트 kill하기 개발자들끼리 여러 개발포트로 개발하는 도중에 서버에 문제가 생겨 재접속을 하는 특정 경우 돌아가던 포트는 그대로 돌아가 서버에 다시 접속하여 본인의 포트를 죽이고 다시 실행해야하는 경우가 존재한다. 1. 아래 명령어로 본인의 포트번호에 해당하는 PID를 찾는다. lsof -i:[포트번호] 2. 출력되는 PID를 확인하여 아래 명령어로 해당 포트를 죽인다. kill -9 [PID] 3. 아래 명령어를 재실행하면 해당 포트가 사라진것을 알 수 있다. lsof -i:[포트번호] 4. 이후 다시 front-end와 back-end서버를 본인의 포트로 실행하면 된다. 본인의 포트번호에 해당하는 PID를 찾는 코드 lsof -i:190.. 2023. 5. 10.
[SW 용어] Boehm's law (Boehm의 법칙) Barry Boehm의 소프트웨어 엔지니어링 제2법칙(1980) - 소프트웨어 프로젝트 중에 버그를 찾아 수정하는 비용은 시간이 지날수록 높아진다. - 초기 개발 단계에서 결함을 발견하면 많은 시간과 비용을 절약할 수 있지만 나중 단계에서 발견하면 비용이 많이 든다. - 요구사항 수정이 sw를 수정하는 것보다 쉽다. - 요구사항 수집, 분석과 디자인, 개발, 테스트, 배포 순서로 문제(Error)를 찾았을 때 고치는 비용(Cost)가 올라간다. * 참고자료 2023. 5. 9.
[SW 용어] 파레토의 법칙 (Pareto principle) 파레토 법칙 (Pareto principle) 파레토 법칙이란 80:20 법칙이라고도 불리는데, 80%의 결과가 20%의 원인에 의해 발생한다는 것이다. 경제학자 빌프레도 파레토가 이탈리아에서 20% 사람들이 80% 부를 소유하고 있는 현상을 관찰하면서 유래되었다. - 80대 20 법칙 - 전체 결과의 80%가 전체 원인의 20%에서 일어나는 현상을 가리키는 말이다. - 소프트웨어 테스트 원리 중 20%의 모듈에서 80%의 결함이 발견된다는 '결합 집중'의 원리이다. 2023. 5. 8.
[Next.js] CSR(Client Side Rendering), SSR(Server Side Rendering) 클라이언트사이드렌더링_CSR(Client Side Rendering), 서버사이드렌더링_SSR(Server Side Rendering) CSR Client Side Rendering의 약자이다. 렌더링이 클라이언트 사이드에서 일어난다. 1. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 2. 클라이언트는 그것을 받아 렌더링을 시작한다. CSR 순서 1. User가 Website에 페이지에 대한 요청을 보낸다. 2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트 사이드로 보낸다. CDN : aws의 cloudflare와 같이 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식이다. 3. 클라이언트는 HTML과 JavaScript를 다운로드 받는다. (.. 2023. 5. 7.
[서버용어] 가상화(Virtualization) 용어 정리 가상머신(VM - Virtual Machine), 가상화(Virtualization), 컴퓨터 가상화(computer virtualization), 분산처리기술(distributed computing), 네트워크 가상화(network virtualization) 1. 가상머신 - 물리적 컴퓨터의 디지털 버전으로 가상 머신 소프트웨어는 프로그램 및 운영체제를 실행하고, 데이터를 저장하고, 네트워크에 연결하는 등 기타 컴퓨팅 기능을 수행할 수 있는 것을 말한다. - 컴퓨터상에 가상으로 컴퓨터를 구동시키는 것으로 물리적인 하드웨어를 가상화하여, 하나의 물리적 하드웨어 상에서 여러 컴퓨터가 구동되는 것처럼 에뮬레이션 하는 것을 칭하는 용어이다. - 에뮬레이션(Emulation)이란 한 컴퓨터가 다른 컴퓨터처럼 .. 2023. 5. 3.
[js, ts] number타입 전화번호 배열 string타입으로 바꾸기(' - '삽입) JavaScript에서 number타입 전화번호 string타입 배열 전화번호로 바꾸기 - map과 정규식을 사용하여 변환한다. 코드 const holidays = [ 20230101, 20230121, 20230122, 20230123, 20230124, 20230301, 20230505, 20230527, 20230529, 20230606, 20230815, 20230928, 20230929, 20230930, 20231003, 20231009, 20231225, ]; const transformHolidays = (number: Number[]) => { let newArray: string[] = []; number.map((e, i) => { newArray[i] = e .toString() ... 2023. 5. 2.
[js] e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation() JavaScript에서 Event의 중지 관련 e.preventDefault() VS e.stopPropagation() VS e.stopImmediatePropagation() Event.preventDefault() 1. Event 인터페이스의 preventDefault()메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 2. preventDefault()를 호출한 이벤트도 preventDefault이벤트를 받는 요소 중 하나에서 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파된다. 3. cancelable: true 없이 Event.. 2023. 4. 28.
[js, Next.js] <input> 한글 입력 후 엔터 시 중복 이벤트 발생 문제 JavaScript, Next.js에서 한글 입력 후 엔터 시 중복 이벤트 발생 문제가 생기는 이유 js혹은 Next.js의 태그에서 숫자 혹은 알파벳 입력 후 엔터 시 이벤트 발생 순서 (onKeyDown, onKeyPress, onKeyUp) - 숫자 혹은 알파벳 입력시 발생 순서: keydown => keypress => keyup - 엔터 입력시 이벤트 발생 순서: keydown => keypress => keyup * 한글 입력시 한글 입력시 발생 순서: keydown => keyup 엔터 입력시 이벤트 발생 순서: keydown => keyup => keydown => keypress => keyup 빨간색 글씨 keyup과 keydown에서 isComposing속성이 true(keyCode .. 2023. 4. 27.
반응형

티스토리툴바