<현록/>

파이썬 첫 진도를 시작하였다. 자바스크립트와는 어떤 차이점이 있을 지 비교하면서 학습하면 도움이 될 것 같다. Colab 사이트는 설치 없이 웹에서 파이썬 스크립트를 작성할 수 있게 도와주는 서비스로, 학습하는 동안 편리하게 이용하였다: https://colab.research.google.com/?hl=ko Google Colaboratory colab.research.google.com [1. 문자열 포맷팅 ] - %s : string, 문자열 - %d: digit, 정수형 숫자 - %f: floating point, 실수형 숫자 [예제1] b= 128.8+38-222.4764 print(b) # -55.6764 print('%d' %b) # -55 (%d = 정수 타입으로 출력) a = 2/3 pr..

사용자에게 로딩이 진행되고 있다는 것을 보여주는 것은 중요하다. slice에서 addCase를 통해 정의된 로딩 상태에 따라 컴포넌트의 렌더링 여부를 결정하는 로직을 구현하였다. 위의 이미지에서 '재추천받기' 버튼을 눌렀을 때 '칵테일 추천 중..' 이라는 문구를 띄우고자 한다. 컴포넌트 return 값은 삼항연산자를 활용하여 조건부를 작성하였다. '칵테일 추천 중..' 문구는 status가 loading 단계일 때 잠깐 등장한다. 이내 status가 succeded되고 payload로 cocktailInfo가 업데이트되면 해당 state를 불러온다. cocktailInfo가 없는 경우(즉, status가 failed)이면 '연결 오류: 칵테일 정보 수신 불가' 메세지를 띄운다. 아래는 상세한 코드이다:..

(진행배경) cocktail 정보를 Open API를 통해 렌더링함에 그간 문제가 없었는데 어느날은 SyntaxError가 발생하였다. 코드를 고치지 않았는데도 문제가 발생한 것으로 보아 일단은 CocktailDB 서버 자체 문제로 간주되었다. 혹여 클라이언트의 문제인지 체크하기 위해 아래와 같이 API 주소를 주소창에 직접 입력해보니 데이터베이스 연결에 실패하고 있다는 에러 메세지를 반환하였다. https://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Coffee_mug [문제-SyntaxError: Unexpected token '

리액트 리덕스 툴킷에서 비동기 통신하는 법은 두 가지가 있다: 첫번째는 일반적인 axios(또는 fetch)를 활용하는 것이고, 두번째는 createAsyncThunk를 활용하는 것이다. 본 글에서는 두 가지를 모두 이용하여 그 차이점을 설명하고자 한다. 비동기 통신하기 (1) axios 활용하기 // GetWeather.tsx // 중략... useEffect(() => { const getCurrentWeather = async () => { try { const position = await getLocation(); const { latitude, longitude } = position.coords; const weatherData = await fetchWeatherData(latitude, ..

(진행배경) GetCocktail 컴포넌트 내부에서 dispatch를 사용하자 fetchCocktail(weatherName) 부분에서 'AsyncThunkAction' 형식의 인수는'AnyAction' 형식의 매개 변수에 할당될 수 없다는 타입에러가 발생하였다. 다음은 컴포넌트의 코드와 문제가 발생한 fetchCocktail 함수가 포함된 cocktailSlice 파일의 코드이다: // GetCocktail.tsx function GetCocktail({ weatherName }: GetCocktailProps) { const { cocktailInfo, status } = useSelector( (state: RootState) => state.cocktail ); const dispatch = us..

[Redux 개요] Redux는 Action, Store, Reducer, Dispatch를 통해 상태를 관리한다. 각 역할은 아래와 같다. - Store : 상태를 저장하는 장소 - Reducer : 현재 Store의 상태와, 발생한 Action의 payload를 받아 새로운 상태를 반환 (상태가 어떤식으로 변경되는 지를 정의함) - Dispatch : Action을 발생시킴 - Action : 상태를 변경시키고 싶을 때 생성하는 객체(type 과 payload를 가진다) [state 동작원리] 이제 state가 어떤 순서를 거쳐 갱신되는 지 그 여정을 되짚어 보자. 아래 순서는 store 구축 순서를 포괄하니 코드 입력 시에도 동일한 순서로 진행하면 된다. 1. slice 구성하기 // weather..

스택과 대응되는 큐문제도 풀이하였다. 스택 문제 풀이 경험이 있어 손쉽게 풀 수 있었다. const input = require('fs') .readFileSync('/dev/stdin') .toString() .trim() .split('\n'); const arr = input.slice(1); const que = []; // 큐에 쌓이는 값(안보이는 값) const answer = []; // "출력" 값 (보이는 값) function solution() { for (let i = 0; i < arr.length; i++) { let command = arr[i].split(' ')[0]; let num = arr[i].split(' ')[1]; switch (command) { case 'pus..

문제 링크: https://www.acmicpc.net/problem/1874 const fs = require('fs'); const input = fs .readFileSync('example.txt') // 제출시: '/dev/stdin' .toString() .trim() .split('\n') .map((el) => Number(el)); function stackSequence() { const n = input[0]; // 8 const arr = input.slice(1); // [4,3,6,8,7,5,2,1] n을 제ㅁ외한 나머지 목록(마지막 index 지정 안하면 끝까지 지정됨) // 이 숫자와 일치하게 수열을 만들고 완료하면 스택에서 제거, push 할때는 오름차순으로 넣기 let s..

문제링크: https://www.acmicpc.net/problem/10828 const array = require('fs') .readFileSync('example.txt') // 제출시: '/dev/stdin' .toString() .trim() .split('\n'); // 문자 -> 배열화 const stack = []; const result = []; const length = Number(array.shift()); // 14 제거, 명령 모음만 남음 for (let i = 0; i < length; i++) { const commandArray = array[i].split(' '); const command = commandArray[0]; switch ( command // if -..

[리팩토링 배경] 팀 프로젝트로 Open API를 활용한 날씨에 어울리는 칵테일 추천 서비스를 3주간 제작했었다. 당시 React-redux 소양이 부족하여 redux 없이 프로젝트를 구현했었는데, 이번 기회에 react-redux-toolkit 를 활용해 version.02로 프로젝트를 업그레이드 해보고, 리팩토링을 시도하며 얻게 된 인사이트를 정리해보고자 한다. 당시 구현한 기능과 본인이 담당한 기능은 다음과 같다: 1. 메인페이지 - 본인 참여 - 날씨에 어울리는 랜덤 칵테일 추천(재추천 기능 포함) - 칵테일 정보 구글 검색 연동 2. 메인페이지 칵테일 제조법 상세 페이지 3. 옵션 별 랜덤 칵테일 추천 페이지 4. 날씨 별 칵테일 모아보기 페이지 5. 칵테일 퀴즈 페이지 [개발환경] React...