문제🔽https://school.programmers.co.kr/learn/courses/30/lessons/12939 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr다른사람 풀이🔽function solution(s) { const arr = s.split(' '); return Math.min(...arr)+' '+Math.max(...arr);}내풀이🔽function solution(s) { const splitedStr = s.split(" "); let [min,max] = [Math.min(...splitedStr)..

💡Typescript는 Javascript에 type을 입힌 언어이며 Typescript로 작성한 code를 javascript로 compile해 그 결과물을 프로젝트에서 사용한다. compile할 때 compile 옵션을 설정해야 하며 이런 option은 tsconfig.json이라는 파일에서 설정이 가능하다.  🚀지금부터 기본적인 Typescript 환경을 구성해보려고 한다.  1. 타입 스크립트를 설치한다. -> npm install typescript [ --save or --save-dev or -g ]   2. tsconfig.json 생성 및 compile 옵션 설정 ( ts -> js 로 compile시 옵션을 tsconfig.json에 작성 )->  참고 ) 프로젝트 최상단에 tsco..

💡 우리는 import, export를 통해 다른 js파일에 정의된 함수, 변수등을 가져와 사용할 수 있다. 그때 사용되는 import와 export에 대해 알아보고자 한다. ※ 참고사항)  node 환경에서 module의 import, export를 test하고자 한다면 반드시 package.json에서 하단과 같은 옵션을 설정해야 됩니다. "type": "module" 본격적으로 import와 export의 사용 예제를 확인해보자! 예시 1)// b.jsfunction f1(){ console.log("f1 호출") }let variable = "variable"export {variable, f1} //a.jsimport {variable, f1} from './b.js'console.log(va..

결론 부터 말하자면 Prototype과 __proto__가 지칭하는 객체는 동일하며 ( 글쓴이가 가정한 상황 속에서는 ) prototype은 생성자 함수의 property에서 그리고 __proto__ 는 생성자 함수를 통해 생성된 새로운 객체의 property에서 확인 할 수 있다.  function car(brand,price){ this.brand=brand this.price=price} 위와 같이 car라는 function을 정의하는 순간 자바스크립트 내에서는 car라는 객체가 생성되는 동시에 ( 자바스크립트 에서 함수도 객체 ) car.prototype이라는 객체도 생성됩니다. 그리고 그 prototype 객체에는 constructor라는 property가 있고 그 property값은..

왜 Formik library를 사용할까?React에서 많이 쓰는 Form library인 Formik을 학습하려고 한다.  학습하기에 앞서 공식 Formik Hompage에서 왜 Formik library를 사용하는지 알아 보았는데 그 이유는 React에서 form은 매우 장황( 사용하기 덜 직관적인으로 해석하면 되려나 .. )하고 비용( 무겁다고 해석 하면 될듯 ?)이 많이 들기 때문이라고 한다. 즉  Formik LIbrary를 사용하면 react에서 Form을 좀 더 쉽고 정돈된 형태로 사용 할 수 있다고 한다. 더군다나 이 libarary는 매우 가볍다고 나와 있다 ( 아래에 내용이 나와 있다. - 하단 참고 )  https://formik.org/docs/overview Overview | F..

📘 Redux에 관해 공부 중 아주 훌륭한 학습 자료를 찾았다. https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 [무료] 생활코딩 - Redux - 인프런 | 강의생활코딩에서 제공하는 Redux 강의로, 자바스크립트를 중급 이상 다루는 분들을 대상으로 리덕스를 이용해 더 단순한 코드로 더 복잡한 애플리케이션을 만드는 방법에 대한 수업입니다., - 강의www.inflearn.com 🔥프로그래밍을 하는 사람이라면 모두 아는 '생활코딩' 자바스크립트를 어느정도 아는 사람이라면 무리 없이 들을 수 있는 강의였다. 강의에서는 리덕스를 '왜?' 쓰는지 아는 것이 가장 중요하다고 강조를 한다. 추상적인 개념을 그림을 통해 굉장히..

Javascript에서 변수는 굉장히 유연하다. 이 유연함이 장점이 될 수도 있지만 복잡한 서비스를 만들 때 code량이 증가하면서 type에 대한 착각을 할 경우가 생긴다. 이런 단점을 위해 필요한 javascript 확장 언어가 Typescript고 frontend 개발자라면 무조건 숙지가 필요한 언어임이 틀림 없다고 한다.   Typescript를 처음 입문하기 위해서 수강할 인터넷 강좌를 찾던 중 인프런에서 아래와 같은 강좌를 발견하고 수강을 했다.아래 강좌는 실제로 typescript를 이용하여 code를 작성하면서 어떻게 활용되는지 보여주면서 강의를 진행한다.  https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6..

프론트엔드 양성과정 국비수업을 들으면서 webpack에 대한 개념을 알게 됐지만 실제로 webpack을 사용한 적도 어떻게 적용해야 되는지 무지한 상태였다. 그래서 인프런에서 제공하는 webpack 강의를 수강했다. (  ↓↓↓ 하단 링크 )  html, css, javascript를 어느 정도 알고 있는 상태여서 추가로 선 학습없이 쉽게 강의를 들을 수 있었고, 실제 vscode 상에서 적용하는 예시를 보여주며 설명하는 방식이 머리에 쉽게 들어왔고, 한 강당 3 ~ 5분으로 집중력을 계속 유지됐다.  https://www.inflearn.com/course/%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9%ED%8C%A9 프론트엔드 개발자를 위한 웹팩 ..

개발하는 크롱 크롱의 Dev Log 검색하기 CATEGORY ReactJS | NextJS [Warning: Each child in a list should have a unique "key" prop.] 에러 해결 개발하는 크롱 2020. 12. 22. 01:37 문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링..

window 환경 vscode 에서는 react component에서 swiper를 사용했을 때 swiper.css와 그외 다른 파일을 import하는데 문제 없었지만 code를 linux ubuntu server에 올렸을 때 문제가 생겼다.. 아래와 같은 현상이 었다. --> https://github.com/nolimits4web/swiper/issues/4871