TIL # WIL

내일배움캠프 1일차, git 특강과 미니 프로젝트 진행 第1天 첫날 아침 9시에 줌에서 다같이 모여 OT 및 프로젝트 발제를 진행했다. 처음으로 팀 안에서 팀원들을 만나 소통해보았다. 물론 전에도 코딩 스터디를 했었지만, 이렇게 한 프로젝트를 위해 만나 계획부터 기

내일배움캠프 2일차, 미니 팀프로젝트 진행 第2天 사실 썼던 거 지우고 지금 다시 쓰고 있는데 두번째 날 뭐했는지 정확히 기억 안남. 근데 아마 css랑 모달창이랑 엄청 싸웠던 거 같다. 자꾸 막히는 기능 진행상황에 내 자신이 너무 답답했다. 그러나 아직 2일차고 지

내일배움캠프 3일차, 미니 프로젝트 진행 第3天 모달창 강의 듣는 중인데 (강사님들은 다들 정말 쉽게하는데 왜 나한테만 어려운지) 다 듣고 수정할 예정 .. 지금은 아는게 별로 없어 코드 복붙이 당연하고, 당연히 이미 잘 구현되어있는 코드를 복붙하는 것 또한 사실 큰

내일배움캠프 4일차, 미니 프로젝트 진행 第4天 오늘은 모달창만 집중적으로 팠다. 그리고 git을 사용하기 시작했는데 어려웠다. 뭔가 어떻게 돌아가는 건지 ..? 그래도 자꾸 쓰다보면 나아지겠지. 그래도 팀원분들이 다들 조금씩은 잘 알고계셔서 그나마 수월하게 mer

20230515 - 20230519 미니 프로젝트 🖥️ 프로젝트 소개 내일배움캠프로 만난 5인이 자기자신을 멋지게 소개하고, 서로를 알아가며 한 팀이 되어가는 과정을 그린 팀 소개 페이지입니다. 🕰️ 개발 기간 23.05.15 - 23.05.19

내일배움캠프 6일차, 자바스크립트 문법 종합반 강의 듣기 第六天 오늘은 아침 9시에 줌에서 프로그래밍 기초 주차에 대한 발제 진행과 오늘부터 수요일까지 있을 특강 언급 그리고 새로운 팀 편성에 대해 얘기했다. 그리괴 게더에서 새로운 팀과 모이고 자기소개를 진행하고

내일배움캠프 7일차, TIL 특강과 자바스크립트 문법 종합반 강의 듣기 第7天 원래는 js 문법 종합반 1주차 내용정리 마저 다하고 숙제 다시 풀어보고 2주차 진행하려했는데 중간중간 막히는 부분들이 너무 많아 2주차를 많이 듣지 못했다. 그래도 시간이 촉박한 건 아

내일배움캠프 8일차, git & git hub 특강과 자바스크립트 문법 종합반 강의 듣기 第8天 오늘은 자바스크립트 문법 종합반 강의 듣다가 중간에 깃 특강이 있었다. 나머지 궁금한 점들이 있어서 따로 보내주신 인프런 강의를 추가로 들어봐야할 거 같다. 그리고 js

내일배움캠프 9일차, 자바스크립트 문법 종합반 강의 듣기오늘은 별 다른 특강없이 JS 문법 종합반 강의만 들었다. 정말 3주차부터 내용 어려워진다더니 진짜 그랬다. 확실히 기본 개념이 좀 없으니까 약간 이해되는데 확실히는 안되고 내 감으로 이해하는 느낌이랄까.그래도 중

내일배움캠프 9일차, 개인 과제 발제와 자바스크립트 문법 종합반 강의 듣기 第10天 와 벌써 10일차라니 이번주는 강의 듣다가 시간 다 가는 거 같다. 근데 그 강의도 이해 못해서 난리 오늘은 그 들었던 강의 토대로 해야하는 개인 과제 발제도 진행했는데 그냥 알고리

20230522 - 20230526 이번주 회고 이번주는 자바스크립트 문법에 대해 종합적으로 배우는 시간이었다. 5일동안 주로 강의를 들었고 강의에서 배운 내용들을 사용해볼 수 있는 알고리즘 문제도 3개 정도 풀어보았다. 기본적인 문법이지만 기본인 만큼 중요한 내용들

내일배움캠프 11일차, 알고리즘 세션과 영화 검색 사이트 제작 개인 과제 第11天 짧은 연휴 ?가 끝나고 돌아온 내배캠. 오늘 오전에는 알고리즘 강의가 시작되었고 오후에는 저번주에 발제된 영화 검색 사이트 제작하느라 시간이 아주 금방 감. 알고리즘에서 최댓값이나 u

23.06.20 CSS-in-JS : JS로 CSS 코드를 작성하는 방식 => ‘컴포넌트를 꾸미는 것’styled components : 우리가 CSS-in-JS를 할 수 있게 도와주는 ‘패키지’ => 컴포넌트를 꾸미는 걸 도와주는 ‘패키지’그렇다면 여기서 ‘패키지’란

23.06.21 React.memo : 컴포넌트를 메모리에 저장해두고 필요할 때 갖다 씀리렌더링의 발생 조건은 ? state가 바뀌거나 / 내려받은 props가 변경되거나 / 부모 컴포넌트가 리렌더링 될 때 자식에서근데 리렌더링은 최소로 일어나는게 좋음, 특히 부모에

23.06.22 1. 비동기 프로그래밍 입문 동기적(synchronous) 방식이란 ? 순차적으로 실행되는 코드 방식, 일반적으로 프로그래밍 세계에서 코드는 동기적으로 실행됨 그렇다면 비동기적(synchronous) 방식이란 ? 앞에서 코드가 끝났던 안끝났던 즉시

23.06.23 같은 의미 ...컴포넌트들과 Redux 간의 폴더 구조서비스형 백엔드 BaaS(Backend as a Service) : Baas를 사용하면 개발자는 애플리케이션을 구축하거나 유지 관리할 필요 없이, 애플리케이션의 프런트엔드에 집중하고 백엔드 서비스를

23.06.19 ~ 23.06.23 이번주 회고 1. react 숙련 주차 강의 강의를 너무 늦게 들었던 점이 조금 후회된다. 2. react to-do-list lv.2 redux 부분에 대한 이해가 더 필요할 것 같다. 3. react practice lv.3

23.06.27 1. Redux 강의, ‘쉽게 다시보는 리덕스’ 리덕스는 리액트를 편하게 사용하기 위한 보조수단일뿐. 너무 어렵게 생각하지말자 리액트의 본질은 “상태가 변경되었을 때 해당 상태에 의존하는 컴포넌트는 리렌더링 된다”이다. 리덕스

23.07.04 1. Redux Toolkit > Toolkit : 어떤 일을 간편하게 하기 위한 도구들의 모음 Redux Toolkit : Redux를 간편하게 사용하기 위한 패키지 1-1. 기본 Redux와 Redux Toolkit의 차이 🔆 기본 Redux

23.07.05 1. 비동기 통신 - Axios 1-1. Axios > Axios : node.js와 브라우저를 위한 Promise 기반 http 클라이언트 => http를 이용해서 서버와 통신하기 위해 사용하는 패키지 …? 즉, 간단하게 말하면 클라이언트는 서버와

23.07.06 1. thunk 🔆 > thunk : redux 환경에서 비동기 통신을 위해 빼놓을 수 없는 미들웨어, 리덕스 미들웨어는 보통 서버와의 통신을 위해서 사용 (그 중에서 thunk와 saga를 주로 사용함) 만약 미들웨어가 없는 리덕스라면 dispa

23.07.07 1. throttling & debouncing > throttling & debouncing : 짧은 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법들 1-1. throttling 쓰로틀링 > throttling

23.07.03 ~ 23.07.07 이번주 회고 1. 찐텐 JJINTEN - 뉴스피드 프로젝트 발표 및 피드백 정말 고생해서 만든 우리 뉴스피드 프로젝트 ... 찐텐 JJINTEN ... 내가 발표 준비를 늦게 준비해서 프로젝트의 마무리를 잘 정리하지 못한 느낌 일주

23.07.10 1. 자바스크립트 1-1. 스코프 변수 선언과 할당 함수 호출 내가 보는 코드에서 이 변수가 언제 선언되고, 무엇이 할당되었고, 어딜 가리키고 있는지 아는게 중요함 > 스코프 = 범위 스코프 내부에 어떤 변수가 있고, 어떤 함수가 있고, 이 함수

23.07.11 1. React-Router-Dom 1-1. Layout 컴포넌트 > Layout 컴포넌트 : 반복되는 부분을 위해 만드는 컴포넌트로 반복되는 레이아웃은 하나로 묶어 공통으로 사용할 수 있음 ex. header, footer Router.js 파일에

23.07.12 1. React query > React query : Redux-thunk, Redux-saga에 이은 또 다른 Redux 미들웨어 비동기 (통신) 데이터 관리를 위해 Redux-thunk, Redux-saga 등 미들웨어를 사용했지만, (1) 보일러 플레이트(= 미들웨어를 적용하기 '위해' 적어야하는 코드량이 많음) (2) 규격화 문...

23.07.13 1. 서버 사이드 vs 클라이언트 사이드 promise 객체 상태: 대기(pending), 성공(fulfilled), 실패(rejected) 서버 사이드 데이터 (상태) = BackEnd 클라이언트 사이드 데이터 = FrontEnd (ex. Todo, user data) (ex. 다크모드 여부) 아래 2가지가 서...

23.07.17 1. redux 미들웨어 react-query (react-query는 redux-thunk를 대신할 수 있음) Q. axios만 사용해도 되는데 왜 굳이 redux-thunk나 react-query를 사용하는 걸까 ? A. 클라이언트 데이터와 서버 데이터가 있는데 클라이언트 데이터와 서버 데이터를 따로 전역으로 갖고있고 싶기 때문에 !...

23.07.18 1. 비구조화 할당 e.target은 이벤트가 발생한 DOM 요소를 가리킴. 이벤트를 발생시킨 요소에 접근하는데 사용. (ex. 버튼을 클릭했을 때, e.target은 해당 버튼 요소(= 클릭)를 가리킴) { target: { name } }은 구조

23.07.19 1. react-paginate로 React 페이지네이션 구현하기 프로젝트에서 댓글을 페이지네이션으로 구현하게 됨 페이지네이션이 어렵다는 걸로 알고 있어서 걱정했는데 npm에서 페이지네이션 관련 react-paginate라는 라이브러리를 제공하고 있

23.07.20 오늘은 팀프로젝트 css를 하다가 새로 배운 내용 2가지가 있음 1. 100vh vs 100% css를 하다보면 px, vh, %, rem 등 다양한 단위? 들이 있는데 잘 몰라서 항상 px과 %만 쓰곤 했음 오늘은 페이지 전체 배경색이 특정 색

23.07.21 1. 최신순 정렬 - sort() > sort() : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환, 정렬은 stable sort가 아닐 수 있음. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따름 댓글을 날짜(시간)를 기준으로 최신순

23.07.17 ~ 23.07.21 이번주 회고 1. 아웃소싱 프로젝트 5일간 아웃소싱 프로젝트를 향해 열심히 달렸다. 이번 프로젝트 기간에도 학습적으로도 그렇고 기능 구현적으로도 그렇고 협업적으로도 그렇고 많이 배우고 경험해볼 수 있어서 뜻 깊었다. 아직 발표를 하지 않아 마무리되진 않았지만 배포까지 큰 문제없이 잘 해내서 다행이었다 !!!!!!!!!!...

23.07.24 1. 아웃소싱 프로젝트 1-1. KPT 회고 > 배포 주소 KPT 회고 리드미 ![](https://velog.velcdn.com/images/hhjj0513/post/016771f4-f934-482f-97c8-17fbd65d5a8e/i

23.07.25 1. JavaScript의 약점 원래는 웹페이지가 정적 (ex. text, image, hyperlink …)이었는데 JS가 나옴으로써 웹페이지에 동적인 효과까지 줄 수 있게됨 그리고 이러한 JS의 성능을 높이고자 구글에서 V8 엔진을 만들었고, 크롬

23.07.26 알고리즘 splice() 메서드 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice sort는 원본 배열의 영향을 줌 Number()

23.07.27 2-1 ~ 2-3 컴파일러, tsc TS 컴파일러인 tsc는 JS로 변환함 원래 컴파일러는 기계어로 변환되어야 하는데 JS는 동적 언어(= 인터프리터 언어)이기 때문에 기계어로 변환될 필요가 없음 그래서 Node.js나 크롬에서 JS를 실행할 때는

23.07.28 5-1 클래스 클래스 : 객체를 만들기 위한 틀, 객체들이 공통으로 가지는 속성(attribute)과 메서드(method)를 정의 ex. 붕어빵 틀 그렇다면 여기서 속성과 메서드란 ? 속성 : 객체의 성질을 결정하는 것 ex. 팥 붕어빵 - 팥이란 속성을 가짐, 슈크림 붕어빵 - 슈크림이란 속성을 가짐 메서드 : 객체의 성질을 변...

23.07.31 1. substring() vs slice() 1-1. substring() > substr() : 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환하는 메서드 mdn 문서 1-2. slice() > slice() : 문자열의

23.08.01 1. TypeScript 1-1. 제네릭 > 제네릭(Generics) : 클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 프로그래밍 기법 (JavaScript와 같은 동적 타입 언어에서는 생소한 개념이지만, Ty

23.08.02 1. AWS 시작하기 1-1. AWS란, > AWS(Amazon Web Services) : 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼 AWS 링크 1-2. Region and Availability Zone > AWS 리전(Region) : 세계

23.08.03 1. Elastic Load Balancer 1-1. Scalability (확장성) vs Availability (가용성) 가용성 ex. 어느 한 시스템에서 고장이 났을 때 서비스가 중단되지 않고 다른 데이터 서비스에서 이어서 끊김없이 서비스를 제공

23.08.04 1. Virtual Private Cloud 1-1. VPC > VPC(Virtual Private Cloud, 가상 사설 클라우드) : AWS에서 제공하는 클라우드 컴퓨팅 리소스를 사용할 수 있는 가상의 사설 네트워크 VPC의 역할 IP 주소 범

23.07.31 ~ 23.08.04 이번주 회고 1. TypeScript 강의 저번주에 이어서 이번주에도 TS에 대해 기본적으로 배우는 시간을 가졌다. 확실히 TS를 사용하면 오류를 잡는데 많은 시간을 절약할 수 있다는 장점이 있는 것 같다. 아직 TS에 대해 많이

23.08.07 1. react-calendar로 React 캘린더 구현하기 - TypeScript 적용 투두리스트 개인 과제 카테고리 바 하단이 허전해서 캘린더를 구현해보기로 했다. 찾아보던 중 역시나 react npm에서 캘린더를 쉽게 구현할 수 있도록 도와주는

23.08.08 1. React 소셜 공유 구현하기 link 공유나 소셜 공유를 해야해서 알아보니 역시나 react-share라는 소셜 공유를 간편하게 도와주는 라이브러리가 있었다 ! 1-1. react-share > npm 공식 문서 참고 블로그 라이브러리 설치

23.08.09 1. React.FC 사용 지양 & 대안 타입스크립트를 사용하여 리액트로 개발을 처음 시작하다보면 한 번은 마주치게되는 React.FC 자식 컴포넌트에 props를 내려줄 때 props에 대한 타입을 지정해주기 위해 React.FC를 사용하게 되는데

23.08.10 1. from() > from() : 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어주는 메서드 mdn 문서 즉, 문자열이나 반복 가능한 객체를 얕은

23.08.11 1. Git 폴더, 파일명 대소문자 충돌 Git은 기본적으로 폴더나 파일명의 대소문자를 구분하지 못한다. (왤까 ? 진짜 이해안되는 것 중 하나) 그래서 만약에 footer.js라고 브랜치에 파일을 올리고 로컬에서 footer.js를 Footer.j

23.08.07 ~ 23.08.11 이번주 회고 1. 심화 프로젝트 이번주는 최종 프로젝트 전 마지막 팀 프로젝트인 심화 프로젝트를 진행했다. 전반적으로 기능이나 주제는 자유로워서 더 어려웠던 ... 그러나 재밌는 주제로 잘 마무리해서 다행이었다. 자세한 프로젝트 회고는 곧 올릴 예정 ,, 다음주 목표 다음주 월요일에 심화 프로젝트 발표, 회고, 마무리...

23.08.14 1. 심화 프로젝트 1-1. KPT 회고 > 배포 주소 KPT 회고 리드미 ![](https://velog.velcdn.com/images/hhjj0513/post/ed2745f4-79cc-4a55-af66-8498

23.08.16 1. 프로젝트 소개 1-1. 팀 소개 팀 명 : 그 여름, 우리는 1-2. 프로젝트 명 미정 1-3. 프로젝트 주제 팝업스토어 아카이빙 1-4. 프로젝트 소개 서울의 팝업스토어 정보를 검색 및 공유할 수 있는 웹 애플리케이션으로 해당 팝업스토어에 대한 후기를 남겨 다른 사용자들과 공유할 수 있고 해당 팝업스토어의 위치를 기반으로 주변...

23.08.17 1. git hub issue 관리 git hub를 사용하면서 issue 사용은 한 번도 해보지 않았는데 오늘 조금 원리를 배울 수 있었다. issues에서 new issue를 클릭 해 issue를 작성하고 제출한다. 기능을 구현하기 전 브랜치명에

23.08.18 1. html 환경에 환경변수 .env 넣기 > 참고 블로그 참고 블로그 2 리액트에서는 아래 코드처럼 `` 이렇게 백틱 안에 ${} 안에 process.env. 다음에 환경변수를 적어줘야 함 하지만 html 파일에선 아래처럼 % 사이에 환경변수를 넣어 호출해야 한다 !!!!!!!!!!!! %REACTAPPNAVERCLIENTID%

23.08.21 1. 상태관리를 하는 이유 리액트는 실제 DOM을 조작하여 변경하는 것이 아닌 가상 DOM을 활용해 특정 상태 값에 따라 실제 DOM과 비교하여 변경된 부분만 적용하여 상태값이 변화할 때마다 컴포넌트를 자동으로 리렌더링해준다. 여기서 컴포넌트 내에 관

23.08.22 1. 컴퓨터의 구성 > 컴퓨터 : 푸드트럭으로 비유할 수 있는데, 다양한 푸드트럭이 있는 것처럼 컴퓨터도 다양하게 배치하여 여러 형태의 컴퓨터가 될 수 있음 ex. 슈퍼 컴퓨터, 서버, 데스크탑, 노트북, 태블릿, 핸드폰, 스마트 워치 따라서 아래

23.08.23 1. Redux 1-1. Redux란? > Redux란, 가장 많이 사용하는 상태 관리를 도와주는 라이브러리입니다. Redux는 3가지의 기본 원칙이 있는데 첫번째는 애플리케이션의 모든 상태가 하나의 저장소 안에 하나의 객체 트리 구조로 저장되어야 하며, 두번째로는 상태가 읽기 전용이어야 해서 상태를 변화시키는 유일한 방법은 액션 객체를...

23.08.24 1. 돔(DOM) > 돔(= DOM, Document Object Model) : 문서 객체 모델로 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미 => 즉, 웹 페이지의 구조 2. 가상 돔(Virtual DOM) > 가상 돔(= Virtual DOM) : HTML 돔의 추상화 ...

23.08.25 1. useRef 1-1. useRef란 > useRef : React에서 제공하는 Hook의 하나로 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 도와주는 Hook 바닐라 자바스크립트에서 getElementById나 querySelecto

23.08.28 1. useEffect 1-1. useEffect란, > useEffect : React의 내장되어있는 중요하고 많이 사용되는 Hook 중의 하나로, 컴포넌트가 렌더링될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. useEffect의 콜백은 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행될 수 있다. 그렇다면 정확히 마운트 될...

23.08.29 1. JavaScript에서의 변수 선언 방식 자바스크립트에서는 변수를 선언할때 var, let, const 를 사용합니다. var, let, const는 모두 javascript의 변수 선언 방식입니다. 같은 기능을 하는것 같지만 조금씩 다른 기능을

23.08.30 1. Promise > Promise : JavaScript에서 비동기 처리에 사용되는 객체, 뜻 그대로 '약속' 이라는 의미 ! 즉, 내용은 실행 되었으나 제대로 처리가 된 후에 데이터를 넘겨주고 아니면 오류를 줄 것이라는 약속입니다. Promi

23.08.31 1. 무한 스크롤(Infinity Scroll) 구현 시 가장 중요하게 고려해야 할 점은 ? 무한 스크롤(Infinity Scroll)은 UX를 향상시키기 위해 많이 사용되는 웹 디자인 패턴 중 하나이다. ex. 유튜브 ... 1-1. ‘성능’ 및 ‘로딩 속도’ 이때 가장 중요하게 고려할 점은 ‘성능’ 및 ‘로딩 속도’라고 생각한다. ...

23.09.08 1. 쿠키와 웹 스토리지 사용 배경 HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않는다. 그리하여 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹 스토리지가 사용...

23.09.11 1. CSR (클라이언트 사이드 렌더링) > CSR(클라이언트 사이드 렌더링) : 처음에 브라우저가 서버로부터 HTML과 static 파일을 받아오고 나면 사용자의 요청에 따라 js를 통해 view를 동적으로 렌더링하는 방식 => 즉, 화면에 보여줄 내용을 클라이언트에서 생성하기 때문에 클라이언트 사이드 렌더링이라고 합니다. 단점 처음에...