전체 글 96

[React] 리액트의 특징 3가지

특징 1. 컴포넌트를 기반으로 UI표현선언형 프로그래밍 -> 리액트 ( 목적만 깔끔히 명시 , 코드 간결 )명령형 프로그래밍 -> 자바스크립트 ( 모든과정을 하나 하나 다 설명 , 코드가 길고 복잡 ) 선언형 프로그래밍?(리액트) 목적만 깔끔히 명시하여 코드가 간결해짐 ex) 토마토파스타 하나 주세요 . 명령형 프로그래밍?(자바스크립트) 목적을 이루기 위한 모든 과정을 설명 ex) 면 100그람을 꺼내 뜨거운물에 9분동안 삶고 후라이팬에 올려서 양념을 ... 해서 저에게 가져다 주세요 .  특징 2. 화면 업데이트 구현이 쉽다. 페이지를 컴포넌트 단위로 구현함 각각의 컴포넌트에는 스테이트라는 현재 상태를 저장하는 특수한 변수를 저장가능컴포넌트가 바뀐 스테이트 값을 따서 화면을 렌더링하도록 만들어줌. ->..

React 2025.01.22

[Node.js] CJS 와 ESM의 차이

CJS와 ESM의 차이점CJS에서는 require와 module.exports를 , ESM에서는 import와 export를 사용한다. 둘은 같이 사용될 수 없다!  예시 (CommonJS)//index.jsconst { add, sub } = require("./math")console.log(add(1,2))console.log(sub(1,2))//math.jsfunction add(a,b) { return a+b;}function sub(a,b){ return a-b;}module.exports ={ add, sub,} require와 파일경로를 입력해 모듈을 불러오는 방식 장점CommonJS는 동기적 로드 방식을 사용하기 때문에, 서버 사이드 렌더링과 같은 환경에서 유리하..

Node.js 2025.01.08

카카오톡 공유하기 기능 만들기

유튜브 강의를 보던 중 카카오톡으로 공유하기 기능이 여기저기서 굉장히 많이 쓰이는 기능이기때문에 배워두고 포스팅해두고 길게길게 기억해두면 좋을것같아서 작성한다. 큰 순서는 카카오 디벨로퍼즈에 가입 -> 애플리케이션 등록 -> 앱key확인 -> 플랫폼 등록 -> 스크립트 작성 순이다 . 1.카카오 디벨로퍼 가입 및 애플리케이션 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  사이트에 들어가서 카카오톡을 연결한 뒤 디벨로퍼즈에 가입한 후 상단 내 애플리케이션에 들어가 애플리케이션 추가버튼을 누른..

JS 2025.01.07

netlify로 사이트 배포해보기

1. drag and drop 을 이용한 방법 우선 netlify에 접속 해 준 후에 깃허브를 통해 로그인해준다.https://app.netlify.com/ Netlify app.netlify.com sites 툴에 들어가 프로젝트 폴더를 드래그하여 하단의 네모칸 안에 삽입한다. 도메인을 등록 한 후에 url을 복사해 다른 곳에서 접속해보면 잘 접속이 되는것을 확인 할 수 있다! 만약 프로젝트가 업데이트 된다거나 하면 deploys 탭에 업데이트한 폴더를 하단의 네모칸에 드래그하면 업데이트된다.  깃허브 repository를 이용한 방법도 있으나 이것은 추후에 서술하겠다.

github 2024.12.26

깃허브 프로젝트 연동에 필요한 명령어

기존 프로젝트를 깃허브에 연동 시켜사용하려고 할때에 필요한 명령어를 정리했다. 1.git 초기화git init 2.깃허브에 repo 생성-> read me 없이 생성 권장 (에러 유발 가능성)  3.프로젝트와 repo 연결git remote add origin https://github.com/이름/repo이름.git 주소는 리포지토리에 들어가서 code버튼을 눌러 복사 할 수있다. 후에 git remote -v 를 눌러 연결된 주소를 확인해주자 4.브랜치를 메인으로 만들기git 브랜치를 확인했을때에 *master 로 되어있다면 commit을 할때에 에러가 발생할것이다.git branch -m master main git checkout main 이렇게 입력해주면 브랜치가 master 에서 main 으로..

github 2024.11.21

깃허브 데스크탑 프로젝트 연동시키기

우선 연동하고자 하는 파일을 ide 프로그램으로 연다.그런 후 터미널에git config --global user.email "유저이름" git config --global user.email "아이디@example.com" 을 입력한다.필자는 이메일을 한번 잘못 써서 다시썼다... 오해없길 바란다.  그런 후 깃허브 데스크탑으로 돌아와 왼쪽상단의 화살표를 눌러 창을띄우고 add를 클릭후 create New Repository 를 클릭한다.  원하는 이름과 파일을 선택 후 create를 눌러주면 잘 연동된 모습을 볼 수 있다.

github 2024.11.19

[BOJ]24060 - 병합 정렬1(JS)

풀이const input = require('fs').readFileSync('예제.txt') .toString().trim().split('\n').map((v) => v.split(" ").map((v) => +v)); //N은 배열의 길이 , K는 찾으려는 K번째 비교에서 추가된 값const [[N, K], arr] = input;console.log(input)function merge(left, right) { const result = []; let [i, j] = [0, 0]; while (i  사실 문제조차도 잘 이해가 가지않아 다른분의 풀이를 참고 할 수 밖에 없었다. 처음부터 천천히 코드를 풀이해보자 function mergeSort(arr) { if (arr.length -..

알고리즘 2024.11.06

[BOJ] 25501 - 재귀의 귀재(JS)

재귀 함수란?함수가 자기 자신을 다시 호출하는 함수. 재귀 함수의 장단점장점: 코드가 간결해지고, 수학적으로 정의된 문제(피보나치 수열, 팩토리얼 등)를 직관적으로 구현할 수 있습니다.단점: 호출 스택이 커질 수 있어 메모리를 많이 사용하고, 큰 입력에서는 성능이 떨어질 수 있습니다. 풀이let fs = require("fs");let input = fs.readFileSync('예제.txt').toString().trim().split("\n")let N = input.shift()let cnt = 0;const recursion = (s,l,r) =>{ cnt += 1; if(l >=r ){ return 1; }else if(s[l] != s[r] ){ ret..

알고리즘 2024.11.05

[BOJ] 20920 - 영단어 암기는 괴로워(JS)

풀이let fs = require("fs");let input = fs.readFileSync('예제.txt').toString().trim().split("\n");const [N,M] = input.shift().split(" ").map(Number);input = input.filter(a=> a.length >= M)let map = new Map();for(let i = 0; i a[0])console.log(answer.join("\n"))map을 이용해 빈도수를 구해준후 sort 기능을 이용해 만약 빈도수가 같을시에 단어의 길이까지 같다면 사전순으로 정렬하는 localeCompare를 이용해 사전순으로 정렬을 했고 , 그 뒤에 길이순 , 그뒤로 빈도순으로 정렬해 출력해주었다.

알고리즘 2024.10.11