전체 글

사건 발생eslint와 prettier를 처음 사용해 봐서 뭐가 뭔지 헷갈리는 와중에, 자꾸 빨간색 밑줄이 뜨면서 간질간질 살랑살랑 심기를 건드리는 듯한 느낌적인 느낌을 견딜 수 없었다.     원인eslint에서는 작은따옴표만 사용하도록 설정을 해놨는데, prettier가 큰따옴표로 자동 포매팅하기 때문에 발생하는 문제였다. 즉 eslint와 prettier의 충돌로 인해 발생했던 것!  eslint와 prettier의 충돌만 막아주면 바로 해결할 수 있다.     해결작은따옴표로 통일을 해보자~우선 eslint를 설정하기 위해 eslintrc.js 파일에서 singleQuote를 true로 설정한다.   그리고 Prettier를 설정한다. 1. VSCode 설정(cmd + ,)에 들어간다.2. Pre..

🕊️학수고대 프로젝트FE 개발 기간 : 23.12.10 ~ 24.04.04서비스 기간 : 24.04.04 ~ 24.05.26 백엔드, 디자이너와 협업 후 배포를 해서 사용자까지 받아 본 첫 프로젝트였습니다. 너무 많은 것을 배웠고, 돌아보니 많은 성장을 했습니다. 프로젝트를 통해 깨달은 점, 느낀 점 등을 회고로 작성하려고 합니다.      🔥기술은 필요에 의해 배워야.. (zustand & react-query)상태 관리 라이브러리 zustand 도입! 하나의 api에서만 제공되는 값을 모든 컴포넌트에서 사용할 필요성이 생겼고, 이에 따라 상태 관리 라이브러리를 도입하게 되었습니다. 상태 관리 라이브러리의 대표는 역시 리덕스가 아닐까 싶습니다. 하지만 제게 리덕스는 늘 어렵고 낯선 존재이자 두려움의..

Module Pattern모듈 패턴은 더 큰 파일을 여러 개의 더 작고 재사용 가능한 조각으로 분할하는 좋은 방법이다. 또한 모듈 내의 값은 기본적으로 모듈 내에서 비공개로 유지되고, 수정할 수 없기 때문에 코드 캡슐화를 촉진한다. export 키워드를 사용하여 명시적으로 내보낸 값만 다른 파일에서 액세스 할 수 있다.     예시function validateInput(input){ if (typeof input !== 'number'){ throw new Error('Invalid input'); }}function sum(x,y){ return x + y;}function multiply(x,y){ return x * y;}function subtract(x,y){ return x -..

클래스 문법이란?조금 더 자바스럽게, 객체 지향적으로 표현하기 위해 ES6버전부터 추가된 새로운 문법이다. 다만 생김새만 클래스 구조이고, 엔진 내부적으로는 프로토타입 방식으로 작동된다. class Person{ constructor(name, email, birthday){ this.name = name; this.email = email; this.birthday = birthday; } introduce(){ return `Hello my name is ${this.name}` }}const lee = new Person('Lee', 'Lee@example.com', '2000-01-01');    constructor 인스턴스를 생성하고 클래스 필드를 초기화하기 위한 ..

시작let user = { name : 'Lee', age: 25}console.log(user.name); // Leeconsole.log(user.hasOwnProperty('email')); // falseuser라는 객체 변수에는 name과 age라는 속성만 있는데, hasOwnProperty라는 메서드를 사용해도 에러가 나오지 않는다. 이 메서드는 어디서 온 것일까?    모든 객체는 위와 같이 global Object prototype을 가진다. 이 prototype안에 hasOwnPropert 메서드가 존재하기에 에러가 나오지 않고 결괏값이 반환되었던 것이다.     Prototype이란? 프로토타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말한다. 이를 프로..

비동기 요청이 여러 개 있는 상황에서, 하나의 요청이 다른 요청 결과에 의존할 때const response1 = request(‘https://example.com’)const response2 = request(‘https://example.com’, response1) 만약 위처럼 둘 다 비동기 요청을 보내는데, 두 번째 요청을 보낼 때 첫 번째 요청의 결과가 필요할 수 있다. 이런 경우 둘 다 병렬적으로 요청을 보내기 때문에, response1을 가지기 전에 두 번째 요청이 보내진다. 이런 부분을 해결하기 위해 콜백, Promise, Async/Await를 사용할 수 있다.     콜백함수콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미한다. 그리고 그 콜백함수는 함수를 전달받은 함수 안에서 ..