leechi

원티드 프리온보딩 프론트엔드 챌린지에 지원하게 되었다! 지원하게 된 이유는 이 과정에서 배우는 내용들이 앞으로 프론트엔드 개발에 무척이나 필요할 것이라고 생각이 들었기 때문이다. 포트폴리오 작성을 위한 리액트 프로젝트 고도화 | 프리온보딩 FE 챌린지 1월 | 원티드 취업에 도움이 되는 프리온보딩 챌린지를 무료로 참여해 보세요! 1차: 1.2(화) 20시 2차: 1.4(목) 20시 3차: 1.9(화) 20시 4차: 1.11(목) 20시 www.wanted.co.kr 챌린지는 총 4번의 수업과 4개의 커리큘럼으로 진행된다. 리액트에서 어떤 상황에서 어떻게 전역변수를 관리하는 방법 리팩토링 전 테스트코드를 작성해서 효율적으로 리팩토링하는 방법 코드를 최적화하여 ..

Custom hook 한 화면에서 여러 State를 관리하는 경우 각 State를 선언하고 업데이트하는 로직들이 한 컴포넌트에 있는데, 그러면 문제점이 가독성이 떨어지게 된다. 그렇기에 각 기능마다 커스텀 훅을 만들어서 관리해야한다. Costom hook 만들기 순서 1. 중복된 코드 작성 2. 중복된 코드 컴포넌트 만들기 3. use를 붙여서 custom hook 만들기 1. 중복된 코드 작성 우선 총 4개의 input을 만들어보자. 그냥 쓱쓱 넘겨보자. 이 코드를 보았을 때는 복잡하지는 않지만 중복된 코드가 많다. import React, { useState } from "react"; import { View, TextInput, Button } from "react-native"; const Cu..

예시 코드는 리엑트 네이티브이지만 사용방법은 같다! 간단히 태그 설명을 하자면 === or === or === 이다 초간단! const PrimaryButton = ({children}) => { return {children} }; export default PrimaryButton; import { TextInput } from "react-native"; import PrimaryButton from "../components/PrimaryButton"; const Component1 = () => { return ( Reset Confirm ); }; export default Component1; 컴포넌트를 사용할 때 태그 사이에 있는 내용이 children 속성으로 전달한다. 즉, Confir..

리턴되는 모든 태그들은 하나의 최상위 태그로 감싸져야한다. - React - 라는 리액트의 규칙 때문에 나는 의미없는 로 감싸기 급급했다. 하지만, HTML이 많아지면 많아진만큼 앱이 느려진다. 라는 것은 너무 당연지사.. 또한 라는 흑마법을 너무 자주 쓰이니, 그만큼 css의 작업량도 생겨난다. 지금까지 만들어본 프로젝트 중에서 컴포넌트가 20개이상은 드물었지만, 이게 1000개가 된다면 css의 작업량은 더 많이 생길 것이다. 그러면 유지보수 또한 힘들어질 것이고, 늘어난 양만큼 앱은 미세하겠지만 느려질것이다. 그래서 '불필요한 내용을 렌더링하는 것은 일반적으로 프로그래밍에서 좋은 생각이 아니다.' 라는 결론을 내리게 되었다. 지금부터 습관을 바로 잡아야한다. 그래서 나는 해결방법으로 프래그먼트를 찾..

TypeScript? 자바스크립트가 가지고 있는 여러 문제를 보완해서 나온 언어 스크립트 개발자의 멍청한 실수로부터 보호해주고 생산적인 개발자가 될 수 있게 해준다. 더 생산적인 개발을 하기 위해 필수적인 도구! 마이크로소프트에서 만들었으며, vsCode와 함께 쓴다면 무한 생산성을 경험할 수 있다. 타입스크립트는 자바스크립트의 문제점에서 시작되었다. 문제점 1. 타입 안정성 2. 멍청한 코드를 입력해도 에러를 반환하지 않는다. const divide = (a, b) =>{ return a / b } divide(6,3) // 2 divide("xxxx") // NaN 여기서 파라미터가 몇개가 들어가야하는지도 모르고 숫자가 아닌 문자를 집어넣어도 저렇게 작동이 잘 된다. 지금은 아주 짧은 코드이지만 10..

💡 “무엇을 하느냐가 어떻게 하느냐보다 훨씬 더 중요하다” 투두리스트를 버려라 💡 투두리스트 관리 방식 → 캘린더 직접 관리 방식 캘린더 직접 관리 방식? 내가 가진 시간 자원속에서 할 수 있는 일을 결정할 수 있다. (투두리스트는 현재 내가 과부하인지 직관적으로 알 수 없다.) 시간대 별로 할 일이 정해져 있기 때문에 하나의 TASK에서 다른 TASK로 넘어가는 시간이 적다. 뭐하지 망설일 필요 없다. 언젠가 한번 보자는 식의 막연한 약속에서 벗어나 정확한 일정을 정하게 된다 (캘린더에 써야 하기 때문) 시간관리보다 에너지 관리를 시작하자. 💡 시간관리는 잊어버려라. 시간은 관리할 수 없다. 내가 관리할 수 있는 마음과 에너지를 관리하라. 나의 에너지가 어떤 상태에서 떨어지고 어떤 상태에서 채워지는지 ..

5x5 격자판에 아래와 같이 숫자가 적혀있다. NxN의 결자판이 주어지면 . 각행의 합, 각 열의 합, 두 대각선의 . 합중 가장 큰 합을 출력한다. const solution = (arr) => { }; let arr = [ [10, 13, 10, 12, 15], [12, 39, 30, 23, 11], [11, 25, 50, 53, 15], [19, 27, 29, 37, 27], [19, 13, 30, 13, 19], ]; console.log(solution(arr)); 1. 각행과 열의 합 구하기 (하드 코딩) 이렇게 열을 구해보았다. 이걸 이제 반복문을 사용해서 작성하면 된다는 것을 알 수 있다. 그렇다면 반복문으로 구하기 전 대각선도 구해보겠다. const solution = (arr) => {..

자신의 바로 앞 수보다 큰 수만 출력하는 프로그램을 작성하기 const solution = (arr) => { let answer = []; answer.push(arr[0]); for (let i = 1; i arr[i - 1]) { answer.push(arr[i]); } } return answer; }; let arr = [7, 3, 9, 5, 6, 12]; console.log(solution(arr)); 문제풀이 내 앞 수보다 큰 수만 출력하는 프로그램을 작성해야한다. 우선적으로 첫번째 수는 출력되어야한다. answer.push(arr[0]) 을 입력을 해줘서 배열 내부에 answer=[7]이 되었다. 그리고 반복문을 돌려준다. 그리..

알고리즘 공부하는데, 뭐랄까.. 파이썬 처럼 예쁘게 브라우저 말고 vscode로 디버깅을 하고 싶어져서 디버깅 하는 방법 찾아서 정리해보았다. 1. 재생 버튼 위에 postion : absolute; bottom: -10; left : -10; 으로 되어 있는 벌레 클릭 (command + shift + d) 2. JavaScript 디버그 터미널 클릭 3. 디버깅 터미널 생성 4. 해당 경로에 파일로 이동 5. node 해당.js 6. 완료 짝짝짝~

❌ OX 문제는 맞거나 틀린 두 경우의 답을 가지는 문제를 말한다. 여러 개의 OX 문제로 만들어진 시험에서 연속적으로 답을 맞히는 경우에는 가산점을 주기 위해서 다음과 같이 점수 계산을 하기로 하였다. 1번 문제가 맞는 경우에는 1점으로 계산한다. 앞의 문제에 대해서는 답을 틀리다가 답이 맞는 처음 문제는 1점으로 계산한다. 또한, 연속으로 문제의 답이 맞는 경우에서 두 번째 문제는 2점, 세 번째 문제는 3점, ..., K번째 문제는 K점으로 계산한다. 틀린 문제는 0점으로 계산한다. 예를 들어, 아래와 같이 10 개의 OX 문제에서 답이 맞은 문제의 경우에는 1로 표시하고, 틀린 경우에는 0으로 표시하였을 때, 점수 계산은 아래 표와 같이 계산되어, 총 점수는 1+1+2+3+1+2=10 점이다. 문..

✂️ A, B 두 사람이 가위바위보 게임을 합니다. 총 N번의 게임을 하여 A가 이기면 A를 출력하고, B가 이기면 B를 출력합니다. 비길 경우에는 D를 출력합니다. 가위, 바위, 보의 정보는 1:가위, 2:바위, 3:보로 정하겠습니다. 예를 들어 N=5이면 두 사람의 각 회의 가위, 바위, 보 정보가 주어지면 각 회를 누가 이겼는지 출력하는 프로그램 을 작성하세요. const 가위바위보 = (a, b) =>{ let result = [] for(let i = 0; i < a.length ; i++){ if(a[i] == 1 && b[i] == 3) result.push("A") else if(a[i] == 2 && b[i] == 1) result.push("A") else if(a[i] == 3 && ..