TIL

오늘 한 일 배운 것 느낀점 내일 할 일 Git과 Github Git: 하나의 폴더 내에서 코드의 변경점을 기록하기 위한 도구 Github: 백업을 위한 드라이브, 클라우드 및 다른 사람들과 공유 가능한 코드 저장소 Github란? ㅇㅇㅇㅇ ggg FACT

내배캠 JavaScript 기초문법 1주차 강의학습법 특강변수: 메모리에 저장 후 읽어들여서 재사용할 수 있는 것var : 재선언 가능, 재할당 가능let : 재선언 불가, 재할당 가능const : 재선언 불가, 재할당 불가→ 새롭게 선언, 할당할 필요가 없을 때 co

내배캠 Javascript 문법 1주차 강의 완강화살표 함수, 조건문, 객체, 배열, for문, while문1주차 숙제(코딩테스트)스코프 : 변수가 어디까지 영향을 끼칠 수 있는가?전역변수/지역변수기본적인 화살표 함수 사용☑️ 리턴문이 한 줄인 경우 한 줄로 사용 가능

내배캠 Javascript 문법 2주차 강의ES6 문법일급 객체로서의 함수Map, Setlet \[value1, value2] = \[1, "new"] value1에는 1, value2에는 new 할당새로운 이름으로 저장단축 속성명객체에서 key와 value가 같으면

오늘 한 일 [내배캠] Javascript 문법 3주차 강의 기본형 데이터, 참조형 데이터, 얕은 복사, 깊은 복사 배운 것 메모리와 데이터 >- 비트 : 0과 1로 이루어진 메모리를 구성하기 위한 가장 작은 조각 바이트 : 비트 8개를 합친 새로운 단위 메모리

내배캠 Javascript 문법 3주차 완강얕은 복사, 깊은 복사 다시 듣기record와 호이스팅, this 함수알고리즘 특강TIL 특강해결 방법: 객체의 프로퍼티에 접근하는 것이 아니라, 아에 새로운 객체를 반환→ 불변하므로 user에 영향을 미치지 않는다. 문제점:

내배캠 Javascript 문법 3주차 완강개인과제 발제 (Project.01 영화 검색 사이트 제작)TMDB 오픈 API 영화 데이터 가져오기깃허브 레포지토리 생성웹 지식 특강변수를 활용하는 방법내부 스코프에 이미 존재하는 this를 별도의 변수(ex : self)에

내배캠 Javascript 문법 4주차콜백함수 제어권개인 프로젝트.01 영화 검색 사이트 만들기html 기초 세팅, CSS/JS 링크, 폰트 설정깃허브 레포지토리 연결CSS는 미관을 담당하는 영역으로, head 영역의 <style></style> 안에 들어가

개인 프로젝트.01 영화 검색 사이트 만들기API를 통해 TMDB에서 영화 데이터 불러오기Javascript 문법 적용하여 검색기능 구현CSS 설정fetch 함수로 API 불러오기는 TMDB 사이트에 회원가입 후 API 키를 요청하면 아래와 같이 Javascript f

내배캠 Javascript 문법 4주차콜백함수 제어권, 콜백지옥개인과제 해설 강의 듣기setTimeout, forEach 등에서 다른 코드의 인자로 넘겨주는 함수제어권콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행→ 제어권은 위

개인과제 코드 해설강의 듣기내배캠 Javascript 문법 5주차콜백지옥, DOM특강 Github일단 오늘 콜백함수와 동기vs비동기, 콜백지옥과 콜백지옥을 해결하는 방법으로 Promise, Generator(ES6), async/await(ES7) 강의를 들었다. 이해

Project.02/Team 영화 검색 사이트 디벨롭Github 팀 리포지토리 생성역할 분담상세페이지 기능 개발내배캠 Javascript 문법 5주차DOM 접근 및 제어, Class의 개념보충수업 Javascript 문법 보충반 실시간 수업DOM이란?Document(H

오늘 한 일 [Project.02/Team] 영화 검색 사이트 디벨롭 상세페이지 열기 기능 구현 상세페이지에 TMBD API의 id값을 불러와서 영화정보 게시 배운 것 어제부터 본격적인 팀 프로젝트 기능 개발이 시작되었다. 내가 맡은 부분은 메인 페이지에서 영

Project.02/Team 영화 검색 사이트 디벨롭메인, 상세페이지 UI 디자인 수정오늘은 원래 알고 있던 내용들이지만, 종종 헷갈리는 CSS에 대해서 정리해 봤다. 특히 display 속성은 맨날 헷갈린다고…CSS를 할 때 정렬과 여백이 내가 원하는대로 잘 안되어서

내배캠 React 입문 1주차 강의1-13까지 듣기A JavaScript library for building user interfacesUI(보여지는 부분)를 Buiding(구축)한다는 의미SPA 기반의 프론트엔드 개발 프레임워크 중 하나컴포넌트 단위의 독립적인 블록

내배캠 React 입문 1주차Props Children, State수준별학습 1회차 실시간 강의JS 배열 및 객체 타입 메서드자식 컴포넌트로 정보를 전달하는 props와는 다른 방법<자식컴포넌트></자식컴포넌트> : 부모 컴포넌트에서 자식 컴포넌트로 보내기p

내배캠 React 입문 1주차불변성과 순수함수, Component & Rendering메모리에 있는 값을 변경할 수 없는 것(1) 원시데이터: 숫자, 문자, 불리언 등같은 값이면 같은 메모리 주소값을 참조새로운 값을 할당하면 새로운 메모리 주소값을 생성하여 참조→ 불변

React에서 배열 API 활용법 정리

오늘의 회고 오늘부터 알고리즘 문제 풀이를 시작했다. 아직 레벨1이라 난이도가 쉬운 문제들이 많지만, 그 중에도 막히는 것들이 있다. 알고리즘을 풀면서 모르는 메서드를 찾아보면서 많이 배울 것 같다.

알고리즘 Level.1 5문제내배캠 React 숙련 강의 1~4강오늘의 알고리즘 풀이(1) CSS-in-Js란?기존에는 컴포넌트를 만들고 꾸미기 위해 HTML 태그마다 classname을 넣고, css 파일을 만들어서 import 한 후 css파일에 작성을 했다. 이를

알고리즘 Level.1 4문제, 알고리즘 스터디내배캠 React 숙련 강의 5~8강오늘의 알고리즘 풀이리액트에서도 DOM을 선택해야 할 상황이 생긴다. 예를 들면 네이버에서 화면이 렌더링 되자마자 특정 input 태그가 포커싱이 되어야 하는 경우이다.DOM 요소에 접

알고리즘 Level.1 2문제내배캠 React 숙련 강의 9~12강

개인Project 팬레터함 만들기내배캠 React 숙련 강의 듣기전역 상태관리 라이브러리 : 중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)(1) 리덕스가 필요한 이유 - useState의 불편함어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로

내배캠 React 숙련 강의 듣기개인Project 팬레터함 만들기(1) dispatch가 action을 store에 던진다!(2) store는 action 객체에 있는 type에 따라 state를 변경해준다.(1) 초기 상태값 : initialStatestate의 초기

개인Project 팬레터함 만들기프로젝트, 라우터 셋업전역 스타일링 적용, 홈 및 상세페이지 화면 UI 구현버튼 생성오늘의 알고리즘 풀이우리가 만든 액션 객체의 value를 변경할 일이 생긴다면, 해당 액션 객체가 사용된 모든 부분을 하나 하나 변경해줘야 하는 번거로움

개인Project 팬레터함 만들기프로젝트, 라우터 셋업오늘의 알고리즘 풀이React 심화 과정 개인 프로젝트로 팬레터함 만들기를 하고 있는데, 아직 활용이 쉽지 않다. 라우터로 페이지 나누고 이동하는 것까지는 강의를 보면서 만들었는데, 아직 styled-componen

개인Project 팬레터함 만들기개인과제 해설영상 및 개념 정리(1) 동기적 방식이란?현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 순차적 방식일반적인 프로그래밍 코드는 동기적으로 실행(2) 비동기적 방식이란?실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드

디자인 협업 툴 Figma와 Firebase가 무엇인지, 활용법은 무엇인지 알아보자.

팀Project 뉴스피드 만들기팀회의: 공용 컴포넌트 생성Firebase로 데이터 가져오기Firebase 데이터 활용하여 피드 리스트 기능 구현내 게시물을 포함하여 다른 사람들의 모든 게시물을 볼 수 있는 공간이다. 우리 조는 오운완, 오식완 등 운동과 식단을 공유하는

팀Project 뉴스피드 만들기캐러셀(Carousel) UI카테고리별 피드리스트 필터 구현우리 조가 진행 중인 팀 프로젝트의 주제는 "오늘건강"이라는 제목으로 식단과 운동 사진을 공유하는 뉴스피드이다. 여기서 내가 맡은 부분이 피드 리스트를 홈 화면에 띄워주는 것과 운

React 심화 강의 듣기기존의 리덕스를 더 편하게 사용하기 위해 코드의 양을 줄일 수 있는 새로운 API가 추가되었고, 이것을 리덕스 툴킷이라고 한다. 컴포넌트에서 useSelector를 통해 사용하는 것은 동일하고, 리듀서를 생성하는 부분과 Action Creato

json-server의 개념과 활용법, 비동기 통신 Axios와 fetch의 차이점과 Axios로 json-server 활용하기

개인 Project 팬레터함 디벨롭 redux toolkit으로 전역 상태 관리, redux toolkit 내장 API인 thunk로 서버 상태 관리, JWT 토큰을 이용한 인증, 인가 기능 구현

미들웨어는 리덕스에서 dispatch하여 action이 리듀서로 전달되기 전 중간 단계에서 추가적인 작업을 가능하게 한다. 즉, 서버와의 통신을 위해서 사용하는데, 가장 많이 사용하는 리덕스 미들웨어가 Redux-thunk이다.

개인프로젝트 팬페이지 프로젝트 해설강의팀프로젝트 아웃소싱 프로젝트 팀 회의팀 프로젝트 컨셉 설정, 코드 컨벤션 설정와이어 프레임 제작, 구현 기능 리스트, 역할 분담인증 : 로그인 → 서비스를 이용하려는 유저가 등록된 회원인지 확인인가 : 유저에게 접근 권한이 있는지

json 형식의 데이터를 찾기 어려울 때! Google Sheet를 사용하여 json 변환 및 API로 불러오는 것이 가능하다.

팀원들과 지속적으로 소통하고 자주 pr하며 공지한 부분자기가 맡은 부분 뿐만 아니라 전체 프로젝트에 관심을 가지며, 문제를 같이 해결해 나갔다.사전에 구현한 기능뿐만이 아니라 프로젝트 진행 중 즉흥적으로 추가 기능을 설계 하고 구현 하였다.팀원들과 먼저 레이아웃을 정해

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 단점을 보완하기 위해 생겨났다. TypeScript는 정적 타이핑 및 기타 기능을 언어에 추가하여 JavaScript에 비해 테스트 코드보다 비지니스 로직 작성에 집중

TypeScript 문법 종합반 강의(1) 클래스란?클래스는 객체 지향 프로그래밍(OOP)의 핵심 구성 요소 중 하나로, 객체를 만들기 위한 틀(템플릿)이다.객체들이 공통으로 가지는 속성(객체의 성질)과 메서드(객체의 성질 변화 및 기능)를 정의객체는 클래스의 인스턴스

내배캠 Next.js 강의이제까지 React를 사용하면서 React 환경에 익숙해져 있었다. 그런데 Next.js 강의를 들으니 또 새로운 개념이라 좀 어렵게 느껴졌다. 리액트는 SPA(Single Page Application)이자 CSR(Client Server R

내배캠 React 심화 주차 강의 복습수준별수업 useQuery, useMutation 처리 프로세스짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이다. 예를 들어 인스타그램에 좋아요를 누를 때마다 서버에 데이터를 갱신해달라

특강 React 심화대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 발생하는 fetching을 취소시켜 불필요한 네트워크 요청을 제거하기 위해 사용된다.따로 설정을 하지 않으면 다른 페이지로 이동하여 기존 컴포넌트가 언마운트되어도 기존에 요청된 데

const express = require('express'); const axios = require('axios'); const app = express(); const PORT = 3001; app.use((req, res, next) => { res.he

에러 해결 CORS 에러 해결STEAM API 불러오기 json-server glitch로 배포거의 2~3일 동안 CORS 에러 해결을 위한 프록시 서버 설정 및 에러를 해결하려고 매달린 것 같다. 도저히 문제가 풀리지 않아 어제 저녁 튜터님을 찾았다.썬터클라이언트로

오늘 한 일 [ ] [] 강의 [x] [] 강의 학습 내용 소제목 hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다. 그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다. hooks라는 게 함수의

subabase api에서 불러온 데이터 가공하여 insert하기게임 추천 사이트 제작을 위해 Steam API를 사용하고 있다.그런데 Steam API는 활용하기 매우 까다롭다는 생각이 든다.일단 클라이언트에서 API를 불러오는 것이 불가능해서 glitch 서버를 만

오늘 한 일 게임 추천 및 커뮤니티 사이트 [x] [성능최적화] 스켈레톤 UI 적용하기 학습 내용 MVP 프로젝트 중간 발표를 끝내고 레이아웃 쉬프트라는 용어를 알게되었다. 그동안 장르별 필터를 적용한 메뉴 클릭 시 화면이 잠깐 위로 올라갔다 오면서 움찔하는 현상

슬라이드 Slick Carousel로 슬라이드 설정하기React Slick은 캐러셀/슬라이더를 쉽게 만들 수 있는 라이브러리이다. React Slick은 React 애플리케이션에서 슬라이더 또는 캐러셀을 만드는 프로세스를 단순화하여 반응성이 뛰어나고 기능이 많아 슬라이

지난 주말부터 유저 테스트를 진행했다. 아직 구현 기능들도 100%가 아니고 부족한 부분이 많아서 걱정이 많았다. 그런데 응답 결과를 보니 생각보다 아주 디테일하게 피드백을 주신 분들이 많았다.특히 내가 개발하고 만들면서 중요 기능 구현 이후 수정해야겠다고 생각했던 아

오늘 한 일 [ ] [] 강의 [x] [] 강의 학습 내용 소제목 upabase에서 뷰와 테이블은 모두 데이터베이스 개체이지만 서로 다른 용도로 사용됩니다. 테이블: Supabase의 테이블은 기존 관계형 데이터베이스의 테이블과 유사합니다. 행과 열로 구성된