시작하기 앞서...현재 프로젝트를 진행하고 있는데깃허브에서 Organization 레포지토리에서 작업을 하고 vercel 로 배포를 하려면 프로 계정을 사용해야 된다.Pro 계정 무료 체험 2주를 할 수 있지만 그 이후로는 요금제를 사용해야 한다. 대신 Organization 레포지토리에 있는 걸 내 계정 레포지토리로 fork 해서 배포를 할 수 있다.하지만 이 과정은 매번 브랜치의 sync 를 맞춰야 한다. 그래서 이러한 번거로운 작업을 해결하기 위해 깃허브 액션(github action) 을 사용하여 자동 배포 할 수 있다. 깃허브 액션으로 vercel 자동 배포1. 내 계정에 fork 한다.Organization 레포지토리에 있는 프로젝트를 내 계정으로 Public 으로 fork 한다. 2. ver..

☘️ 시작하기 앞서...css in js 라이브러리를 사용하지 않고 css 를 적용할 때, 동적으로 클래스 이름을 지정해주기 위해서 삼항연산자 등을 사용할 수 있다.하지만 이 과정은 코드가 복잡해지고 더러워진다. 그래서 이를 해결하기 위해 classnames 라이브러리를 사용할 수 있다.  ☘️ classnames 라이브러리1. 설치하기[공식 깃허브 문서 - classnames] GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames togetherA simple javascript utility for conditionally joining classNames together - JedW..

Q. 질문 1웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #8)A. 렌더링 방식 - CSR, SSR, SSG웹 페이지 렌더링 방식에는 CSR, SSR, SSG 가 있다. 1. CSR - 클라이언트 사이드 렌더링1-1. 특징먼저 CSR 은 클라이언트에서 렌더링을 하는 방식이다. 사용자가 웹사이트에 접속을 하면 브라우저는 서버에 요청을 하여 빈 HTML 과 연결된 JavaScript 를 브라우저에게 주게 된다.그러면 브라우저에서는 JavaScript 를 사용하여 동적 DoM 을 생성해 사용자에게 화면을 보여준다. 일반적으로 React 와 같은 프레임워크를 사용하여 개발이 된다. 1-2. 적합한 상황동적 ..

Q. 질문 1리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #7) A. key propsReact 에서 map 을 사용하여 배열을 렌더링 할 때엔 key 를 써야 한다.{options.map((option) => ( {option.label} ))} 만약 key 를 쓰지 않을 경우 아래처럼 콘솔창에 key 가 있어야 된다고 경고가 뜬다.그렇다면 왜 key 를 써야할까? 엘리먼트에 안정적인 고유성을 부여각 엘리먼트는 key 값을 통해 어떤 항목을 변경, 추가, 삭제할지 식별해준다.그래서 엘리먼트의 고유성을 부여하기 위해서는 key 를 지정해야 한다. 그래서 key 값으로 식별을 하여 해당 엘리먼트에 안정적인 고유성을 부여해 렌더링을 효과..

Q. 질문리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #6) A. DomDOM 이란?DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다. 하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다. 레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다. 그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다. A. Virtual DOMVirtual DOM 이란?React 에서는..

사건 발생프로젝트를 하다가 A 브랜치(예시) 에서 작업을 하고 여기에 새로운 기능을 추가하기 위해 A-1 브랜치(예시) 를 만들어 작업하여 pull request 를 요청하고 A 브랜치에 merge 를 하였다.그런데 에러가 발생했고.. 왜 발생했는지도 모르고 해결을 어떻게 해야 될지도 몰랐다.. revert 하기그래서 이 문제를 해결하기 위해 A-1 브랜치가 A 브랜치에 merge 되기 전 상황으로 만들기로 했고A-1 브랜치를 merge 한 pull request 에서 Revert 버튼을 눌렀다. Revert 버튼을 누르니깐 Revert 된 pull request 를 다시 작성하는 창으로 자동이동된다. 브랜치 이름도 이렇게 새로 만들어진다.Revert 를 하니깐 다행히도 에러가 발생하지 않았다. 그래서 ..

시작하며...코드잇 스프린트 6기 파트 1이 끝이 났다.처음엔 국비 교육을 들을까 말까 고민했었는데 1회차 후기는 매우 만족스러웠고 빨리 다음 내용을 배우고 싶다. 팀 활동우선 코드잇 스프린트는 일주일에 6번 매일 팀 회의를 진행한다. (우리 팀은 ☀️ 아침 10시에 팀회의를 진행했다.)나는 14조의 팀장을 맡았으며, 팀 회의에서 매일 팀원들에게 진도는 어디까지 나갔는지 물어보고공부하면서 어렵거나 헷갈리거나 몰랐던 점이 있으면 서로 이야기를 하였다.서로 이야기하면서 알고 있던 사람들은 내용을 다시 정리하고 상기시키고, 물어본 사람은 질문에 대한 해결을 얻을 수 있었다. 그리고 데일리 팀미션을 진행하여 매일 한 명씩 돌아가며 배웠던 내용을 물어보고 팀원들이 한 명씩 구두로 답을 하는 활동을 하였다.단순히 ..

☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를 클릭한다. 2. Features 의 Set up templates 클릭한다. 스크롤을 내려서 Features 의 Issues 에 있는 초록색 Set up templates 버튼을 클릭한다. 3. Custom template 를 선택한다. select 를 클릭하여 Custom template 를 선택한다. 4. Preview and edit 을 클릭하여 템플릿을 수정한다. Preview and edit 을 클릭하고 연필 모양 아이콘을 클릭한다. 5. 원하는 템플릿 내용을 작성한다. 마크다운으로 원하..

Q. 질문 1이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #5) A. 답변1. 이벤트 버블링이벤트 버블링이란 무엇일까?이벤트 버블링이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다. 버블링 적용이런 코드가 있을 때, content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속  요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.const content = document.querySelector('#content');const title = docu..

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..