본문 바로가기

전체 글

 (351)
18년도 카카오 블라인드 - 프렌즈 블록 코딩테스트 연습 - [1차] 프렌즈4블록 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프렌즈4블록 문제 설명 프렌즈4블록 블라인드 공채를 통과한 신입 사원 라이언은 신규 게임 개발 업무를 맡게 되었다. 이번에 출시할 게임 제목은 "프렌즈4블록". 같은 모양의 카카오프렌즈 블록이 2×2 형태로 4개가 붙어있을 경우 사라지면서 점수를 얻는 게임이다. 만약 판이 위와 같이 주어질 경우, 라이언이 2×2로 배치된 7개 블록과 콘이 2×2로 배치된 4개 블록이 지워진다. 같은 블록은 여러 2×2에 포함될..
프로그래머스 연습 문제 - 올바른 괄호 코딩테스트 연습 - 올바른 괄호 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 올바른 괄호 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 ret..
20년도 카카오 블라인드 - 가사 검색 코딩테스트 연습 - 가사 검색 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 가사 검색 문제 설명 [본 문제는 정확성과 효율성 테스트 각각 점수가 있는 문제입니다.] 친구들로부터 천재 프로그래머로 불리는 "프로도"는 음악을 하는 친구로부터 자신이 좋아하는 노래 가사에 사용된 단어들 중에 특정 키워드가 몇 개 포함되어 있는지 궁금하니 프로그램으로 개발해 달라는 제안을 받았습니다. 그 제안 사항 중, 키워드는 와일드카드 문자 중 하나인 '?'가 포함된 패턴 형태의 문자열을 뜻합니다. 와일드카드 문자인 ..
리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기(3) 이제 까지 한 방법과 다른 방법은 작업 크리에이터를 사용하는 것이다. 이제 우리만의 작업 크리에이터를 만들 수 있고, 소위 썽크(thunk)를 만들 수 있다. * thunk: 는 다른 함수가 완료될 때까지 기다리는 함수라고 볼 수 있다. cart-slice.js 안에 이제까지 썻던 액션함수를 넣어서 쓸거임. 이전에 app.js에서 운용했던 모든 액션함수 fetch 관련 비동기 함수를 cart-slice.js에 모조리 넣을거임. - 별도의 js함수에는 async/ await를 넣을 수 있기 때문에 - 오류 캐치는 try/ catch로.. - 함수로 만든 코드내 액션함수를 함수를 export하면서 이용하는 방식으로 사용할 것임. import { createSlice } from '@reduxjs/toolki..
리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기(2) useEffect를 사용하고 있기 때문에 비동기를 추가해서는 안된다. useEffect안에 fetch관련 코드를넣고 async/await를 사용할 것. 1. 슬라이스 함수에 변수와 상태를 처리해줄 리듀서를 추가 import { createSlice } from '@reduxjs/toolkit'; const uiSlice = createSlice({ name: 'ui', initialState: { cartIsVisible: false, notification: null }, reducers: { toggle(state) { state.cartIsVisible = !state.cartIsVisible; }, showNotification(state, action) { state.notification = ..
useRef대한 좋은 설명 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 useRef를 사용한다. 특정 DOM을 선택? 구체적으로 무슨말이죠? 말 그대로 특정 태그만 지정해서 그것만 사용할 때 useRef 를 쓴다는 말이다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등이 있다. 또한 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다. useRef / forward..
자바스크립트 - 배열 합치고 싶을때..!!(concat, push, Spread) 자바스크립트에서 배열 합치는 매서드 사용 방법 1. concat()을 이용하여 배열 합치기 concat을 이용하여 arr1, arr2, arr3의 배열을 합칠 수 있습니다. concat()은 원본 배열(arr1, arr2, arr3)을 변경하지 않고, 합쳐진 배열이 리턴됩니다. const arr1 = ['a', 'b', 'c']; const arr2 = ['1', '2', '3']; const arr3 = ['A', 'B', 'C']; const arr4 = arr1.concat(arr2, arr3); console.log(arr4); Output: [ 'a', 'b', 'c', '1', '2', '3', 'A', 'B', 'C' ] const arr = arr1.concat(arr2); const ar..
리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기 * 백앤드 서버를 추가하여 데이트를 서버에 저장하고, 가져오는 작업을 리덕스와 함께 해보자. * 백앤드 서버를 직접만드는 것 어려우니 더미 데이터베이스용으로 firebase를 이용한다. * 리덕스내에 함수는 부수효과가 없는 순수함수여야 합니다 * 순수함수? 함수의 안팎에서 뭔가 예기치 않은 일이 생길 가능성이 있는 함수는 순수함수가 될 수 없습니다 입력이 이루어지면 입력에의 변하는 값이 동일해야 한다고 생각하면 되겠습니다. 하지만 우리는 현재 백앤드 서버에 http요청을 하고 하는 작업을 하기 때문에 중간 과정에 state값이 바뀔 수 있습니다. 2가지 방법이 있는데 첫번째 방법인 컴포내부에 부수효과인 비동기코드를 넣는것부터 해보자. 두번째 방법은 액션 함수에 넣는 것이다. - 리덕스에..
728x90

티스토리툴바