티스토리

코딩하는 집사

검색하기

블로그 홈

코딩하는 집사

cattaku.tistory.com/m

cattaku 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Apple SiliconChip (M1, M2, M3)에서 NVM으로 node 설치 시 오류 해결 m3 air 를 사고 초기 셋팅시 node20으로만 작업을 하다가 nvm 으로 14를 설치하려고 하니까 엄청난 양의 텍스트가 출력되면서 설치오류가 떴다. Apple SiliconChip 모델에서 NVM으로 14버전과 같은 낮은 버전 설치 시 설치 오류가 발생한다. homebrew를 이용해서 nvm 설치를 하였고, node 20 은 설치가 되어있는 상태에서 특정 버전 오류 시에는 아래와 같이 터미널을 Rosetta를 이용해서 열도록 설정하거나 터미널에서 아래 명령어를 실행 시 설치를 하면 해결된다.$ arch -x86_64 zshhomebrew를 이용해서 nvm을 설치 했다면 zshrc 파일에 아래 내용을 추가해주어야 한다.export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebr.. 공감수 0 댓글수 0 2024. 7. 8.
Mac-M1 NVM을 이용한 Nodejs 설치 mac북 초기화로 모든 셋팅 및 설치를 새로 해야 해서 이번 기회에 정리해두기로 했다. NVM이란 NVM(Node Version Manager)이란 Node.js의 버전을 관리해주는 도구이다. 이를 이용해 노드 버전별 설치/삭제를 쉽게 할 수 있으며, 여러 버전의 노드를 설치한 후 선택해서 사용할 수 있다. NVM 설치를 위해서는 homebrew가 미리 설치 되어 있어야 한다. homebrew 설치는 아래 링크를 통해 확인! https://cattaku.tistory.com/63 brew install nvmnvm 설치가 완료되면 nvm 디렉토리를 생성 mkdir ~/.nvm디렉토리 생성 후 path 설정이 필요하다. vi ~/.zshrczshrc 파일에 아래 경로를 추가해준다. export NVM_DI.. 공감수 0 댓글수 0 2023. 10. 20.
Mac-M1에서 homebrew 설치 및 warning: /opt/homebrew/bin is not in your path 에러 해결 Homebrew란? Ruby와 Git 으로 개발된 MacOS 용 패키지로 terminal을 이용한 git 명령어를 사용하려면 필수 설치 패키지이다. 설치 /bin/bash -c "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)](https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh))" 터미널에서 위 명령어를 실행한다. 에러해결 설치 중 또는 설치 후 brew 명령어를 사용하면 Warning: /opt/homebrew/bin is not in your PATH 라고 에러 메시지가 나오는데 , 메시지 내용처럼 PATH 에 등록이 되지 않았기 때.. 공감수 0 댓글수 0 2023. 10. 20.
React 프로젝트 설정 1. 프로젝트 폴더 생성 2. vscode에서 해당 폴더를 열고 터미널에서 리액트 설치 https://create-react-app.dev/docs/adding-typescript/ npx create-react-app . --template typescript // '.'은 현재위치에 설치 한다는 의미, '.' 대신 리액트를 설치할 폴더명을 써도 된다. // --template typescript를 할 경우 타입스크립트로 리액트 프로젝트가 생성된다. - nextjs 환경으로 설치할 경우 npx create next-app --typescript // 타입스크립틑 사용하지 않을 경우 -- 옵션 제외 3. babel 패키지 설치 npm install --save-dev @babel/core @babel/c.. 공감수 0 댓글수 0 2022. 10. 21.
[React] React로 Tab 메뉴 구현하기 nextjs 환경에서 styled-components 를 활용해서 구현하였다. 확장자는 jsx 가 아닌 tsx 이다. 큰 차이는 없음~ 나중에 시간나면 애니매이션 효과를 추가하면 좋을 것 같다. import { NextPage } from 'next'; import Page_FriendA1 from './friendA1'; import Page_FriendA2 from './friendA2'; import Page_FriendA3 from './friendA3'; import styled from 'styled-components'; import { useState } from 'react'; const Page_FriendIndex: NextPage = () => { const menuTitle = [.. 공감수 1 댓글수 0 2022. 10. 20.
Nodejs Error 처리 https://yceffort.kr/2021/06/error-handling-in-nodejs 공감수 0 댓글수 0 2022. 5. 13.
[nodejs] Leana 라이브러리란? 위포트 서비스에서 leana 라이브러리를 사용하고 있어서, 어떤 기능을 하는지 찾아보다가 쉽게 정리 된 글이 있어서 가져와봤다. medium.com/jung-han/lerna-%EB%A1%9C-%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC-%ED%95%B4%EB%B3%B4%EB%9F%AC%EB%82%98-34c8e008106a Lerna(🐉)로 모노레포 해보러나? Lerna로 mono-repo 만들어보기 medium.com 공감수 0 댓글수 0 2021. 3. 3.
[javascript] ES6 : for... in, for...of 비교 for...in문은 객체의 모든 열거 가능한 속성을 반복한다. Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } for...of문은 모든 객체가 아닌 컬랙션만 반복한다.. Symbol.interator 속성이 있는 컬렉션의 프로퍼티를 반복한다. Object.prototype.objCustom = function () {}; Array.protot.. 공감수 0 댓글수 0 2021. 2. 23.
[javascript] 전기요금 계산기 A사 면접을 갔을 때 코딩테스트로 나왔던 문제이다. 알고리즘 문제를 낼거라 생각은 했는데, 특이하게도 스프링 환경에서 java와 jsp로 구현하는 문제였다. 전기 사용량별로 기본요금과 전력량별 요금이 다르고, 복지할인 해당여부에 따라 요금할인이 적용되는 문제였고, 2개의 다른 입력값이 주어졌다. 테스트 시간은 1시간이였으나, 안내하는 분이 오셔서 설명하고 난 후 남은 시간은 50분이였다. 사실 이 정도 테스트면 시간은 좀 더 주거나 과제제출식으로 내줬으면 좋았을 것 같다. 참 친절하지 않은 코테였다... 뭐... 사전공지 없이 면접에서 손코딩 요청하는 회사에 비하면 나은걸까? function charge (kw, option) { var basicCharge = 0; //기본요금 var kwCharge .. 공감수 0 댓글수 0 2021. 2. 9.
[Java] #12. 자바 어노테이션(Annotation) Annotation이란? Annotation의 사전적 의미는 주석이라는 뜻이다. 하지만 자바에서의 Annotation은 자바소스 코드에 추가하여 사용할 수 있는 메타 데이터의 일종이다. @retention @target @documented 애노테이션 프로세서 공감수 0 댓글수 0 2021. 2. 6.
[java] 프로그래머스-완전탐색(모의고사) 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작.. 공감수 0 댓글수 0 2021. 2. 3.
[javascript] 1~1000까지 8이 총 몇 번 나오는지 구하기 난 이 문제를 백엔드 개발 면접 때 코딩테스트로 받았던 문제였다. 손코딩으로 작성시간은 10분이 주어졌었다. 결과는 제대로 풀지 못했고, 면접에 떨어졌다.....고 생각하고 이글을 썼었는데... 면접 발표가 좀 늦게 나왔지만 합격하고 아직 잘 다니고 있다 ㅋㅋㅋㅋㅋ 무튼 나중에 다시 이 문제를 풀어보았는데 처음에 이 문제를 보고 8이 들어간 숫자를 세는 문제로 착각해서 이렇게 풀었었다. 아래 코드와 같이 풀이를 하면 예를 들어 8, 88, 818, 888 이런 수도 단위에 상관없이 1개의 카운트로 올라가게 되서 총 카운트 값이 1000이 나왔다. function getCount() { let num = []; for (let i = 1; i 공감수 0 댓글수 0 2021. 2. 2.
[Nodejs] 기술면접 예상 질문 노드 서버 개발자로 취직 준비를 하면서 면접 때 받았던 질문들을 정리해 보았다. 포트폴리오로 제출한 토이프로젝트를 nodejs와 reactjs로 구현을 했었기 때문에 노드와 리액트에 대한 질문을 동시에 받았다. =====Nodejs란? 클라이언트의 브라우저 외부에서 웹 애플리케이션을 실행하기위한 오픈 소스, 크로스 플랫폼 자바 스크립트 런타임 환경 및 라이브러리로, 웹 서버의 기능을 가지고 있다. ===== 웹서버란 무엇인가? ===== Nodejs를 사용하는 이유? ===== Node의 작동 원리 ===== 비동기처리란? 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. ===== 싱글쓰레드란? 자바스크립트의 경.. 공감수 0 댓글수 0 2021. 2. 2.
[Java] 기술면접 예상질문 ===== 객체지향 프로그래밍(oop) 데이터를 객체로 취급하여 프로그램에 반영한 것으로 객체와 객체간의 통신을 통해 프로그램이 구현된 것을 말한다. 특징으로는 상속과 인터페이스(계층성), 다형성과 사용편의성(모듈화), 캡슐화, 정보은닉, 자료추상화, 동적 바인딩이 있다. ===== object (객체) 객체지향 프로그래밍에서 데이터(변수)와 그에 관련된 함수를 포함한 개념으로 개체, 속성, 메서드로 구성된 클래스의 인스턴스를 의미한다. ===== 오버로딩 & 오버라이딩(재정의) 오버로딩은 같은 이름의 메소드를 여러 개 정의한 것으로 매개 변수의 타입이 다르거나 개수가 달라야 한다. 오버라이딩은 상속에서 나온 개념으로 상위 클르새의 메서드를 하위 클래스에서 재정의하는 것을 말한다. ===== interf.. 공감수 0 댓글수 0 2021. 2. 2.
[JAVA] #1.JVM은 무엇이며 자바 코드는 어떻게 실행하는 것인가 JVM이란 무엇인가? Java Virtual Machine 의 약자로 OS와 프로그램의 사이에서 기계어로 해석해 주는 역할을 해주며, 운영체제 종류에 상관없이 실행 가능하도록 해준다. JVM 구성 요소 - Class Loader 클래스 로더는 로딩, 링크, 초기화 순서로 진행됩니다. 클래스 로더라는 이름 그대로 클래스 파일을 적재(Runtime Data Area) 하는 역할을 하며, 자바 소스 파일을 컴파일 하면 바이트 코드(.class 파일)이 생성되고 class 파일들을 모아 클래스 로더가 메모리에 적재시킨다. - Execution Engine class Loder에 의해 메모리에 적재된 클래스(바이트코드)들을 컴퓨터가 이해할 수 있는 기계어로 변경해 명령어 단위로 실행하는 역할을 한다. 이 때 명령.. 공감수 0 댓글수 0 2021. 1. 30.
[C언어] 8비트 2진법 계산기 (-128~+127) #include #include int main(){ int integer, i = 8; int binery[8] = { 0 }; printf_s("Please enter a integer number between -128 ~ +127\n"); scanf_s("%d", &integer); if (integer == 0) { printf_s("\nBinery number of integer is 0;\n"); } else if (0 공감수 1 댓글수 0 2020. 11. 9.
vim 사용법 # FOR BEGINNERS ### VIM으로 가장 기본적인 문서 편집만을 하고 싶다면 세 가지를 알아야 합니다. * [모드 전환 방법](#모드-전환-방법) * [VIM을 종료하는 방법](#VIM을-종료하는-방법) * [저장하는 방법](#저장하는-방법) #### 모드 전환 방법 * 화면의 최하단을 봅니다. `NORMAL`이라 되어 있으면 `NORMAL`모드이고, `INSERT`라 되어 있으면 `INSERT`모드입니다. >`NORMAL`모드일 때에는 아직 마음껏 타이핑을 하지 않도록 합니다. 커서가 여기저기 점프하고 글자가 삭제될 수 있습니다. >`INSERT`모드가 되면 평범한 워드 프로세서처럼 사용할 수 있습니다. * `NORMAL`모드일 때 `i`를 누르면 `INSERT`모드로 바뀝니다. * `INS.. 공감수 0 댓글수 0 2020. 9. 2.
[javascript] 배열 값 중복제거, 배열합치기 아래 코드는 배열변수 arrayA와 arrayB의 합집합과 교집합, 차집합을 추출하는 함수를 만든 것이다. return 값은 arrayA와 arrayB의 이 둘의 합집합과 교집합, 차집합의 배열의 크기를 합친 배열 변수를 반환한다. 우선 concat을 사용해서 배열 arrayA와 arrayB의 값을 합하여 sum 변수에 담아주었고, filter와 indexOf 를 사용하여 sum의 배열값에서 합집합과 교집합을 구하였다. filter함수는 콜백 함수에 지정된 조건에 맞는 요소를 새롭게 반환한다. 콜백 함수에는 3개의 인자값을 사용할 수 있다. 인자값은 순서대로 value(요소값), index(요소의 인덱스), array(사용되는 배열 객체)이다. indexOf(searchElement, indexOf() .. 공감수 0 댓글수 0 2020. 7. 6.
[Jquery] 데이터 포맷(날짜에 하이픈 넣기) function dateFormat(num){ if(!num) return ""; var formatNum = ''; // 공백제거 num=num.replace(/\s/gi, ""); try{ if(num.length == 8) { formatNum = num.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); } } catch(e) { formatNum = num; console.log(e); } return formatNum; } function fn_update(seq) { $.ajax({ url : "/admin/getPopDetail.do", type : "post", data : { seq : seq }, dataType : "json", success : fun.. 공감수 0 댓글수 0 2020. 4. 27.
[방송통신대] 2020년 데이터정보처리 입문 과제 1. 교재 17쪽의 예제 1.1에 제시된 과정을 따라 엑셀을 활용하여 다음 그래프를 작성하시오. 필요한 통계정보는 KOSIS에서 찾아서 활용하시오. -교재1장 내용(12점) (1) 출생성비, 합계출산율이 무엇을 의미하는지 조사하여 정리하시오. - 출생성비는 여성 100명당 남성의 수로 계산한다. 출생성비가 높다는 말은 남성의 수가 여성에 비해 더 많다는 것을 의미한다 - 합계출산율은 가임 여성(15~49세) 1명이 평생동안 낳을 것으로 예상되는 평균 출생아 수를 나타낸 지표로 연령별 출산율의 총 합이다. 합계출산율이 높을수록 한 여성이 출생하는 자녀 수가 많다는 의미한다. (2) 1990년부터 2018년까지의 연도별 전국 총출생성비를 시계열도표로 나타내고 전체적인 경향을 설명하시오. - 1990년대만 해.. 공감수 1 댓글수 0 2020. 4. 14.
[방송통신대] C프로그래밍 과제 아래 조건을 만족하는 프로그램을 만들고 프로그램 실행 예와 같이 동작하는 프로그램을 작성하시오. 1. 반복문을 이용하여 3명의 이름과 학과, 주민등록번호를 입력받아 프로그램 실행 예와 같이 이름, 생년월일, 윤년 여부, 출생지역(대한민국, 외국), 성별(남자, 여자), 학과 이름을 출력한다. 생년월일 주민등록번호 앞 6자리 숫자와 7번째 숫자를 분석하여 xxxx년 xx월 xx일로 출력 성별 출생년대 출생지역 주민등록번호 7번째 숫자로 남자, 여자, 출생년대, 출생지역 구분 1. 1900년대 출생한 남자 2. 1900년대 출생한 여자 3. 2000년대 출생한 남자 4. 2000년대 출생한 여자 5. 1900년대 출생한 외국인 남자 6. 1900년대 출생한 외국인 여자 7. 2000년대 출생한 외국인 남자 .. 공감수 0 댓글수 0 2020. 4. 14.
[Jquery] anypicker 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 /* ============================== * anypicker 함수 (년월일) * ============================== */ $.fn.dateAnyPicker = function(option){ var maxDate,minDate ; var el = $(this); if(!option.maxDate) maxDate = false; else maxDate = new Date(option.maxDate[0],op.. 공감수 0 댓글수 0 2020. 4. 13.
제이쿼리 아코디언 _ Jquery Accodion (컨텐츠 펼침/접힘) === 타이틀, 컨텐츠 분리된 부분 $(document).on('click', '.accodion .accodion-arrow', function(){ $('.accodion-contents').slideUp(200); if($(this).parent().hasClass('active')) { $('.accodion').removeClass('active'); $(this).parent()removeClass('active'); }else{ $('.accodion').removeClass('active'); $(this).parent().children('.accodion-contents').slideDown(200); $(this).parent().addClass('active'); } }); 1 2 .. 공감수 0 댓글수 0 2020. 4. 13.
[방송통신대] Java 프로그래밍 중간 과제 1. 이름이 Test인 퍼블릭 클래스를 정의한다. 첫 줄에 자신의 학번을 출력하고 다음 줄에 이름을 출력하도록 main() 함수를 정의하여 Test 클래스에 포함시킨다. 이클립스를 사용하여 클래스를 작성하고 실행시킨다. 클래스 정의와 출력 결과를 확인할 수 있는 1개 그림을 캡처하여 과제물 파일에 포함시키시오. public class Test { public static void main(String[] args) { String studentNum = "20XXXX-36XXXX"; String studentName = "캣덕후"; System.out.println("학번 : " + studentNum); System.out.println("이름 : " + studentName); } } 2. 아래 예외.. 공감수 0 댓글수 0 2020. 4. 10.
CSS Display와 Visibility 차이 - display 요소를 표시하는 방법을 지정한다. CSS p.inline {display: inline;} > inline : 인라인 요소처럼 표현한다. block : 블럭 요소처럼 표현한다. inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. flex : CSS3에 새로 생긴 값으로 블록-레벨의 flex 컨테이너처럼 요소를 표현한다. inline-flex : CSS3에 새로 생긴 값으로 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다. list-item : 박스를 블록 처리하고 그 안의 아이템들을 인라인 박스 형태로 처리한다. run-in : 문맥에 따라 블록 또는 인라인 박스로 처리된다. table, inline-table, , .. 공감수 1 댓글수 1 2020. 3. 11.
ajax 페이징처리 (더보기) ajax를 활용한 간단한 더보기 페이징 구현입니다. Mysql에서 제공하는 샘플 DB를 활용해서 영화목록 리스트를 만들어봤습니다. VO를 따로 만들지 않고 service와 controller만으로 구현 했으며, 쿼리에 Limit 를 써서 10개씩만 보여주게끔 만들었습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 Insert title here No 제 목 내 용 .. 공감수 3 댓글수 5 2020. 3. 3.
JSON 객체변환(파싱) , Cilck 이벤트 JSON형태의 데이터를 객체 변환 후 리스트로 가져오는 방식. 목록 선택시 내용 상세보기와 클릭이벤트를 주어 클릭시 목록에 css가 추가되어 색상이 바뀜. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 Insert title here .row { background-color : lightgray; } idx name date // $(document).ready(function() { var dataLis.. 공감수 0 댓글수 0 2020. 2. 28.
[방송통신대] 소프트웨어 공학 중간과제 (2020) * 주어진 요건을 참고하여 문1~문2의 답안을 작성하시오. ** 아래 한글 또는 MS-word를 사용하고, 1개의 파일에 모든 답안을 작성하여 제출하시오. 문1 (20점) 교재에서 소개되지 않은 ‘소프트웨어 개발 프로세스 모델’ 또는 ‘개발 방법론’ 중 1개를 찾고 조사하여 2~3쪽 분량으로 알기 쉽게 정리하라. - 개조식으로 작성하고 아래의 내용을 포함할 것 - 설명을 위한 그림을 포함하고, 구성 요소와 절차, 기존 모델과 비교하여 특징과 장단점을 분명히 구분하여 서술할 것 - 중요한 부분에 강조 표시를 할 것(굵은 글씨와 색상 등 사용) 문2 (각 5점) 다음 용어 2개를 각각 10~15줄로 명확하게 정리하라. (a) 기능 점수(FP) (b) 소프트웨어 요구사항 명세서(SRS) - 참고한 문헌이나 인.. 공감수 0 댓글수 0 2020. 2. 28.
myBatis 설정(Properties 파일 설정 방식) DB의 정보들을 관리하기위해 myBatis를 아래와 같이 적용하였다. 1. myBatis관련 라이브러리를 추가하기위해 maven의 pom.xml에 아래의 내용 등 2. DB연결정보를 /프로젝트명/src/main/resources/db.properties 에 추가 driver=org.gjt.mm.mysql.Driver url=jdbc:mysql://접속IP/데이터베이스명 username=DB계정아이디 password=DB계정패스워드 3. myBatis Config파일 생성(/프로젝트명/src/main/resources/config/mybatis/mybatis-config.xml) config파일은 어짜피 SqlSessionManager클래스를 만들어서 명시하니 임의로 이름을 정해줘도 상관없다(나의 경우는 .. 공감수 0 댓글수 0 2020. 2. 17.
ServletContext, HttpSession, HttpServletRequest 차이점 1.Web = HTTP = Stateless -연결 상태 유지 X -요청 단위로 Connection -따라서 이전 페이지에서 수집 했던 데이터를 다음 페이지에서 사용할 수 없다 -다음 페이지에서도 이전 페이지에서의 데이터를 유지해서 쓰기 위해서는 어딘가 저장해두고 유지시켜 놓아야한다 -저장소 : ServletContext, HttpSession, HttpServletRequest -저장 : setAttribute(name, value) -추출 : getAttribute(name) -삭제 : removeAttribute(name) -각 저장소의 차이점 : 메모리에서 살아있는 기간이 다름 ServletContext HttpSession HttpServletRequest 생성 : 서버 시작 시 제거 : 서버 .. 공감수 0 댓글수 0 2020. 2. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.