칠구의 블로그

컨트리뷰션은 오픈소스 프로젝트에 참여하고 기여하는 활동을 의미한다. 그렇다면 어떻게 오픈소스 컨트리뷰션을 진행해야 하는지 알아보겠다. 📌절차 레포지토리 fork하기 나의 로컬 레포지토리로 clone 코드 컨벤션 코드 구현 , 수정 (주석 수정) 나의 레포 깃허브로 push 오픈 소스 레포에 PR 1. 레포지토리 fork 하기가장 먼저 내가 원하는 프로젝트를 찾아서나의 레포지토리에 fork하면 된다. 나의 경우 React 오픈 소스를 fork 했다. 2. 나의 로컬 레포지토리로 clonegit clone 명령어를 이용해서 나의 로컬 레포지토리에clone을 하면 된다. git remote -v 명령어를 했을 때해당 url이 잘 뜬다면 정상적으로 clone이 된 것이다. 3. 코드 ..

📌문제매번 첫 렌더링 시에는 msw의 모킹 API를 찾지 못하는 404에러가 발생했다 ㅠㅠ근데 또 새로고침을 하면API를 잘 받아오는 오류가 발생했다 ㅠㅠ🤚첫번째 시도 - 공식 문서 확인하기보통 오타나 철자를 빼먹는 실수로 인해 오류가 많이 생겨서 내가 빼먹은 게 있나 공식 문서를 확인했다.import React from 'react'import ReactDOM from 'react-dom'import { App } from './App'async function enableMocking() { if (process.env.NODE_ENV !== 'development') { return } const { worker } = await import('./mocks/browser') // ..

코드 스니펫은 재사용이 가능한 소스 코드, 기계어 ,텍스트의 작은 부분을 일컫는 프로그래밍 용어이다.즉 자동 완성 기능으로 코드의 반복 작업을 줄여준다!!VS code에 사용해보기body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; margin: 0 auto;}이러한 css 코드를 스니펫으로 만들어보겠다.1️⃣File -> Preference -> Configure Snippets위의 순서대로 클릭을 하면코드 조각을 설정할 수 있는데 해당하는 언어를 클릭하면 된다.나는 css를 할 것이니 때문에 css를 클릭하면이러한 JSON 파일이 열린다.2️⃣ 스니펫 설정파일..

회원가입 api 테스트를 하던 중 status 상태 코드는 나오지 않고 자꾸 오류가 발생했다.무엇인지 보니//이미지CORS 오류가 발생했다 ㅜㅜ CORS와 오류발생 이유Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라는 뜻이다.HTTP 헤더를 이용하여 리소스에 대한 출처 간 접근을 제어하는 보안 메커니즘이다.CORS 헤더Access-Control-Allow-Origin : 응답을 공유할 수 있는지 여부 나타내기Access-Control-Allow-Headers : 실제 요청을 할 때 사용할 수 있는 HTTP 헤더를 나타내기 위해 실행 전 요청에 대한 응답으로 사용Access-Control-Allow-Methods : 실행 전 요청에 대한 응답으로 리소스에 접근할 때 ..

코드 주석이란 프로그래밍에 있어 내용을 메모하는 목적 으로 쓰이는 것이다.소스 코드를 이해할 수 있게 도와주며 코드 실행 시 영향을 주지 않는다. 나는 이러한 이유 때문에 코드 작성 시 주석을 많이 사용했었지만너무 남용하고 알맞게 사용하지 못하고 있었다 잘못된 주석사용하지 않는 코드 주석// import {useSelector, useDispatch} from 'react-redux';// import {// addTodo as addTodoActionCreator,// removeTodo as removeTodoActionCreator,// removeAll as removeAllActionCreator,// } from '../redux/slices/todoSlice';나는 사용하지 않는 ..

게시글 업로드 화면을 구현하던 중 인스타그램처럼 이미지를 선택하고선택한 이미지를 다른 페이지(글작성)로 전달할 때 순수 JS만 사용해서 구현해보았다.이미지를 선택하면 다른 페이지에서 선택한 이미지가 보여지는 것참고로 서버와 연동을 않고 진행했다.🤔1번째 시도 -URL 이용하기-원래 서버에 저장하여 불러오는 방법이 베스트겠지만서버와 연동을 하지 않은 작업이기 때문에 이미지 경로를 URL에 담아서화면에 보여지는 방법ex) http://~~~/write.html?imge=kakao.png  이미지 선택 페이지 (photo.html)const show_image = e => { const img_files = document.getElementById('photo-upload').files; if (img..

[Bronze II] 숫자 - 10093문제 링크문제 설명두 양의 정수가 주어졌을 때, 두 수 사이에 있는 정수를 모두 출력하는 프로그램을 작성하시오.입력두 정수 A와 B가 주어진다.출력첫째 줄에 두 수 사이에 있는 수의 개수를 출력한다.둘째 줄에는 두 수 사이에 있는 수를 오름차순으로 출력한다.[문제 이해하기]정수 A와 B가 있을 때 그 사이의 있는 수의 개수와 있는 수를 오름차순으로 정렬하면 되는 문제이다.솔직히 브론즈2 단계의 문제인데 정답률이 23%로 현저히 낮길래 문제도 쉬운데 왜 낮을까 했는데문제를 직접 풀어보니 왜 낮은지 알 수 있었다 🤣🤣1번째 시도 - for문 사용const input = require('fs') .readFileSync('/dev/stdin') .toString(..

코드 리팩토링이란  위키피디아에 따르면 코드 리팩토링은컴퓨터 프로그래밍과 소프트웨어 설계에서 외부 동작을 변경하지 않고기본 소스 코드를 재구성하는 프로세스라고 한다즉 기능이 아닌 구조, 설계를 수정하며 코드의 퀄리티를 높이는 것이다 리팩토링을 하면 소프트웨어의 설계/구조 등등을 수정하는 것이기 때문에코드 가독성 향상, 유지 보수 용이 , 복잡성 감소 등등의 장점이 있다.  JS →  TS로 수정 나는 typescript와 친해지기 위해 기존 javascript로 진행했던 프로젝트를TS로 수정하는 코드 리팩토링을 진행하기로 했다 수정 과정 1. TS 설치2. tsconfig.json 설정 3. 파일 및 코드 변경 1. TS 설치 가장 먼저 TypeScript를 설치한다TS를 사용할 것이니 당연한 이야기 n..

투 포인터 알고리즘 (Two Pointer Algorithm)투 포인터 알고리즘이란 이름처럼 2개의 포인터를 사용하는 알고리즘인데배열이나 리스트를 효율적으로 탐색하기 위해 2개의 포인터를 사용하는 기법이다2개의 포인터(주로 left , right)로 배열의 시작과 끝을 가리키며포인터를 이동 시키며 특정 조건을 만족시킨다도서관에서 친구와 함께 책 찾기나는 "도서관에서 친구와 함께 책 찾기"로 투 포인터 알고리즘을 비유해 보았다도서관 (리스트)친구와 나 (포인터)찾을 책 (특정 조건)친구와 서로 다른 방향에서 책을 찾으며 결국엔 책을 찾아낸다!!관련 문제 [level 2] 연속된 부분 수열의 합 - 178870문제 링크문제 설명비내림차순으로 정렬된 수열이 주어질 때, 다음 조건을 만족하는 부분 수열을 찾으려..

[Gold V] 별 찍기 - 10 - 2447문제 링크성능 요약메모리: 24880 KB, 시간: 112 ms분류분할 정복, 재귀문제 설명재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. *** * * *** N이 3보다 클 경우, 크기 N의 패턴은 공백으로 채워진 가운데의 (N/3)×(N/3) 정사각형을 크기 N/3의 패턴으로 둘러싼 형태이다. 예를 들어 크기 27의 패턴은 예제 출력 1과 같다.  [문제 이해하기] 첨엔 무슨 소린가 이해가 되지 않았다...ㅜㅜ사실 재귀 part에서 문제에 들어온거였기 때문에반복되는 요소를 찾기 위해 노력했고그래도 계속해서 보니까 반복되는 요소를 찾을 수 있었다 // n 이..