요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다. Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다. 프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다. 또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜..
간단한 리팩토링 // 기존에 작성했던 코드 if (!isA && isB) { element.style.maxHeight = '384px' } else if (isA && !isB) { element.style.maxHeight = '360px' } else if (!isA && isB) { element.style.maxHeight = '320px' } else { element.style.maxHeight = '300px' } // 수정한 코드 let maxHeight = 300 if (!isA) { if (!sB) { maxHeight = 384 } else { maxHeight = 320 } } else if (!isB) { maxHeight = 360 } element.style.maxHeight..
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다. 리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증싱글스레드와 이벤트 루프의 상관관계자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다. 이벤트 루프자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.즉, 브라우저 동작 타이밍을 제어하는 관리자이다. 프..
프로젝트 소개 프로젝트 명 DIEDIE.gg 기획 의도 리그 오브 레전드 게임 내 비매너 유저를 신고하고, 신고 전적 및 유저 정보를 확인할 수 있는 서비스 프로젝트 설명 프로젝트 기간 23/08/04 ~ 23/09/05 (프로젝트 주제 선정 및 담당 파트 구현 기간 전체) 사용 기술 Library React Programming Language TypeScript Styling Styled-Components State Management Recoil, Tanstack-Query Formatting ESLint, Prettier Version Control Git, GitHub Design Figma Communication Notion, Slack 기술적 의사 결정 TypeScript - 정적 타입 ..
경고 내역 styled-components: it looks like an unknown prop "category" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via (connect an API like @emotion/is-prop-valid ) or consider sing transient props ($prefix for automatic filtering.) 경고 발생 경로 위의 Badge는 button 태그로 만들어져 있는데, 해당 H..
문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo", "kiki"..
1. ESLint, Prettier Extension 설치 VS Code에서 ESLint, Prettier Extension을 설치한다. yarn add eslint prettier typescript --dev VSCode 터미널에서 위의 명령어를 입력해 타입스크립트 버전의 ESLint와 Prettier를 설치한다. 2. 플러그인 설치 yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev eslint에서 TS를 활용하기 위한 플러그인을 설치한 후, yarn add eslint-config-prettier eslint-plugin-prettier --dev 위의 명령어를 입력해 ESLint와 Prettier를 함께 사용하기 위..
문제 알파벳 소문자, 대문자, 숫자 0-9중 하나가 주어졌을 때, 주어진 글자의 아스키 코드값을 출력하는 프로그램을 작성하시오. 입력 알파벳 소문자, 대문자, 숫자 0-9 중 하나가 첫째 줄에 주어진다. 출력 입력으로 주어진 글자의 아스키 코드 값을 출력한다. 입출력 예 input output A 65 z 122 내가 작성한 답안 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim(); console.log(input.charCodeAt()); 아스키코드란? 아스키(ASCII)란 미국 국립 표준 협회에서 표준화한 정보 교환용 7비트 부호 체계로, 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 문자 인..
오류 발생 경로 React + TypeScript 프로젝트에 eslint, prettier를 적용하던 중 src 하위에 파일 경로가 제대로 있음에도 다음과 같은 에러가 발생했다. 오류 내역 Unable to resolve path to module 오류 원인 및 해결 방법 "settings": { "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx"] } } } .eslintrc.js 파일에 위와 같은 구문을 추가한다. 이후 .eslintrc.js 파일을 저장해보면 이전과 같은 파일임에도 불구하고 에러가 나지 않는 것을 확인할 수 있다. [참고 자료] https://stackoverflow.com/questions/55198..
📢 본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다. 1. GitHub에서 프로젝트 repo 생성하기 GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다. repo 생성을 완료하면 README가 없는 레포가 위와 같이 만들어진다. 2. Local에서 CRA로 TS 프로젝트 만들기 VSCode로 해당 프로젝트를 만들 루트 폴더에 진입하고 아래와 같이 CRA로 프로젝트를 생성한다. yarn create react-app 프로젝트명 --template typescript 예전에는 npm보다 yarn이 속도가 빨랐지만 요새는 큰 차이가 없다고 한다. 나는 고양이를 좋아하니까(💙😺💙) yarn으로 세팅해 주었다. 당장 필요하지 않은 파일들은 다 지우고,..
