Today I Learned

9:00 - 9:30 내일배움캠프 OT좋은 개발자란 실력도 중요하지만함께 밥 먹고 싶은 사람, 동료와 소통을 잘 하는 사람이라는 내용이 기억에 남는다.사전 강의를 기반으로 팀 프로젝트를 실행하고, 매일 또는 한 주의 흐름을 정리하며 기록하기9:30 - 10:10 OT와

9:00 - 13:00 팀 소개페이지 만들기 어제 배운 HTML, CSS를 활용해서 간단히 만들어봤다. 배우지는 않았지만 구현하고자 하는 태그들은 구글에 검색해서 적용했다. 이미지, 비디오와 같은 웹콘텐츠들은 명명규칙을 정해야 나중에 병합할 때 충돌을 막을 수 있다.

9:00 - 13:00 팀 소개페이지 만들기 어제 배운 HTML, CSS를 활용해서 간단히 만들어봤다. 배우지는 않았지만 구현하고자 하는 태그들은 구글에 검색해서 적용했다. 이미지, 비디오와 같은 웹콘텐츠들은 명명규칙을 정해야 나중에 병합할 때 충돌을 막을 수 있다.

9:00 - 13:00 팀 소개페이지 만들기 어제 만든 페이지를 조금씩 수정했다. top버튼, 특정 구역에 hover할 때 배경 색 바꾸기 등 소소하게 변경하고, 다섯 개의 서브페이지도 만들었다. 서툴지만 구글링해가며 끝까지 완성했다. 뿌듯하다. 14:00 - 18:

9:00 - 13:00 팀 프로젝트 최종 마무리웹개발 종합반 4주차 강의듣기내가 본 영화들을 기록하는 페이지를 구현했다. python으로 서버를 만들고 mongoDB에 데이터를 저장했다.14:00 - 16:00 팀 프로젝트 발표모든 팀이 한 주동안 만들었던 프로젝트를

클라이언트의 요청에 항상 응답해줄 수 있는 클라우드 서버에 프로젝트 실행하기 위함이다.클라우드 서비스 'AWS'에서 데이터센터 컴퓨터 빌리기내가 만든 코딩 파일들을 업로드하고 실행시켜두기배포 명령어 eb create myweb을 생성하는 과정에서 ERROR: Inval

웹 페이지의 동적 기능을 효율적으로 구현할 수 있도록 객체지향 프로그래밍 언어의 기초를 다진다.함수, 조건문, 배열, for문 등 JavaScript 문법 배우기배움을 토대로 코딩테스트 연습하기코딩테스트를 어떻게 풀어야 하는지 감이 오지 않는다.문제 풀이 영상 눈으로

프로젝트의 시간과 차원을 자유롭게 넘나들수 있도록 하기 위해시간: 프로젝트의 버전을 과거로 되돌리거나 특정 내역을 취소할 수 있다.차원: 프로젝트의 여러 모드를 쉽게 전환하고 관리할 수 있다.여러 사람들과 프로젝트에서 협업할 수 있도록 하기 위해Git, iTerm2(C

웹 페이지의 동적 기능을 효율적으로 구현할 수 있도록 객체지향 프로그래밍 언어의 기초를 다지기 위해서JS 문법 종합반 1주차, 2주차 복습하기예제를 조금씩 바꿔가며 실습하기코딩테스트를 어떻게 풀어야 하는지 감이 오지 않는다.문제 풀이 영상 눈으로 보고난 후 안보고 따라

순서 보장이 필요한 어떤 로직에서 순서를 보장 받기 위해서이다.Promise를 사용해 비동기 작업을 동기적으로 처리한다.반복부분을 함수화한다.반복되는 코드를 함수화할 때 아메리카노만 리턴되었다.변수 new name 부분에 값인 아메리카노를 name으로 바꾼다. prev

Class 문법의 주요 개념을 이해하고 활용하기 위해서로직을 안전하게 변경하고 유지하기 위해서클래스, 인스턴스, getter, setter, 상속, static method 등 학습하기렉시컬 스코프에 대해 이해하고 increase 함수 학습하기예제를 통해 기초 다지기카

팀 프로젝트, 개인 과제를 할 때 문법을 원활히 사용하기 위함직접 코드를 짜보면서 익숙해지기 위함스파르타코딩클럽 JavaScript 문법 종합반 1~2주차 암기개인 과제 모범답안 주석처리 해가며 하나하나 뜯어보고, 따라하기함수 선언문, 함수 표현식, 화살표 함수 사용이

팀 프로젝트를 할 때 원활한 협업을 하기 위함내가 생성한 파일의 버전관리를 하기 위함github repository 생성 후 초기코드 올리기(대표자 1명만)git clone 하기 (대표자 1명 제외 나머지 팀원들)Visual Studio Code로 내려 받은 폴더 열고

팀 과제 필수 요구사항인 상세페이지에서 홈으로 이동하는 UI 및 기능 구현을 위함팀 과제 선택 사항인 상단 이동 스크롤 버튼 기능을 구현하기 위함html 파일 body 요소에 구조 생성bts.css 파일 생성btn.js 생성topBtn이 화면상으로 보이지 않았다.팀원이

자바 스크립트의 기본 용어와 개념을 이해하기 위함1\. 자바스크립트자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어이다.2\. ECMAScript유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭이다.3\. 웹 애플리케이션기존의 웹 페이지보다 많은 기능을 구현

기초 문법을 숙지하여 리액트 컴포넌트 안에서 JS를 사용하기 위함컴포넌트 개념을 숙지하여 컴포넌트를 생성하기 위함react 기본 문법 학습개발 환경 설정컴포넌트 개념 학습yarn 설치를 위해 npm install -g yarn 을 입력 했는데 다음과 같은 오류가 나타났

기초 문법을 숙지하여 리액트 컴포넌트 안에서 JS를 사용하기 위함컴포넌트 개념을 숙지하여 컴포넌트를 생성하기 위함react 기본 문법 학습Props 추출State 개념 학습실습props : 컴포넌트 끼리의 정보교환 방식반드시 위(부모)에서 아래(자식)방향으로 흐른다.

React를 사용하여 효율적인 UI를 개발하는 방법에 대한 이해를 높이기 위함.React 문법으로 To-do list 페이지를 구현한다.컴포넌트를 통해 UI 재사용이 가능한 개별적인 조각으로 분할한다.완료 버튼이 화면상에 보이지 않았다.코드를 작성하기는 했지만, 코드의

React Context의 필요성과 필수 개념에 대해 이해한다.useContext를 실습하여 컴포넌트 간 데이터를 공유하는 방법을 익힌다.React.memo, useCallback, useMemo의 개념과 사용 방법을 숙지하여 최적화를 할 수 있다.리액트 라이프사이클과

HTML, CSS, 자바스크립트 문법 활용하기 위함1\. HTML 기본 태그 학습HTML의 개념 및 필요성 학습HTML 태그의 구조와 역할 학습 (html, head, title, link, body, h1~h6, p, div, span, img, a, input, b

사용자가 할 일 목록을 관리할 수 있는 Todolist 앱을 구현한다.React, Redux, React Router 기술을 활용하여 상태 관리와 라우팅을 구현한다.컴포넌트 구조 설계:Home.jsx: Todo 앱의 메인 페이지를 담당하는 컴포넌트로, 할 일 목록을 표

Mission: React state & component 이해 및 실습 1) 목적 React의 기본 개념과 사용법을 학습하고, 숫자 증가 버튼을 구현하는 연습문제를 해결하여 React에 대한 이해를 높이기 위함. 2) 방법 React를 설치하고 Create React

Mission: React 코드 오류 정리 및 해결 방법 >> #### 1) react-dom.development.js:86 Warning: React does not recognize the "isVisible" prop on a DOM element. isVisi

에러: 'useNavigate is not a function'원인: react-router-dom 패키지 버전 충돌 또는 import 문제해결: 패키지를 최신 버전으로 업데이트하거나 import 문 확인 후 올바른 방법으로 사용에러: 'setPosts is not a

에러: 'Cannot read properties of undefined (reading 'title')'원인: 해당 에러는 객체의 속성이나 배열의 요소를 읽으려고 할 때, 해당 객체 또는 배열이 정의되어 있지 않거나 값을 가지고 있지 않을 때 발생합니다. 즉, 'po

JavaScript의 약점과 TypeScript의 등장JavaScript 그리고 Node.jsJavaScript는 웹 페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어로, 웹 페이지의 상호작용을 위해 HTML과 CSS와 함께 사용된다.V8 엔진 등의 성능 향상으

enum과 object literal 비교enum간단한 상수 값의 경우에 적합하다.상수를 그룹화하여 가독성과 명확한 상수 값을 정의할 수 있다.컴파일 시에 자동으로 숫자 값으로 매핑되므로 값 할당에 신경 쓸 필요가 없다.단, 특정 숫자 값으로 매핑되어야 한다면 직접 할

클래스클래스 그리고 객체란?클래스는 객체 지향 프로그래밍(OOP)의 핵심 구성 요소 중 하나이며, 객체를 만들기 위한 틀(template)이다.클래스는 객체들이 공통으로 가지는 속성(attribute)과 메서드(method)를 정의한다.속성은 객체의 성질을 결정하며,

원인:Redux store를 전역으로 제공하지 않아서 발생하는 에러이다.해결방안:Redux의 Provider로 감싸고, connect 함수를 사용하여 컴포넌트를 Redux store에 연결한다.원인:Redux store에서 posts 배열이 초기화되지 않아서 발생하는

설치 및 기본 세팅법1\. 설치 명령어기본 세팅하기configureStore로 데이터 중앙 저장소 만들기어플리케이션 가장 최상위에 Provider 두기리액트의 useState를 리덕스의 createSlice로 대체하는 예시 코드데이터 가져와서 실제 화면에 보여주기사용할

어떤 정보에 이름을 붙여 저장할 수 있다.변수 이름은 문자로 시작해야 한다.변수 이름에는 숫자, 문자, 달러($), 밑줄(\_)을 포함할 수 있다.변수 이름은 대소문자를 구분한다.예약어(JavaScript에서 이미 특정 용도로 예약된 단어)는 변수 이름으로 사용할 수

자바스크립트에서 데이터를 저장하고 참조하기 위한 식별자. var, let, const 세 가지 키워드를 사용하여 선언할 수 있으며, 블록 스코프를 갖는 let과 const를 권장한다.변수 선언이 해당 스코프의 최상단으로 끌어올려지는 동작.var 키워드로 선언한 변수는

원인:Firebase의 API 키가 잘못 설정되었거나 유효하지 않은 경우 발생한다.해결방안:1\. Firebase 콘솔에서 제공된 올바른 API 키를 사용하여 firebaseConfig 객체에 설정한다.개발 서버를 재시작한다.원인:useEffect의 의존성 배열에 d

원인:모듈을 찾을 수 없는 경로 또는 잘못된 모듈 경로를 사용했을 경우 발생한다.해결방안:모듈의 경로가 올바른지 확인하고, 모듈이 있는 위치로 경로를 수정해야 한다.원인:이메일과 비밀번호로 로그인할 때, 올바르지 않은 정보를 입력하거나 서버와의 통신 중 문제가 발생할

에러코드:Cannot find context value "QueryClient"원인:리액트 쿼리를 사용하는 컴포넌트에서 QueryClientProvider로 감싸지 않았을 경우 발생.해결방안:해당 컴포넌트를 QueryClientProvider로 감싸서 QueryClie

개념:프로그래밍에서 속성이나 메서드에 접근할 때, 해당 속성이나 메서드가 존재하지 않는 경우 에러를 방지하고 안전하게 접근하는 방법이다. 만약 접근하려는 객체가 null 또는 undefined인 경우, 옵셔널 체이닝은 에러 대신에 결과를 undefined로 반환하여 프

방구석 토론은 사소하지만 재미있는 주제들에 대한 아이디어 교환과 의견 공유를 위한 온라인 토론 커뮤니티입니다. 현실의 벽을 넘어서서, 온라인 공간에서 의견을 내고 다양한 생각을 교류할 수 있습니다.저희 ‘9쪽이들’은 다양한 주제에 관심 있는 사람들이 모여 생각을 나누고

Mission: 심화 프로젝트에서 맡은 기능(Create, Update)을 하며 발생한 오류 및 개념 정리 >> ### 에러 >> #### addData 충돌 문제 원인: addData 식별자가 이미 사용되었는데 다시 선언하여 충돌이 발생한다. 해결방안: Edit.js

원인:로컬 브랜치와 원격 저장소의 브랜치가 일치하지 않을 때 발생한다.해결방안:1\. git pull origin dev를 사용하여 원격 브랜치를 로컬 브랜치로 병합한다.2\. 병합 충돌이 발생하면 충돌을 해결하고 커밋을 생성한 후 git push를 다시 시도한다.원인

현상: 재투표를 방지하기 위한 로직을 구현하기가 많이 어려웠다.원인: 직접 코드를 짜서 대입한게아닌 막연하게 이렇게 하면 되지않을까?라는 안일한 생각으로 대입하다보니 오류가 많았다.해결책: db.json에 vote 배열을 추가해서 display name을 post 해주

프로젝트 명: TailTales프로젝트 설명: TailTales는 유기동물 상태에 대한 오픈 API를 사용하여 사용자가 가까운 보호소에서 유기동물을 찾아 입양할 수 있는 서비스이다.웹사이트는 입양된 동물의 행복한 이야기를 나누는 공간이며, 동물들의 꼬리를 감정 표시로

1\. useParams를 사용하여 URL 파라미터 값 가져오기오류 코드: RouteParams' 형식이 'string | Record<string, string | undefined>' 제약 조건을 만족하지 않습니다.원인:useParams로부터 반환되는 값의

1\. CPU와 메모리의 역할은 무엇일까?CPU(중앙처리장치)는 컴퓨터에서 명령을 실행,데이터를 처리하는 부품이고 계산과 제어를 담당한다.메모리는 데이터와 프로그램을 저장하는 저장공간이고 CPU가 작업을 할때 정보를 제공한다쉽게 이야기하면 컴퓨터가 농장이라고하면 CPU

1\. Redux가 무엇이고, 왜 사용할까?Redux란Redux는 JavaScript 애플리케이션의 상태(state) 관리를 돕는 라이브러리이다. 애플리케이션의 데이터를 중앙 집중식으로 관리하고, 컴포넌트 간의 상태 공유와 업데이트를 효율적으로 관리할 수 있게 도와준다

1\. Redux 말고 다른 전역 상태관리와 차이점을 말해보자1) MobX vs. Redux: \- Redux는 "불변성(Immutability)"을 강조하며, 상태를 불변 객체로 관리한다. 반면 MobX는 불변성을 요구하지 않고, 직접적으로 상태를 변경할 수 있

1\. 쓰레드와 쓰레드 풀이 무엇인지 설명해보자 \- 쓰레드는 프로세스 내에서 실행되는 실행 단위이며, 쓰레드 풀은 쓰레드를 미리 생성해 두어 작업 처리에 사용되는 쓰레드를 제한된 개수만큼 정해 놓고 작업 큐에 들어오는 작업들을 하나씩 쓰레드가 맡아 처리하는 기법

> ### Mission: useEffect, 컴퓨터 구조와 보조 기억장치 질문 정리 >> ### 📌 **1. useEffect의 실행 순서에 대해 설명해주세요** **`useEffect`**의 실행 순서는 다음과 같습니다. 1) **컴포넌트가 최초로 렌더링될 때:

1\. var, let, const의 차이에 대해 알려주세요. var:var는 변수를 선언하는 키워드입니다.함수 스코프를 가지며, 함수 내 어디에서든 접근 가능합니다.var 선언은 호이스팅(hoisting)으로 인해 선언 전에 사용해도 에러가 발생하지 않습니다.중복 선

1\. Async/Await와 Promise의 차이에 대해 알려주세요. Promise:Promise는 비동기 작업의 결과를 나타내는 객체입니다.비동기 작업을 수행하고 그 결과를 나중에 처리할 수 있도록 도와줍니다..then()과 .catch() 메서드를 이용하여 비동기

1\. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은? 성능: 많은 데이터를 한 번에 렌더링하지 말고 화면에 보이는 일부만 처리하여 성능 유지.가상화: 화면에 보이는 아이템만 렌더링하는 가상화 기술 사용하여 성능 최적화.데이터 로딩

Mission: 호이스팅, 네트워크 질문 정리 📌 1. Javascript 호이스팅에 대해 설명해주세요. - JavaScript의 호이스팅은 변수 및 함수 선언을 코드의 맨 위로 끌어올리는 동작을 말하며, 선언부만 끌어올리고 할당은 그 자리에 남깁니다. 이로 인해

Mission: 브라우저 작동방식, 자료구조 관련 질문 정리 📌 1. 브라우저의 작동방식에 대해서 설명해주세요. 사용자의 입력 받기: 브라우저는 사용자의 입력을 받아옵니다. 이 입력은 주로 주소 표시줄에 웹 주소를 입력하거나 웹 페이지의 링크를 클릭하는 것과 같은

Mission: GET, POST 방식, 숫자 자료 표현 관련 질문 정리 📌 1. GET, POST 방식의 차이점에 대해서 설명해주세요. 1. GET: GET 요청은 정보를 서버로 보내는 데 사용되며, 주로 데이터를 서버에서 가져오는 데에 활용됩니다. GET 요청은

Mission: GET, POST 개념, 선형/비선형 자료구조 관련 질문 정리 📌 1. GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요. GET과 POST는 HTTP 요청 방식으로, 데이터를 웹 서버와 주고받을 때 사용됩니다. 1. GET: -

Mission: 쿠키, 세션, 웹스토리지와 배열 관련 질문 정리 📌 1. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요. 쿠키(Cookies): 저장 위치: 클라이언트(브라우저)에 저장됩니다. 용도: 사용자 정보를 클라이언트 측에서 보존하고, 서버와 상호작용할 때

Mission: 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 관련 질문 정리 📌 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요. 클라이언트 사이드 렌더링 (Client-Side

Mission: TCP/UDP 관련 질문 정리 📌 TCP, UDP에 대해서 설명해주세요. TCP (Transmission Control Protocol): 연결 지향 프로토콜로, 데이터 전송 시 신뢰성을 보장합니다. 데이터 전송 과정에서 오류 검출 및 복구를 수행하

Mission: http, https 차이점 📌 http, https 차이점에 대해 설명해주세요 HTTP (HyperText Transfer Protocol): 개념: HTTP는 웹에서 정보를 주고받는 데 사용되는 프로토콜로, 데이터 전송은 평문(암호화되지 않음)으

Mission: 라이프사이클 관련 질문 정리 📌 라이프사이클이 의미하는 바에 대해서 설명해주세요. 라이프사이클은 어떤 시스템, 제품, 프로세스 또는 개체가 경험하는 다양한 단계나 상태의 연속성을 나타냅니다. 이것은 해당 개체가 어떻게 생성되고, 성장하며, 운영되며,

Mission: 라이프사이클 메소드 관련 질문 정리 📌 라이프사이클 메소드에 대해 설명해주세요. 라이프사이클 메소드는 프로그래밍에서 특정 객체나 컴포넌트의 생명주기 동안 호출되는 메소드입니다. 주로 객체가 생성되고 소멸될 때, 그리고 중간에 다양한 상태 변화가 발생

Mission: 비동기프로그래밍, OSI 7계층 모델 관련 질문 정리 📌 1. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. - 동기는 작업이 순차적으로 진행되는 반면, 비동기는 작업이 병렬적으로 진행되며 블록하지 않고 다른

Mission: LinkedList (리스트) 관련 질문 정리 📌 1. LinkedList (리스트)에 대해 설명해주세요. 링크드 리스트는 일반적인 리스트로 불리며, 노드로 연결된 데이터를 저장하는 자료구조입니다. 링크드 리스트는 데이터의 순서를 유지할 수 없지만,

Mission: react 클래스형과 함수형 관련 질문 정리 📌 react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요. React 클래스형 컴포넌트 vs. 함수형 컴포넌트 클래스형 컴포넌트: 클래스로 정의되며

Mission: 쓰로틀링과 디바운싱 관련 질문 정리 📌 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요. 쓰로틀링(Throttling): 개념: 쓰로틀링은 특정 작업이 실행되는 속도를 제한하는 기술로, 지정된 시간 간격 동안 작업을 최대 한 번만 실

Mission: 자바스크립트와 타입스크립트 관련 면접 질문 정리 📌 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요. 자바스크립트와 타입스크립트의 차이: 자바스크립트: 동적 타입 언어로, 변수의 데이터 타입을 런타임 시점에 결정합니다. 타입 정보를

Mission: SEO 관련 질문 정리 📌 SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요. SEO (Search Engine Optimization): 개념: SEO는 검색 엔진에서 웹 사이트 또는 웹 페이지가 노출될 수 있는 방식을 최적화하는 프로세

Mission: 이미지 최적화 관련 질문 정리 📌 이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요. 이미지 최적화: 개념: 이미지 최적화는 웹 페이지에서 사용되는 이미지의 용량을 최소화하고 화질을 유지하는 과정입니다. 이를 통해 웹 페이지의 로딩 속도를

프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요. 디버깅 및 개발: 브라우저의 개발자 도구를 사용하여 JavaScript 코드 디버깅을 수행했습니다. 주로 콘솔에서 오류 메시지를 확인하고, 변수의 값 및 함수 호출 스택을 분석하여 버그를 식별하고

Mission: 성능최적화 관련 질문 정리 📌 프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요. 프론트엔드 성능 최적화 방법: 이미지 최적화: 이미지를 압축하고 적절한 포맷을 선택하여 파일 크기를 줄입니다

Mission: Javascript event loop 관련 질문 정리 📌 Javascript event loop에 대해서 설명해주세요. JavaScript의 이벤트 루프(Event Loop)는 자바스크립트의 비동기 동작을 관리하는 핵심 메커니즘입니다. 이를 간단히