해피랑 개발하자

사용하는 이유? react-query를 사용함으로서 서버, 클라이언트 데이터를 분리 react-query 장점? 여러 장점이 있지만 프론트 개발자가 직접 구현하기 귀찮은 일들을 수행 - 캐싱 - get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 - 데이터가 오래 되었다고 판단하면 다시 get - 동일 데이터를 여러번 요청하면 한번만 요청 (옵션에 따라 중복 호출 허용 / 시간 조절 가능) - 무한 스크롤 (Infinite Queries) - 비동기 과정을 선언적으로 관리 - react hook과 사용하는 구조가 비슷

7주간 진행했던 SSAFY 2학기 첫 프로젝트가 드디어 끝났다. 처음 제대로 협업을 해봤고, 프론트엔드 개발자로 개발을 해봤다. 프로젝트를 통해 배운 것도, 아쉬운 것도, 앞으로에 대한 생각도 많았다. 이 모든 것들을 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운점 - 아쉬운 점 - 앞으로의 계획? - 전체적인 프로젝트 후기 ✍🏻 프로젝트를 통해 배운 점 이번 프로젝트는 졸업 프로젝트 이후로 오랜만에 제대로 개발하는 프로젝트였다. 그래서 협업과 관련하여서, 개발과 관련하여서 정말 많은 것을 배울 수 있었다. 프로젝트의 하나부터 열까지 많이 배운 내용들을 아래에 하나씩 정리해서 써볼까 한다. 1. CDD 개발 ? 프론트엔드는 Component-Driven Developme..

Recoil은 React를 위한 상태 관리 라이브러리다. 설치 yarn을 사용한다면 아래의 명령어를 사용하여 설치한다. yarn add recoil RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기 좋은 장소이다. import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); } 다음 부분에서 CharacterCounter 컴포넌트를 구현할 것이다. Atom Atom은 상태의 일부를 나타낸다. Atoms는..

- Recoil의 등장? React 자체에 내장된 상태 관리 기능의 한계 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다. Recoil은 직교하지만 본질적인 방향 그래프를 정의하고 React 트리에 붙인다. 상태 변화는 이 그래프의 뿌리(atoms)로부터 순수함수(selectors)를 거쳐 컴포넌트로 흐르며, 다음과 같은 접근 방식을 따른다. 공유상태(shared state)도 Re..

- 브랜치 생성 git branch branch명 - 브랜치명 변경 git branch -m 현재브랜치명 새로운브랜치명 - 브랜치 이동 git checkout 이동할브랜치명 - 브랜치 생성과 체크아웃 git checkout -b 새로운브랜치명 - 변경 상태 확인하기 git status - VScode에서 push하는 법 git add . => git commit -m "커밋 메세지 입력" => git push "올릴 저장소 선택"

문제 https://programmers.co.kr/learn/courses/30/lessons/76501 코딩테스트 연습 - 음양 더하기 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 re programmers.co.kr 문제풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class Solution { public int solution(int[] absolutes, boolean[] signs) { int answer=0; for(int i=0; i

문제 https://www.acmicpc.net/problem/2231 2231번: 분해합 어떤 자연수 N이 있을 때, 그 자연수 N의 분해합은 N과 N을 이루는 각 자리수의 합을 의미한다. 어떤 자연수 M의 분해합이 N인 경우, M을 N의 생성자라 한다. 예를 들어, 245의 분해합은 256(=245+2+4+5)이 www.acmicpc.net 문제풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class Mai..

문제 https://www.acmicpc.net/problem/16916 16916번: 부분 문자열 첫째 줄에 문자열 S, 둘째 줄에 문자열 P가 주어진다. 두 문자열은 빈 문자열이 아니며, 길이는 100만을 넘지 않는다. 또, 알파벳 소문자로만 이루어져 있다. www.acmicpc.net 문제풀이 1) 실패코드 - contains 함수를 이용하여 S에 P가 포함되는지 안되는지 판별 후 포함되면 1, 포함되지 않으면 0을 출력 => 시간초과 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public c..

2. 연산자 산술연산자 산술연산자는 사칙연산과 같은 작업을 한다. + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 대입연산자 대입연산자는 특정 값에 연산을 한 값을 바로 설정할 때 사용할 수 있는 연산자이다. let a = 1; a += 3; a -= 3; a *= 3; a /= 3; 논리연산자 논리연산자는 boolean 타입(true/false)를 위한 연산자이다. ! : NOT const a = !true; -> 결과) a=false const b = !false; -> 결과) b=true && : AND const a = true && true; -> 결과) a=true let f = false && false; f = false && true; f = true && false; -> 결과) f..

0. JavaScript는 무엇일까? JavaScript는 웹 브라우저에서 사용하기 위하여 만들어진 프로그래밍 언어이다. 이 언어는 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위하여 사용되어 왔다. 기존에는 브라우저에서만 사용해왔던 언어이지만, 이제는 단순히 웹페이지에만 국한되는 것이 아니라 Node.js 런타임을 통하여 서버쪽에서도 사용이 가능하다. 또한, NW.js, Electron 등의 도구를 사용하여 데스크탑 앱을 만들 수 있고, react-native, NativeScript를 사용하여 모바일 앱도 만들 수 있다. 그리고 하드웨어에서도 Node.js를 통하여 JavaScript를 사용할 수 있기 때문에 IoT 진영에서도 사용될 수 있다. 1. 변수 JavaScript의 변수와 상수 변수와..