티스토리

기먕로기의 로깅

검색하기

블로그 홈

기먕로기의 로깅

kimyanglogging.tistory.com/m

https://github.com/hyeongrok7874

구독자: 3

방명록 방문하기

주요 글 목록

[애자일 & 스크럼] 고등학교 프로젝트 팀의 일일 스크럼 나는 더모먼트라는 교내 프로젝트 팀에 속해 있다. 내가 개발에 참여한 프로젝트로는 광주소프트웨어마이스터고등학교 입학 지원 서비스 Hello, GSM 광주소프트웨어마이스터고등학교 공식 홈페이지 Official GSM 광주소프트웨어마이스터고등학교 동문 네트워킹 서비스 GSM Networking 등이 있다. 위 서비스들을 개발하며 스크럼을 적용한 경험을 공유하려고 한다. 스크럼 적용까지 스크럼과 XP 스크럼과 XP : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 먼저 스크럼 적용에 앞서, 팀원들과 함께 스크럼과 XP라는 책을 가지고 스터디를 진행하였다. 스터디는 1주에 1번, 정해진 분량을 읽어와서 자신의 생각을 서로 공유하는 방식으로 진행되었다. 해당 스터디.. 공감수 5 댓글수 1 2023. 10. 23.
[monorepo] pnpm workspace monorepo 모노레포 구축기 (official gsm) 아래의 서비스(official gsm)의 환경을 세팅한 경험을 담았습니다. 해당 레포 구조를 참고하셔서 글 읽어주시면 감사하겠습니다. https://github.com/themoment-team/official-gsm-front GitHub - themoment-team/official-gsm-front: 광주소프트웨어마이스터고등학교 공식 홈페이지 광주소프트웨어마이스터고등학교 공식 홈페이지. Contribute to themoment-team/official-gsm-front development by creating an account on GitHub. github.com 목차 0. 구축 배경 1. pnpm workspace 구조 세팅 2. package 생성 3. dependency 세팅 4. ro.. 공감수 17 댓글수 0 2023. 7. 6.
[React] Axios로 FormData 전달하기 FormData? FormData 클래스를 이용하면 html의 form 태그를 이용하여 보내는 데이터를 JavaScript에서 다룰 수 있다. 보통의 경우 JSON 구조로 데이터를 전송하므로 사용할 일이 많지는 않지만, FormData를 이용하여 파일을 서버에 보낼 수 있다. FormData() 클래스 사용법 const formData = new FormData(); // FormData 객체 선언 formData.append('key', value); // key: value 형식으로 append 가능 기본 사용법은 위와 같다. React로 데이터 보내기 const imgInput = useRef(null); // Ref 선언 ... // Ref 할당 위처럼 input에 Ref를 연결해주고 const .. 공감수 2 댓글수 0 2023. 4. 8.
[iTerm2] oh-my-zsh, powerlevel10k 로 mac 터미널 커스텀하기 결과 위 사진 같은 가독성 좋고, 사용하면서 즐거운 터미널을 만들어 보겠습니다. iTerm2 설치 https://iterm2.com/ iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain iterm2.com 위 링크에서 설치를 진행한다. oh-my-zsh 설치 sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 여러 테마와 플러그인을 사용할 수 있게 해준다. po.. 공감수 6 댓글수 6 2023. 3. 30.
[TypeScript] vscode-styled-components 작동 안 될시 문제상황 vscode-styled-components styled-components나 @emotion/styled의 자동완성 plugin. vscode-styled-components가 동작하지 않는다.. (위의 상황은 display 속성이 자동완성에 나타나는걸 기대했지만..) 내 프로젝트의 TypeScript 버전이 vscode에서 제공하는 typescript 버전보다 높을 때 발생하는 문제인 듯 하다. vscode typescript 버전 확인 Status Bar 활용 확장자가 .ts 인 파일을 vscode에 띄우면, Status Bar에 TypeScript가 나타난다. 글자 왼쪽의 중괄호 클릭시 버전을 확인할 수 있다. 추가적으로 옆에 핀 모양을 누르면 status bar에 고정된다! Show A.. 공감수 5 댓글수 0 2023. 3. 29.
[yarn berry + husky] chalk 관련 에러 해결 상황 yarn berry가 적용된 프로젝트에 husky를 통한 pre-commit lint를 적용하려고 하다 에러가 발생하였다. Error: chalk tried to access #ansi-styles, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound. 위와 같은 에러가 발생하였다 해결 .yarnrc.yml에 위 내용을 추가하면 해결된다. 나 같은 경우는 구체적인 버전을 표기하지는 않았다. ... packageExtensions: chalk@*: dependencies: "#ansi-styles": npm:ansi-styles@* "#supports-color": npm:supports.. 공감수 1 댓글수 0 2023. 3. 10.
[TypeScript] npm 라이브러리 배포하기 TypeScript로 만든 모듈을 npm에 배포까지 해보자 절차 1. 프로젝트 생성 및 세팅 2. ts 모듈 개발 3. ts 모듈 컴파일 - CommonJS, ES Modules 다중 지원 4. package.json 수정 5. 배포 사전 지식 모듈 방식 모듈 방식에는 Commonjs, ES Modules 방식이 존재한다. CommonJS const example = require('./example') const {example} = require('./exmaple') module.exports = {example} module.exports = {default: example} ES Modules import example from './example' import {example} from './.. 공감수 3 댓글수 0 2023. 1. 20.
[Next.js + TypeScript] emotion 적용 방법 emotion css-in-js 라이브러리이다. create next app typescript 기반의 next app을 만든다. yarn create next-app ${my-app} --typescript install emotion my-app에서 emotion을 설치한다. yarn add @emotion/react @emotion/styled babel config (optional) emotion의 여러 기능을 사용하기 위해 바벨 설정을 한다. emotion 8 버전 이상부터는 필요하지 않다고 하니 참고하시길 바란다. 아래 커멘드로 emotion의 babel plugin을 설치한 후 yarn add -D @emotion/babel-plugin .babelrc 파일을 만들어 아래처럼 작성한다. ... 공감수 4 댓글수 0 2023. 1. 19.
[JavaScript] JS는 무슨 언어일까? JS는 프로토타입 기반의 다중(멀티) 패러다임 언어이다. -mdn- 패러다임이란? 프로그래밍 언어의 패러다임이란 아래로 정리할 수 있다. 프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식이거나 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법 간단하게 프로그래밍 기법이라고 생각해도 좋을 것 같다. 프로그래밍 패러다임에 종류로는 - 명령형 프로그래밍 - 절차적 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 선언적 프로그래밍 위 뿐만 아니라 많은 패러다임들이 존재한다. 다중 패러다임? 단어 그대로 프로그래밍 언어가 여러 패러다임을 지원한다는 뜻이다. 이런 언어들의 설계 목표는 모든 문제를 가장 쉽고 효율적으로 풀 수 있는 하나의 패러다임은 없다는 것을 인정하고, .. 공감수 3 댓글수 0 2023. 1. 18.
[yarn berry + vscode] yarn berry 적용 방법 (with vscode setting) yarn berry? (yarn 2) 기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다. next.js 애플리케이션 생성 yarn create next-app ${project name} yarn version 확인 생성한 애플리케이션으로 이동하여 프로젝트의 yarn 버전을 확인한다. yarn -v // 1.22.19 간혹 가다 yarn berry를 적용도 전에 2.xx.xx 이상의 버전 (Major version이 2 이상일 경우 yarn berry에 해당된다.) 으로 확인되는 경우가 있는데, 이 경우는 상위 디렉토리에서 yarn 관련 설정이 되어있을 확률이 크다. 해결 방법은 프로젝트의 상위 디렉토리에 존재하는 .yarnrc.yml 파일을 삭제하면 된다. 버전 변경.. 공감수 10 댓글수 6 2023. 1. 17.
[yarn berry + Next.js + TypeScript] React Testing Library 적용하기 create next app yarn create next-app ${project name} --typescript TypeScript 기반으로 next.js 애플리케이션을 생성한다. yarn 버전 변경 아래 글을 참고해주시면 감사하겠습니다. (yarn berry 미 사용시 skip 하셔도 됩니다.) https://kimyanglogging.tistory.com/8 [Next.js] yarn berry 적용 방법 (with vscode setting) yarn berry? (yarn 2) 기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다. next.js 애플리케이션 생성 yarn create next-app ${project name} yarn version 확인 생.. 공감수 2 댓글수 0 2023. 1. 16.
[JavaScript] truthy, falsy 값 판별하는 간단한 방법 truthy 값은 '참 같은 값', falsy 값은 '거짓 같은 값'이다. 무슨 뜻 이냐면, boolean을 기대하는 문맥 (if, && 연산자, 삼항 연산자 등)에서 truthy 값은 true, falsy 값은 false로 평가가 되는 값이다. falsy 값의 예로는 0, -0, 0n, "", null, undefined, NaN 이 존재한다. trythy 값은 거짓 같은 값을 제외한 값이다. 예시를 보자 if(0) { console.log('true'); } else { console.log('false'); } // false null && console.log('true'); // not working "" ? console.log('true') : console.log('false'); // f.. 공감수 2 댓글수 0 2023. 1. 8.
[React + TypeScript] 무한 스크롤 구현하기 무한 스크롤이란? 사용자가 페이지의 하단에 도달했을 때, api를 호출하여 끊임없이 컨텐츠를 로드하는 사용자 경험 구현 방식 1. target 엘리면트를 만든다. 2. IntersectionObserver를 이용하여 target 엘리먼트가 화면에 보여졌는지를 추적한다. 3. target 엘리먼트가 화면에 보여졌다면 api 호출을 하여 기존의 데이터에 받아온 데이터를 덧붙인다. 구현 내용 0. 가정 - 백에서 데이터는 10개씩 받아온다. 1. target 엘리먼트를 만든다 옵저버 인스턴스의 observe 메서드에 target 엘리먼트를 넘겨주기 위해 ref를 만든다. 만약 모든 데이터를 가져왔을 경우를 대비하여 조건부 렌더링을 적용시킨다. (page의 끝을 가져오지 않았다면 target 엘리먼트를 계속 유.. 공감수 2 댓글수 0 2023. 1. 4.
[JavaScript] Array.map과 함께 async, await 사용하기 문제 상황 const asyncFunc = async (id: number): Promise => { try { // get data with id const {data} = await axios.get(`https://example.com?id=${id}`); return data.name; } catch (e) { // catch... } } id를 parameter로 받아와, string을 반환해주는 비동기 함수 asyncFunc가 있다. const arr = [1, 2, 3, 4, 5, 6, 7, 8] 위의 배열의 값으로 asyncFunc에서 값을 받아와 배열을 만드려고 한다. const brr = arr.map((id) => asyncFunc(id)); console.log(brr); 하지만 위.. 공감수 4 댓글수 0 2022. 12. 13.
[Next.js + TypeScript] Google Analytics 적용 방법 Google Analytics(GA) 란? 구글 애널리틱스는 현재 구글 마케팅 플랫폼 브랜드 내의 플랫폼으로서, 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 웹 애널리틱스 서비스이다. 간략하게 말하자면 구글에서 제공하는 분석 도구이다. 내가 제작 중인 서비스에 적용하여 트래픽이나 사용자 수를 파악하기 위하여 이 도구를 사용하기로 했다. 적용 방법 Next.js + TypeScript 환경에서 개발을 하였으므로 참고바랍니다. 파일 구조 src │── lib └──── gtag.ts │── pages └──── App.tsx 코드 아래의 명령어를 터미널에 입력해 타입을 설치해주고 yarn add -D @types/gtag.js tsconfig.json에 아래와 같이 타입을 추가한다. { "compil.. 공감수 8 댓글수 2 2022. 9. 26.

문의안내

티스토리
로그인
고객센터

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