일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 모던자바스크립트
- 리터럴
- CORS
- 구글 로그인
- 셋팅
- nextjs
- 내일배움캠프
- vscode
- 코드카타
- domain
- Next
- 모던 자바스크립트
- 초기셋팅
- 오블완
- js
- deep dive
- array정적메서드
- 티스토리챌린지
- 소셜 로그인
- 코딩테스트
- 코테
- error
- vercel
- git
- React
- 스파르타코딩클럽
- 자주 까먹는
- useRouter
- 프로젝트 셋팅
- 프로그래머스
- Today
- Total
목록Today I Learned (106)
파피루스
사용 목적 : 전역 상태 관리 단점 1. 복잡하다 + 러닝커브가 있다.2. 아주 간단한 상태 관리를 위해서도, 초기 작성해야하는 코드 량이 많다. 단점 개선을 위한 라이브러리1. Recoil, Zustand : 쉽게 쓸 수 있도록 개선2. React Query : 클라이언트 상태 관리에서 비동기 통신 작업이 어려워 (코드 양이 많음) 서버 상태와 실시간 동기화가 어렵다는 단점을 개선/개량하기 위함 + 서버 데이터 캐싱은 부가적인 장점3. Context Api : 리액트 라이브러리만으로 비동기 특징1. 단방향 데이터 흐름 (flux 아키텍쳐처럼 단방향 데이터 흐름이다.)2. 의도된 복잡함(까다로움) -> 데이터를 엄격하게 변경하기 위해 (유지보수와 예측가능성을 위해서)3. 배우기 조금 까다로움 핵심개념-..
1. css import 하기import "./Card.css" 2. sass module 사용하기❓ sass module의 장점 ❓ : css 적용을 위한 classname이 중복이 되지 않도록 하나뿐인 이름을 지정할 수 있다.// Card.module.scss.title { color : red; > span { background-color : blue; }}.hello { .... }// Card.jsximport "./Card.module.scss".... return ( );.... 3. styled-components 라이브러리 사용하기https://styled-components.com/ 에서 인스톨 받은 후 아래처럼 쓸 수..
React 불변셩- 불변성이란? : 데이터가 생성된 후 수정되지 않는 성질- 리액트에서 객체의 상태 또는 배열의 상태를 변경할 때에는 항상 새로운 객체나 배열을 생성해서 -- 리액트의 state는 변경 여부를 감지할 때, 이전 상태와 이후 상태의 비교를 "얕은 비교"로 수행한다.-- "깊은 비교" : 실제 값을 재귀적으로 돌아서 확인해서 비교한다. 리스트 렌더링- key는 반드시 유일한 값이여야 한다. todo list 만들기- 요구사항 : https://reeny404.tistory.com/44- 결과물 : https://github.com/reeny404/assign-react-js/tree/master/src/assignment/01 피카츄 놀이터 만들기 - https://github.com/re..
신발 신는 법, 설거지 하는 방법을 어디에 물어보지 않듯이, 쉽다. 내가 이걸 모르겠어? 하는 것들은 다른 사람의 답을 잘 안보게 된다. 그러던 중, 생각해본 적 없던 내용들이 있어 남겨보려고 한다.문제 설명 (링크)정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성하라 제한 사항0 0 입출력 예num1num2result1052723 풀이function solution(num1, num2) { return parseInt(num1 / num2);} 제출 후 다른 사람 풀이를 보니, 다양한 풀이법들이 있었다.function solution(num1, num2) { return ~~(num1/num2); // 틸트 연..
⚙ features : 구현해야 할 기능이에요.UI 구현하기Todo 추가 하기Todo 삭제 하기Todo 완료/취소 상태 변경하기 (진행중 ↔ 완료) 📌 Requirement : 과제에 요구되는 사항이에요.디자인은 취향대로 해도 되나 화면 구성은 동일하게 해주세요. ✨제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요. (예시 영상 있음)[삭제하기] 버튼을 클릭하면 Working 또는 Done 에 있는 것과 상관없이 삭제처리가 되도록 해주세요.Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요. 위..
문제 설명 (링크)햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다.예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을..