코딩연습장

오랜만에 새로워진 웹개발종합반 강의를 들었다.이전에 들었던 것과 비슷하게 html의 태그들을 알려주고, css를 사용하는 법을 알려주었다.결국엔 display: flex를 마주했다.한창 코딩을 할 때에도 이건가? 이건가? 하면서 헤맸던 속성이지만 이젠 떨쳐내려한다. display : flex; 가나다라 마바사아 자차카 타파하 이렇게 코드를 작성했다고 쳐보자. 그렇다면 화면은 아래와 같을 것이다.wrap 내부의 div의 height는 틀의 최대값을 가지게 되고, width는 미리 지정해준 값이나 내부에 들어있는 요소에 딱 맞게 적용된다.flex-direction: ~~;flex-d..

내가 작성한 코드function solution(n) { var answer = []; for (let i = String(n).length-1; i>=0; i--) { answer.push(Number(String(n).split('')[i])) } return answer;}반복문을 사용해 인덱스가 큰 번호부터 0번까지 배열에 push하도록 작성하였다.  다른사람이 작성한 코드function solution(n) { return (n + '').split('').reverse().map(n => parseInt(n));}n+''으로 문자열로 바꾼 뒤 split메서드를 활용해 배열로 바꾸고reverse()메서드를 사용하여 뒤집은 뒤 map메서드로 각 요소를 숫자화..

내가 작성한 코드function solution(numbers) { let answer = 0; numbers.map(x=> answer+=x) return (answer/numbers.length).toFixed(1)}map 함수를 사용하여 기존에 선언한 변수 answer에 각 요소를 더하도록 작성하였다.그리고 return에서 평균값을 구해주고, toFixed()를 사용하여 소수점 1자리까지 표시하도록 작성하였다. function solution(numbers) { return numbers.reduce((a,b) => a+b, 0)/numbers.length;}reduce 메서드를 사용하면 더 간단하게 표현할 수 있다.reduce는 배열의 값을 더하거나 곱할 때 사용한다.위 코드..

내가 쓴 코드function solution(n) { let answer = 0; for (let i=0; i반복문과 조건문을 활용하여 짝수일때만 변수에 더하도록 설정하였다. 다른사람이 작성한 코드function solution(n) { var answer = 0; for(let i=2 ; i반복문만을 활용하여 i가 2부터 시작해 짝수로만 증가하게하고 n까지 비교하여 더하도록하였다.내가 작성한 코드는 반복문도 두배에 매 반복마다 조건을 검사해야했는데, 이렇게 짝수로만 반복문을 사용하면연산시간을 엄청나게 줄일 수 있다.

내가 작성한 코드function solution(num1, num2) { return Math.floor(num1/num2*1000);}Math.floor()을 이용해 내림을 사용하여 알고리즘을 풀어냈다.하지만 floor은 '버림'이 아닌 '내림'이므로 음수값이 출력되었을 때 틀리게 나온다.따라서 Math.trunc()의 '버림' 기능을 사용하는 것이 알맞다. 예를들어 num1이 -3, num2가 2일 때 -3/2는 -1.5이다.여기서 문제는 정수 부분만 원하므로 -1이 나와야하지만, 음수에서의 내림은 0방향에서 먼쪽으로 내리므로Math.floor()을 사용하게되면 -2가 나온다. 따라서 Math.trunc()를 사용하여 -1을 도출해내는 것이 알맞다. 알맞은 코드function solution(n..

내가 React 트랙에 참여한 계기는 무엇인가요?제일먼저, 공부하는 것에 재미가 있었다. 의무교육과 전공, 전공심화까지 16년의 교육을 받았지만 암기형식으로 배우고 시험을 위해 공부했던 때는 좋은 성적을 받을 때만 공부에 대한 보상감을 느꼈지만, 이전에 웹 프로그래밍을 배우며 공부에 흥미를 느꼈던 것이 가장 큰 이유이다. 이전 과정을 마치고 졸업하기위해 학교로 돌아갔을 때에도 지루하고 그냥 시간을 죽이며 살아왔던 것 같다. 하지만 코딩을 배울 때 만큼은 배움에서의 재미를 느껴 React 트랙에 참여하게 되었다.내가 이해한 개발자는 어떤 역할을 하는 사람인가요? 내가 이해한 개발자의 역할은 소통창구이다. 특히나 프론트엔드의 경우 더욱이 그렇다고 생각한다. 백엔드와 데이터의 흐름을 조율하고, 디자이너와 뷰를..

Prop Drilling이란 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기위해 여러 중간 컴포넌트를 통해 값을 내려주는 것을 의미한다.중간 컴포넌트에서 사용되지 않더라도 자신이 원하는 컴포넌트에서 사용하기 위해선 꼭 지나쳐야하는데 이때 부모에서 원하는 자식 컴포넌트까지 prop이 뚫고 내려가는 모양을 prop drilling이라 한다.import React from 'react';function App() { return ;}function GrandFather() { const name = '할아버지'; return ;}function Mother(props) { return ;}function Child({ GrandFatherName }) { console.log(G..

1. 태그는 꼭 닫기import React from 'react';function App() { }export default App;이렇게 input 태그를 닫지 않으면 에러가 발생한다. 2. 한개의 엘리먼트만 반환하기import React from 'react';function App() { return 하나! 둘!}export default App;엘리먼트를 하나만 반환하지 않으면 에러가 발생한다.으로라도 하나로 묶자. 3. JSX에서 JS값을 가져오려면, {}를 사용하자.import React from 'react';function App() { const name = 'DIDI'; return hello {name}!;}export default Ap..

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { console.log(input.join(''))}); join() 메소드를 사용해 배열 내 문자열들을 붙여서 출력했다.인덱스별로 + 연산자를 활용하여 출력할 수도 있다.

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { console.log(`${Number(input[0])} + ${Number(input[1])} = ${Number(input[0])+Number(input[1])}`);});백틱을 사용하여 원하는 출력형태로 출력하도록 작성하였다.깔끔하진 않다고 생각한다.  다른사람이 작성한..