프론트엔드 개발자가 될거야.
-
[1인 헤어샵 예약 시스템 구현기] 초기세팅과 firebase (기술스택: react, ts, redux-toolkit, styled-component + firebase)프론트엔드 개발자가 될거야./react 2022. 10. 21. 16:14
부트캠프를 수료한 후 개인적으로 typeScript, redux-toolkit을 공부해서 프로젝트 리팩토링도 하고 개인 프로젝트도 했다. 기초적인 toDoList, 가위바위보 게임을 구현했었기에 더 깊게 파볼 수 있는 프로젝트를 하고싶었다. 이에 적절한 토이프로젝트가 뭐가 있을까? 고민하다가 1인 미용실 예약 시스템을 구현하기로 했다. 기술스택은 react, ts, redux-toolkit, styled-component + firebase 이정도! 항상 backend가 없어서 한정적인 데이터만 보여줄 수 있으니 아쉬웠는데 firebase로 예약정보를 관리해보려고 한다. 기대된다!!!! firebase과의 만남... 이 글에는 초기세팅과 firebase를 어떻게 세팅하는지 적어보려고한다. https://..
-
[코딩테스트] 프로그래머스 삼총사 자바스크립트프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 21. 12:24
이번에 1단계로 새로 나온 문제인 듯하다. 1단계 중에서도 2단계 같은 1단계가 있는데 이 문제는 딱 1단계에 어울리는 듯 하다. 코테의 기본인 for문을 떠올려야 하며 게다가 삼중 for문이기 때문이다. 문제 설명이 좀 긴데 읽으면서 '오 for문 세 개 해서 풀면 되겠는데??' 하는 생각이 바로 떠올랐다. 프로젝트하면서 map을 주로 써서 for문보다 map이 좋고 편했는데 코딩테스트 문제는 for문으로 많이 접근을 해야 하는 것 같다. 꾸준히 풀어서 그런지 이제 for문에도 익숙해진 것 같다. 뿌듯하다 : ) 더 잘하고 싶다 코딩 테스트.....!! 문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라..
-
[코딩테스트] 프로그래머스 음양더하기 자바스크립트프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 14. 02:16
테스트를 통과했지만 다른 사람들의 답안을 보고 정말 참신한 해결책이 많다는 것을 뼈저리게 느꼈기에 기록으로 남기기로 했다. 다양한 해결법들을 보니 이 다양한 해결법 중 가장 효율이 좋은 방법을 골라 구현할 수 있을 정도의 실력자가 되고싶어졌다. 잘하고싶다!! 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같..
-
[코딩테스트] 프로그래머스 2016년 자바스크립트프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 13. 20:21
이 문제를 풀기 전에 알면 좋은 개념이 있다. 바로 "Date객체" ! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org 나는 "Date 객체를 만드는 여러가지 방법"을 통해 해결할 수 있었다. let today = new Date() let birthday = new Date('December 17, 1995 03..
-
[코딩테스트] 프로그래머스 약수의 개수와 덧셈 자바스크립트프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 11. 11:34
이 문제는 풀이과정을 머릿속에 꼭꼭 저장해두고 싶다. 왜냐하면 많은 사실을 깨달을 수 있기 때문에!!!!!!👊🏻 이 문제를 풀기위해 먼저 알아야 할 것이 있다. - Math.sqrt(16) = 4 : Math.sqrt(숫자)는 제곱근을 구해준다. (16의 제곱근 4) - Number.isInteger(숫자) : Number.isInteger(숫자)는 숫자가 정수면 true, 아니면 false 제곱근이 정수면 약수는 홀수이다!!!!!! => 머릿속에 넣자 "제곱근 정수 === 약수 홀수" ex) 16의 제곱근은 4로 정수이다. ⇒ 약수의 개수 1,2,4,8,16 총 5개다. ⇒ 16의 약수 = 홀수 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중..
-
[코딩테스트] 배열, 문자, 숫자 메서드 총정리프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 11. 11:13
코딩테스트는 개발자에게 첫번째 관문이다. 아직 초반이라 어렵지만 그만큼 성장하고 배우고 있다는 증거겠지? 많이 틀리고 고치고 고민하는 이 과정이 개발자로서의 나를 더 단단하게 하고있다고 믿고 꾸준히 해야겠다. 현재 프로그래머스 1, 2단계를 풀고있고 그러면서 문제에 나오는 메서드들을 총정리 해보았다. 메서드들의 사용법이 바로 떠올라야 코딩테스트에 도전장을 내밀 수 있다!!!!!!!!! 코딩테스트의 고수가 되는 그날까지.. 파이팅.....⭐️ 📌 배열 메서드 - 요소추가 ⇒ push(인자): 뒤, unshift(인자): 앞 - 요소 뽑기 ⇒ pop(): 뒤, shift(): 앞 [ 1, 2, 3, 4 ].pop() ⇒ 4 - 잘라서 원하는 부분만 남김 ⇒ slice(순서,순서) (원본 배열 변형X , 새로..
-
[컴포넌트 최적화] React.memo, useMemo, useCallback의 차이점과 활용프론트엔드 개발자가 될거야./react 2022. 9. 26. 16:46
세 달 동안 React기반으로 세 개의 프로젝트를 완성했다. 구현하는 것을 목적으로 달려왔기에 프로젝트가 끝난 이후 리팩토링을 진행하면서 나의 코드가 효율적인지 아닌지 고민해 보게 됐다. 그러면서 리액트의 렌더링에 대해 더 깊게 알고 싶었다. 리액트는 매우 유용하지만 렌더링에 주의하여 사용해야 한다. 렌더링을 할 필요가 없는 컴포넌트까지 항상 렌더링이 된다면 이는 성능이 좋지 않다고 할 수 있다. 이를 위해 활용해야 하는 것이 바로 React.memo, useMemo, useCallback이다. 먼저 알아야 하는 것은 리액트에서 리렌더링이 발생하는 3가지 조건이다. 리액트에서 리렌더링이 발생하는 3가지 조건 1. 본인이 가진 state에 변화가 생긴 경우 2. 부모 컴포넌트가 리렌더링이 일어난 경우 3...
-
[import 정리] 같은 파일에 있는 모듈을 Index 파일로 묶어 export 하기프론트엔드 개발자가 될거야./react 2022. 9. 6. 13:01
이번 기업협업을 통해 import를 깔끔하게 정리하는 법을 알 수 있었다. import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { observer } from 'mobx-react-lite'; import EquipPieChart from './components/EquipPieChart'; import TruckBarChart from './components/TruckBarChart'; import EquipDate from './components/EquipDate'; import timeStore from '../../stores/timeStore'; impo..