분류 전체보기
위코드 4주차 회고
위코드 4주차 회고
2022.05.22위코드 커리큘럼 'Foundation -2'가 끝났다. 4주 차 마지막 날에 바로 옆 방에서 1, 2차 프로젝트를 진행하며 같은 층을 사용하던 32기가 기업 협업에 들어가면서 짐을 비웠다. 빈자리에는 기업 협업을 끝낸 31기가 그 자리에서 수료식을 진행하고 있었다. 수료식을 진행하는 31기들의 얼굴을 보았는데 다들 표정이 밝았다. 그 모습을 보고 지난 한 달 동안 후회가 남지 않도록 열심히 했는지, 이대로라면 나도 수료식 때 밝은 표정으로 마무리를 할 수 있을지 생각하게 되었다. 다음 주면 빈 방에는 34기가 들어오게 되면서 33기는 기대되는 1차 프로젝트를 진행하게 된다. 백엔드와의 통신 📡 Foundation-2 기간 동안 useEffect, Mock data 등의 개념을 익혔고, 이를 토대로 본인의..
[CodeKata] getMaxArea 함수 구현하기
[CodeKata] getMaxArea 함수 구현하기
2022.05.22문제 인자인 height는 숫자로 이루어진 배열이다. 그래프로 생각한다면 y축의 값이고, 높이 값을 가지고 있다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7]이다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환하라. 풀이 function getMaxArea(height) { let size = 0; for(let i=0; i
[CodeKata] topK 함수 구현하기
[CodeKata] topK 함수 구현하기
2022.05.21문제 nums는 숫자로 이루어진 배열이다. 가장 자주 등장한 숫자를 k갯수만큼 return해 주세요. ex. nums = [1, 1, 1, 2, 2, 3]; k = 2; // return : [1, 2] nums = [1]; k = 1; // return [1] 풀이 function topK(nums, k) { let obj = {}; nums.map(num => { if(obj[num]){ obj[num] = obj[num]+1 } else { obj[num] = 1 } }) let objSort = Object.keys(obj).sort((a,b) => {return obj[b]-obj[a]}); return objSort.slice(0, k).map(e => Number(e)); } 객체 만들기 o..
[CodeKata] isValid 함수 구현하기
[CodeKata] isValid 함수 구현하기
2022.05.19문제 isValid는 여러 괄호들로 이루어진 String 인자를 받는다. 인자가 유효한 표현인지 아닌지 true/false로 반환해주세요. 종류는 (, ), [, ], {, }으로 6개 있다. 한 번 괄호를 시작했으면, 같은 괄호로 끝나야 하며 괄호 순서가 맞아야 한다. () → true ()[]{} → true (] → false ([)] → false {[]} → true 풀이 function isValid(s) { if(s.length % 2) { return false; } // 홀수는 무조건 false const bracket = { "(": ")", "{": "}", "[": "]" } const ref = []; for(let i=0; i
React Mockdata
React Mockdata
2022.05.19📝 개요 프론트 개발을 하다보면 UI 구성에 필요한 데이터가 생길 수 있다. 데이터가 정적인 경우 UI에 필요한 데이터를 서버에서 가져오지 않고 프론트에서 직접 구성한다. 서버에서 받아야 하는 값이라도 백엔드 API가 완성되지 않았을 수 있다. 이때 서버에서 받을 값을 예상해서 UI 개발을 진행할 수 있다. UI를 표시하기 위해 필요한 상수데이터, 그리고 API를 모방하기 위한 mock data를 어떻게 만들고 활용하는지 알아본다. 상수 데이터 이름 그대로 변하지 않는 데이터로 정적인 데이터를 의미한다. UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다. 상수 데이터를 사용하는 이유로는 반..
React useEffect 사용하기
React useEffect 사용하기
2022.05.19📝 개요 웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행 시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. 이 때 useEffect훅이 필요하며, 빈번히 사용되는 중요한 개념이므로 useEffect에 대해서 정리하는 시간을 갖는다. React에서 함수 컴포넌트의 rendering이란 state, props 기반으로 UI요소를 그려내는 행위이다. (state, props) => UI와 같이 표현이 가능하다. 즉, rendering 결과물은 UI요소로 JSX 문법으로 무엇이 나타날지 적어둔 component이다. Side Effect 컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 '부작용'이..
[CodeKata] moreThanHalf 함수 구현하기
[CodeKata] moreThanHalf 함수 구현하기
2022.05.17문제 숫자로 이루어진 배열인 nums를 인자로 전달한다. 숫자중에서 과반수가 넘은 숫자를 반환해주세요. nums 배열의 길이는 무조건 2개 이상으로 가정한다. ex. nums = [3, 2, 3] => return 3 nums = [2, 2, 1, 1, 1, 2, 2] => return 2 function moreThanHalf(nums) { const result = {}; nums.map(item => { if(result[item]) { return result[item] = result[item] + 1; } else { return result[item] = 1; } }) for(let i in result) { if(result[i] > (nums.length/2)) { return Numbe..
[CodeKata] romanToNum 함수 구현하기
[CodeKata] romanToNum 함수 구현하기
2022.05.16문제 로마자에서 숫자로 바꾸기 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로 표현한다. IV=4, IX=9, XL=40, XC=90, CD=400, CM=900 const roman = { 'I': 1, 'V': 5, 'X': 10, 'L': 50, 'C': 100, 'D': 500, 'M': 1000 } const romanToNum = (r..
React 댓글기능 구현하기
React 댓글기능 구현하기
2022.05.15📝 개요 JavaScript로 구현한 로그인, 댓글 기능을 React로 바꾸고자 한다. 댓글 기능을 구현하면서 React의 props, state 개념을 이해한다. 댓글을 구현하기 위해 사용한 state let [userName] = useState('hacker'); let [comment, setComment] = useState(''); let [feedComments, setFeedComments] = useState([]); let [isValid, setIsValid] = useState(false); userName 같은 경우는 사용자 정보를 받아오지 않고 'hacker'라는 내용을 담아놓고 사용하고 있다. comment는 사용자가 입력하고 있는 댓글이다. 태그에서 onChange를 이용하여..