나의 개발일지

분명 배웠던 건데 잊고 있던 연산자를 사용하게 되어 정리를 해보겠다 ! : 입력값을 불리언으로 변환하는데, true이면 false로, false이먄 true로 값을 반대로 반환한다. !! : 불리언 타입으로 명시적으로 형 변환한다 !true // false !!true // true !false // true !!false // false !{} // false !!{} // true ![] // false !![] // true !null // true !!null // false !'text' // false !!'text' // true

✔️ 문제함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.  ✔️ 제한사항n은 1이상 8000000000 이하인 자연수입니다.  ✔️ 입출력 예 n return118372873211  💡나의 풀이function solution(n) { var answer = []; const str = String(n); const arr = str.split(""); answer = Number(arr.sort().reverse().join("")); return answer;}  💡다른 사람 풀이 중 알게된 것answer = arr.sort().reverse()..

todos.js import uuid from "react-uuid"; const initialState = [ { id: uuid(), title: "리액트", content: "이해하기", isDone: false, }, { id: uuid(), title: "리덕스", content: "사용하기", isDone: false, }, { id: uuid(), title: "열심히", content: "공부하기", isDone: true, }, ]; // action items const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const SWITCH_TODO = "SWITCH_TODO"; // action creator // action은 ..

🔥 React 숙련주차 팀프로젝트 과제 🔥 로그인, 회원 가입 Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보기 아이디(이메일), 패스워드 소셜 로그인 (구글, 깃헙) CRUD Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링 구현 CUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경 마이 페이지 내 게시물 보기 Authentication 에서 제공하는 uid 를 이용해서 내 게시물들이 모일 수 있게 해보기 프로필 수정 기능 Storage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url 을 받아서 이미지 핸들링 배포하기 Vercel 이라는 호스팅플랫폼을 이용해 배..

1 . ⛔ 이번 과제에서는 yarn 말고 npm을 쓰게 되었다 알려주신대로 npm install 했더니 에러가 발생되었다. 검색했더니 최신 버전이 아니라서 그렇다고 해서 다시 깔아보고 또 안돼서 껐다 켜보아도 해결되지 않았다 💡 해결 다시 에러메세지를 읽어보는데 폴더가 없다고?... 다시 보니 내가 만든 폴더에서 상위 폴더에서 열어서 그렇다 ㅠㅠ 다시 폴더 열고 install 했더니 에러가 해결되었다 your local changes to the following files would be overwritten by checkout.. Please commit your changes or stash them before you switch branches. 2. ⛔ git pull를 하려고 하니 또 다시..

✔️ 문제 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. ✔️ 제한사항 n은 10,000,000,000이하인 자연수입니다. ✔️ 입출력 예 n return 12345 [5,4,3,2,1] 💡나의 풀이 fufunction solution(n) { const str = n.toString(); const newArr = str.split("").reverse().map(Number); return newArr; } 💡 문제 풀기에 실패했던 이유 : map(Number) --> 문자열로 바꾼 값을 다시 숫자로 바꿔주지 않았다 💡 새로 알게된 메서드 : reverse() 배열을 거꾸로 뒤집어 준다! 하지만 원본 배열이..

과제 해설 영상 보면서 따라하는데 계속 오류가 떴다 십분 넘게 찾는데 아예 못 찾겠어서 튜터님이랑 함께 찾아봤다 map 함수 쓰기 전에는 오류가 나질 않았으니 이 부분이 분명 오류가 있었던 것이다 props의 문제일까 싶어서 다 콘솔로 찍어봤는데 들어와있어야 할 곳에 undefined라고 찍혔다 드디어 발견 .. 미친거니? 심지어 return 안함 ...... 수정 했더니 오류 해결 완료 넘 급한 마음에 잘 안 보였던 걸까...ㅠㅠ 실수를 줄이자!

✔️ 문제 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요 ✔️ 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. ✔️ 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 💡나의 풀이 function solution(numbers) { let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } let answer = sum / numbers.length; return answer; } 💡다른 사람의 풀이 function solution(numbers) { return numbers.re..

Redux가 필요한 이유 useState의 불편함 - 반드시 부모-자식 관계가 형성돼있어야 한다 - 조부모에서 손자 컴포넌트로 보낼 시 반드시 부모 컴포넌트를 거쳐야 한다 - 자식--> 부모로 보낼 수 없다 하지만 redux를 쓰게 된다면 중앙 state 관리소에서 생성된 Global state에서 불러와서 사용할 수 있다! 어느 특정 컴포넌트에 종속되어 있지 않다 유지보수성이 좋아진다. 리덕스 패키지 설치 git bash에 yarn add redux react-redux 입력 후 설치 --> package.json 에서 확인 --> 폴더 생성 counter.js // 초기 상태값(state) // const [number, setNumber] = useState(0) const initialState ..

✔️ 문제 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. ✔️ 제한사항 예각 : 0 90) { return 3; } else if (angle === 180) { return 4; } } 💡다른 사람의 풀이 function solution(angle) { return angle < 90 ? 1 : angle === 90 ? 2 : angle < 180 ? 3 : 4; }

✔️ 문제 정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. ✔️ 제한사항 0 ≤ num1 ≤ 10,000 0 ≤ num2 ≤ 10,000 ✔️ 입출력 예 num1 num2 result 2 3 -1 11 11 1 7 99 -1 💡나의 풀이 function solution(num1, num2) { if (num1 == num2) { return 1; } else { return -1; } } 💡다른 사람의 풀이 function solution(num1, num2) { var answer = num1 === num2 ? 1 : -1; return answer; }

✔️ 문제 정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요. ✔️ 제한사항 0

🔥 React 숙련주차 개인과제 🔥 ✔️ 구현해야 할 기능 · 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제) · 아티스트별 게시물 조회 기능 구현 (Home - Read) · 원하는 아티스트에게 팬레터 등록 구현 (Home - Create) · 팬레터 상세 화면 구현 (Detail - Read) · 상세화면에서 팬레터 내용 수정 구현 (Detail - Update) · 상세화면에서 팬레터 삭제 구현 (Detail - Delete) ✔️ 과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다. 💡Hint (과제 진행 순서) (1) 프로젝트 셋업 (2) “props-drilling” 브랜치 생성 및 이동 (3) Router 셋업 4) ..

🔥 React 숙련주차 개인과제 🔥 ✔️ 구현해야 할 기능 · 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제) · 아티스트별 게시물 조회 기능 구현 (Home - Read) · 원하는 아티스트에게 팬레터 등록 구현 (Home - Create) · 팬레터 상세 화면 구현 (Detail - Read) · 상세화면에서 팬레터 내용 수정 구현 (Detail - Update) · 상세화면에서 팬레터 삭제 구현 (Detail - Delete) ✔️ 과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다. 💡Hint (과제 진행 순서) (1) 프로젝트 셋업 (2) “props-drilling” 브랜치 생성 및 이동 (3) Router 셋업 4) ..

✔️ 문제 머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요. ✔️ 제한사항 0 1983 23 --> 2000 💡나의 풀이 function solution(age) { var answer = 0; return 2022 - age + 1; }

JSON은 자바스크립트 강의 들을 때도 봤었고 특히 과제할 때 썼던 기억이 있어서 나름 들을만 했다 그리고 이제서야 뭔가 완벽하게 이해된 것 같아서 해소가 되었다 까먹지 않기 위해 바로바로 TIL 작성하기 JSON 이란 자비스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식을 말한다 다양한 형태의 구조를 가질 수 있다 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 포함한다 하지만 객체는 아니다! 객체 구조를 가진 것일 뿐 JSON에서는 ( " " )만 허용된다 ( ' ' --> X ) JSON -> 문자열 형태 -> 서버-클라이언트 간 데이터 전송 시 사용한다 JSON은 본래의 모습으로는 전송이 되지 않는다 파싱(parsing) 과정이 필수 1. JS 객체를 JSON..

//스크롤 만들기 //document 한 단계 위에 있는 window window.addEventListener("scroll", function () { // 현재 위치 확인 scrollY if (scrollY >= 100) { document.querySelector(".up-button").style.display = "block"; // console.log("현재위치", scrollY); } else { document.querySelector(".up-button").style.display = "none"; } }); document.querySelector(".up-button").addEventListener("click", function () { window.scrollTo({ top..

✔️문제 1. 두수의 차 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요. ✔️ 제한사항 -50000 ≤ num1 ≤ 50000 -50000 ≤ num2 ≤ 50000 ✔️ 입출력 예 num1 num2 result 2 3 -1 100 2 98 💡문제 풀이 // function solution(num1, num2) { // var answer = 0; // return answer; // } const solution = (num1, num2) => ~~(num1 / num2); ✔️문제 2. 두수의 곱 정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성..

긴가민가한 부분을 다시 공부해보았다 예제를 통해 공부하니 확실히 이해되는 느낌이 든다! // foreach와 map 차이점 // 배열의 각 요소의 제곱값 구하기 //forEach 사용 const numbers = [1, 2, 3, 4, 5]; const squaredNumbersForEach = []; numbers.forEach((number) => { squaredNumbersForEach.push(number * number); }); console.log(squaredNumbersForEach); // forEach 사용 결과값 : [1, 4, 9, 16, 25] // forEach는 각 요소를 순회하면서 제곱한 값을 squaredNumbersForEach 배열에 추가한다. // forEach는 ..

setTimeout으로 광고창 닫기 setTimeout은 일정 시간이 지난 후 함수를 실행 시킨다 광고창이다! 5초 후에 닫힙니다 const adBox = document.querySelector(".ad-box"); // 광고창이 n초 후에 사라지게 하기! setTimeout(() => { adBox.style.display = "none"; }, 5000); display="none"을 사용하여 사라지게 만든다! setInterval로 타이머 만들기 setInterval은 일정 시간 간격을 두고 함수를 실행시킨다 광고창이다! 3초 후에 닫힙니다 // 설정한 n초에서 점점 숫자가 줄어들다 0이 되면 광고창이 사라진다! const adbox = document.querySelector(".ad-box")..

✔️문제 영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요. ✔️제한 사항 1 ≤ str의 길이 ≤ 20 str은 알파벳으로 이루어진 문자열입니다. ✔️ 입출력 예 입력 #1 aBcDeFg 출력 #1 AbCdEfG 💡풀이 const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on("line", function (line) { input = [line]; }).on("close", function () { str ..

useState  리액트 훅에는 여러가지 종류가 있는데우선 공부할 것은 이젠 나름 익숙한 useState 이다! useState의 기본 형태는const [state, setState] = useState(initialState);  ❗ ⭐ useState에서 짚고 넘어가야 할 포인트 1️⃣state는 변수, setState를 이용해 state의 값을 수정한다!그리고 state가 만약 원시데이터가 아닌 객체 데이터 타입인 경우그토록 강조하는 불변성을 유지해야 한다!  // 가장 기본적인 Hook// 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함// 카운터 , TodoList// const[state, setState] = useState(초기값);// 함수형 업데이트란?import "./App.css";..

styled component 외에 스타일링 할 수 있는 또 다른 방법이 있는데 바로 🔥 GlobalStyles (전역스타일링) 이다 ▼ TestPage.jsx 우선 TestPage.jsx 라는 컴포넌트에 스타일을 적용한다 import React from "react"; import styled from "styled-components"; //부모 컴포넌트에서 받은 정보를 props한다 function TestPage(props) { return ( //리렌더링 {/* Title 컴포넌트에서 정보를 받아서 렌더링 {} 안에 부모컴포넌트 정보 받아서 렌더링 */} {props.title} {props.contents} ); } const Title = styled.h1` font-size: 1.5rem;..

본격적인 React 수업이 시작되었다 이건 커리큘럼은 정말 실무적인 내용이 담겨 있다고 해서 얼마나 어려울까 하는 긴장감을 가지고 시작했다 우린 자바스크립트 내에 있는 className 태그를 사용해서 css를 꾸며주었다. (혹은 인라인을 이용해서!) 하지만 이 방식은 많은 컴포넌트를 생성해야 한다는 점에서 불편함을 느껴 CSS-in-Js라는 방식을 만들었다고 한다. 💡 CSS-in-Js 방식이란? 단어 그대로 js 코드로 CSS코드를 작성하여 컴포넌트를 꾸는 방식이다 우선 styled-components 설치하고 터미널에서 yarn add styled-components 의 명령을 입력해서 패키지를 설치한다! ❗styled-components : CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와..

Module not found: Error: You attempted to import ../App.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 개인 과제 마무리 단계 중에 이런 위 문구의 오류가 자꾸 떴다. 검색해보니 CRA(create-react-app) 에서 컴파일은 src 내부에서만 일어나는데 src 폴더 안에 app.css 파일이 들어가 있지 않아서 발생했던 것이었다 하지만...! 난 src 폴..

나는 todoList에서 새로운 리스트를 작성할 때마다 할당하는 id 값을 Date.now()를 써서 중복되지 않도록 했었다 하지만 개인과제 해설영상을 보고 새로운 함수를 알게 되었다 💡UUID란 ( Universally Unique IDentifier ) 범용 고유 식별자의 약자로 고유한 아이디 값을 생성할 때 사용할 수 있다 특히 컴포넌트에 고유한 키를 요구하는 리액트로 개발할 때 유용하게 사용할 수 있는데 react-uuid라는 모듈과 함께 uuid 함수 생성할 수 있도록 제공한다 ✔️How to use npm install react-uuid 혹은 yarn add react-uuid 로 모듈 설치 후 id 값을 할당해주어야 하는 파일 내에서 import 를 받아 함수를 실행시키면 된다

//React 강의 복습 import React from "react"; function App() { const name = "상위컴포넌트이름"; return ; // 새로운 이름을 정하고 App에서 User로 정보를 전달한다 } //컴포넌트는 대문자 function User(props) { return {props.comp_name}; // props.로 정보를 전달받는다! {} 필수! } export default App; //------------------------------------------------------------------------------ import React from "react"; //부모 function App() { return 안녕하세요 //컴포넌트 사이에 낀 ..

🔥React 입문주차 개인과제 🔥 다시 돌아온 개인과제 Time~ ^^.. 이번엔 끝낼 수 있을지 걱정이다! 강의에서 배운 그대로 해보려고 하는 데도 잘 되지 않는다 일단 진행과정을 코드를 통해 적어볼 계획이다. ✔️ 구현해야 할 기능 · UI 구현하기 · Todo 추가하기 · Todo 삭제하기 · Todo 완료 상태 변경하기 💡Hint · 사용한 hook은 오직 useState · 기능 구현을 위해 생성한 함수는 2개(onChangeHandler, onSubmitHandler) · 사용한 자바스크립트 내장 메서드는 map, filter · todo의 initial state는 {id : 0, title: "", body: "", isDone: false} ▼App.jsx import React from..

불변성을 지키는 것이 중요하다! 불변성은 메모리의 있는 값을 변경할 수 없는 것을 말한다 자바스크립트의 원시 데이터는 문자열, 숫자, 불리언 타입 등이 있는데 우선 결론적으로 말하자면 원시데이터는 불변성이 있다 반대로 원시데이터가 아닌 배열, 객체, 함수는 불변성이 없다! ▶ 불변성이 있다! let num = 1; 메모리에는 1이 라는 값이 저장되고 , num이라는 변수는 메모리에 있는 1을 참조! 그리고 재선언 let num2 = 1; num === num2 의 결과값은 true이다! 즉, num의 메모리 주소에 이미 1이라는 값이 할당이 되었고 같은 값으로 재선언을 해도 메모리 주소가 변하지 않고 이미 생성되어 있는 1이라는 값을 참조한다! --> 같은 메모리 값을 바라보고 있는 것이다 즉, 기존 메..

오류 발생 및 문제 해결 / 주의할 점 1. 컴포넌트를 만들었는데 랜더링이 되지 않고 오류만 떴다 오류를 보니 리액트 컴포넌트 이름의 시작은 대문자로 해야 한다고 한다 오류를 고치고 나니 그제서야 강의해주신 것이 떠올랐다,,!! 잘 기억해두자 2. 절대경로와 상대경로 Child.js 파일을 만들고 import를 했는데 오류가 났다 튜터님께 도움을 요청하니 절대경로 파일을 만들지 않았고 Child 파일의 경로 표기가 잘못되었다고 하셨다 같은 디렉토리에 위치해있으니 내가 수정해야 하는 것은 "Child" 에서 "./Child" 로 수정 이건 기본 중에 기본인데 이제서야 생각나서 조금 민망했다^^ ./ : 현재 디렉토리 위치 ../ : (상대경로) 상위 위치 (한 단계 뒤로 가기) 그리고 절대경로 파일을 만드..