ALL

[알고리즘 JS] 성격 유형 검사하기 (프로그래머스 Lv.1)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 검사지에 총 N개의 질문, 각 질문마다 7개의 선택지 존재함 각 지표별 점수를 계산해서 성격 유형을 출력하는 문제 풀이(정답) function solution(survey, choices) { let answer = ''; // 4개의 지표를 연관되는 순으로 객체 쌍으로 만들었다. const indicators = { 1: {R: 0, T: 0}, 2: {C: 0, F: 0}, 3: {J:..

[회고] 부트캠프 수료 후 1개월이 지났다.

작년 한 해를 보내고 별도의 회고를 작성하지 않았지만, 부트캠프 1개월이 지난 시점에서 지금까지 어떤 일이 있었고, 어떻게 살아왔고 또 어떻게 살아갈 것인가 정리하기 위해 두서없는 회고를 시작해본다. 2022년에는 굵직한 변화가 있었다. 다니던 회사를 퇴사하고 돌연 개발자가 되기로 결심했다. 퇴사에 대한 욕구는 늘 있어왔다. 일은 재밌었지만 변화와 성장에 목말랐다. 2021년, 딱 1년이 되는 시점에 이직할거라고 준비를 했었는데, 갑자기 수술도 받게 되었고 준비를 어영부영 미루다가 한 해가 끝나버렸었다. 그리고 그 해 말에 처음으로 개발 프로젝트를 경험해보고 뭐에 홀린듯이 공부를 시작했다. 프로젝트를 하기 전까지는 그냥 재밌는 취미생활이었다. 퇴근을 하면 하루 서너시간을 투자해 공부를 하고 새로운 것을 ..

[TIL] 2023-0112 : 3주차 과제 진행 과정 -2 디바운싱, 캐싱, 키보드 이벤트

🐈오늘 배운 것 ✔️ 프리온보딩 인턴쉽 3주차 과제 w. TS 삽질 등.. 언제나 그렇듯 마크업은 힐링되면서 킹받는단 말이지(?) 1. useState의 두 값 state, setState 함수 props로 전달하기 state는 기존 초기값의 타입을 지정하면 되고, setState는 리액트에서 제공하는 setState 함수 타입을 적용할 수 있다. type SearchBarProps = { isDropDownOpen: boolean; setIsDropDownOpen: React.Dispatch; }; 타입을 모르겠을땐 커서를 올려보자...! 2. typescript input Element 의 이벤트 객체 타입 : React.ChangeEvent 3. 디바운싱을 적용하여 API 호출 최적화하기 디바운싱이..

[TIL] 2023-0111 : useRef / 3주차 과제 진행 과정

🐈오늘 배운 것 ✔️useRef는 언제 사용? 오늘의 면접 질문 : useRef가 필요한 상황을 예시를 들어 설명해 주세요. 현재 알고있는 내용 1. DOM 에 직접 접근하고자 할 때 2. 리렌더링이 되어도 값을 유지하고 싶지만, 해당 값에 따라 리렌더링이 될 필요는 없는 경우 DOM 에 직접 접근을 해야할 필요가 있을 때는, 컴포넌트 렌더링 되자마자 input 에 focus 를 주거나, input 값을 clear 할 때가 있을 것이다. input 이라는 요소에 직접적으로 접근을 해야되기 때문에 useRef 로 ref 객체를 선언해주고, 접근하고자 하는 컴포넌트의 ref 속성으로 ref 객체를 전달해준다. 아! 그리고 스크롤을 조작할 때도 ref를 사용해야한다. 지난 프로젝트에서 답변 작성 후 해당 게시..

의존성, 의존성 역전 원칙(DIP)

지난 원티드 프리온보딩 인턴쉽 강의에서 의존성에 대한 내용을 설명해주셨는데, 잘 이해가 되지 않아 다시 정리해보려고 한다. 내용의 일부분은 강의 자료를 참고해서 작성했음을 밝힌다. ✔️의존성 의존성이란 특정 모듈의 동작을 위해서 다른 모듈을 필요로 하는 것을 의미한다. 여기서 모듈이란 하나의 기능을 수행하는 함수 혹은 클래스를 의미한다. 예를 들어 함수A를 실행하기 위해 B라는 요소가 필요하다면 '함수 A는 B에 의존성을 갖고 있다' 혹은 'B는 A의 의존성이다' 라고 표현할 수 있다. 의존성에 대해 현재(내가..) 이해할 수 있는 가장 실질적인 예시로 useEffect 훅의 두 번째 매개변수인 의존성 배열이 있다. const issues = useRecoilValue(issuesAtom); useEff..

[TIL] 2023-0106 : 프리온보딩) 2주차 과제 제출, Custom hook과 관심사 분리

🐈오늘 배운 것 ✔️2주차 과제 제출 이번 2주차 과제는 dnd 기능이 있는 이슈 트래커였다. 개인적으로는 dnd 기능을 만드느라 crud 구현을 제대로 하지 못했는데, 주말중으로 해당 부분을 완성하고 리팩토링해서 마무리할 계획이다. 이번에 recoil 을 사용하면서 전혀 몰랐던 기능인 effects 나, selectFamily 같은 기능을 팀원들 덕분에 알게되었다. effects 란 함수를 배열에 의존성으로 전달하면 해당 effects 항목이 있는 atom state 가 업데이트 될 시 자동으로 그 함수가 실행된다. 예를들어 업데이트시 매번 localStorage에 접근한다면 적용해볼 수 있다. selectFamily 같은 경우도 해당 state 에 업데이트가 있을 때 자동적으로 특정하게 처리된 값을 ..

[TIL] 2023-0104 : 프리온보딩) 1주차 과제 리뷰, 리액트 렌더링 최적화

🐈오늘 배운 것 ✔️1주차 과제 리뷰 지난 1주차 과제는 사전과제였던 todo list 를 리팩토링하는 것이었다. 팀 내에서 Best Practice 를 정해서 산출하는 것이었는데 오늘 라이브 세션에서는 그 과제를 전체적으로 리뷰해주시는 시간을 가졌다. 변수,함수명 짓기 이름만 보고도 어떤 역할을 하는지 파악할 수 있도록 잘 지어야 하는데, 오늘 피드백에서는 정확히 어떤 점을 주의하면 더 잘 지을 수 있는지 구체적으로 말씀해주셔서 좋았다. 예를 들어, const regexp = getRegexVerification(name as 'email' | 'password', value) 위와 같은 코드가 있다고 할 때, regexp 가 최종적으로 가지게 되는 값은 Verification 을 거쳐 산출된 어떤 b..

[알고리즘 JS] 숫자 짝꿍 (프로그래머스 Lv.1)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/131128 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 3자리 이상의 두 정수 X,Y 에서 공통적으로 등장하면서 짝지어지는 수들을 가지고 만들 수 있는 가장 큰 정수를 리턴 풀이(정답) function solution(X, Y) { // 정답 문자열 let answer = ''; // 길이 10, 0으로 초기화된 두 배열 const hashX = new Array(10).fill(0); const hashY = new Array(10).fill..

[프로젝트 기술 회고] 데이터 가져오기, 업데이트를 위한 SWR 적용기

이번 모락모락 프로젝트에서 사용했던 기술들을 각각 어떻게 사용했는지 되짚어 보고 보완할 점을 찾는 기술 회고를 진행하려고 한다. 한 번쯤은 사용했던 기술에 대해 정리하는 시간을 가지고 싶었다. 대망의 첫 번째 기술은 리액트의 데이터 fetching, caching 라이브러리인 SWR이다. 📝SWR 이란 무엇인가? SWR의 공식문서를 살펴보면 아래와 같이 설명하고 있다. "데이터 가져오기를 위한 React Hooks" "SWR"이라는 이름은 HTTP RFC 5861 에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate 에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다...

[TIL] 2022-1222 : 프리온보딩 인턴십 1차 과제 ing

🐈오늘 배운 것 ✔️EsLint, husky 그리고 자동화 첫 주차 프로젝트 셋팅을 위해 기존 프로젝트에 초기 세팅을 추가하고, 리팩토링을 진행했다. 이번 프로젝트에서 EsLint와 Prettier 그리고 husky를 사용하게 되었는데, 설정 방법 등을 간단하게 복기해보려고 한다. EsLint Lint 란 코드 문법 교정을 위해서 사용하는 툴로, 여러 사람이 함께 프로젝트 작업을 할 때 문법, 코드 스타일 등을 맞춰 가독성을 높이고 협업 능률을 향상시키기 위해서 사용한다. 주로 문법 교정의 용도로 EsLint를 많이 사용하고, 코드 교정의 경우 prettier 를 사용한다. 충돌 가능성이 있기 때문에 eslint-config-prettier 같은 별도의 플러그인을 설치하여 esLint 의 formatti..