TIL: 오늘을 돌아보자

미니프로젝트 발제 : S.A 작성미니프로젝트 노션 페이지 작성Git 협업을 위한 학습git add 경로/파일명:파일명 에 해당하는 친구에게 심지를 꽂는 다는 개념, 다음에 작성할 커밋이 해당 대상들에 모두 달라붙습니다.git commit -m '제목' -m '내용':g

Today I learn Masonry layout : 벽돌을 쌓는 레이아웃(핀터레스트 레이아웃) Multi Column(다단) Modal CSS (header/footer 고정하기) Img 업로드 핀터레스트 HTML/CSS 적용해보기 > Masonry 레이아웃은

(오늘 TIL 적을게 많은데... 오류 때문에 시달리는 중이다 ㅋㅋㅋㅋㅋㅋ 흥미진진해 아주!!! 오늘 TIL은 내일로 미룬다!!)플라스크 서버를 구축했고 프론트와 연결했다.그러나 어디서 무엇이 잘못됐을까... 405 에러 발생!메소드 매칭이 되지 않아 생기는 오류라는

ㅎㅎㅎ;; 실마리 하나를 찾아 내었다.작성하기 버튼을 누르면 405 에러가 계속 발생했다.개발자 도구 > 네트워크 > payload 를 확인해 보니, 데이터 값은 온전히 담겨 있었다.클라우드MongoDB에 데이터가 잘 들어가고 있던걸 발견!!!그러나 405 에러는 여전

새로운 조가 편성 되면서 한 주가 시작했다... 두근두근!뚝딱이 조장이 되었다... 그래도 아이스 브레이킹/ 와이어 프레임/ api 명세까지 작성했고 팀 노션을 야무지개 작성하게 됨... 팀 노션사용하기엔 아직 낯선 노션... 익숙한 템플릿을 들고 적용해 봤다.이번에

일단 map함수가 뭐냐면 ES6 문법은 아니지만, 정말 자주 쓰이는 메소드란다! 꼭 숙지해야할 코드!이런 식으로 기존의 배열을 -> 새로운 배열로 만들어 주는 함수라고 한다!mongoDB에 data에 Post 했던 Data 값들이 잘 이용해웹종합반 강의에서 학습했던 방

CRUD의 꽃 수정하기! 성공해서 기쁘다, 추가로 유효성 검사와, id값 데이터를 변형해서 담아내는 방식을 사용 했는데, 공부가 많이 돼서 남겨본다.수정하기 method는 put , post 왜 둘다 쓰일까?...edit Modal 데이터에 input 값들을 id 값을

"Jquery 지옥에 오신걸 환영합니다. " , jquery라이브러리를 처음 사용해서 만들어본 플젝!가독성, 로직 이해에는 으뜸인데 왜 너는 점차 사람들한테 잊혀지는거니 ?...jquery를 손댄 이유 :이번 프로젝트에서는 제이쿼리 라이브 라이브러리를 공부해 적용해 보

TIL을 더 잘 작성하기 위해 앞으로 전반적인 아웃라인을 수정해보자. 기억해라 "문시해알"~ 문제가 있었다. 어떤 문제가 있었는지 작성해 보자이것도 해보고 저것도 해본 경험, 삽질도 잘 기록해보자~게 해결했다. 어떻게 해결했는지 기록해보자~걸알게 되었다. 뭘 새롭게 알

다른 코드의 인자로 넘겨주는 함수! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 얘기. forEach, setTimeout 등이 있다.콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에

"DOM을 알기 전에 사전 지식을 쌓아보자"사용자 = 브라우저 = 클라이언트사용자가 브라우저에 ‘www.naver.com’ 주소를 입력합니다. -> 클라이언트가 서버에 요청했다.HTML 문서를 서버로 부터 수신한다.네이버 서버에서 HTML을 던져줌 네이버 서버가 응답

TMI : javascript의 클래스 문법은 ES6에서 도입됐다.자바스크립트 기반이 아닌 다른 언어에서는 대게 클래스 기반의 프로그래밍 개발 기법(생성자, 상속 등..)을 사용하는데, 그 개발자들이 자바스크립트로 넘어와서 자꾸 클래스 ‘처럼’ 개발하려 노력하다보니 J

https://www.themoviedb.org/더무비데이터베이스(TMDB)를 이용해 flask 서버 없이, api를 통해, 데이터를 긁어와 화면에 뿌려주고, 그 중에 검색 기능까지 구현해 보도록 하는 것이 목표다!Top rate list api를 가지고 다루

search 로직을 리팩토링 하면서, 스크립트 모듈화를 진행하였다. 특정 관심사에 해당하는 기능을 수행하는 변수와 함수를 모아 구분해줌 으로서 관심사의 분리 <재사용성, 유지보수성, 깃 협업능률 향상> 에 유리하다! 모듈 별로 독립적인 scope 생성해 위의 장점

협업을 위해 prettier 를 사용해보기로 했다. Prettier는 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해주는데 미리 컨벤션으로 정한 값들을 설정해 줌으로서 일관성, 협업에 유리하게 만들었다!1-3. settings.json에서 기본 설정하기를 이용하

자주 손에 익혀야 할 메소드를 정리해 보았다, TMDB API를 이용해서 영화목록을 뿌려주는 서비스를 만들어 보았는데, 적용하기가 쉽지 않았기에 ( 익숙해지기 까지 시간이 걸릴듯 ㅠㅠ) 정리한 메소드를 적용해 보고,적용하는데 연습해 봐야 겠다.

거창한 계획... 미미한 진척도 엉엉초안으로 Css는 아주 간단하게 적용한 상황CRD 기능 완성상단 댓글 카운트유효성 (값이 없는경우 확인 alert)타임스템프HTML은 시멘틱하게 작성할것 ! 기억하자!Month 값이 일치 하지 않았다.\->generateTime 함수

서버 없이, 로컬 환경에서 프론트 기능구현을 동작할때 유용하게 사용할 수 있는 로컬스토리지에 대해서 오늘 남겨보려고 한다.localStorage.setItem('key', 'value');setItem 메소드를 사용하면 key와 value를 로컬 스토리지에 저장할 수

자바스크립트만으로 SPA를 구현한다면 어떻게 구현해야될까 라는 호기심에서 부터, 학습하게 되었다MPA vs. SPA (출처: Microsoft MSDN)hash (Fragment) 값이 변경됨에 따라 페이지 이동 처리https://example.com/abc/

기대하던 리액트 공부가 시작 되었다 ! 🫨 오늘 겪었던 기초 개념들과, 에러에 대해 남겨보자!:상대 경로 -> "../../index.js" :절대경로 -> "index.js" 여러 컴포넌트가 있을때 상대 경로는 "./././././././../../../../i

리액트 입문 강의를 1회독 완료 하고 프로젝트를 시작하기전에 맞닥뜨린 에러를 정리해 본다.jsonconfig.json -> 절대경로를 위한 파일인데, 이녀석이 어제에 이어 또 에러를 이르켰다.일단 구글링으로 검색해 레퍼런스를 찾아 보았지만타입스크립트에 대한 레퍼런스는

ToDoList 과제가 한창 중이었고, 완성했으나 뜻밖의 문제를 발견했다.id 값을 배열의 length로 주었는데 발생한 오류!게시물은 3개 작성한다. -> id값이 순서대로 1, 2, 3이 주어진다.게시물 id 2값을 갖고 있는 게시물 1개를 삭제해 주었다. -> 1

ToDoList를 만들어 전반적인 리액트 useState, props에 대해 실습해 주었다. useState는 손에 쥔 모래알 마냥, 새로고침하면 값들이 유실되는 상황,리액트를 이용해 localStorage에 담을때 유용한 hook "useEffect"에 대해 알아보자

자바스크립트를 열심히 공부했다. 학습하면 꼭 기록이 필요한 법,정리한 내용을 레포에 연결 시켰지만, 아니 왠걸 ? 잔디가 심어지질 않는다;;잔디 오류인가 싶어 이것 저것 삽질을 했는데 이 여정을 남겨볼까 한다.레포를 정리해서 재설정 하기로 결정Git 저장소가 더 이상

TIL, 요즘 바닐라 자바스크립트 공부에 매진한다. 솔직히 오늘 공부는 에러를 맞닥뜨리기 보단, 생소한 개념과 용어들이 너무 많아, 내 두되가 못받아 드려 에러 투성이다. 오늘은 문제점 /시도/ 해결/ 알게된점 보단, 오늘 공부한 자바스크립트 헷갈리는 개념을 정리해

useRef는 DOM 요소에 접근할 수 있도록 하는 react hook이라며, 지난 TIL에서 고유 ID 값을 주다가 정리해 보았다, 자동 포커싱에서도 사용 된다고 정리해 놓았는데, 한번 더 정리하고 공부하면서 포커싱 기능을 구현해 보았다!콘솔 확인시이렇게 curren

튜터님께 받은 피드백지난 TIL에서 다뤘던 id값 코드리팩토링에서는 ID에 같은 값이 중복되어 들어가는 오류 발생하여 (id 를 index의 length로 설정 했을때) -> useRef 훅을 사용하여 각 Todo블럭마다 고유 ID값을 생성했는데 튜터님께서 빈값으로 내

위 두 코드의 차이첫 번째 코드는 버튼을 클릭했을 때 1만 올라가지만 두 번째 코드는 3씩 올라간다함수형 업데이트 방식은 배치 업데이트 방식이 아니라 명령들을 한 번씩 순차적으로 실행하는 방식(함수 업데이트 방식을 사용하면 배치 업데이트 방식을 사용하지 않는다)함수형

useContext는 prop driling의 문제점을 보안하기 위한 방법이며, 전역 데이터라고 생각하면 된다.사용 방법은 context폴더를 생성, 안에 context이름.js 을 생성한다.(컴포넌트라 파스칼케이스 사용)이후 context파일에 아래와 같은 전역 데이

최적화 >리렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경됐을 때 부모 컴포넌트가 리렌더링 된 경우 리액트에서 리렌더링이 자주 일어나는 것은 그다지 좋은 현상이 아니기 때문에 비용(cost)을 줄여야 한다

리덕스는 전역상태 관리 라이브러리이다.\-> 리덕스를 사용하면 props의 특성 중 하나인 부모 -> 자식 방향으로 전달하는 형태가 아니여도 state(상태)를 공유할 수 있어 중간에 의미없는 컴포넌트를 거치지 않아도 된다.yarn add redux react-redu

Firebase는 구글이 제공하는 서버리스 플랫폼 Firebase가 웹 서버를 개발하는 데 필요한 인프라를 제공하기 때문에, 프론트 개발자들은 서버를 따로 관리할 필요 없이 웹 애플리케이션을 만들 수 있다.웹 페이지의 보여지는 부분을 담당HTML, CSS, JavaSc

오늘 하루는 회의만 내내 했다 😨 프로젝트 이름 : Garden gram주요 서비스 및 핵심 목적 : 반려식물을 키우는 사람들의 정보공유, 소통을 위한 SNS 이미지 중심의 소셜 네트워크 서비스로, 좋아요 기능을 지원한다.프로젝트 일정 : 23/06/26 - 23/0

가든그램 프로젝트가 시작되었다, 팀원들과 setting을 하고, 기본 뼈대만 만들어 git 원격 레포에 저장했고, 팀원들이 클론받아 사용하는 과정중에 충돌이 계속해서 일어나는 현상이 있어 차질이 생겼다.내가 만들어 놓은 세팅을 팀원이 받아 Pull을 하는 과정에서,

styled component를 쓰다가 스타일 확장이나 재사용에 대해 알게 되어 기록 남긴다! 여태나는 똑같은 코드를 반복해서 무식하게 사용 했을까... 😨;;commonButtonStyles 을 기본 css로 정해주어, 재활용 해준다기존 SharedButton을 이

프로젝트 진행 하느라 정신 없는 와중, 컴포넌트를 공부하면서 라이트 다크모드에 대해 다뤄 보았다!지난번에 만들었던 TodoList 에 적용해 보았다

팀원끼리 dev 브랜치 -> 팀원의 브랜치로 git pull origin dev 하는 과정에서 생긴 오류다.fatal: Need to specify how to reconcile divergent branches.git pull 중 merge의 방식을 설정하라는 것 같

아쉬움이 짙은 가든그램 ... 많이 배우고 많이 성장한 한 주였다.README 작성하기 : 소개글은 선택이 아닌 필수 이다. Git 레포지터리 생성 : organigation 보다는 개인 레포에 당분간 만들자 -> 나중에 배포할때 힘듬 (git hub action이 필

리덕스 툴킷 prac 중, 겪은 트러블 슈팅에 대해 남긴다!이 에러를 해석해 보자면 react-dom.development.s 파일에서 발생한 에러고,발생지점은 App컴포넌트 내부이며....오류 메시지에서는 에러 처리 동작을 사용자 정의하기 위해 트리에 에러 바운더리(

지난 가든그램 프로젝트에서, 서버에서 불러오는 데이터를 리덕스에 연결시켜 사용하고 싶었는데... 그 때 필요한 미들웨어 thunk에 대해서 알아보도록하고, 적용해 보자! (오늘은 개념만 정리 하기로!)thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수

React Query는 왜 사용할까? 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다. 하지만 다음과 같은 문제가 있음!보일러 플레이트 : 코드량이 너무 많아.규격화 문제 : Re

-

-

-

-

+

-

새로운 팀 프로젝트가 시작했다. 이번 프로젝트에서는 좀 더 꼼꼼하게 convention 들이 이루어졌는데, 그 중 styledComponents를 분리하는 방법에 대해 기록해 본다.components > footer > ... : 컴포넌트 안에 폴더를 만들어 구분짓는

간폭 페이지에서 필요 없는 컴퍼넌트를 숨기고 싶다면 ...?아래와 같은 상황모든 Route path 경로 페이지들은 헤더와 푸터를 갖고 있다!푸터에서 숨시고 싶은 경로를 입력하여 return null 값을 주자 !물론 원하는 컴포넌트 모두가 적용 가능하다!NotFoun

오늘은 팀 협업중에 자주 볼 수 있는 문제 git rebase에 대해 간략히 남긴다.Feature 브랜치를 다른 브랜치와 통합 : git rebase를 사용하여 feature 브랜치의 변경사항을 다른 브랜치에 적용할 수 있다.커밋 히스토리 정리 :불필요한 커밋이나 메시

https 사이트에서 ajax를 사용해서 비동기로 http 사이트에 request를 요청해서 문제가 발생.암호화된 HTTPS 기반의 사이트에서 암호화되지 않은 HTTP 사이트에 요청을 보내서 Mixed content 에러가 발생함참고 자료

타입 스크립트를 공부하면서, 이론적으로 질의 응답을 만들어 보았다! 오늘 배운 학습내용을 정리해 본다!동적 타입 언어 = JavaScript로만 개발했을 때의 한계점 !!!자바스크립트 발전배경js는 원래 웹 페이지가 동적인 효과를 주기 위해 html, css와 함께 사

타압스크립트 공부, 아직 적응 중이라 머리가 받아드리지 않음으로, 복습과 실습이 필요한 시점에가장 기초적인 TS 셋팅에 대해 기록한다!참고로 난 MacOS!일단 Node.js 설치가 되어있는 전제하에 다음 개발환경 구축에 대해 남긴다! 터미널에 npm i typescr

우리가 자주 겪는 기본 타입들에 대해 정리해 보고 넘어 가 보자!

어제에 이어 고급 타입에 대해 기록해보자

ToDoList 를 타입스크립트로 만들어 보기전에 기초적인 타입스크립트에 대해, 메모해 두었던 것을기록으로 남겨본다!let a:number = 3let b:string = "love you"let c:boolean = truelet d:null = nulllet e:u

두번째 타입스크립트 기초공부 ! 정리yarn create react-app 이름 --template typescript리액트에서 이미 지정해 주었다!react function component 타입! -> React.FC2가지 방법을 소개해 보겠다! type 과 int

조금더... 힘내보아...똑같은 코드를 적을 필요 없고, 코드량을 줄일 수 있음!extend 반대로, 타입에 요소를 빼려면?\+추가) ?연산자를 통해서 있어도 되고 없어도 되는 ! Omit 처럼 사용 가능하다.하지만, 꼭 필요할 때도 그냥 넘기기 때문에 주의...!이번

리액트 + 타입스크립트를 통해 투두리스트를 만들고 실습해 보았다!

AWS 서비스들이 너무 많고 많다 💦 학습한 내용을 정리하여 기록해 보겠다! AWS 서비스별 정리! Identity and Access Management (IAM) > AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스, (나 같은 경우엔 해킹을

\[TIL]2023.07.19 특정 page에서 header 혹은 footer 숨기기 🥷🏻 지난 TIL에서 2가지 해결방법을 찾아보았다, 이번 프로젝트에서도 똑같은 상황이 반복 되는 경우가 발생 되었는데 아침마다 알고리즘 문제를 풀어서 그런지, 튜터님께 질문을 던졌

중국에서 만든 웹, 앱 디자인 개발을 위한 프레임워크굉장히 편안한 디자인 레이아웃보통 React로 프로젝트를 진행한다면 마크업을 하고 Styled-Components 등을 사용하여 디자인을 하고.. 하나의 컴포넌트 디자인을 위해 해야할 일이 상당히 많다. 하지만 앤트

파이어베이스 로그인 방식말고 JWT 방식 로그인을 구현해 볼 예정이다

Json-server-auth 로 로그인을 구현해 보자

오늘 겪은 트러블 슈팅... 도움을 주신 진철님께 (자주 등장) 감사를 드리며 🥲사용자 상태 렌더링 (새로 고침 없이 상태가 안바뀌는 현상) 에 대한 트러블 슈팅을 남기겠다.사용자 상태 랜더링(유저 네임)이 로그인시 변경되어야 하는데, 로그인 후에도 변경되지 않는 현

와... 너무 피곤하다. 기획만 15시간 했다... 우웩...!CS 스터디

오늘 알고리즘 문제를 풀고 오늘의 알고리즘, CS 스터디를 마쳤다 오늘의 CS 스터디접근을 꽤나 애 먹었고...스터디가 끝나자 마자 폭풍 기획...와이어 프레임 수정 변경기술 스택 선정Supabase생성ERD , 스키마해민 디자이너님과 또 기획...디자인 래퍼런스,

오전에 기획을 마치고, 프로 젝트 세팅에 들어갔다.Prettier

리액트 캘린더 기능구현을 해보자!많고 많은 라이브러리 중에, 왜 react-datepicker를 선택했을까?npm trends많이 사용하는 만큼 레퍼런스가 많다. ( 가장 큰 이유)커스터마이징이 잘 이루어 진다.등등... (많이 사용하는데 이유가 있지..)Q) 상태관리

휴... 뻘짓 많이 했던 리액트 캘린더, 드디어 기능구현 완성했다... 😇.env 파일이 올라가 프로젝트를 새로 만들었다. gitignore을 잘 살펴보자.https://support.github.com/request github 기술지원팀에 접속순서대로 접

메모리 심화

이미지를 미리 보여 주는 기능을 만들려고 생각했을 때 아래 두 가지 방법을 생각했다.이미지를 서버에 올리고 반환된 이미지 주소로 이미지를 미리 보여주는 방법이미지를 서버에 올리기 전 이미지를 미리 보여주는 방법두 번째 이미지를 서버에 올리기 전 이미지를 미리 보여주는

supabase....어렵다...

최적화 -> 압축 정리해 보자

즐겨찾기 기능 구현을 해보자...!

좋아요, 북마크 , 즐겨찾기 등등 ...에 자주 쓰이는 옵티미스틱 업데이트 구현해 보자! 참고 로직!서버 요청이 정상적으로 잘 될거란 가정하에 UI 변경을 먼저하고, 서버 요청 하는 방식!혹시라도 서버 요청이 실패하는 경우, UI 를 원상복구(revert / roll

https://www.zigae.com/react-query-key/

무한스크롤 , 즐겨찾기, 북마크, 좋아요에 쓰이는.... 일단 킵https://teamsparta.notion.site/10-throttling-debouncing-f89693a680314364b847af3ed04d7cbf

중간 발표 준비를 위해 하루를 다 썼다...

z

정리를 해보자...

자주 겪던 에러... 내 코드는 사실 ... 너무나 무식해보였다... ( 내 자식아 미안... )새로 적용한 코드 !

반응형... PWA 적용을 위해 ! 가보자고!

반응형... 고칠게 많다 ...!

프로젝트 타입스크립트 적용 !

프로젝트에서 Ios 환경 설정이 필요함매니페스트 아이콘 이미지모달 스크롤 ....

동기란 어떤 작업이 실행중일 때 다음 작업은 대기하는 성질이 있습니다. 한 작업이 완료 되어야 다음 작업으로 넘어가 시작할수 있다는 의미인데 다시 말하면 결과가 주어질 때까지 아무 것도 못하고 대기한다고 볼 수 있고, 코드가 위에서 아래로 순차적으로 실행되는 것을 의미

DDD(Domain-Driven Design) > 어려움, 보충 필요 OSI 7계층

CORS란?

Q. 파이썬 알고리즘을 왜 선택했을까? A. 문법이 간결하고, 자바스크립트에 익숙하기때문에 파이썬 입문을 하게 되었다!나는 VSCO를 이용해서 문제를 풀 예정이다.Q. 정답 코드 제출 시 제출 언어가 Python3 와 PyPy3가 있는데 뭐지?A. PyPy3은 Pyth

크롬을 열고... url 주소를 적으면... 화면에 짠 ? 🙄💦일반적인 순서도는 다음과 같다.입력: 사용자가 URL을 입력한다.네트워크 계층: HTTP 요청이 전송되고 응답이 수신되면렌더링:HTML이 DOM으로 파싱.CSS는 CSSOM으로 파싱.자바스크립트가 실행레