기먕로기의 로깅

나는 더모먼트라는 교내 프로젝트 팀에 속해 있다. 내가 개발에 참여한 프로젝트로는 광주소프트웨어마이스터고등학교 입학 지원 서비스 Hello, GSM 광주소프트웨어마이스터고등학교 공식 홈페이지 Official GSM 광주소프트웨어마이스터고등학교 동문 네트워킹 서비스 GSM Networking 등이 있다. 위 서비스들을 개발하며 스크럼을 적용한 경험을 공유하려고 한다. 스크럼 적용까지 스크럼과 XP 스크럼과 XP : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 먼저 스크럼 적용에 앞서, 팀원들과 함께 스크럼과 XP라는 책을 가지고 스터디를 진행하였다. 스터디는 1주에 1번, 정해진 분량을 읽어와서 자신의 생각을 서로 공유하는 방식으로 진행되었다. 해당 스터디..

일기 2023. 10. 23. 12:21

아래의 서비스(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..

기술 2023. 7. 6. 14:14

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 ..

기술 2023. 4. 8. 17:32

결과 위 사진 같은 가독성 좋고, 사용하면서 즐거운 터미널을 만들어 보겠습니다. 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..

일기 2023. 3. 30. 00:00

문제상황 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..

기술 2023. 3. 29. 09:47

상황 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..

기술 2023. 3. 10. 13:50

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 './..

기술 2023. 1. 20. 23:44

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 파일을 만들어 아래처럼 작성한다. ...

기술 2023. 1. 19. 16:00