앨범을 털기
음식 사진이 99% 예상되는 앨범털기 아까 분리수거할 걸 아까 화장실 청소할 걸 아까 샤워할 걸 아까 밥먹을 걸 아놔 무려 7월 사진인듯 한데 판교와서 설렌 과거의 나 처음엔 점심도 찍었다 췌장이 극혐 은숙이모랑 외곽에 있는 카페 놀러간 날 출근한지 얼마 안돼서 피자 먹으면서 좀 심란했었는데... 그래도 피자는 안남겼다 집들어가기 아쉬워서 파충류 카페 냄새 OJIM 잘 받아먹기만 해도 환호와 칭찬받는 거북이 좀 부러운데 졸린 알비노 도마뱀님 췌장을 위한 비빔밥 엄빠 올라와서 양질의 단백질 섭취 마포에서 먹었던 감자옹심이 생각나서 근처 옹심이집 찾아갔는데 마포만 못해 판교역 신호등이 은근 힐링스팟이다 마포떡볶이만 못하지만 진짜 마포에 맛집이 많은거였어 (마포 향수병?) 갑자기 마라탕 땡긴 날 주말에 도서관..
[typescript] React와 사용할 때
타입스크립트가 세팅된 리액트 프로젝트 만드는 명령어 npx create-react-app 프로젝트명 --template typescript App.tsx 파일을 열어보면 App 함수(컴포넌트)의 return 값이 JSX이다. 해당 컴포넌트의 타입에는 ' React.FC ' 타입을 주면 된다. (react function component 타입) const App: React.FC = () => { return ( ); }; App : React.FC import React from "react"; import logo from "./logo.svg"; import "./App.css"; import Store from "./Store"; let data = { name: "누나네 식당", category..
[typeScript] 함수 rest 파라미터, destructuring
rest 파라미터 rest 파라미터에도 타입지정이 가능하다. * rest 파라미터란? 함수를 만들었는데 함수 안에 들어올 인자의 갯수가 정해지지 않았을 때 들어온 인자들을 배열로 모아서 처리하는 방법으로 여러 인자들을 배열로 묶어서 사용할 수 있다. ' ... ' 연산자를 사용한다. function 함수(...a) { console.log(a); } 함수(1, 2, 3, 4); 출력해보면 배열에 담겨있다. 그럼 rest 파라미터 타입지정은 어떻게? 항상 배열 [ ] 안에 담겨서 저장되므로 array로 타입지정! function 함수(...a : Number[]) { console.log(a); } 함수(1, 2, 3, 4); * 여기서 헷갈리는 ' ... ' 의 용도.... 1. 함수 안에 쓰면 → re..
[React] React로 간단한 Todo List 만들기(수정중)
구현해야될 부분 1. input으로 사용자가 입력한 값을 받는다. 2. 사용자가 입력한 값을 배열에 객체형태로 저장하고 투두리스트로 출력한다. 3. 삭제, 체크 기능을 구현한다. 그외에 자잘한 기능 버튼 누르면 1. input 창에 포커스 2. input 값 초기화 3. input 값이 비어있으면 배열에 추가하지 않기 useState( ) state로 만들어야 될 부분 - 사용자가 현재 입력한 값 - 사용자가 입력한 값을 저장할 배열 (객체 형태로 저장) const [names, setNames] = useState([ { id: 1, text: "리액트 복습하기", checked: false }, { id: 2, text: "개인 프로젝트 계획 짜기", checked: false }, { id: 3, ..
1. 폼태그 안의 버튼 ( type = "submit" 이 설정된 버튼) 폼 제출을 위해 사용한다. 폼태그 안에 위치하며 폼의 기본 동작을 실행하도록 돕는다. 폼을 제출하면 폼태그에 설정된 ' onSubmit ' 핸들러 함수가 호출된다. 폼의 데이터를 제출하거나 서버로 데이터를 전송할 때 사용된다. const handleClick = () => { e.preventDefault(); //페이지 새로고침 }; return ( Submit ); * 폼태그 내에서 버튼 생성시 버튼에 타입을 생략하면 type="submit"이 자동으로 설정 된다. 폼태그 내에서 일반적인 버튼을 만들고 싶으면 type="button"으로 명시해야됨 2. 일반적인 버튼 ( ' onclick ' 이벤트가 있는 버튼) 폼 제출과는 관..
Spread Operator 괄호를 제거해주는 연산자로 ' ... ' 점 3개만 붙이면 spread operator 문법이다 var arr = ["hello", "world"]; console.log(...arr); // hello world 대괄호가 제거되고 hello world 만 출력된다. var word = "가나다라"; console.log(...word); // 가 나 다 라 문자가 한글자씩 출력된다. spread operator 문법은 array, object 합칠 때, 복사할 때 매우 자주 사용된다. array 합치기 var a = [1, 2, 3]; var b = [1, 4]; var c = [...a, ...b]; console.log(c); // [ 1, 2, 3, 1, 4 ] 두 배..
[typescript] object에 타입 interface 키워드
interface 키워드 타입을 변수에 담아서 쓰고 싶을 때 type 키워드를 사용한다. type 타입변수명 = string; object인 경우는 type 키워드 써도되고 interface 라는 키워드를 써도된다. type Square = {color : string, width : number} let 네모 : Square = {color : 'red', width:100} interface Square { color: string; width: number; } let 네모: Square = { color: "red", width: 100 }; interface 키워드 쓰는 경우 등호 ' = ' 는 필요 없다. class 만드는 문법이랑 비슷하..
고인물 앨범 털기
그동안 코딩 관련 글은 많이 올렸는데 3개월 동안 앨범을 안 털었다. 현실살이 너무 팍팍해서 털 기운도 없어.... 위에 짤은 요즘 내 최애 짤 무려 약 두 달 전 사진 진짜 너무 힘든 기숙사 생활이었는데 이제 보니 너무 추억이다 이제와서요? 지현이랑 아침 먹으면서 점심이야기하고 점심먹으면서 저녁이야기하고 저녁 먹으면서 다음날 점심 이야기했다. 진짜 먹기 위해 살았음.. 취준컴퍼니에 들어가면 무료로 최대 두 달 집무실을 이용할 수 있는데 진짜 뽕을 뺐다 지하철을 줄 서서 타는 게 너무 신기해서 찍은 기억.. 순수했다 기숙사 근처 김가네서 오랜만에 외식한 날 아빠 생신 챙기러 광주 내려갔는데 오자마자 초밥 사달라고 초밥집으로 달려갔다. 진짜 맛있어서 눈물 안 날 뻔 집룰 국룰 케이크 불고 고함량 단백질 섭..