[TIL]

사전캠프는 오후3시부터 오후9시까지 진행하기에 오전시간은 널널하다.2일차부터는 뭔가 오전 시간에도 개인적으로 학습을 하고싶어원티드에서 진행하는 frontend 강의 당신의 코드는 기본에 충실한가요?를 듣기위해 필요한 과제가 있는데 그 과제를 하기로했다.과제는 figma

당신의 코드는 기본에 충실한가요?원티드 frontend 강의 당신의 코드는 기본에 충실한가요?를 듣기위한 과제를 마무리했다.혼자 퍼블리싱을 해본적이 거의 없기에 이번 과제는 나에게는 정말 즐겁고 어려운 과제였다.아직 반응형에 대한 지식이 적고 과제를 완성하기에 급급했기

객체 스트럭처링 할당객체와 배열은 자바스크립트에서 가장 많이 사용된다.함수에 객체나 배열을 전달해야 하는 경우가 많은데 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요할 경우가 생긴다.이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법이 있다.그것이

객체(Object)자바스크립트는 객체(object 기반의 프로그래밍 언어이다.자바스크립트를 구성하는 거의 모든 것이 객체이다.객체 타입 object / reference type은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다.객체는 0개 이상의 프로퍼

뭔가 하다보니 사전캠프 2주차가 시작되었다마냥 이론만 공부하자니 머리가 지끈거려 혼자 토이 프로젝트를 해보기로 했다.생긴모습은 이렇게 생겼다. 퍼블리싱만 20분 정도 걸린거같다.... 계산기를 퍼블리싱하며 어떻게 만들어야 할까 고민을 하면서 만들기 시작했다.선입력 된

Big O 표기법은 퍼지(fuzzy) 계산을 공식적인 표현.정식으로 입력된 내용이 늘어날 수록 알고리즘에 실행 시간이 어떻게 변하는지 설명하는 공식적인 방식이다.Big O는 어떤 함수의 입력 값이 늘어나는 것과 함수 실행 시간이 변하는 관계를 의미한다. 즉, 입력의 크

질문 bit.ly/44OpQeY 여기로 하나의 웹사이트로 접속하느 ㄴ기기의 화면의 크기에 맞춰 자동으로 레이아웃 및 컨텐츠 구성하는 개발 방법스마트폰의 대중화로 인식 중요성 인식인터넷 접속되는 기기가 다양해지면서 더 다양한 스크린에 대응해야 하는 이슈(스마트폰, 랩탑,

오늘의 챌린지 오늘 조원분께서 좋은 사이트를 알려주셨다. frontend기술을 연습할 수 있는 사이트 Frontend Mentor여기 사이트를 소개 시켜주셨는데 소개 받자마자 Newsletter sign-up form with success message라는 챌린지

지난 TIL에 이어서..Newsletter sign-up form with success message데스크탑에 이어 반응형으로 모바일까지 작성을 완료했다.javascript는 추가된게 없고 html과 css만 추가되었다.html에서는 .sign-up\_\_conten

2회차 질문모바일웹이 시작될 당시에는 모바일 기기임에도 미디어쿼리 미 지원 기기가 많았음.데스크탑부터 작업을 하게 되면 오버라이딩이 많이 발생함복잡한 구조를 줄이기 보다 단순한 구조를 늘리는 것이 쉬움viewport모바일 브라우저가 웹페이지를 어떻게 렌더링 해야 하는지

firebase 공부 목적으로 firebase를 이용한 게시판을 만들기로 했다.게시판은 1차로 쓰기페이지, 읽기페이지, 보기페이지, 리스트페이지, 게시글 삭제 기능을 목적으로 시작했다.firebase에 doc를 보며 기본 firebase 설정을 하는데 doc에 나와있는

2023년09월25일 미니프로젝트 시작팀원들 각자 1개 이상의 조 이름을 제시를 하고 거기에서 중복가능한 투표를 진행하였다.좋은 조 이름이 많았지만 그 중에서 일단 버티조가 당첨되었다.아직 처음하는 프로젝트이다보니 어수선하고 정리가 잘 되지 않았지만우리 일단 버티조의

2023년09월26일나의 개인 소개 페이지를 1차로 완성을 했다.상단에 조 이름이 출력되고 조 이름에 메인페이지로 돌아가는 link를 심을 예정이다.그 밑에 사진과 이름, 포부 등이 출력되고 그 밑에 자신을 소개하는 글을 출력한다.방명록은 간단하게 작성자 이름과 작성자

2023년09월27일방명록에 펜 모양 버튼을 클릭하면 방명록을 수정 할 수 있는 prompt가 나오고,수정 버튼을 누른 commentId를 가지고 수정할 데이터를 불러와 input, textarea에 뿌려준다. 그리고 수정 가능한 부분은 이름, 방명록 본문 만 수정하게

init은 initialize(초기화하다, 초기 설정하다)의 준말이다.프로젝트를 시작시에 git으로 관리하기위해 딱 한번 입력하면 된다.그러면 그 프로젝트는 git으로 관리가 된다.add는 git으로 관리중인 프로젝트내에 파일이 변경된 파일을 스테이지에 올리는 명령어이

Chart.js의 비동기 데이터 업데이트 Chart.js 생성 차트를 생성할 div를 불러와 차트 생성자 인수로 넘기면 차트가 생성된다. 이때 필요한 labels의 데이터와 data의 데이터를 firestore에서 불러와

2023년 9월 25일부터 시작되었던 미니프로젝트가 끝났다.공휴일이 많이 끼여있어서 굉장히 오래한거같긴하지만.. 결과는 굉장히 만족스러운 웹페이지를 만들어 낸거같다.우리 팀(조)은 사전캠프 첫주 첫날부터 참여한 인원들이어서 사전 캠프 진행하지 않은 팀보다프로젝트 진행이

이전 버전 html 이전 버전에서는 무지성으로 버튼을 div를 만들었고 현재 버전에서는 용도에 맞게 button으로 변경하였다. css는 class를 button과 operator로 사용하여 바뀐게 없기때문에 생략한다. js

동적으로 생성한 tag는 영화 카드를 클릭 했을 때 modal을 띄우는 event를 바인딩 할 생각으로동적 생성한 tag를 querySelectorAll에 class명으로 모든 영화 카드의 버튼을 불러와 forEach로 반복하면서 버튼들마다 event를 바인딩 하였다.

캠프 참가 인원 중 많은 분들이 코딩을 처음 접해보신 분들이 상당히 많다.그렇다보니 개인 과제(vanilla Javascript + tmdb api활용) 진행에 많은 어려움을 격는다고 하셔서 실력이 많이 부족하나마 라이브 코딩을 진행하며 간략한 설명을 곁들여 html구

git branch 브랜치명git switch 브랜치명 or git checkout 브랜치명주의 항상 합칠 베이스 브랜치로 이동 후 대상과 병합git merge 합칠 브랜치명보통 github에서 merge를 진행한다. github에서 merge 전에 팀원 간 코드에 문

벨로그에는 템플릿 저장 기능이 없다. 벨로그를 자주 쓰는 입장에서 조금 불편하기에 한번 도전해보기로 했다.velog의 textEditor의 text div부분이 있는 CodeMirror class의 자식 node를 싹 긁어와서 localStorage에 배열로 저장 후

문제 해결에 앞서 velog의 texteditor는 메인 글을 작성할 때 입력된 값이 그대로 출력되는게 아닌 입력된 값을 javascript로 html 요소로 변경하여 출력하는 구조이다.처음시도 한 방법은 text editor에 해당하는 tag의 하위 요소를 전부 긁어

[TIL] Velog 익스텐션 만들기(1) >#### [TIL] Velog 익스텐션 만들기(2) template popup 만들기

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중 원시 데이터는 불변성이 있다고 말하고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다고 말한다.let number = 1이라고 선언한다고 하면 메모리에는 1이라는 값이 저

컴포넌트는 리액트의 핵심 빌등 블록 중 하나이다. 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다. 컴포넌트란 리액트의 핵심 빌딩 블록중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정

상태 관리 라이브러리전역 상태를 관리할 때 효과적이다.상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리가 가능컴포넌트끼리 똑같은 상태를 공유해야 할 때에도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.Redux에는 4

window 못생긴 scroll bar todo list 작성중에 todo card에서 p테그 안의 컨텐츠가 넘으면 스크롤이 될 수 있게 overflow: scroll;를 사용했다. (밑에 빨간색 테두리 안쪽부분) macos에서 개발하고 있는 나는 windo

React 첫 과제로 ToDoList 작성을 하였다.이미 많은 ToDoList를 작성 했기에 큰 흐름은 잘 알고있기에이번에 작성하면서 \[].reduce로 todo목록과 완료목록을 나눈 방법을 되새기자 한다.보통 내가 생각하기로는 todo목록, 완료 목록을 뿌려 주려고

isPacked가 true이면 체크모양을 표시하고isPacked가 false이면 체크모양을 표시하지 않는다.if문과 동일한 렌더링을 하지만많이 간결해 진다. isPacked가 true이면 name과 체크아이콘을 렌더링하고isPacked가 false이면 name만 렌더링

자바스크립트로 css코드를 작성하는 방식 props를 통해서 조건부 스타일링 가능하다. styled-components -> 해당 컴포넌트에 대한 스타일링css를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어.css는 웹 프로젝트 규모가 커지면 커질수록

가장 기본적인 hook함수형 컴포넌트 내에서 가변적인 상태를 갖게함일반 업데이트 방식은 버튼을 클릭했을 때 setNumber가 각각 실행되는게 아니라배치(batch)처리 한다. 즉, onClick을 했을 때 setNumber라는 함수를 세번 호출하지만리액트는 그 호출을

오늘의 학습 주제는 알고리즘 문제 해결에서 기본적인 기법 중 하나인 브루트 포스(Brute-force) 알고리즘이었다. 이는 완전 탐색(Complete Search)의 일부이다 ## 브루트 포스란? - 정의: 모든 가능한 경우를 탐색하면서 결과를 얻는 알고리즘을 의미

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 한다.예를 들어 "AB"는 1만큼 밀먼 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다.문자열 s와 거리 n을 입력받아 s를 n만

빈 병 a개를 가져다주면 콜라 b병을 주는 마트가 있을 때, 빈 병 n개를 가져다주면 몇 병을 받을 수 있는지 계산하는 문제입니다. 기존 콜라 문제와 마찬가지로, 보유 중인 빈 병이 a개 미만이면, 추가적으로 빈 병을 받을 순 없습니다. 상빈이는 열심히 고심했지만,

"명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니

상태란?일종의 데이터 저장 변경 관리하는 데이따리액트의 UI 렌더링에 필요한 정보들의 의미하기도 함.상태가 변경되면 UI가 리렌더링됨리액트는 데이터 흐름이 단방향이다.그럼 데이터 흐름이 양방향 인 것? -> ex) Vue리액트의 데이터 단방향 흐름의 단점망할 프롭스 드

개인블로그(1) gatsby

어쩌다보니 특이한 프로젝트 명이 생겨버린..팀원들과 어떤 주제로 프로젝트를 진행할지 생각하다가 it뉴스에 대한 뉴스피드를 하자고 제안하셨고,그 주제를 정함과 동시에 머리에서 위의 프로젝트 명이 번뜩 떠올라 공유해 보니 다들 괜찮다고 하셔서 위 프로젝트명으로 진행하게 되

팀 프로젝트 진행 중에 signUp API는 잘 실행이 되었지만 signUp이 끝나고 onMutation에서 가입하는 회원의 데이터를 firestore에 데이터를 추가 저장을 하려고했는데아무런 응답과 에러가 없었다..이 사진 부분에서 문제가 있었다.. 데이터는 저장되지

예약.

프로젝트를 하다보면 중복되는 element를 많이 만들고 보게된다.react의 장점중 하나인 component이다.중복되는 요소를 component로 정의 해두고 필요한 곳에서 가져가 쓸 수 있다.그래서 이번 팀 프로젝트를 진행하며 자주 쓰이는 input들을 하나의 c

작업브랜치 분리 후 dev 브랜치에 pull request 줘서 merge하는 걸 처음 했는데 변경사항과 진행상황이 뚜렷하게 보여서 좋다.기능별로 브랜치를 나누어 작업하고 pr만들고 코드 리뷰 후 머지하는 작업이 이제는 습관화 된거같다.기능 문제나 오류가 발생하면 팀원

HTTP 프로토콜 웹 통신은 약속(프로토콜) 프로토콜 서버(웹 서버)와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식이 필요하다. 서로 데이터를 주고 받아야만 오류가 없다. > 약속을 프로토콜 이라고한다. 웹에서 서버 클라이어트간 주고 받은 상호간의

개인과제 중에 처음으로 redux-thunk를 사용하게 되었다.여러 api를 호출하고 관리함에 있어 error를 통합 관리를 위해 error.slice를 만들었고App.jsx에서 toast 라이브러리를 사용하여 모든 페이지에서 알림을 볼 수 있게 설정하고 있었다.thu

이번 개인 과제에서는 인증서버(회원정보 및 로그인 관련)는 튜터님의 개인 서버를 이용하지만 letters를 저장할 서버는 따로 등록해서 사용해야한다.test를 할때에는 프로젝트 내에 json-server를 다운받아서 사용했만 배포를 위해 신규로 프로젝트를 만들었다.js

몸이 안좋아서 하루 미루겠습니다..

custom hook 기본 예시 일반적인 React 문법 custom Hook 작성 custom Hook 사용 내가 생각하는 custom hook의 장점 위의 예제는 아주 간단한 카운팅 앱이기에 크게 와닿지 않을 수 있지만 custom hook의 장점은 많은것

react-query는 서버 상태 관리를 쉽게 하도록 도와주는 라이브러리.fetching: 서버에서 데이터 받아오기caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간 내에 다시 필요할 시 서버요청 없이 보관된 데이터에서 꺼내 쓴다.synch

리엑트 심화 주차 프로젝트 중에 kakao map API 를 활용한 프로젝트를 진행 하고 있다.프로젝트는 룸메이트를 찾는 웹 사이트를 만들기로 했다.지도를 클릭하고 룸메를 구하는 작성자가 글을 작성하면 그 위치에 marker가 찍히고 룸메를 찾는 유저는 marker를

자신이 맡은 부분을 끝까지 완성해 나아가는 모습이 좋았습니다.팀원분들과 서로 격려하면서 프로젝트를 진행을 이어 나가는 부분이 좋았습니다.팀프로젝트 기간 동안 프로젝트를 포기하지 않고 끝까지 해낼 수 있어서 좋았습니다.이번 팀프로젝트로 처음사용해보는 API를 구현이 되어

javascript는 변수의 타입이 runtime에 결정된다.이에 따라 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다롭다.변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시간에 변수의 갑소가 타입을 모두 확인해야 하는 번거로움이 있다.ja

styled-components를 사용하여 theme을 설정했는데 새로고침을 할 때 마다 깜빡 거리게 된다. 이유를 자세히 완벽히는 알지 못하지만 react가 랜더링 할 때까지의 틈을타서 html이 보이기 때문이라고 하는데 그 현상을 막고 싶었다.새로 고침 또는 새로

이번 과제는 1-5 level까지 있었지만 level5에 집중해서 구현 해봤습니다.Typescript 사용Toggle Theme button새로고침 해도 번쩍거리지 않고 유지되는 theme 구현첫 랜더링 시 title input에 focusform data입력시 적절한

Next.js는 React에 기반을 둔 풀스택 프레임워크로, 현대 웹 개발에 필요한 다양한 기능과 편의성을 제공합니다. 이를 통해 개발 프로세스를 간소화하고, 더 효율적인 웹 애플리케이션을 구축할 수 있습니다.상세한 문서화: Next.js의 공식 문서는 매우 잘 정리되

개인 토이 프로젝트로 nextjs 14버전 App router를 사용하여 개인 blog 개발을 시작하였다.항상 쓰던 styled-components를 쓰지 않고 처음으로 써보는 css 프레임워크인 tailwind를 사용하여 개발 중에 dark theme 적용을 하려는데

nextjs로 블로그를 만드는 중인데 블로그 post를 contentful 로 작성하고 그 데이터를 읽어오는 방식으로 방향을 잡았다.contentful을 사용하면 crud를 편하게 할 수 있다. 개인 블로그이니 나만 CUD를 할 수 있으면 되기 때문에 따로 작성페이지,

심화 프로젝트를 진행하면서 item list를 무한 스크롤을 사용하여 데이터를 끊어 오기로했다.마침 react-query를 사용하고 있었고, react-query에는 무한스크롤을 구현하기 편한 hook을 제공한다. 그 hook은 useInfiniteQuery이다.use

최종프로젝트가 시작되었다.최종 프로젝트인 만큼 이전에는 사용하지 못했고 어려운 기술들을 해보려고 팀원과 회의를 진행하다가 부리더님이 재미있는 아이디어를 주셨다. 문제점 부터 적어본다. 화상회의를 통해서 회의를할 때 발표자료를 발표자가 일방적으로 제공하는대로 청취자는 이

Phaser3란

최종프로젝트로 메타버스 + 여러화면 화면 공유를 할 수 있는 프로젝트를 진행중이다.canvas를 전부 익혀 메타버스를 구축할시간이 부족하다고 판단되어 게임 엔진인 phaser3를 사용하여 메타버스를 구축 중이다.phaser3에서는 맵 에디터를 제공하지 않지만 tiled

GET은 서버에서 데이터를 가져올때 사용합니다.POST는 서버에 데이터를 전송할 때 사용합니다.GET은 URL에 데이터가 노출되어 보안에 취약하고POST는 데이터가 요청 본문에 있어 URL에서 보이지않아 보안에 덜 취약합니다.GET은 URL 길이 제한이 있어 보낼 수

쿠키는 클라이언트에 저장되는 키-값형태의 작은 데이터 파일이며 인증, 트래킹 등의 정보를 저장하는데 사용합니다.세션은 서버 측에서 관리되는 사용자 상태 정보이며 클라이언트는 세션 ID를 통해 식별합니다. 사용자별로 사용자의 정보를 저장할때 사용합니다.(로그인 상태 등)

자바스크립트와 타입스크립트의 가장 큰 다른점은 js에는 type이 없어 프로젝트 중에 자신이 작성한 코드지만 어떤 값들이 들어오는지 몰라 런타임 오류가 발생할 수 있으며 null, undefined같은 개발자가 의도치 않은 값들을 사용할 수 있습니다. 특히 협업에서는

매 1분마다 실행되는 함수 생성함수는 호출될때마다 온도 값이(num) 인풋된다함수는 호출될때마다 지금까지 받은 온도의 평균 온도 값을 내보낸다.호출은 무한으로 호출된다.디비에 값 저장 불러오기 X자바스크립트 또는 타입스크립트로 실행setInterval로 실행되도 무관,

javascript에서 호이스팅은 변수 선언과 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 것을 의미합니다. 호이스팅은 javascript엔진이 런타임 이전에 일어납니다. 호이스팅에의해 변수 선언, 함수 선언 전에 사용할 수 있지만 이는 개발자가 의도한 부

상태관리를 통해 컴포넌트의 동적 데이터 관리, 렌더링 최적화, 애플리케이션의 상태 추적, 재사용성과 유지보수의 용이성, 컴포넌트 간의 데이터 흐름 제어를 할 수 있어 애플리케이션의 효율적이고 효과적인 동작을 위해 필수적이라 생각합니다.평소에는 props drilling

nextjs를 설치하면 eslint가 정말 기본으로 설치로되어있기 때문에 기본 eslint 설치는 생략한다.eslint 룰은 유명한 air-bnb를 사용한다.eslint-plugin-react-hooks: 리액트 훅 관련 규칙eslint-plugin-import: im

프로젝트 소개(- 아키텍쳐(- 기술스택(- 주요 기술(- 기술적 의사결정(- 트러블 슈팅(- 팀원 소개(기존 메타버스 화상회의 플랫폼에서 청취자는 발표자가 제공하는 일방적인 화면 외에 추가 정보를 탐색하거나 참조할 수 없으며, 발표자는 청취자의 다양한 환경에 맞춰서 준