본문 바로가기

반응형

분류 전체보기

(174)
[ 프로그래머스 Lv2] 멀쩡한 사각형 (Javascript) https://school.programmers.co.kr/learn/courses/30/lessons/62048 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제의 핵심은 최대공약수를 사용하는 것이다. 왜 최대공약수를 사용해야 하는지 그 이유를 살펴보자. 이 문제를 이해하기 위해서는 닮음비의 개념을 알아야 한다. 문제에서 사각형만 다루므로 사각형으로 예시를 들겠다. 닮음비란 두 도형이 닮음일 때, 거기서 대응하는 변의 길이의 비를 말한다. 좀 쉽게 말하면 가로, 세로 길이에 n을 곱한 것을 말한다. n을 곱함으로써 도형이 n배 커질 수 있고, 반대..
엘리스 2차 프로젝트 회고 프로젝트가 끝나고 일주일이 지났다. 3주 동안 정말 열심히 했던 프로젝트였다. 2차 프로젝트는 리액트로 처음 개발하는 나에게 아주 의미있는 프로젝트였다. 리액트를 배운지 2달도 채 안 된 상태에서 시작한거라 처음에는 막연한 두려움이 있었지만 금방 적응했다. 1차 프로젝트를 바닐라 자바스크립트로 진행했어서 그런지 개발하면서 리액트의 편리함을 느낄 수 있었다. 내가 회고글을 적는 이유는 1차 프로젝트 회고글에서 언급했듯이 내가 했던 것들을 기록하기 위함이기도 하지만, 엘리스 sw 엔지니어 트랙을 고민하는 사람들에게 정보를 주기 위함이기도 하다. 또한 미래의 엘리스 레이서분들이 프로젝트를 진행하면서 혹시나 이 글을 보게 된다면 참고해도 좋을 것 같다. 여행가다 GitLab이 비공개로 설정되어 있어서 나중에 G..
[ CSS ] 로딩 애니메이션 구현 위와 같은 로딩 애니메이션을 구현해보자. 굉장히 간단해서 딱히 설명할건 없다... 전체 코드는 이 글의 끝에서 확인할 수 있다. 구현 순서는 아래와 같다. 1. 정적인 점 세 개 생성 2. 애니메이션 적용 정적인 점을 생성하는 것은 생략하고, 애니메이션을 어떻게 적용해야 하는지만 살펴보자. 우선 점 세 개에 적용되는 애니메이션은 하나를 제외하고 전부 동일하다. 바로 animation-delay다. 따라서 사실상 공통적으로 적용되는 애니메이션만 구현하면 된다. 애니메이션에 사용되는 속성은 두 가지다. 뭐가 바뀌는지 자세히 보자. 정답은 '크기'와 '투명도'임을 쉽게 알 수 있다. 투명도는 0에서 1로 변하고, 크기는 작아졌다가 커지고 있다. 따라서 opacity와 transform을 사용하면 된다. @ke..
[ React ] styled-components로 드롭다운 메뉴 구현 styled-components로 드롭다운 메뉴를 직접 구현해보자. 결과물은 아래와 같다. 샘플 코드는 이 글의 끝부분에서 확인할 수 있다. css에 대한 설명은 생략하고, 어떤 원리로 구현했는지를 위주로 적을 생각이다. 구현 전략 너무 복잡하게 생각하지 말고 쉽게 접근해보자. 어떤 행위를 하는지, 각 행위마다 어떤 변화가 있는지를 생각해보면 된다. 행위(원인)에 따른 결과를 정리하면 크게 세 가지 케이스로 분류할 수 있다. 참고로 '드롭다운 메뉴'란 위 그림에서 마이페이지, 게시판을 의미하며, '세부 메뉴 박스'란 '메뉴1 ~ 메뉴3'이 있는 박스를 말한다. 그리고 편의상 화면 상에 있는 것을 mount, 화면 상에 없는 것을 unmount로 부르겠다. 1. 세부 메뉴 없는 상태에서 드롭다운 메뉴를 클..
엘리스 1차 프로젝트 회고 미루고 미뤘던 1차 프로젝트 회고 글을 이제서야 쓴다. 내가 이 글을 쓰는 이유는 내가 했던 것들을 기록하기 위함이기도 하지만, 엘리스 sw 엔지니어 트랙을 고민하는 사람들에게 정보를 주기 위함이기도 하다. 또한 미래의 엘리스 레이서분들이 프로젝트를 진행하면서 혹시나 이 글을 보게 된다면 참고해도 좋을 것 같다. 느낀점 위주로 적을거라 생각보다 참고할게 없을 수도 있다...ㅎㅎ Vivid Clothes https://github.com/dsyhwk1016/VividClothes GitHub - dsyhwk1016/VividClothes: shopping mall project with vanilla javascript shopping mall project with vanilla javascript. C..
[ React ] styled components 사용법 간단 정리 기본 구문 // 구문 styled.tagName`css code` // 예시 import styled from 'styled-components'; const Component = styled.p` color: blue; ` Hello World! props 사용법 import styled from "styled-components"; const Component = styled.div` font-size: ${(props) => props.large ? 16 : 12}px; font-size: ${({large}) => large ? 16 : 12}px; // 이 방법도 가능 ` Hello World! Hello World! // 위 둘은 완전 동일 조건부 스타일 생성 import styled, { c..
[ React ] React Redux API (with 카운터 예제) Redux는 상태 관리 라이브러리다. 리액트 빌트인 훅에서 useReducer와 useContext가 합쳐진 느낌이다. 따라서 useReducer와 useContext를 잘 이해했다면 React Redux도 어렵지 않게 이해할 수 있다. Redux의 핵심은 세 가지로 축약할 수 있다. 1. 상태는 readOnly다. 2. reducer는 순수 함수여야 한다. 3. 하나의 애플리케이션에는 하나의 store가 있다. 상태가 readOnly라는 뜻은 상태 변경시 state에 직접적인 변화를 주는 것이 아니라, 기존의 state로 새로운 state를 생성하는 것을 의미한다. 이는 리액트에서 setState를 사용할때와 동일하다. 예를 들어 상태값이 배열 또는 객체라면, 상태를 업데이트 하려면 spread 연산자..
[ Javascript ] 조합, 중복조합, 순열, 중복순열 (feat. 재귀함수) 자바스크립트로 재귀함수를 활용해서 조합, 중복조합, 순열, 중복순열을 구현해보자. 아래는 공통적으로 등장하는 변수에 대한 설명이다. 1. list → 선택 배열 const list = ['a', 'b', 'c', 'd', 'e']; 2. result → 결과값이 저장되는 배열 3. items → 선택한 요소를 담는 배열 4. k → 선택하는 개수. n_C_k 에서 k를 의미한다 5. idx → list 인덱스 정보 구현하는 로직을 간단하게 얘기하면 list에서 선택한 요소를 items 배열에 담는데, items 배열의 크기가 k 가 되면 result 배열에 push 하는 것이다. 조합 직관적으로 생각해보자. a ~ e 까지 담긴 배열에서 서로 다른 세 개의 문자를 선택하려고 한다. 어떻게 할 것인가? 아..

반응형