목록분류 전체보기 (261)
Coding Planet
const mapStateToProps = state => { const weatherData = state.home.weatherData || {}; return { temperature: weatherData.temperature, humidity: weatherData.humidity, windSpeed: weatherData.wind_speed, description: weatherData.description, };}; const weatherData = state.home.weatherData || {};이 구문은 JavaScript에서 흔히 사용하는 단축 평가(Short-circuit Evaluation) 문법이다.이 표현식은 state.home.weatherD..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pIcX5/btsInDH7Bll/w9zIPKsI2CyrXB2YeO8041/img.png)
redux-saga는 Redux에서 비동기 작업(예: API 호출)을 더 쉽게 관리할 수 있게 해주는 미들웨어이다. redux-saga는 제너레이터 함수(generator function)를 사용하여 비동기 로직을 작성할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다. 아래 코드를 예시로, redux-saga가 어떤 역할을 하는지 설명하겠다.import { call, put, takeLatest, all } from 'redux-saga/effects';import axios from 'axios';import { fetchWeatherSuccess, fetchWeatherFailure } from './config/action';import { FETCH_WEATHER_REQUEST..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/epZxEx/btsIfqveBqS/KzdkdUk9cbvfi5eP5dhju0/img.png)
1. 익명 함수 전달 (() => handleSelect) handleSelect('Components')}>Components의미: onSelect 이벤트가 발생할 때마다 새로운 함수 객체를 생성해서 전달하는 것장점: 특정 인자를 함수에 전달해야 할 때 유용단점: 매 렌더링마다 새로운 함수 객체가 생성돼서 메모리 사용이 증가할 수 있다. 이로 인해 불필요한 렌더링이 발생할 수 있는데, 특히 PureComponent나 shouldComponentUpdate를 사용하는 경우 2. 함수명만 전달 (handleSelect)JSX의미: onSelect 이벤트가 발생할 때 기존에 정의된 함수를 그대로 전달하는 것을 의미장점: 함수 객체를 새로 생성하지 않기 때문에 메모리 효율적이고, 불필요한 렌더링을 방지단점: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MHWpN/btsIgGDS4H7/QP1kXAQCuvZjF4TYkzqSkk/img.png)
| 배열 디스트럭처링의 기본 개념배열 디스트럭처링(array destructuring)은 JavaScript의 ES6(ECMAScript 2015) 기능으로, 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있게 해주는 문법이다. 이 문법은 리액트의 훅(예: useState)을 사용할 때 매우 유용하다.즉, 배열 디스트럭처링은 배열의 요소를 분해하여 별개의 변수에 할당하는 방식이다. const fruits = ['Apple', 'Banana', 'Cherry'];// 배열 디스트럭처링const [firstFruit, secondFruit, thirdFruit] = fruits;console.log(firstFruit); // Appleconsole.log(secondFruit); // Bananaconso..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/U3zIN/btsIcDm9YOm/LnuYDg44C5tln19f65fP0K/img.png)
| Components Are UI Building Blocks React Apps are build by combining components.| Why Components?1) Reusable Building BlocksCreate small bulding blocks&compose the UI from themIf needed:Reuse a building block in different parts of the UI(e.g., a resuable button)2) Related Code Lives TogetherRelated HTML & JS(and possibly CSS) code is stored together.Since JS influences the output, storing JS +..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tRbTb/btsIaRmZwiw/Zs0nVKEUdsbAfiAKdkn0kk/img.png)
https://www.udemy.com/course/best-react/?couponCode=ST18MT62524 강의 구매자가 80만명이 넘는 강의이다. 강의가 워낙 많아서 필요한 부분을 모듈 형식으로 공부해야겠다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bInNqc/btsIcyFYvMX/4QXRwKIksuI8DWRU7TGw90/img.png)
| 오류코드 Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:80:19) at Object.createHash (node:crypto:139:10) at module.exports (C:\workSpace\react-boilerplate\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\workSpace\react-boilerplate\node_modules\webpack\lib\NormalModule.js:401:16..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sXiGX/btsH3OQiuVE/4F3RfksyrBOxC3nIwoyzdk/img.jpg)
본인은 비전공자이지만 현업에서 개발을 하고 있는 개발자(개발호소인)이다. SQLD 자격증을 가지고 있다. 하지만 필기도 턱걸이 합격을 했고 취업에 바빠 한참 미뤄두던 실기를 이제야 시험보고 통과하게 됬다.정석적으로 공부하지 않았고 간신히 통과했기때문에 저렇게하면 저런 점수 받는구나 정도로 봐주시길.. 1. 준비기간 (3주 4/8 ~ 4/27)총 기간은 3주. 팽팽 놀다가 1주일 위기감 느껴서 하루에 3시간 이상 하고 막판 일주일에 빡집중했다. 회사일과 병행하다보니 절대적인 공부시간이 부족해서 결국 시험 하루전에 월차쓰고 하루종일 공부했다. 결국 실질적인 공부 기간은 2주이다.1주 : 하루에 2~3시간 요약집 보고 해당 과목 문제 바로 풀기2주 : 흥달쌤 마무리 특강 8강 보기 - 모의고사 풀기3주 : 기..
어떠한 테이블에서 문자열을 가지고와 다른 테이블을 수정한다면 일반적으로 select문으로 해당 값을 조회하고 update문을 작성하면 그만이다. 하지만 만약 이러한 작업이 여러번 이루어져야 한다면? 예를들어 `employee` 테이블에서 직원의 직무(`job_title`)를 가져와서 `employee_salary` 테이블의 급여 설명(`salary_description`)을 업데이트하는 로직을 생각해보자 일반적인 작업은 'employee'테이블에서 job_title을 조회하고 이 값을 이용하여 `employee_salary` 테이블을 업데이트하는 `UPDATE` 문을 작성한다.- `employee` 테이블: 직원 정보를 저장하는 테이블- `employee_salary` 테이블: 직원의 급여 정보를 저장..