공부하자

SPA 개발 시 고민해야 할 것들 - 컴포넌트 구조를 어떻게 정의해서 역할을 나눌까? - 컴포넌트 사이의 데이터 흐름을 어떻게 제어하는 게 좋을까? - 웹 서비스에서 골치아픈 CSS 관리는 어떻게 해야 할까? - 비동기 처리는 어떻게 관리해야 할까? - 상태 관리는 컨텍스트로 해야할까? 리덕스로 해야할까? 그리고 데이터 구조는 어떻게 만들까? 방학 전에 전부 공부하기~~~

npm - node package manager 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npx - execute npm package binaries npm에 속해 있는 npm 패키지 실행 도구! 패키지를 실행만 되게 해주기 때문에 가볍게 쓸 수 있다 ex) 깃허브 레포에서 다른 사람의 코드를 하나만 실행하고 싶을 때 npx와 스크립트를 적으면 패키지 설치를 하지 않고 실행할 수 있음 yarn 안전하고 안정적이며 재현 가능한 프로젝트 버전을 어디에서나 같게 만들어 버그를 줄이고 보안을 높임! 취향 차이인 것 같다! 나는 개인적으로 공부할 때는 npm이나 npx를 쓰고 프로젝트를 할 때는 yarn을 썼다 버전 충돌 이슈를 방지하기 위한 건가... 사실 쓰면서도 왜 쓰는 건지는 모르겠다..

지연 실행과 커링은 다른 개념이지만 때때로 함께 사용되어 비동기적인 작업을 다루거나 코드의 가독성과 유지보수성을 높이는 데 활용될 수 있다. 커링 (Currying) 커링은 다중 인자를 갖는 함수를 한 개의 인자를 받는 함수로 변환하는 기법이다. 커링을 통해 함수의 일부 인자를 미리 고정하고, 나머지 인자는 나중에 제공하여 함수를 실행할 수 있다. 이는 함수를 재사용하고 모듈화된 형태로 만들 수 있게 한다. 커링을 사용한 예제 const add = a => b => a + b; const add5 = add(5); console.log(add5(3)); // 8 console.log(add5(7)); // 12 지연 실행 (Delayed Execution) 지연 실행은 어떤 코드 블록이나 함수를 나중에 ..

소셜같은 복잡한 로그인 말고 아이디와 비밀번호 두 가지만 가지고 회원가입 / 로그인을 구현해봤다. 일단 api 명세는 다음과 같다. - 둘 다 정보를 서버로 보내는 것이니까 POST를 사용하면 된다. - 회원가입의 requestbody에서 language, city, gu는 프로젝트에서 추가로 사용한 회원의 정보이다 이런 식으로 정보를 추가로 전달하는 것이 가능하다. - 보통 responsebody는 따로 받아오지 않는다. 다만 로그인 페이지에서 로그인 한 것을 기록하는 느낌으로 토큰을 저장하는 정도만 하면 된다. - 아이디로 이메일을 고른 이유 : 실제로 있는 이메일인지 판별하거나 소셜 로그인에 필요해서 이메일을 고른 것이 아니다! 해커톤 프로젝트였기 때문에 아이디 중복 검사나 아이디 길이 제한과 같은..

struct ListView: View { @EnvironmentObject var listModel: ListModel // ListModel에 배열이 있다고 가정! var body: some View { VStack{ Text("글귀 리스트") .font(Font.custom("폰트적용하세요", size: 32)) List(listModel.dataArray, id: \.self) { item in .font(Font.custom("폰트적용하세요", size: 32)) } } } } } 이러한 리스트 뷰가 있다고 하면 이런 기본 리스트가 적용된다! 이 리스트 뷰를 내맘대로 커스텀 해보자 var body: some View { VStack{ Text("글귀 리스트") .font(Font.custom("..

자바스크립트에는 다음과 같은 내장 또는 외장 비동기 함수들이 있다. fetch : 서버로부터 데이터를 받아오는 API 호출을 해주는 함수 setTimeout : 특정 시간 이후 콜백함수를 실행시켜주는 함수 setInterval : 특정 시간 마다 틱을 발생시켜 콜백함수를 주기적으로 실행시키는 함수 이런 함수들은 모두 Promise를 반환하기 때문에 자동으로 비동기적으로 동작하게 되는데 가끔 비동기 함수의 결과값들을 바로바로 이용하고 싶을 때가 있다. 예를 들면 fetch를 이용해 A서버로부터 배열 형태의 게시글 데이터를 불러오기 데이터를 불러왔다면 특정 조건을 이용해 필터링 하기 이때 2번 동작을 실행시키기 위해서는 1번 동작이 끝난 다음에, 결과값을 받아와 실행시켜줘야 한다. 하지만 1번 동작이 비동기..

https://www.acmicpc.net/problem/10816 10816번: 숫자 카드 2 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,0 www.acmicpc.net 생각 1. 배열 세 개 만들어서 두 개는 입력받고 한 개는 몇 개 가지고 있는지 계산해서 출력 2. 쉽긴 한데 배운 걸 써먹어 보자면! 비교를 할 때 정렬 후 이분탐색으로 비교하면 시간이 더 줄어들 것 같으니 이 걸 써보자! 정렬은 상근이가 가지고 있는 숫자카드를 정렬하면 될 듯 정답 코드 #include #include using namespace std; i..

https://www.acmicpc.net/problem/5622 5622번: 다이얼 첫째 줄에 알파벳 대문자로 이루어진 단어가 주어진다. 단어의 길이는 2보다 크거나 같고, 15보다 작거나 같다. www.acmicpc.net 생각 abc는 3초 / def는 4초 / ghi는 5초… 알파벳을 입력 받고 해당하는 초 누적으로 더해서 출력해주기 알파벳 인식을 어떤 식으로 해야되나 고민! 1. if문이나 switch문으로 돌린다 2. 아스키코드를 사용한다 ( 형변환 사용!) 나는 2번으로 풀었다! 1. 입력 받은 문자열의 인덱스 하나하나를 검사한다! 2. 여기서 (int)형변환을 사용해서 숫자로 변경한다 3. -65(대문자 A의 아스키코드 값)를 해주고 3으로 나누어준다 ex) A : (65-65)/3 = 0..

https://www.acmicpc.net/problem/2903 2903번: 중앙 이동 알고리즘 상근이는 친구들과 함께 SF영화를 찍으려고 한다. 이 영화는 외계 지형이 필요하다. 실제로 우주선을 타고 외계 행성에 가서 촬영을 할 수 없기 때문에, 컴퓨터 그래픽으로 CG처리를 하려고 한다. www.acmicpc.net 생각 규칙이 있나? 답이 전부 제곱수인 건 알겠다! 0 - 2^2 1 - 3^3 2 - 5^5 3 - 9^9 4 - 17^17 5 - 33^33 … 2, 3, 5, 9… 이 숫자들을 전 단계의 제곱수를 만들기위한 n이라 하면 output은 n*(n-1)이 된다! 빠르게 코드 작성을 해보자 정답 코드 #include using namespace std; int main(){ int n, n..

https://www.acmicpc.net/problem/11047 11047번: 동전 0 첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 10, 1 ≤ K ≤ 100,000,000) 둘째 줄부터 N개의 줄에 동전의 가치 Ai가 오름차순으로 주어진다. (1 ≤ Ai ≤ 1,000,000, A1 = 1, i ≥ 2인 경우에 Ai는 Ai-1의 배수) www.acmicpc.net 생각 1. 이건 knapsack 문제다! 동전이니까 자르지 못하는 knapsack 문제 2. 근데 그렇게 어려운 고민 할 필요 없이 단순하게 금방 풀 수 있는 문제다! 알고리즘 구상하지 않고 빠르게 풀 수 있음 정답 코드 #include using namespace std; int main(){ int n,k; cin >> n >> ..