- 전체보기(111)
- 코드스테이츠(42)
- TIL(16)
- dailyCoding(14)
- React(10)
- DiaryProject(8)
- main-project(7)
- error(6)
- algorithm(5)
- JavaScript(5)
- pre-project(5)
- typescript(4)
- 코딩애플(4)
- CRUD(4)
- git(4)
- 스파르타코딩클럽(4)
- 웹디자인기능사(4)
- 독서일지 스터디(3)
- redux(3)
- CS(2)
- redux-toolkit(2)
- jquery(2)
- deep dive(1)
- header(1)
- class(1)
- API(1)
- hooks(1)
- chart(1)
- Props(1)
- 코딩메모(1)
- React.memo(1)
- useReducer(1)
- useRef(1)
- sweetalert2(1)
- axios(1)
- CSS(1)
- narrowing(1)
- emotion(1)
- localstorage(1)
- Swal(1)
- tsconfig(1)
- 상태관리(1)
- useLocation(1)
- JSX(1)
- 반응형(1)
- input(1)
[TIL] TypeScript 로 다크모드 구현하기 🌙 / 이미지 삽입 🌠
다크모드는 꼭 프로젝트 시작시에 고려해주기로 하쟈타입스크립트 + 리액트 앱과 스타일 컴포넌트 설치하기npx create-react-app my-app --template typescriptnpm i @types/styled-components style-reset은 브
error : Uncaught TypeError: Cannot read properties of null ~
다크모드를 구현하던 중... 맞이한 에러...나는 사용도 안한 타입이 에러가 났다고 ..Uncaught TypeError: Cannot read properties of null (reading 'useContext')react.development.js:209 War
[TIL] Class + TS
만들어 보고 싶은 것을 인터넷에서 발견했는데, 그게 class로 만들어졌다는 것도 보고... 또 타입스크립트를 공부하면서 class 알긴 알지만 너란 녀석 내 동료가 되기엔 아직 많이 친하진 않은 거 같아 오늘 본격적으로 알아가는 사이가 되어보려고 한다. 그리고 타입스
[TIL] TypeScript 타입확정하기 <Narrowing>
이렇게 함수를 지정해주면 에러가 난다.타입스크립트는 여러 개의 타입을 이용할 때타입을 확정지어주지 않으면 까다로운 타입스크립트는 오류를 내기 때문에, narrowing을 꼭 해주어야 한다.이럴 때 해결하는 방법이 narrowing이나 assertion을 이용하는 건데,
[자격증] 웹디자인 기능사 4 - D유형
올해부터 새로 추가됐다는 D,E유형 D-1 기초 뼈대 작업 > index.html 헤더와 메인 부분을 가로로 배열(display:flex) 해주기 위해 둘만 wrap으로 묶고 푸터는 따로 빼주었음. > style.css 로고 > index.html >
[CS] Javascript 1
클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경"의 조합을 말합니다. 쉽게 말해, 어떤 함수(outer) 내부에 선언된 함수(inner)가 바깥 함수(outer)의 지역변수(outerVariable)를 참조하는 것이 함수(outer)가 종료된 이후에도 계속
[자격증] 웹디자인 기능사 3 (A~C유형) 메뉴
메뉴는 헤더에서 메뉴버튼을 누르면 내려오는 부분을 말하며,보통 4개의 메인메뉴와 각각 4개씩의 서브메뉴로 구성되어있다.모양은 가로형1,2,3/ 세로형1,2 ... 로 되어 있음. (일단 A~C유형에서는..)하나씩 만들어보면서 적어놓겠음!전체 메인을 감싸는 ul -> 그
[자격증] 웹디자인 기능사 2 - 기본 세팅 & 이미지 슬라이드
지난 번 게시글에 A-1 구현해보면서, 맛보기(라 쓰고 삽질이라고 읽음)를 해보았다 ㅎ_ㅎ 모든 경우의 수를 똑같이 해보려고 했으나... 시간이 5일밖에 안 남았으니 (D,E유형 제외)속성으로 해보도록 하자... 기본 세팅 실기 시험은 내가 하는 프로젝트나 공부와는
[자격증] 웹디자인 기능사 실기 1 - 감잡기 (A-1)
코드스테이츠가 끝나고 일단 뭐라도 날 통제해야 직성이 풀리는 나는, 예전에 컴퓨터운용그래픽스 기능사만 따 놓고 떨어져버린 실기 시험... 나를 코딩의 길로 이끌어 줬던 웹디자인 기능사를 다시 도전했다. 필기 합격했던 건 기간이 끝나서 필기 시험을 저번달에 치렀는데,
[CS] Web general
웹 프로토콜은 웹에서 쓰이는 통신규약입니다. 통신규약이라는 것은 쉽게 설명하면, 통신을 할때 내가 이렇게 할게 너는 이렇게 해줘 라고 약속하는 것입니다.HTTP는 하이퍼 텍스트 전송 프로토콜. 서로 다른 시스템들 사이에서 통신(데이터)을 주고받게 해주는 가장 기초적인
Typescript 숙제와 함께 익숙해지기 : part 1
클리닝함수( '1', 2, '3' ) 이렇게 숫자와 문자가 섞인 array를 입력하면 1,2,3 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어오고 타입지정내가 처음에 만들었던 함수는 이랬다.근데 클리닝배열 변수를 숫자만 이루어진 배열로 지정해주고,if문을
감정일기장 만들기 5 - 배포 & 후기
public/index.html✚ <html lang="ko"> en을 ko로 바꿔주지 않으면 번역하기~ 같은 게 나올 수도 있음!index.html 에 있는 title을 찾아 바꾸어준다.렌더링 될 때마다 바꾸어주게 하기 위해 useEffect 사용이걸 필요한 페
감정일기장 만들기 4 - 최적화
최적화에는 직접 코드를 눈으로 하나하나 보고 판단하는 정적인 분석과정이 있고, 프로그램 도구를 이용해 찾아내는 동적 분석이 있다근데 난 아직 바보니까 동적 분석을 이용해보기로 함..ㅎ컴포넌트 탭에서 Highlight updates when components rende
감정일기장 만들기 3 - 오류 수정 & Local Storage
오류 수정 매월의 마지막 날 매 달 마지막 날의 글이 안 써지는 것을 발견했다 > Home.js 이 부분을 수정했어야 했다. 0이 되면, 마지막 날의 자정이 설정이 되는 것. 시/ 분/ 초 까지 영향이 미친다는 것을 잊지 말자! 이렇게 수정해주었더니 잘 나오는
[TIL] Local Storage
로컬스토리지에 아이템을 저장하는데,key는 문자열 "key"value는 10으로 저장하라는 의미.여기서 확인해 볼 수 있다.이렇게 수정을 해보고 다시 브라우저를 열어 보면,방금 저장했던 key와 10은 그대로 남아있고, 지금 추가한 애들도 들어와있다.근데 객체는 \[o
[TIL] useRef
리액트를 사용할 때 DOM 을 직접 선택해야 하는 상황에서 useRef를 이용한다.예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있을 것임.https:
감정일기장 만들기 2 - CRUD 기능 구현 (4) 상세
마지막으로 상세페이지를 구현하는 일만 남았다비교적 쉬울 거 같다고 생각하며 시작..!일단 diary.js 에서도 할일이 있다.현재 조회하고자 하는 일기 데이터를 가져와야 함.Edit에서 했던 것처럼 path variable로 받은 일기 id를 가지고DiaryStateC
감정일기장 만들기 2 - CRUD 기능 구현 (3) 수정
먼저 현재 일기의 데이터를 가져올 수 있게 해야함.일단 App.js에서 라우트 설정을 해준다. (:id)useParams를 이용해서 id값을 받아오고,App.js 에서 useContext에 담아뒀던 다이어리 리스트를 불러온다Edit잘 불러와졌는지 확인!diaryList
감정일기장 만들기 2 - CRUD 기능 구현 (2) 작성
NEW 일단 헤더에서는 왼쪽 버튼으로 뒤로가기 하나, 오늘 날짜를 적는 섹션, 감정을 선택하는 섹션, 글을 적는 섹션 그리고 전송하는 버튼들로 나누어 본다 > New.js Header import 해오는 거나 navigate 지정하는 건 생략하도록 한다.ㅎㅎ 내