문제 💡 로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기한 각각의 Symbol과 Value는 다음과 같습니다. I = 1, V = 5, X = 10, L = 50, C = 100, D = 500, M = 1000. 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900 입니다. 풀이 function romanToNum(s){ c..

들어가기 전에 westagram 구현 중 useState 부분에 관한 이해가 부족하여 실습을 진행하였으나 여럿 에러들을 만났다. useState에 대한 개념을 다시 잡고자 만났던 에러들 중 하나를 뜯어보며 글을 남겨보려 한다. useState의 기본적인 개념 useState는 리액트 16.8에서 나온 Hook 기능 중 하나이며 컴포넌트에서 동적인 상태를 관리할 수 있다. const [state, setState] = useState(initialState); https://reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces reactjs.org 첫번째 값인..

리액트 연습을 위해 폴더를 만들고 npx create-react-app . 을 실행했는데 오류가 생겼다. name can no longer contain capital letters 말 그대로 대문자를 포함할 수 없다는 것이다. devseulgi@Seulgiui-MacBookAir ReactPractice % npx create-react-app . Cannot create a project named "ReactPractice" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name. devseulgi@Seulgiui-MacBookAir Reac..

문제 💡 strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 ' '; 들어가기 전에 처음에 문제만 보고 쉽다고 생각했었지만, 제한 시간 1시간 안에 풀지 못했던 문제이다. 이후에 다른 사람의 풀이를 확인하고 나서야 접근 방법 자체는 근접했지만 왜 풀지 못했는지 알 수 있었다. 복잡한 풀이일수록 중간 중간에 console.log를 통해 확인하는 습관을 가지고, 풀리지 않는다면 사고의 전환을 꼭 해보자! 풀이 const getPrefix = strs => { for (let i=1; i

문제 💡 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 / return: true or false (뒤집은 모양이 num와 똑같은지 여부) 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때문 num = -121 return false => 뒤집은 모양이 121- 이기 때문 num = 10 return false => 뒤집은 모양이 01 이기 때문 풀이 const sameReverse = num => { let numString = num.toString(); let reversed = numString.split("").revers..

문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums : 숫자 배열 target : 두 수를 더해서 나올 수 있는 합계 return : 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. ( 가정 : target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.) 풀이 const twoSum = (nums, target) => { // twoSum함수에 숫자 배열과 '특정 수'를 인자로 넘기면, // 더해서 '특정 수'..

🚀 학습 목표 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다. React가 무엇인지 정의할 수 있다. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다. Component의 개념과 종류에 대해 설명할 수 있다. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다. 기존에 구현한 Westagram을 React로 변환해 렌더링 할 수 있다. 💡 무조건 코드 많이 쳐서 익히자! 3세대 웹이 나타난 이유? 웹이 발전하며 처리해야할 것이 많아짐 프론트엔드와 백엔드가 나눠짐 대표적인 웹 프레임워크 & 라이브러리 앵귤러Angular → 프레임워크 뷰Vue → 프레임워크 리액트React → 라이브러리 웹 프레임워크 & 라이브러리의 차이 내장 기능 유무 차이 프레임워크 ..

Why React? React는 페이스북 엔지니어들에 의해 만들어진 JavaScript 라이브러리이다. 사람들이 React를 선택한 이유는 다음과 같다. 빠른 속도. React로 만들어진 앱은 복잡한 업데이트를 다룰 수 있으면서도 반응성이 좋다. 모듈성. 큰 파일이 아닌 작고 재사용이 가능한 파일을 사용. React의 모듈성은 JavaScript의 유지보수 관리에 좋은 솔루션이 된다. 확장성. 유동적인 데이터를 다루는 대형 프로그램이야말로 React에 적합하다. 유연성. 사람들은 아직도 React를 어디에 쓸 수 있을지 고민하며 이곳 저곳에 접목한다. 유명성. 취뽀에도 한 몫한다. 이건 또 무슨 새로운 언어인고 const h1 = Helllo world; 🤨? 자바스크립트와 HTML의 짬뽕의 모습. 조금..

들어가기 전에 드디어 위코드에서 JacaScript를 활용한 제일 기초적인 활용을 하게 되었다. 아직까지 JS에 대해 설명하라면 하지도 못하겠지만 부딪혀가며 직접 기억에 우겨넣도록 하자! 우선, 키보드 입력과 연관 된 이벤트들을 알아보자 onekeyup : 사용자가 키보드에서 키를 놓을 때 생기는 이벤트 onekeydown : 사용자가 키보드에서 키를 누를 때 생기는 이벤트 onekeypress : 글씨가 써질 때 생기는 이벤트(shift, ctrl, backspace, tab 한글 등을 인식 못 함) 이런 식으로 input 혹은 button 태그에 관련 함수를 생성하여 넣는 식으로 사용할 수 있다. ➕ button 태그의 disabled 속성 활용 태그의 disabled 속성은 해당 버튼이 비활성화됨을..

class 객체를 생성하기 위한 템플릿. 함수의 종류라고 볼 수 있으며, class 문법에도 표현식과 선언 방법이 있다. Class 선언 class를 정의하기 위한 방법 중 하나로, class와 함께 class의 이름을 지정해야한다. class WeCode { constructor(height, width) { this.height = height; this.width = width; } } Hoisting function과 class 선언의 중요한 차이점은 function의 경우, 정의를 하기 전에 호출이 가능하지만 class는 반드시 정의를 해야 사용할 수 있다. const student = new WeCode(); class WeCode {} // ReferenceError! 꼭 선언 후 호출하도록..