메가바이트 스쿨 프론트엔드 4기

2202년 12월 12일 부터 2023년 6월 30일 까지 프론트엔드 개발 과정 부트캠프를 시작한다. 처음 진행해보는 부트캠프인 만큼 떨리긴 하지만 적어도 1인분은 해야겠다고 생각한다. 기업연계를 통한 팀프로젝트를 진행하는 것이 어떤 방식으로 진행 될지는 모르겠지만 최

git, github 관리에 대한 강의를 수강함

blob : 컨텐츠의 용량을 bytes로 표시하고 텍스트, 이미지, 음악 혹은 단순한 파일처럼 다양한 형식의 파일이 저장될 수 있음tree : 트리 오브젝츠의 용량을 bytes로 표시하고 하위 디렉토리의 트리객체를 재귀적으로 참조함commit : blob + treet

TIL

TIL The requested URL returned error: 403 협업 관련 연습을 하기위해서 github에 organization을 만들고 내부에 repository를 생성하여 git flow 전략을 사용하여 협업을 하는 연습을 하던 도중에 fit flow

DOCTYPE 문서 형식 선언(Document Type Declaration) 또는 DOCTYPE는 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의를 따름을 지정하는 것이다. 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하

TIL박영웅 강사님의 첫수업.과제를 수행하는 것이 중요하고, html, css, javascript는 꾸준히 공부하는 것이 중요하다.첫번째 과제는 클론 코딩 첫 과제인 만큼 어떤 식으로 해야하는 것이 좋을 지 조언함애플 같은 화려한 사이트 보다는 레이아웃이 많은 사이트

html의 요소들은 모두 하나 이상의 다른 요소를 포함할 수 있는데, 이 경우, 포함하는 요소를 부모요소, 포함되는 요소를 자식요소라고 한다.부모요소 : 상위레벨하위요소 : 하위레벨상위(조상)요소 : 부모의 상위레벨요소의 이름을 지정전역 속성: 어디든지 작성이 가능한

코딩 테스트를 카테고리로 선택한 조원들끼리 조가 편성되어 조장이 됨.조 이름은 테두리, 5명으로 구성되어있음.프로그래머스 코딩테스트 문제를 하루에 8문제를 풀어서 따로 만든 organazation repository에 pr을 올려서 진행도를 파악함.주기를 정해서 서로

자세한 풀이 내용과 파일은 깃허브 링크 참조https://github.com/jyc-coder/coding-test최빈값 구하는 문제에서 몇시간을 날렸는지 모르겠다. 정답률도 그렇게 낮은게 아닌데도 이정도로 오래 걸리는걸 보면 '내가 정말 한참 멀었구나'라는

스프레드 연산자(Spread Operator)를 이용하여 문자열을 배열로 변환이 가능. 문자열을 구성하는 문자들이 분리되어 요소로 배열에 추가된다.문자열의 문자들을 분리하여 배열로 변환 : Array.from()구분자로 문자열을 분리하여 배열로 변환 : split()j

TIL 코드 리뷰 진행 flex 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 ※ flex container : flex 속성을 가진 부모요소 ※ flex items : flex 속성을 가진 부

grid-template-rows : 명시적 행(Track)의 크기를 정의grid-template-columns : 명시적 열(Track)의 크기를 정의grid-auto-rows: 만약 grid-template-row를 설정하지 않았다면 해당 값을 통해서 알아서 채워준

그중에서 정말 오래 걸린 문제를 소개하려고 한다.합성수 구하기 : https://school.programmers.co.kr/learn/courses/30/lessons/1208461부터 n+1까지 차례대로 while 반복문을 수행하게 작성했다. i 값을 대상

TIL 코딩 테스트 9일차 문제 javaScript Undefined '값이 할당되지 않은 상태'를 나타낼 때 사용합니다. 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

사이트를 하나 선택해서 클론코딩을 하는 과제를 제출함자세한 내용은 레포지토리 링크를 표시함https://github.com/jyc-coder/clone-codingscss 를 사용하고 BEM문법을 지켜가면서 구현해보라는 요구사항이 있어서 너무 강박적으로 구현하

저번에 제출한 클론 코딩 과제를 다시 풀기록 함. 이번에는 sass 문법을 사용해서 중복으로 작성하는 일을 최대한으로 줄여나가는 것이 목표오늘 헤더까지 구현 완료!@mixin 과 @include 를 사용해서 내부 요소를 정렬하는 기능을 하는 dom과 여러번 사용할수 있

절댓값Math 객체의 abs() 메서드를 사용하면 절댓값을 구할수 있다.reduce()오늘차 가까운 수 문제를 풀고 난다음 다른사람의 답을 보니 아래와 같이 적었다.나는 10줄이 넘어가는데 이렇게 풀수있다니...reduce 메서드의 파라미터에 초기값을 작성하지 않으면

코딩 테스트 문제풀이 진행

영어는 싫어요 문제 링크 : https://school.programmers.co.kr/learn/courses/30/lessons/120894row Cards section 구현 완료사각형으로 이루어진 card로 구성된 row cards section 구현

TIL 프로그래머스 코딩 테스트 14일차 문제 풀이 완료 숫자 찾기 n의 배수 고르기 자릿수 더하기 OX 퀴즈 javascript 강의 자바스크립트는 뭐에요? 싱글 스레드 논 블록킹 비동기 동적 언어입니다.....? 콜스택, 이벤트 푸르, 콜백 큐 , 이런저

프로그래머스 코딩테스트 15일차 풀이 완료! 문자열 안에 문자열제곱수 판별하기세균 증식문자열 정렬하기 (2)7의 개수잘라서 배열로 저장하기중복된 숫자 개수머쓱이보다 키 큰 사람많이 알고 있을수록 좋음!.length : 문자의 길이를 반환.includes() : 대상문자

TIL Javascript Array .length 배열의 길이(숫자)를 반환한다. .at() : 대상 배열을 인덱싱한다. 음수값을 사용하면 뒤에서부터 인덱싱 하게 된다. .concat() : 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환한다. .e

.splice() : 대상 배열에 요소를 추가하거나 삭제하거나 교체한다. 대상배열의 원본이 변경되므로 사용에 주의할 것 요소 추가 요소 제거요소 교체요소 추가 및 삭제unshift() : 새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열 길이를 반환한다. 대상

2023년 1월 2째주 코드리뷰 진행함링크 : https://www.notion.so/23-1-2-e96841b1c2f9435097b32b09ae5ab6dc다항식 문제: https://school.programmers.co.kr/learn/course

프로그래머스 코딩 테스트 lv.0 문제풀이 완료저주의 숫자 3 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/1208713x 마을 사람들은 3을 저주의 숫자라고 생각하기 때문에 3의 배수와 숫자

이번주 금요일에 제출한 영화 검색 사이트를 다른 조원과 함께 코드 리뷰를 진행함https://github.com/jyc-coder/KDT4-M2/tree/JeongYeongChan다른 조원에게 들은 피드백은 아래와 같다해당 메서드 안에서 선언해서 끝낼수 있음에

프로그래머스 코딩테스트 lv.0 18일차 문제풀이 완료겹치는 선분의 길이유한소수 판별하기저주의 숫자 3평행입력한 수 (a,b)로 만들어진 변수를 기약변수로 만든다 for문을 사용해서 분자나 분모가 1이 될때까지 반복 진행한다.기약분수가 만들어졌으면 분모의 인수가 2나

특이한 정렬등수 매기기옹알이로그인 성공map 메소드를 간단하게 작성하면 풀수 있다는건 알수 있지만, 정규 표현식을 사용해서 문제를 해결해보고 싶어서 위와 같이 작성했는데, 첫번째 테스트 케이스에서 실패가 되어버린다. map 메서드는 도중에 멈출수 없다는 특징을 알고 있

Code Review 23년 1월 3주차 코드리뷰 진행함 링크

다음 데이터 엘리먼트를 가리키는 인덱스 없이 그냥 다수의 데이터 엘리먼트들로 구성된 자료 구조를 뜻한다. 마치 여러개의 칸으로 구성된 기차와 같다고 보면 된다.하지만 데이터에 접근하기 위해 사용할 인덱스가 존재하지 않는다는 특징이 있다.각각의 엘리먼트 === 노드 =>

23년 1월 4주차 코드리뷰 진행함발표 내용https://school.programmers.co.kr/learn/courses/30/lessons/120866지뢰가 있는 곳을 파악하기위해서 while문을 사용하여 land에서 가지고 있는 1이 어느 인덱스에 위

해야할 일의 완료 유무를 파악하기 위한 checkbox 구현하기 renderTodos() 내부에서 추가로 렌더링할 요소를 추가한다. 해당 checkbox를 클릭할 때마다 todo.done값이 변경된 상태로 updateTodo(todo)를 호출해서 항목을 업데이트 시키는

FIFO(First In First Out, 선입선출) 구조의 자료구조장점 \- 데이터 접근, 삽입, 제거가 빠르다중간에 위치한 데이터에 대한 접근이 불가능함스택과 달리 대기열이 양쪽 끝이 열려있음한쪽 끝은 항상 데이터를 삽입하는데 사용되고, 다른 쪽은 데이터를 제거

팀프로젝트에 사용될 api에 대한 설명을 진행그중에 회원가입과 관련된 기능을 시연해주셨음.물론 당연한 소리이지만 문제는 바로 그 다음이다. 만약 선택되지 못한 의견이 타당한 근거를 가지고 선택되지 못했거나, 혹은 그에 대한 설득이 제대로 이루어지지 않게 된다면, 이에대

첫번째 요소를 제거하는 메소드두번째 요소가 head가 되며 리스트의 길이가 1 줄어들게 된다.만약 this.head 의 값이 null일 경우에는 undefined가 리턴됨메소드를 호출할 때 리스트의 길이가 0이라면 this.tail의 값은 null로 지정val값을 가진

2월 1주차 코드리뷰를 진행함이진수 더하기 문제:https://school.programmers.co.kr/learn/courses/30/lessons/120885이진수를 의미하는 두 개의 문자열 bin1과 bin2가 매개변수로 주어질 때, 두 이진수의 합을

연관배열구조 자료구조입니다.키를 이용하여 값을 알 수 있다.빠른 데이터 읽기, 삽입, 삭제 = 0(1)해쉬 함수를 통하혀 공간을 호율적으로 사용메모리를 많이 차지하고 충돌 위험이 존재한다단방향 암호화 기법으로 해시함수를 이요해서 고정된 길이의 암호화된 문자열로 바꿔버리

RDBMS vs NoSQL 구분| RDBMS| NoSQL :--:|:--:|:--:| 형태 |Table| Key-value, Document, Column 데이터| 정형 데이터 |비정형 데이터 성능 |대용량 처리시 저하| 잦은 수정시 저하 스키마| 고정 |Schemel

요소의 style 속성의 css 속성 값을 얻거나 지정한다.요소에서 특정 속성 값을 얻거나 지정합니다.현재 화면의 크기를 얻는다.페이지의 좌상단 기준, 현재 화면(Viewport)의 수평 혹은 수직 스크롤 위치를 얻는다지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤한

2번째 이벤트리스너의 경우 child 클래스로부터 가장 가까운 곳을 선택하고, 그것이 childEl이라면 해당 엘리면트의 text 값을 출력한다. 첫번재는 forEach로 4번 생성하지만 2번째는 하나의 이벤트 리스너를 사용해서 여러개의 엘리먼트를 관리할수 있다. cu

자료구조를 이요해서 어떠한 문제를 해결하는 구체적인 방식을 말한다. 함수 안에서 자기 자신을 참조하는 것을 뜻한다장점 \- 프로그래밍을 수월하게 할수 있다 \- 변수 사용을 줄여준다.단점 \- 반복문보다 메모리 사용량 많고 수행시간이 길어질수 있음무한반복이 일

일반 함수와 화살표 함수에 따라 다르게 정의된다.일반 함수는 호출위치에서 정의되고,화살표 함수는 this 가 자신이 선언된 렉시컬 범위에서 정의된다.화살표 함수와 일반함수에서 사용되는 this의 값이 서로 다르다!일반함수화살표 함수일반 함수의 경우는 변수 u를 통해서

일반 함수식은 호출된 위치를 기준으로 this 가 정해지기 때문에 위와 같이 위치를 다르게 해서 this.의 값을 변경하는 것이다call다른 객체의 메서드를 빌려온다.applycall()구문과 거의 유사하지만 call()은 함수에 전달될 인수 리스트를 받는데 비해, a

함수가 호출될때 그 함수들을 모아두는 자료구조공통점 : 반복해서 값을 추출한다.차이점상향식 / 하향식? 상향식은 상위문제를 해결하기위해 하위문제를 사용하는 것하향식은 하위문제를 해결하는데 상위문제를 사용하는 것 호출될 때마다 메모리에 스택이 쌓이고, 한계치 이상으로

메인 화면 레이아웃 구현 완료제품 렌더링 구현 완료 \- 제품 클릭시 제품id값을 쿼리스트링으로 담고 상세 제품 페이지로 이동찜록록 기능 구현 완료 \- 찜목록 아이콘 클릭시 해당 제품의 id값을 로컬 스토리지에 wishlist 데이터로 추가 로그인/회원가입 기능

tsconfig.json 파일을 사용해서 타입스크립트 컴파일러가 프로젝트를 JS로 변환하는 방법을 지정한다.자바스크립트 변수 선언과 비슷하지만, 변수 이름 그 다음에 변수의 타입을 작성해야한다.num의 데이터 타입이 숫자이므로 number이므로 num은 무조건 숫자 타

분할 정복 방법분할/정복/결합 단계로 이루어짐 \- 분할: 배열을 2개로 분리정복: 부분 배열을 정렬결합: 정렬된 부분 배열들을 하나의 배열에 합병배열의 길이가 0 또는 1이면 이미 정렬된 것으로 가정정렬되지 않은 배열을 비슷한 크기의 두 부분 배열로 분할인접한 두

js모듈을 TS에서 사용할 경우의 예시!src/common.jssrc/common.d.tssrc/main.ts타입스크립트에서 제공하는 여러 전역 유틸리티 타입이 있다.타입 변수 T는 타입, U는 또 다른 타입, K는 속성을 의미하는 약어이다.이해를 돕기 위해 타입 변수

리액트가 대체 뭐길래...? meta(전 페북) 에서 2011년에 만든 프론트 엔드 라이브러리이며 페이스북, 인스타그램, 넥플릭스 모두 이 React로 만들어졌다. 작동 원리(SPA) 하나의 html파일만 보여주고, 내부의 요소는 모두 자바스클비트를 활용해서 변경

불변성이 리액트에서 문제가 되는 이유는, 리액트는 렌더링을 할때 얕은 비교를 수행하기 때문이다.리액트는 기본적으로 state등의 값이 변하는 것을 확인하고, 실제로 변했다면, 다시 렌더링하는 특성을 가지고 있다.또한 부모 컴포넌트의 값이 변하면, 해당 컴포넌트의 자식

자바스크립트에서 배우셨겠지만, 모든 DOM 노드는 click, focus, keydown 등 사용자와의 상호작용에 따라 event 라는 신호를 발생시킨다사용자가 웹사이트 상에서 버튼을 클릭했다면, 그때는 click 이벤트가 발생하고, 우리는 이 click 이벤트가 발생

그냥 css 쓰면 되잖아..?상관은 없다. 그냥 css 파일 써도 된다. 하지만 특정 컴포넌트에만 적용되기 위한 css를 별도로 작성할 필요는 있다.예를 들어 app.jsx 내부에 Example 컴포넌트가 들어있다고 치자 Example 내부에는main_text클래스를

npm을 통해서 설치해야하는 모듈이다. 이 모듈은 자바스크립트 내장 fetch와 마찬가지로 promise객체를 기반으로 통신을 처리하는데, 다음과 같은 특징을 가지고 있다.json변환을 자동으로 처리(request.json()을 해줄 필요가 없음. 바로 data 프로퍼

react-router는 특정한 주소와 컴포넌트를 연결시켜주고 주소 이동을 통해서 다른 컴포넌트 화면을 보여줄 수 있도록 하는 기능을 제공하는 라이브러리이다.지금까지는 localhost라는 단일한 페이지에서만 작업을 진행했으나 이제부터는 localhost/posts등

react reducer, context에 대해 공부한 내용을 정리함

Redux 상태 관리 라이브러리

리덕스에서 비동기 작업을 처리할수 있또록 도와주는 미들웨어.해당 미들웨어를사용하면 액션 객체가 아니라 함수 그 자체를 디스패치 할수 있도록 해준다.기존에는 아래와 같이 액셩 생성함수를 작성했었는데 axios 요청을 보내는 액션을 만들때는 action must be pl

간단하게 백엔드 서버를 구축할수 있도록 도와주는 역할직접 글을 생성, 수정, 삭제하는 작업까지 json server를 이용해서 진행한다.yarn add json-server앱 최상단 경로에 아래와 같은 형태로 db.json을 제작한다.위처럼 작성하고, 서버를 실행한 후

React의 최적화 방식과 React의 성능을 측정하는 방법에 대해 이해한다.

reqct query 의 활용방법에 대해 이해한다

미세먼지 api를 활용해서 서비스를 만드는 과제를 제출한 다음에 강사님께서 직접 해설 파일을 공유해주셨다. 이를 분석하면서 어떤식으로 서비스를 구현했는지 보기로 했다.어떤 기능을 만들기 위해서 일련의 작업을 진행해야하는지 파악하는것이 최우선단일 지역에 해당하는 미세먼지

next.js

react/ts TypeScript 1) 타입스크립트 개념 및 설정 타입스크립트는 기본적인 문법은 자바스크립트와 비슷하지만, 기존의 자바스크립트와 다르게 타입을 지정하면서 변수/함수를 선언한다는 특징을 가지고 있다. 타입을 지정하면, 타입의 차이에 따른 서비스의 오작동 방지 개발 과정에서의 정확한 코드 작성 (타입에 맞춰서 작성하지 않으면 에러가 ...

redux toolkit 을 ts를 사용하여 구현해본다.

이전에 사용했던 서버 파일을 사용해서 유저인증을 구현한다.

타입스크립트 next앱을 만들기 위해서는 아래 명령어를 입력하면 된다. yarn create next-app (앱이름) --ts기존과 다른 점은 getStaticProps\~~ 등을 지정해야한다는 것getStateProps, getStaticPaths, getServe

Express 와 TypeORM을 함께 활용한다. AWS 의 RDS를 통해서 DB서버를 구축한다.

이번에는 aws s3를 사용해서 데이터베이스 서버에 파일을 업로드 할수 있는 기능을 추가한다.

이전시간에 만든 express + TypeORM + S3 로 구성한 백엔드를 react에서 글 작성 요청을 보내보자.yarn create next-app (앱이름) --ts앞서 만들었던 모델 entity와 동일하게 Post 데이터에 대한 타입을 만들어준다.src/typ

회원가입/로그인 구현하기 0) 프로젝트 세팅 express 를 활용해서,jwt를 활용한 유저 인증 구현 > npm install express typeorm mysql reflect-metadata cors dotenv > npm install -D @types

software development life cycle sdlc 소프트웨어를 계획, 개발, 시험, 배포 요구사항 분석 -> 설계-> 구현 -> 테스트 모델 build & fix : 만들고 고치고 prototype : 최소한의 요구사항 분석후 프로토타입 제작 waterfall : 요구사항분석 -> 설계 -> 구현 -> 운용이 순차적으로 진행 sp...

https://github.com/FE4react5/Hedwig/tree/developHedwig는 twitter 벤치마킹 프라이빗 커뮤니티 SNS 서비스입니다.프라이빗 서비스이기 때문에 서비스 이용을 위해선 로그인 또는 회원가입을 해야만 컨텐츠 보기가 가능합

Today I did 기술 스택 회의 진행 react with next.js, tailwind css, next-auth axios react-cookie (next auth에 있는듯) universal-cookie (next auth에 있는듯) dotenv (ne

6/2 ~ 6/30 일까지의 최종 프로젝트가 종료되었으나. 짧은 기간동안 만드는 프로젝트라 버그가 존재했다.

문제 상황 파일을 업로드 하는것에서 조건이 존재하지만, 이 조건을 만족하지 않은 파일을 업로드하면 분명 에러 메시지가 업로드 컴포넌트 하단에 표시되어있어야했다. > 1. 조건을 만족하지 않는 파일을 업로드 했을때 사이트 자체 오류가 발생! TypeError: Failed to execute 'createObjectURL' on 'URL': Overloa...