전체 글 87

[개발환경] prettier, eslint 설치 및 실행 방법 (+캐시파일 사용 방법)

prettier, eslint 설치 및 실행 방법 원티드 프리온보딩 인턴십 1-1주차에 배운 내용을 복습해 보자. 프로젝트를 시작하면서 처음 세팅할 때 필요한 prettier와 eslint가 무엇인지 살펴보고, 어떻게 사용하면 되는지 학습한 내용을 기록해 보려고 한다. 내용 출처는 황연욱 멘토님이 가르쳐주신 내용을 바탕으로 하고 있다. ❓prettier, eslint를 사용하는 이유 여러 작업자의 코딩 스타일 일치를 위해 린터와 포맷터 사용하는 것이 좋다. ⚠️ 개발자는 기계와 툴에 의존해야 한다. prettier와 eslint는 각각의 기능을 가지고 있다. eslint : 문법 교정, 버그 회피 prettier : 스타일 교정 모두 룰을 원하는대로 커스터마이징할 수 있다. 💡 eslint-config-..

개발 2022.12.28

[원티드 프리온보딩 프론트엔드 인턴십] Week 1 과제 후기

Week 1 과제 후기 나는 멘토링을 받으며 주로 혼자 학습해왔는데, 프리온보딩 코스에서 처음으로 2명이 넘는 인원의 팀 프로젝트에 참여하게 되었다. 1주차 과제 내용과 우리 팀이 과제를 어떻게 진행했는지, 팀 프로젝트를 하며 어떤 점이 어려웠는지를 적어보려고 한다. 과제 내용 프리온보딩 코스를 신청할 때 사전과제로 제출했던 투두리스트를 바탕으로, 팀원들과 토론하고 best practice를 만드는 것이 첫 번째 과제였다. 처음에는 어떤 식으로 진행해야 할지 감이 잡히지 않아서 막막했다. 팀원들과 본격적으로 회의를 하기 전에 출제자의 의도가 무엇일지 생각해 보았다. 멘토님이 강의에서 강조해 얘기하셨듯이, 동료학습을 해보라는 목적에서 이런 과제를 내주셨다고 판단했다. 과제 진행 방식 1. 환경 구축 우선 ..

[원티드 프리온보딩 프론트엔드 인턴십] Week 1-2. 프로젝트를 지속적으로 통합하고 배포하는 법 - 강의 후기

Week 1-2. 프로젝트를 지속적으로 통합하고 배포하는 법 AWS / AWS S3 / CRA / CI/CD / GitHub Actions 두번째 강의 시간에는 CI/CD에 대해 배웠다. CI/CD라는 용어 자체도 낯설고 개념이 와닿지 않았는데 이번 강의를 통해 대략적으로 어떤 것이구나 하는 감을 잡게 되었다. 코드 테스트와 배포를 자동화 해서, 빠르고 자주 배포할 수 있도록 하는 개념이라고 이해했다. 실습 과정도 자세하게 차근차근 알려주셨는데 직접 따라해 보면서 익히면 될 것 같다. 취업하기 전에 이런 개념들과 방법을 알고 있으면 회사에서 협업하는 데에도 큰 도움이 될거라 생각한다. 1. 서버와 클라우드 컴퓨팅 그리고 AWS 서버란 무엇일까? IT 업계에서 서버란, ‘무언가를 제공해주는 컴퓨터’ 서버는..

[트러블 슈팅] react router v6 오류 해결

에러 메시지 Uncaught Error: useRoutes() may be used only in the context of a component. useRoutes는 로 감싸야 한다. 해결 방법 react router를 추가하는 과정에서 오류가 발생했다. 에러메시지를 구글링해서 찾아보니 로 감싸주면 되었다. 이에 맞춰서 라우터 파일에서 라우터가 잘 동작하는 코드를 작성했는데 또 오류가 발생했다. 라우터 파일의 이름을 Router.tsx로 만들어 놓았는데, 컴포넌트 이름 Router가 { BrowserRouter as Router }의 Router와 겹쳤기 때문에 발생한 오류였다. import { BrowserRouter as Router } from 'react-router-dom'을 Router.ts..

개발/React 2022.12.25

[원티드 프리온보딩 프론트엔드 인턴십] Week 1-1. 개발자의 기본기 - 강의 후기

Week 1-1. 과제를 하기에 앞서 알아야 할 팀으로 일하는 법, 개발자의 기본기 Git & GitHub / ESLint / Prettier / husky / Git hook 전날 오리엔테이션을 마치고 오늘 본격적인 강의가 시작되었다. 어디가서 쉽게 배우기 힘든 양질의 강의여서 신청하길 정말 잘했다고 생각했다. 3시간의 강의라 막판에는 조금 집중력이 떨어져서, 이해가 덜 된 부분은 복습 영상을 봐야겠다. 황연욱 멘토님께서 강의 내용은 블로그에 출처를 밝히고 올려도 좋다고 하셨기 때문에, 강의에서 새로 배운 내용을 기록하려 한다. 주니어의 역량 💡 기업은 주니어 개발자를 볼 때 성장가능성을 본다. 주니어는 문제해결 방법을 통해 자신의 성장가능성을 보여줄 수 있다. 손코딩, 화이트보드 코딩 등의 방법으로 ..