기먕로기의 로깅

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

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

JS는 프로토타입 기반의 다중(멀티) 패러다임 언어이다. -mdn- 패러다임이란? 프로그래밍 언어의 패러다임이란 아래로 정리할 수 있다. 프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식이거나 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법 간단하게 프로그래밍 기법이라고 생각해도 좋을 것 같다. 프로그래밍 패러다임에 종류로는 - 명령형 프로그래밍 - 절차적 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 선언적 프로그래밍 위 뿐만 아니라 많은 패러다임들이 존재한다. 다중 패러다임? 단어 그대로 프로그래밍 언어가 여러 패러다임을 지원한다는 뜻이다. 이런 언어들의 설계 목표는 모든 문제를 가장 쉽고 효율적으로 풀 수 있는 하나의 패러다임은 없다는 것을 인정하고, ..

기술 2023. 1. 18. 16:27

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 파일을 삭제하면 된다. 버전 변경..

기술 2023. 1. 17. 00:00