묻고 답해요

state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?

해결됨

만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); } 제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요? 실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요? 만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.

• javascript
• react

4.3 테스트 질문 입니다

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

시간: 9:00 Q. ‘비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 “비밀번호를 입력하세요” 경고 메시지가 노출된다’ 를 테스트 할 때, 비밀번호가 입력하지 않은 상태인지 확인하는 부분은 없어도 되는 건가요?? 비밀번호를 입력하는 요소가 null 인지 확인하는 테스트는 없어도 되는 건가요??

• javascript
• tdd
• 소프트웨어-테스트
• vitest
• e2e
• chromatic

5.2 테스트에서 상품 이름 사용, 로그인 세션 질문

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

Q1. 장바구니, 구매 버튼 클릭 시 해당 상품의 이름을 cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist) 상품 이름을 직접 입력하는데, (통합 테스트에서 모킹 데이터를 사용한다면 모킹 데이터는 직접 설정하기 때문에 가능하지만), 실제 api를 사용하면 첫번째 상품 데이터가 변경할 수도 있기 때문에 실패할 수도 있기 때문에 다르게 작성해야 하지 않을까요?? 질문 드립니다 Q2. 로그인을 커스텀 커맨드에서 설정해서 session을 사용해 설정해서 테스트할 때, 웹에서는 로그인 성공/실패 여부는 확인할 수 없는 것 아닌가요?? 로그인이 실패하게 되면 로그인 관련 테스트는 모두 실패하게 되는데 그냥 이 결과로 로그인 성공/실패 확인을 하는 건가요??

• javascript
• tdd
• 소프트웨어-테스트
• vitest
• e2e
• chromatic

5.3 cy.intercept 질문

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

Q. cy.intercept()는 회원 가입 요청에 대한 성공/실패 응답을 모킹해서 받는데, 이 때 의도하는 코드는 1번이지만 응답이 정해져 있기 때문에 2번처럼 틀린 요청으로도 결과는 똑같이 나오게 될 거라고 생각됩니다. 실제 응답이 아니라 응답을 정해 놓고 전달하기 때문에 실제 동작과 다를 수도 있어서 이 부분은 '실패, 성공 시 문구 노출'이 나타나는 동작이 있다는 document 로만 이해해도 될까요?? 1 성공 데이터 요청 -> 성공 데이터 응답 실패 데이터 요청 -> 실패 데이터 응답 2 실패 데이터 요청 -> 성공 데이터 응답 성공 데이터 요청 -> 실패 데이터 응답

• javascript
• tdd
• 소프트웨어-테스트
• vitest
• e2e
• chromatic

강의 전체 소스코드 깃허브가 있을까요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

도커까지 진행했는데 제 깃허브에 따로 저장하지않고 진행하다가 하드가 고장나서 다 날려버렸네요 ... ㅜ 없으면 어쩔수 없지만.... 아 그리고 가상머신에서 우분투 설치해서 해도 될까요?

• javascript
• node.js
• docker
• rest-api
• nestjs

프로젝트 중 질문 있습니다

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

axios요청을 통해 서버에서 데이터를 불러오고 그 데이터를 화면에 보여줄 때 아래와 같은 방식을 사용하고 있습니다. 그런데 이러면 isLoading이 true일때 잠깐 화면에 보이는 loading이 맘에 안들어서요.. 이렇게 안하면 data를 찾을수 없다고 에러가 뜨고.. isLoading state로 관리하는 것 말고는 방법이 없을까요? import { useState, useEffect } from 'react'; import axios from 'axios'; const MyComponent = () => { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); setData(response.data); } catch (error) { setError(error); } finally { setIsLoading(false); } }; fetchData(); }, []); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> {data ? ( <div>{data}</div> ) : ( <div>No data available</div> )} </div> ); }; export default MyComponent;

• javascript
• react
• node.js

브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정

해결됨

모던 자바스크립트 딥다이브 스터디

“49장. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축”에 “브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수도 있으나, 앞서 설명한 바와 같이 ESM을 사용하는 것은 문제가 있다.” 라는 구절이 있습니다. 하지만 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정하는 부분에 대한 구체적인 설명이 없어, 구글링을 통해 몇 가지 해결책을 찾아 시도해 보았지만 제가 제대로 이해하지 못하고 적용하지 못했는지 기대했던 대로 동작하지 않습니다. 혹시 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수 있는 방법을 알 수 있을까요?

• javascript
• babel
• es6모듈
• esm

Header css justify-content 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

.Header .header_center { justify-content: center; } .Header .header_left { justify-content: flex-start; } .Header .header_right { justify-content: flex-end; } .Header { justify-content: space-between; } 이렇게 해도 같은 결과가 나오는데 두 코드 차이점이 있을까요?

• javascript
• react
• node.js

getter가 정의되어 있지 않아 오류가 발생합니다.

해결됨

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

안녕하세요 강사님 중급강의 스토어 모듈화까지 마치고 정상작동을 확인 한 후 터미널에서 프로젝트를 재실행 하였지만 오류로 인해 TodoList, TodoInput 등 작동 되지 않습니다. 오류는 다음과 같고 main.js와 store.js, todoApp.js 모두 import가 올바른 경로로 되어있습니다. main.js import Vue from 'vue' import App from './App.vue' import { store } from './store/store.js' new Vue({ el: '#app', store : store, render: h => h(App), }) store.js import Vue from 'vue' import Vuex from 'vuex' import todoApp from './modules/todoApp.js' Vue.use(Vuex); export const store = new Vuex.Store({ modules : { todoApp } }); todoApp.js const storage = { fetch(){ const arr = []; console.log('created') if(localStorage.length > 0 ){ for(let i = 0; i < localStorage.length; i ++){ if (localStorage.key(i) !== 'loglevel:webpack-dev-server'){ arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); } } } return arr; } } const state= { todoItems: storage.fetch() }; const getters = { getTodoItems(state) { return state.todoItems; } }; const mutations= { addOneItem(state, todoItem) { const obj = {completed: false, item: todoItem} localStorage.setItem(todoItem, JSON.stringify(obj)); state.todoItems.push(obj); }, removeOneItem(state, payload){ localStorage.removeItem(payload.todoItem.item); state.todoItems.splice(payload.index,1); }, toggleOneItem(state, payload){ state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed; localStorage.removeItem(payload.todoItem.item); localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem)); }, clearAllItems(state){ localStorage.clear(); state.todoItems=[]; } }; export default{ state, getters, mutations }

• javascript
• vue.js
• es6
• vuex

Shallow Freeze 관련 질문드립니다!

미해결

따라하며 배우는 자바스크립트 A-Z

// 얕은 동결 (shallow freeze) const obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } }; Object.freeze(obj1); // 얕은 동결 obj1.a = 10; console.log(obj1); // {a: 1, b: 2, c: {d: 3, e: 4}} obj1.c.d = 30; console.log(obj1); // {a: 1, b: 2, c: {d: 30, e: 4}} 이렇게 작성했을 때 당연히 오른쪽 코멘트처럼 출력이 나올 것이라고 생각했었는데, 출력이 이렇게 나옵니다. d가 첫 콘솔 로그에도 30으로 출력되는데, 이런 현상 관련해서 구글링을 해봐도 답을 찾기가 어려워 게시판에 질문 드립니다. 혹시 왜 이런지 알 수 있을까요?

• javascript

swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터

미해결

쉽고 빠르게 만드는 다양한 이미지 이펙트!

ggang_effect.js function ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });

• HTML/CSS
• javascript
• jquery
• 인터랙티브-웹

bun, biome 사용 질문

해결됨

Next.js 시작하기

안녕하세요, 강의 잘 보고 있습니다. React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다. 그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다. 선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!

• javascript
• react
• next.js

트랜잭션 queryRunner 더러운 읽기 , 반복 못하는 읽기 기타 등등 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

예시 코드를 보면 트랜잭션 이용해서 조회하고, 작성하고 하시는데 이거는 예시를 위해서 그렇게 하신걸까요? 실무에서는 한가지 작업할 때는 트랜잭션 사용안하고 바로 디비에 저장하고, 조회하고 하는걸까요?

• javascript
• node.js
• docker
• rest-api
• nestjs

[숙제] minHeap 구현, maxHeap -> minHeap , minHeap -> maxHeap

해결됨

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

minHeap 구현 class MinHeap { // 최소힙 arr = []; #reheapUp(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] < this.arr[parentIndex]) { const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapUp(parentIndex); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { const rightIndex = index * 2 + 2; const smaller = this.arr[leftIndex] < this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#reHeapDown(smaller); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (this.arr[i] === value) { return i; } } return null; } // 특정값 수정 update(value, newValue) { const index = this.search(value); if (index === null) { return false; } this.arr[index] = newValue; for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { this.#heapify(i); } } // 특정값 삭제 removeValue(value) { const index = this.search(value); if (index === null) { return false; } // 특정값의 index를 splice를 이용하여 없애버린다. this.arr.splice(index, 1); for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#heapify(i); } } transFormMaxHeap() { for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // i가 2부터 시작 // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#maxHeapify(i); } return this.arr; } // 특정값을 수정하거나 특정값을 삭제하거나 #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index 78의 왼쪽 5: 23 const rightIndex = index * 2 + 2; // 오른쪽 6: undefined const smaller = (this.arr[leftIndex] || Number.MAX_SAFE_INTEGER) < (this.arr[rightIndex] || Number.MAX_SAFE_INTEGER) ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#heapify(smaller); } } #maxHeapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; // 재귀 호출 해주어야 된다! this.#maxHeapify(bigger); } } } 최소 힙 insert const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); // 결과 [8, 32, 19, 78, 45, 56, 23] 결과 그림 최소힙 remove const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); // 8 , 32, 19, 78, 45 ,56, 23 // 19, 32, 23, 78, 45, 56 // 23, 32, 56, 78, 45 // 32, 45, 56, 78 // 45, 78, 56 // 56, 78 // 78 최소힙 update const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.update(32, 90); // [8, 32, 19, 78, 45, 56, 23] // 결과 -> [8, 45, 19, 78, 90, 56, 23] 최소힙 removeValue const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.removeValue(19); // [8, 45, 19, 78, 90, 56, 23] // 결과 -> [8, 45, 23, 90, 56, 78] 최소힙 -> 최대힙 const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); console.log(minheap.transFormMaxHeap()); // [ 8, 32, 19, 78, 45, 56, 23 ] // 결과 -> [78, 45, 56, 32, 8, 19, 23] 최대힙 -> 최소힙 class MaxHeap { arr = []; #reheapUp(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] > this.arr[parentIndex]) { // 값 바꾸기 const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapUp(parentIndex); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { // 만약에 왼쪽 인덱스가 총 배열의 길이보다 작은경우 const rightIndex = index * 2 + 2; const bigger = this.arr[leftIndex] > this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#reHeapDown(bigger); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (this.arr[i] === value) { return i; } } return null; } // 특정값 수정 update(value, newValue) { const index = this.search(value); if (index === null) { return false; } this.arr[index] = newValue; for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { this.#heapify(i); } } // 특정값 삭제 removeValue(value) { const index = this.search(value); if (index === null) { return false; } // 특정값의 index를 splice를 이용하여 없애버린다. this.arr.splice(index, 1); for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#heapify(i); } } transFromMinHeap() { for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // i가 2부터 시작 // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#minHeapify(i); } return this.arr; } // 특정값을 수정하거나 특정값을 삭제하거나 #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#heapify(bigger); } } // 특정값을 수정하거나 특정값을 삭제하거나 #minHeapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index 78의 왼쪽 5: 23 const rightIndex = index * 2 + 2; // 오른쪽 6: undefined const smaller = (this.arr[leftIndex] || Number.MAX_SAFE_INTEGER) < (this.arr[rightIndex] || Number.MAX_SAFE_INTEGER) ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#minHeapify(smaller); } } } const heap = new MaxHeap(); heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); console.log(heap.transFormMinHeap()); // [78, 32, 56, 8, 23, 19, 45] // -> 결과 [8, 23, 19, 32, 78, 56, 45] 질문1) maxheap(minheap) 코드 구현시 heapify 메서드에서 재귀호출 되어야 되지 않는가요? 강의에서는 heapify 메서드 구현시 재귀 호출 부분이 빠져있는것 같아서 질문 드립니다. 아니라면 죄송합니다. #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; // 여기 빠진것 같습니다! this.#heapify(bigger); } }

• javascript
• 코딩-테스트
• 알고리즘

JS 변수 선언 3단계 관련 문의드립니다

해결됨

let x = x; 를 선언했을 때 호이스팅으로 let x; //선언 x = x; //초기화&할당 //reference error 발생 으로 알고 있습니다. TDZ에 들어간 x를 참조하지 못하기 때문인데요 x = x; 가 undefined으로 초기화된 후 x가 할당된 것인지 아니면 바로 x로 값 x가 할당되는 것인지가 궁금합니다. 전자라면 x=undefined;로 초기화되어 TDZ을 벗어나게 되는데 REFERENCE ERROR가 발생하지 않을 것 같긴 한데요... 순서는 선언, 초기화, 할당이라서 헷갈립니다.

• js
• javascript

footer

미해결

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

수업을 따라하다 보니 footer 부분에서 footer 윗 부분에 살짝 파랑색 라인이 보입니다. 이걸 없애고 싶으면 어떻게 해야하는 건가요 ?

• HTML/CSS
• javascript
• 포트폴리오
• github-pages

테스트 오류

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

수업에서 처럼 이렇게 코드를 작성했을 때는 오류가 발생하는데 placeholder를 넣으면 에러가 나지않습니다. 왜그런지 알 수 있을까요?!

• javascript
• react
• 소프트웨어-테스트
• vitest

파일 저장시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

<저장 전> <저장 후> <저장 전> <저장 후> <저장 전> <저장 후> 파일 저장을 하면 prettier가 실행되면서 의도적으로 줄 바꿈 했던 것을 한 줄로 합쳐버립니다. 그렇다고 format on save를 끄거나 prettier를 끄고 싶지는 않습니다. 한 줄로 합쳐지지만 않게 하고 싶은데 어떻게 해야 할까요?

• javascript
• react
• node.js

eslint 오류..

해결됨

Next.js 시작하기

수업 내용을 따라 작성 하는데..이상한 점이 있어서 문의 드립니다. eslint, prettier 등 처음 부터 셋팅을 그대로 따라 했는데요. 저는 그림 처러 저런 오류가 생깁니다. problem 을 보면 이런게 생기고요.. 그런데 상단에 /* eslint-disable prettier/prettier */ 라는 것을 넣으면 오류가 사라지는데요.. 왜 그럴까요? 제가 셋팅을 잘못 한게 있을까요??

• javascript
• react
• next.js

part2는 언제..

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

혹시 언제쯤 강의로 볼 수 있을까요 ㅠㅠ part1 내용이 너무 좋아요

• javascript
• typescript
• rest-api
• nestjs
• backend