자기계발 캠퍼스

Pomodoro는 25분 집중하고 5분 쉬고를 반복하는 시간 관리 방법론이다. 즉, 기본적으로 타이머 앱이다. Pomodoro는 기능은 이렇다. 1. 25분이 기본적으로 설정되어있어야함 2. 시작 버튼을 누르면 타이머 시작되면서 시간 줄어듦 3. 25분이 다 지나가면 Pomodoro 횟수 증가 -옵션 - 타이머 일시정지 기능 - 리셋 기능 폴더 구조 main에 ThemeData를 넣어주고 screens 폴더에서 출력될 화면 관리 메인 파일 ThemeData에는 backgroundColor, textTheme, cardColor를 선언해줬다. 각각 색깔만 넣어준 정도 홈스크린 파일 Scaffold 안에 들어있는 파일은 이렇다. 먼저 큰 틀은 Flexible을 활용해 1 : 3 : 1로 화면을 나눈다. 타이..

플러터를 배우기 위해 새롭게 배우기 시작한 Dart 플러터는 Dart를 활용한 프레임워크이기에 기본적으로 Dart라는 언어에 대한 지식은 있어야 한다. JS를 계속 썼던 사람은 (ex 나) 아마 Dart라는 언어에 대해서 되게 빡빡하다고 느낄 수 있을 것 같다. 그럼에도 TS랑 비슷한 결이 있다고 하니 배워보면 좋은 언어인 듯. Dart의 타입을 살펴보기 전에 가장 기본적으로 Dart는 main이라는 함수에 넣어주어야 실행된다. 이제 Dart의 다양한 변수들을 보자. 1. int, String 익숙하다. 우리가 아는 int, String 맞다. 이런 식으로 정수형과 문자열의 변수를 선언해줄때 사용한다. 2. var JS를 했던 사람이라면 var에 대해서 모를 수가 없다. 그런데 그 결이 조금 다르다. v..

- HTML 글씨가 넣을 부분만 세팅하고 그 외에는 아무것도 없다. - CSS 내리는 눈 을 만드는 CSS 파일이다. border-raidus로 둥글게 만들어준 다음 position은 absolute로 선언해준다. fall이라는 애니메이션은 맨 위에서부터 맨 아래까지 내려오도록 translateY(100vh)을 선언했고 땅에 닿으면 눈이 안 보이게 opacity도 설정을 해주었다. - JS 이게 눈을 만드는 함수를 JS로 불러온다. 1. 위치 위치를 랜덤으로 설정해주기 위해서 Math.random과 window.screen.width를 사용하였다. 2. 애니메이션 설정 눈이 한 번에 내리지 않고 하나씩 내리게 하기 위해 delay를 랜덤으로 설정했다. opacity도 랜덤으로 설정하여 각기 다른 눈이 내..

CSS에서 뒤에 땡땡 붙여서 쓸 수 있는 가상 요소 중 ::before와 ::after에 대해 알아보자. 사실 말 그대로 직독직해하면 된다. CSS 파일 안에서 이런 식으로 사용하게 되는데 선택한 Element의 앞에 어떤 걸 추가하고 싶으면 ::before 뒤에 어떤 걸 추가하고 싶으면 ::after 이렇게 활용하면 된다. 예를 들어 이런 식이면 태그 뒤에 "이거 무조건 있어야 됨"이라는 글자가 표현된다. 이렇게 content만 넣어주면 부모인 p태그의 css 특성을 그대로 따라가지만 content 뒤에 css 속성을 넣어주어 글자 색깔이나 배경색 등등 따로 적용가능하다. 여기서 중요한 점 이렇게 ::before이나 ::after를 쓰기 위해서 content 속성은 무조건 추가해줘야 된다. conten..

현재 사용하고 있는 기술 스택은 Next.js이다. Tailwind CSS, Styled Component도 쓰는데 스타일링 관련이니깐 잠깐 제끼자. const [menuImage, setMenuImage] = useState(""); { let reader = new FileReader(); if (event.target.files[0]) { reader.readAsDataURL(event.target.files[0]); } reader.onloadend = () => { const resultImage = reader.result; setMenuImage(resultImage); }; }} /> 먼저 사진을 받아오기 위한 부분이다. https://developer.mozilla.org/ko/docs/..

React의 상태 관리 라이브러리인 Recoil을 알아보자. 먼저 Atom에 관한 공식문서 내용을 꼭 읽어보자. https://recoiljs.org/ko/docs/basic-tutorial/atoms Atoms | Recoil Atoms는 애플리케이션 상태의 source of truth를 갖는다. todo 리스트에서 source of truth는 todo 아이템을 나타내는 객체로 이루어진 배열이 될 것이다. recoiljs.org const todoListState = atom({ key: 'todoListState', default: [], }); const fontSizeState = atom({ key: 'fontSizeState', default: 14, }); Recoil에서 Atom은 이런 ..

먼저 장바구니에서 구현하고자 하는 기능은 이렇다. - 아이템 항목에서 추가 기능 - 장바구니에서 아이템 수량 조절 - 장바구니 토글 - 장바구니 실시간 저장 + 불러오기 아이템 항목에서 추가 기능 const cartSlice = createSlice({ name: "cart", initialState: { item: [], totalQuantity: 0, cartChange: false }, reducers: { addCartItem: (state, action) => { const newItem = action.payload; const existingItem = state.item.find((item) => item.id === newItem.id); if (!existingItem) { state...

먼저 Redux의 개념은 이러함. React에서는 state라는 존재. 말 그대로 어떠한 상태. 그 상태를 조작하기 위해 훅을 사용했음. 그런데 그 state를 선언한 컴포넌트 외에 다른 곳에서도 쓰고 싶음. 그럴려면 props를 활용해서 넘겨주면 됐음. 여기서 문제 상황. 만약 자식 컴포넌트가 100개라면? 일일이 props로 다 넘겨주다가 손가락 나갈 듯. 그래서 react에는 context라는 개념을 활용해서 useContext라는 훅을 활용해 props로 넘겨주지 않고 state를 관리할 수 있는 방법을 만듦. 근데 이게 개복잡. 더 편한 방식이 바로 redux다. 원리는 조작할 변수나 함수를 다른 곳에 저장 후 내가 필요할 때마다 거기서 꺼내쓰는 방식이다. 비유하자면 어떤 동화를 입을 통해서 넘..

7월 1주차 스프린트 회고 - 미국주식 주가조회 웹사이트 1일차 기획 단계. 1주일동안의 스프린트 주제를 정하는 거다보니 어디까지 해야될지 감도 잘 안 오고 어떤 걸 활용해야 될지도 잘 모르겠었다. 특히 API를 활용하여 웹사이트를 만들려고 컨셉을 selfdevelopcampus.tistory.com 이번 달 초에 했던 토이 프로젝트에서 티커를 입력하면 주가를 조회할 수 있는 웹사이트를 만듦. 2주에 걸쳐 추가할 수 있는 부분이 뭐가 있을까 고민했고 업데이트를 완료했다. 먼저 업데이트 사항으로는 - 입력값 유효성 검사 - 데이터 로드와 렌더링 사이의 시간 틈 제거 - SNS 공유 기능 추가 - not found page - loading spinner 추가 입력값 유효성 검사 먼저 유효성 검사를 하기 전..

React를 활용해서 Form을 만들어본다. 간단하게 이름과 이메일을 받아서 submit하는 form이다. 체크할 부분 -이름 빈칸인지 아닌지 확인 -이메일은 @가 들어갔는 확인 -클릭하고 넘어갈 때도 이름과 이메일 조건 맞는지 확인 import useValidate from "../hooks/use-validate"; 먼저 useValidate라는 custom hook을 만들어준다. return { inputValue, onChangeHandler, onBlurHandler, isValid, className, reset, }; 이 훅에 포함될 것은 위와 같다.. onBlur이 뭐냐면 처음에 input 박스 클릭하면 focus가 되는데 이 focus가 풀리면 Blur라고 한다. input 입력하다가 다..