개발일기

[TIL] 결국 쓰러졌습니다

🏃🏻‍♂️숙련 주차 시작 이번 주차 목표는 다음과 같다. 1. redux로 상태 관리하기 2. styled-components로 css-in-js 적용하기 3. react-router-dom으로 router 구현 저번 주차에 만들었던 투두 리스트에 추가 기능들을 구현하면 된다. 위 목표에 대한 추가 기능은 다음과 같다. 1. todos 데이터들은 redux를 이용해 전역 상태로 관리하기 2. css 파일들은 styled-components 라이브러리로 대체하기 3. 투두 디테일 페이지를 react-router-dom으로 구현하기 📮상태 관리 시작하기 시작하기 전에 좋은 자료들부터 공유해본다. [기억보다 기록을 기술 블로그] react-redux 사용법, redux, react, react16, state..

[TIL] 하루가 너무 짧다구요

🥽리액트 입문 주차 시험 🔍시험 문제 살펴보기 1. 레이아웃과 기능은 화면에 보이는대로 2. App.jsx와 App.css 파일만 이용하기 3. 배포하기 레이아웃는 특별할 건 없으니 넘어가고 기능은 이번 주차 개인 과제로 나왔던 것 보다 기능이 훨씬 더 적었다. 할 일 추가하기 기능만 구현해주면 된다. 🎞배포하기 배포는 확인할 수만 있도록 하면 어떻게 배포하던 상관없다. 항해에서는 vercel을 이용하도록 하는 것 같았는데, 나는 vercel 들어가기도 귀찮고 gh-pages가 손에 익어서 gh-pages를 이용해서 배포했다. [React] gh-pages 배포하기 👀gh-pages란? github는 계정당 하나씩 배포용 도메인을 사용가능하도록 지원하고 있습니다. 이렇게 {username}.github...

[TIL] 투두리스트 마무리

🔮투두리스트 마무리 Event handler naming 코드를 보는데 모두 다 제각각인 핸들러의 이름을 보고 갑자기 핸들러 이름짓는 표준 정도는 존재하지 않을까 찾아봤다. 이 정도만 알아둬도 충분할 것 같다. 1. props의 경우에는 onClick처럼 on*의 접두사를 지정한다. 2. function의 경우에는 on*을 handle*로 변경하여 handleClick과 같이 사용한다. [번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react) 이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 ..

[TIL] 한번만 쓰고 버린다구요?

🔨투 두 리스트 제작하기 🖼Find CSS reference 버튼이나 인풋같은 컴포넌트를 styled-components를 이용해서 재사용가능하도록 공을 많이 들여서 설계했다. 그러기 위해서 일단 레퍼런스를 참고해서 최대한 깔끔하게 만들려고 했다. Input field explanation ... codepen.io Input Focus & Placeholder Effects with CSS3 Input Focus & Placeholder Effects with CSS3 Ported from http://goo.gl/vnCbPQ... codepen.io Top bar that hides and shows with scroll like android A web implementation of a top b..

[TIL] 졌잘싸

🤼‍♀️언어스터디 객체 챕터 객체란? 객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다. 자바스크립트에서는 이름과 값으로 구성된 속성을 가지는 기본 데이터 타입을 말한다. 자바스크립트에서의 객체는? typeof([]) > "object" typeof({}) > "object" // 함수는 객체의 특성을 가지고 있지만 typeof로는 function을 출력함. typeof(function(){}) 'function' 자바스크립트에서는 원시 값을 제외한 나머지 값(함수, 배열 정규표현식)은 모두 객체이다. 자바스크립트를 구성하는 거의 모든 것이 객체라고 생각하면 된다. 자바스크립트는 객체 기반의 프로그래밍 언어라고 할 수 있다. 객체 구조 살펴보기 var counter = { n..

[TIL] 성불하게 해주세요

투 두 리스트 프로젝트 레퍼런스 정리 to do list designs https://www.figma.com/file/cJQVBTDf5mKwXQaIxzP3Uy/To-Do-List-App-UI-(Community)?node-id=5%3A17&t=Q9m6JbOv3t49ryHZ-0 Figma Created with Figma www.figma.com ToDo List Inspiration ToDo List Inspiration via Muzli medium.muz.li vitest vite 전용 테스팅 툴 vitest 영어 글, 번역 글 Common mistakes with React Testing Library Common mistakes with React Testing Library Some mista..

[TIL] 비트 주세요

🖼HTML 태그 익히기 이 간단한 html 태그 작성하는데 깔끔하게 만들어보려다보니 생각보다 오래 걸렸다. 선택과 집중으로 css는 적용하지 않고 요구사항만 완성하고 바로 nelify에 배포해서 제출했다. html은 이 사이트에서 공부했는데 html, css 관련 문서가 정리가 너무 잘되어 있어서 html 태그에 대해서 다시 제대로 공부해보는 계기가 됐다. UXKM html, css, javascript, accessibility, ncs 등의 강의를 목적으로 제작 uxkm.io netlify가 사용자가 세팅할 일도 별것 없이 폴더를 드래그 앤 드랍만 하면 자동으로 배포가 되어서 정말 편한 서비스라는 생각이 들었다. 사용량이 높지 않을 때 서비스 검증단계에서 써볼 만 하겠다 🪂리액트 시작하기 그냥 cra..

[TIL] 인생은 시험의 연속이다.

🧾알고리즘 테스트 1. 윷놀이 우리나라 고유의 윷놀이는 네 개의 윷짝을 던져서 배(0)와 등(1)이 나오는 숫자를 세어 도, 개, 걸, 윷, 모를 결정합니다. 네 개 윷짝을 던져서 나온 각 윷짝의 배 혹은 등 정보가 주어질 때 도(배 1개, 등 3개), 개(배 2개, 등 2개), 걸(배 3개, 등 1개), 윷(배 4개), 모(등 4개) 중 어떤 것인지를 결정하는 프로그램을 작성하세요. chechin result [0, 1, 0, 1] 개 [1, 1, 1, 0] 도 [0, 0, 1, 1] 개 [0, 1, 0, 0] 걸 function solution(arr1) { let answer= ""; let bae = 0; for(i in arr1){ if(arr1[i] === 0){ bae++; } } switc..