1. 평균 구하기 [프로그래머스 1단계 - 평균구하기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1-1. 나의 풀이 reduce 를 사용하여 배열 요소들의 합을 sum 에 리턴하고, 평균 값을 구하기 위해 arr 의 길이만큼 나누었다. function solution(arr) { const sum = arr.reduce((acc,item) => { return acc + item; },0) return sum / arr.length } 1-2. 다른 사람 풀이 내 코드와 구현 방법은 동일하지만, 더 간단하게 표현하였다. function average..

Q. 질문var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 중복 선언 허용var - 중복 선언 Ovar 은 정상적으로 중복 선언이 가능하다. let - 중복 선언 Xlet 은 중복 선언이 불가능하여 SyntaxError  가 발생한다.const - 중복 선언 Xconst 도 let 과 마찬가지로 중복 선언이 불가능하여 SyntaxError 가 발생한다.추가적으로 const 는 let 과 다르게 재할당 시 TypeError 가 발생한다.A. 스코프함수 스코프함수 안에서 정의된 변수는 해당 함수 내에서만 접근 가능블록 스코프중괄호 {} 로 둘러싸인 블록 내에서만 접근 가능var - 함수 스코프var 은 함수 스코프로..

기본 배경컴공은 아니지만 유사 학과 4년제 졸업한 전공자 (데이터베이스 과목 수강)정보처리기사 미취득 (필기만 합격)웹 프론트엔드 개발자 취준생 SQLD 취득 이유사실 웹 프론트엔드 개발자에겐 중요한 자격증은 아니지만, 정처기 준비할 겸 자격증도 취득할 겸 SQLD 를 응시했다.그리고 동기들 중에서도 SQLD 를 취득한 친구들이 몇몇 있어 나도 이번에 도전하게 되었다. SQLD 시험 결과1과목은 10문제 중에서 7문제를, 2과목은 40문제 중에서 31문제를 맞혀 합격했다!!생각보다 1과목이 너무 어렵게 나왔고, 2과목은 노랭이 문제집만 잘 풀어도 무난하게 풀 수 있었던 것 같다.[SQLD - 출제 문항 및 배점] SQLD 공부 방법1. 개념 익히기문제를 풀기 전에 개념을 익혀야 하는데, 나는 홍쌤의 데이..

Q. 질문자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 기본 배경자바스크립트에서 기본형 데이터는 불변값이고, 참조형 데이터(객체)는 가변값이다. 불변객체변하지 않는 객체 자바스크립트에서 객체는 가변값인데, 원본 객체가 변하지 말아야 할 상황에 불변 객체가 필요하다. 불변 객체가 필요한 상황student1 객체에서 name 만 수정한 새로운 객체를 만들기 위해student1 객체를 newStudent 에 복사하고, newStudent 의 이름을 변경하고 리턴하였다.결과는 student2 에서 바뀐 이름이 나올 것 같지만, 실제로는 둘 다 Lee 로 변경되었다. 결론위에 코드처럼 객체의 가변성 에 따른..

☘️ 시작하며... 현재 프로젝트에서 Zod 와 React-Hook-Form 조합으로 입력폼 내용을 구현하고 있고 아래 사진처럼 스키마 객체를 생성하여 폼 제출 시 유효성 검증을 만족하지 못하면 토스트 UI 가 뜨도록 구현을 했다. 현재 신고하기 기능을 구현하는 중이며, 신고종류를 라디오 버튼을 사용하여 고르게 되는데, 이 때 스키마객체에서 신고종류의 타입을 enum 으로 설정하였다. 그래서 신고종류를 선택하지 않고 폼을 제출할 경우, 에러 토스트 UI 를 띄우려는데 아무생각없이 다른 타입처럼 enum 이 min 값을 1을 만족하지 못하였을 때, message 를 다음과 같이 설정하려고 했다. // 적용 X reportType: z .enum([report, ...otherReport]) .min(1, ..

Q. 질문 1Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #3)A. 답변 1branch merge 란?Git 에서 branch merge 란? branch merge현재 branch 에서 다른 branch 를 합친다.(병합) branch merge 를 사용하는 상황은 다음과 같다.A branch 에서 작업을 한 내용을 main branch 에 반영하기 위해, main branch 에서 A branch 의 내용을 합침A branch 에서 작업하고 있는데 main branch 에 최신 변경 사항이 있어, A branch 에서 main branch 의 내용을 합침 branch merge 방법branch 를 merge 하는 방법에는 크게 merge..

☘️ 기본 코드 작성하기 absolute 를 적용하기 위해 부모와 자식을 만들어주었다. HTML 코드 CSS 코드 .parent { width: 500px; height: 500px; background-color: aquamarine; position: relative; } .child { width: 30%; height: 30%; background-color: pink; position: absolute; } ☘️ 자식 요소 가운데 배치하기 ❌ top, left 50% 자식 요소를 가운데 배치하려면 어떻게 해야할까? top(또는 bottom) 이랑 left(또는 right) 를 50% 로 하면 될 것 같다. 부모 기준으로 위에서 50%, 왼쪽에서 50% 이니깐 가운데에 배치 될 것 같기 때문이다!..

Q. 질문 1시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변 1시맨틱 태그란?시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다. 시맨틱 태그 (Semantic Tag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 시맨틱 태그는 기존 HTML의 태그와 기능이 똑같다. 하지만 시맨틱 태그는 단순 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다. 시맨틱 태그의 종류시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)태그설명문서의 머리말, 상단 ex) 로고, 제목 등을 포함문서의 내..

☘️ useRef 란?useRef 는 React Hook 중 하나이며, 공식 문서에 따르면 useRef 를 다음과 같이 설명한다. useRef.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지[출처: React 공식문서] useRef 는 DOM 요소에 직접 접근하기 위해 사용되며, 변하는 값을 유지하기 위해 사용된다.그래서 버튼을 눌러 원하는 요소로 스크롤하기 위해 Dom 요소에 직접 접근하는 useRef 가 사용된다. ☘️ 구현하기화면 만들기먼저 기본적인 화면을 만들어 준다.// App.jsximport './App.css';function App() { return ( ..

☘️ 시작하기 앞서 현재 진행하고 있는 프로젝트를 구현하면서 사용한 React Query(Tanstack Query) 의 staleTime 에 대해 알아 볼 것이다. 이를 사용하면서 불필요한 API 요청을 줄일 수 있으며 매우 유용하다 생각이 들어 글로 작성하게 되었다. 그 밖에도 React Query 를 사용하여 단순하게 데이터를 요청하는 게 아니라 유용한 기능들이 있다는 것을 직접 사용하면서 알게 되었다. 특히 프로젝트를 진행하기 전에 공식문서를 한국어로 번역한 깃허브 글을 본 것이 매우 도움이 되었다! 혹시 React Query 를 사용한다면 이 글을 정독하는 것을 추천한다 GitHub - ssi02014/react-query-tutorial: 😃 TanStack Query(aka. react qu..