Front-End Dev.
-
[CodeKata] 위클리 프로그래머스(1월 4주차)Algorithm 2021. 1. 26. 11:12
🥋 Ooooth!! 어제부터 본격적인 독학을 시작하였다. 개인 프로젝트 진행만으로도 빠듯하지만, 부트캠프 바이오리듬을 유지하기 위해 매일 코드카타를 해보려한다. 프로그래머스 코딩 테스트 연습을, 레벨1부터 하루에 1개씩 매일 풀어볼 생각이다!! 빠샤잇!!!!! 👊 1.25(월) / 크레인 인형뽑기 게임 📜 문제 문제를 단순히 설명하자면, moves 배열은 board 이중배열(5x5)에 접근할 열 인덱스가 순서대로 들어있다. board의 해당 열의 최상단(그러니까 행은 0 ~ 4으로 확인) 요소가 0이 아닌 경우 이를 인형뽑기처럼 빼내온다고 생각하면 쉽다. 또한, 이것이 전에 뽑아온 요소와 같은 값인 경우, 이를 우측의 바구니에서 둘 다 제거하고 그 숫자만큼 result를 더해주면 된다. 🧮 풀이 func..
-
[CSS/Side Lib.] Styled ComponentsFront-End(Web)/HTML, CSS 2021. 1. 24. 21:53
2차 개인 프로젝트에서 디자인을 위해 Sass(SCSS) 외에 다른 라이브러리를 사용하려고 한다. 바로 'Styled-Components'!! 초기 세팅에 앞서, Styled-Components 개념공부, 설치 및 사용법을 간단히 학습하고자 포스팅을 시작했다.🧐🧐 📘 CSS-in-JS 란? Styled-Components 는 스타일을 가진 컴포넌트를 만들도록 도와주는 React의 대표적인 CSS-in-JS 라이브러리이다. CSS-in-JS 의 개념을 먼저 정리한다면, 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹 개발은 HTML - CSS - JS 각각 별도 파일로 분리하는 것이 기본적인 컨셉이었다. 하지만, React, Vue 등 모던..
-
[CodeKata] 위코드 5주차 코드카타Algorithm 2021. 1. 11. 03:18
🤔 서론 코드카타가 3주차에 돌입했다. 세션과 과제도 있었고, 무엇보다 이번주부터 프로젝트가 시작되며 새로운 팀원 기열님과 약속했다. '11시까지 코드카타를 끝낸다!', 그 시간동안 최대한 방법을 강구해보고, 구현도 시도해보고, 실패하면 모범답안을 서로 연구하겠다. 👊 1.11(월) / String 메서드 활용 📜 문제 두 개의 input에 복소수(complex number)가 string 으로 주어집니다. 복소수란 a+bi 의 형태로, 실수와 허수로 이루어진 수입니다. input으로 받은 두 수를 곱해서 반환해주세요. 반환하는 표현도 복소수 형태의 string 이어야 합니다. 복소수 정의에 의하면 (i^2)는 -1 이므로 (i^2) 일때는 -1로 계산해주세요. 예제 1:Input: "1+1i", "1+..
-
[CodeKata] wecode 4주차 코드카타Algorithm 2021. 1. 3. 21:24
🤔 서론 코드카타도 벌써 2주차에 접어들었다. 알고리즘 문제를 반복하면서 중요하다고 느낀 2가지이다. 로직화와 예외처리. 중복되는 구문의 반복문 처리와 함수 메서드를 통한 심플한 로직화, 다양한 예외를 처리하기 위한 방법고민을 명심하며, 이번주에 새로 배정된 승완님과 팀업하여 코드카타를 한주간 진행하였다. 👊 1.3(월) / 반복 조건문 + 조건에 객체활용 📜 문제 : 로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. - 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 / XII = 12 / XXVII = 27 입니다. - 그런데 4를 표현할 때는 IIII가 아니라 ..
-
[Javascript] 2차원 배열 만들기(Array.from())Front-End(Web)/Javascript 2021. 1. 3. 16:56
미니 프로젝트를 진행하며, 100개의 정보를 10개씩 2차원 배열의 형태로 가공해야하는 문제가 있었다. 물론 이중 for문을 돌리면 심플하게 구현할 순 있지만, state로 활용했을 때 [] => 2차원 배열 업로드 전 초기화에서 문제가 있었다. (0번째 인덱스 배열을 초기값으로 쓰려고 했으나, default는 [] 1차원 배열이기에 에러 처리가 되었다.) 정답과 비교해보니, Array.from() 이라는 메서드를 활용하기도 해서 2차원 배열에 대한 고찰을 적어내려 가보고자 한다. 🧑💻 2차원 배열 만들기 1. 2중 for문 : 가장 직시적인 형태, row 및 columns 길이만큼 각각 반복하며 요소들을 push 한다. function get2DArray(r, c) { const result = []..
-
[Day 13] UX(User Experience), React(State, Props)카테고리 없음 2020. 12. 31. 12:11
🤔 서론 오늘은 세션들과 시험이 많이 구성되어 있지만, UX와 더불어 React의 핵심이라 할 수 있는 State, Props 세션에선 특히 집중해야겠다. 🥋 CodeKata : Day 03 3주차 코드카타 리뷰 : abangpa1ace.tistory.com/47 [CodeKata] wecode 3주차 코드카타 🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 abangpa1ace.tistory.com 🧑💻 Session : UX와 웹 개발 1. 웹사이트의 발전 정보량 과다, 문서 이상의 매체 다양한 디바이스들의 등장 복잡해진 화면, 정보를 보다 빠..
-
[CSS/Side Lib.] SASS, SCSSFront-End(Web)/HTML, CSS 2020. 12. 29. 15:40
오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다. 🧑💻 Session : Sass - Sass 란? Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다. Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss) 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다. 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다. * CSS 전처리기 3대장 :..
-
[React.js/Side Lib.] React-RouterFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 29. 00:52
미니 프로젝트에서 네비게이션 메뉴에 React-Router를 적용해서 페이지를 변경해보았다. 범용적인 라이브러리기에 기술 포스팅을 하였다. 🧑💻 Routing - SPA(Single Page Application) React-Router 에 대해 공부하기 전에, 그 사용목적에 대해 얘기하려면 SPA 방식의 학습이 선행되어야 한다. SPA는 말 그대로, 페이지가 1개인 어플리케이션을 의미한다. 여기에서 페이지라 함은 HTML 파일을 의미한다. 그래서, 리액트같은 라이브러리(혹은 프레임워크)가 브라우저에서 뷰 렌더링을 담당하게 하고, 필요한 데이터만 전달받아 표현하게 된다. 기존의 MPA 와 가장 큰 차이는, 각 주소가 HTML 페이지가 아닌 JS파일(컴포넌트)을 불러와서 뷰를 수정하는 'Routing' ..