Just Do IT!

내배캠 프로젝트에서 redux를 주로 사용했는데, 최종 프로젝트가 끝난 뒤 튜터님이 flux 패턴에 대해 아냐고 물어봐주셨고 당연히(?) 대답을 못했다. 그래서 그 이후에 찾아보고 리액트와 동일한 패턴이라고 알게 되었는데 적어두질 않으니 계속 까먹고 다시 찾는 불상사가 생겨서...이 기회에 한번 정리해보려고 한다. Flux 패턴이 나온 배경 Flux 패턴은 2008년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 이를 설명하면서 MVC 패턴의 한계를 이야기 했다고 하는데, 우선은 MVC 패턴부터 모르므로 아래에 설명을 남겨본다 MVC 패턴이란? MVC는 Model, View, Controller의 약자이다. Model에 데이터..

문제 설명 N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다. 입력 첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다. 출력 출력형식과 같게 N*1부터 N*9까지 출력한다. n = int(input()) for i in range(1, 10): print(n, '*', i, '=', n*i)

과제 전형 진행하던 와중에 저런 문구가 나왔다. useEffect에 나온 경고 문구였고 실행하는데는 문제가 없지만 이상하게 거슬려서(?) 구글에 그대로 쳐보았고, 역시나 같은 경고문을 받은 사람들의 글들이 나왔다. 원인 ' useEffect 내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문에 발생한다고 한다. 경고문이 나온 코드에서는 useEffect 안의 함수를 따로 바깥으로 빼내서 작성하고 그 함수만 넣어주었는데, 그래서 이 경고문이 나오지 않았나 싶다. 해결 방법 함수의 선언을 useEffect 내부로 옮겼고, 함수에서 사용되는 변수를 [] 안에 넣었더니 바로 오류가 해결되었다. 다른 방법도 있다. 바로 useCallback()을 사용하는 방법이다. 이..

styled-components 설치하려는데 자꾸 이 에러가 나와서 뭔가 하고 구글링으로 검색했다. 원인은, latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 에러가 발생한다는 것이었다. version6 이후부터는 저 명령어를 써서 설치하면 안된다는 것이었다...! npm install styled-components@latest // use yarn yarn install styled-components 이렇게 @latest 를 추가해서 최신 버전을 다운받으면 해결 완료했다.

margin border의 바깥쪽 여백 content의 영향을 받지 않는다 주변 요소와 거리를 두기 위핸 여백이다 auto, 음수는 margin만 가능하다 auto: 중앙에 배치, 좌우 균형은 균등하게 배치된다 padding content와 border 사이의 여백을 나타내는 영역 padding 역시 content의 일부라고 볼 수 있다 (예) background color가 존재하면 padding 영역도 영향을 받는다 auto X / 음수 X margin과 padding 사용법 속성 4개 : 시계방향(위, 오른쪽, 아래, 왼쪽) 순서 속성 2개 : 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미 속성 1개 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다 padding은 안쪽 ..

분류 구현, 문자열 문제 설명 단어 S와 정수 i가 주어졌을 때, S의 i번째 글자를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 영어 소문자와 대문자로만 이루어진 단어 S가 주어진다. 단어의 길이는 최대 10001000이다. 둘째 줄에 정수 i가 주어진다. (1≤i≤|S|1≤i≤|S|) 출력 S의 i번째 글자를 출력한다. s=input() print(s[int(input())-1]) 오랜만에 문제 푸니까 이 짧은 것도 헷갈렸다. 이제 빼먹지 말고 열심히 공부해야지....ㅠㅠ

분류 자료 구조, 구현, 스택 문제 설명 나코더 기장 재민이는 동아리 회식을 준비하기 위해서 장부를 관리하는 중이다. 재현이는 재민이를 도와서 돈을 관리하는 중인데, 애석하게도 항상 정신없는 재현이는 돈을 실수로 잘못 부르는 사고를 치기 일쑤였다. 재현이는 잘못된 수를 부를 때마다 0을 외쳐서, 가장 최근에 재민이가 쓴 수를 지우게 시킨다. 재민이는 이렇게 모든 수를 받아 적은 후 그 수의 합을 알고 싶어 한다. 재민이를 도와주자! 입력 첫 번째 줄에 정수 K가 주어진다. (1 ≤ K ≤ 100,000) 이후 K개의 줄에 정수가 1개씩 주어진다. 정수는 0에서 1,000,000 사이의 값을 가지며, 정수가 "0" 일 경우에는 가장 최근에 쓴 수를 지우고, 아닐 경우 해당 수를 쓴다. 정수가 "0"일 경우..

문제 설명 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한..

문제 설명 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시오. 입력 ..

실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변수로..