분류 전체보기
위코드 3주차 회고 - React
위코드 3주차 회고 - React
2022.05.15📝 React, Sass를 배우며 정신없이 하루를 보내다 보니 어느덧 3주 차가 지나고 있다. 3주 차에서는 기존에 만들었던 인스타그램 클론코딩을 토대로 React로 바꾸는 작업을 했다. 새로운 개념 JSX, component, props, state, router 등을 익히고 곧바로 적용하는 식으로 React를 익혀가고 있다. 또한 적용하면서 CSS가 제대로 적용되지 않는 상황을 마주하게 되었고, 어떻게 해야 할지 고민하고 있을 때 Sass라는 개념을 배우게 되었다. 3주 차에서는 '나에게만 주어지는 시간 하루 이틀만 더 있으면 좋겠다.'라는 생각이 머릿속을 떠나지 않았다. 아직도 익혀야 할 개념과 기술들이 한참 남은 지금, 나만의 시간이 조금만 더 있다면 얻을 수 있는 게 더 많을 텐데 라는 상상을 ..
[CodeKata] getPrefix 함수 구현하기
[CodeKata] getPrefix 함수 구현하기
2022.05.13문제 strs은 단어가 담긴 배열이다. 공통된 시작 단어(prefix)를 반환하기로 한다. 예를 들어 strs=['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 '' const getPrefix = strs => { let prefix = ''; // prefix 없을 경우 ''을 반환한다. let sortStrs = strs.sort(); if(sortStrs.length === 0){ return '' } for(let i = 0; i
[CodeKata] sameReverse 함수 구현하기
[CodeKata] sameReverse 함수 구현하기
2022.05.12문제 숫자 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 => { const nums = parseInt(num.toString().split('').reverse().join('')); return (nums =..
Sass(SCSS) 적용하기
Sass(SCSS) 적용하기
2022.05.12📝 개요 CSS는 작업이 고도화 될수록 불필요한 선택자 과용, statement 부재 등 규모가 커질수록 불편함도 같이 커진다. JavaScript에서 작업하다가 React로 옮기면서 잘 적용되던 CSS가 제 역할을 못해서 내가 구성했던 화면들이 뭉개지는 결과를 확인할 수 있었다. 이를 해결하고자 SCSS 사용 방법에 대해서 알아보고자 한다. 🚀 목표 SCSS를 작성하는 방법에 대해서 이해할 수 있다. SCSS 기본 문법을 숙지하고 실제로 적용할 수 있다. Sass CSS를 사용하다보면 내용이 쌓일수록 속성을 부여하더라도 적용되지 않는 순간이 온다. 코드가 길어지면 가독성이 떨어지고 유지보수의 어려움을 주는데 사람이 보고 작성하기에는 전혀 좋은 형태가 아님을 느낄 수 있다. 이 때 반복되는 내용은 줄여 ..
React Router 사용하기
React Router 사용하기
2022.05.12📝 개요 기존 자바스크립트는 MPA 방식으로 .html 파일이 페이지 수 만큼 존재했고 새로운 페이지를 로드하는 방식이 아니었다. 하지만 리액트로 넘어가면서 SPA 방식으로 .html 파일 갯수가 1개가 되었고 하나의 페이지 안에서 필요한 데이터를 가져오는 방식을 취하게 되었다. SPA를 다루기 위한 라우터에 대해서 정리하는 시간을 갖도록 한다. 🚀 목표 SPA가 무엇인지 설명할 수 있다. react-router-dom을 이용해 Routes Component를 구현할 수 있다. react-router-dom에서 Routing 하는 방법 2가지와 차이점을 설명할 수 있다. Component와 Tag의 차이점에 대해서 설명할 수 있다. SPA SPA(Single Page Application) : 페이지가 ..
[CodeKata] getLengthOfStr 함수 구현하기
[CodeKata] getLengthOfStr 함수 구현하기
2022.05.11문제 String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. str : 텍스트를 반환하는데 중복되지 않은 알파벳 길이(숫자 반환) 예를 들어, str = "abcabcabc"라면, return은 3이다. 왜냐하면 'abc'가 가장 길기 때문이다. str = "aaaaa" retrun은 1이다. 왜냐하면 'a'가 가장 길기 때문이다. str = "sttrg" retrun은 3이다. 왜냐하면 'trg'가 가장 길기 때문이다. 풀이 얼추 for문으로 문자열 하나하나를 비교하며 slice() 메서드를 사용하는 것까지는 접근했지만 도저히 해결할 수 없었다. 그래서 구글에 모범 답안을 가져와서 이해하고 정리하는 시간을 가졌다. const getLengthOfStr ..
[CodeKata] reverse 함수 구현하기
[CodeKata] reverse 함수 구현하기
2022.05.10문제 reverse 함수에 정수인 숫자를 인자로 받는다. 그 숫자를 뒤집어서 return 해주세요. 1. 인자로 1234 숫자가 들어왔다면 4321이라는 숫자를 반환해야 한다. 2. 인자로 -1234 숫자가 들어왔다면 -4321이라는 숫자를 반환해야 한다. 3. 인자로 1230 숫자가 들어왔다면 321이라는 숫자를 반환해야 한다. 풀이 짝이랑 진행한 코드 function reverse(nums) { let numToString = nums.toString(); // 숫자를 문자열로 let arr = numToString.split(''); // 문자열을 배열로 let arrReverse = arr.reverse(); // 배열을 거꾸로 if(arrReverse.includes('-')) { return ..
React 공식문서 주요개념 읽기 - 2
React 공식문서 주요개념 읽기 - 2
2022.05.10개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁♂️ 로 표시한 내용은 글을 읽고 난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. State and Lifecycle 💁♂️ React 공식문서 주요개념 5번을 읽는데 state라는 개념이 나왔다. 공식문서 내용을 일일이 생각하고 고민하며 옮겼음에도 불구하고 state가 무엇인지 감이 잡히지를 않았다. 공식문서에는 시계 예시가 나오는데 왜 state를 쓰는지 이해하지 못했다. 왜냐하면 바닐라 자바스크립트에서는 new Date()를 생성하고 시, 분, 초를 뽑아내서 해당 위치에 넣어주면 전자시계가 완성됐기 때문이다. 단순히 변수를 선언..
[CodeKata] twoSum 함수 구현하기
[CodeKata] twoSum 함수 구현하기
2022.05.09문제 twoSum 함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해주세요. nums : 숫자 배열 target : 두 수를 더해서 나올 수 있는 합계 return : 두 수의 index를 가진 숫자 배열 예시) nums는 [4, 9, 11, 14]이며, target은 13이다. nums[0] + nums[1] = 4 + 9 = 13이다. 그러면 return 값으로 [0, 1]이 되야 한다. 풀이 첫 번째 코드 for(let i=0; i