뭘 배웠지?

일지 2022년 6월 3주차 이번 주 스케쥴 1. 기존 프로젝트 => 타입스크립트 변환 🔺 2. 개발자가 되기까지 여정 정리 ✅ 취직 🥳 혼자 개발을 하다가 이제는 한 기업의 프론트엔드 개발자가 되었습니다. 채용 절차를 진행하며 팀원들을 만나며 좋은 인상을 받아서, 2주뒤에 시작될 동행이 기대가 됩니다 무엇보다 개발자로써 성장할 수 있는 곳이라고 생각되네요. 개발을 시작하고 조금 정신없이 살아온 것 같은데, 약 2주 정도 출근 전까지는 조금 쉬엄쉬엄 가려고 합니다. 아무것도 안하는 것은 심심하니, 개발과 관련해서 뭐를 해왔는지 돌아보고, 기업에서 제 몫을 하기 위한 스택 점검도 해보려고 합니다. 정리 완료 https://forgottenknowledge.tistory.com/entry/프론트엔드-신입-개..

일지 2022년 6월 2주차 이번주 할 일 저번주에 써 놓은 것 외에도 이것저것 한 5가지 동시에 진행되었다. 그러다 보니 써놓은 것 조금 놓쳤다. 이번주는 좀 더 현실적으로 1. 알고리즘 마무리 정리 2. 데이터베이스 마무리 정리 3. 리액트 + 타입스크립트 프로젝트 진행 아쉽지만 이번주도 web3는 쉬어가기 소중한 피드백 혼자 프로젝트를 진행하면 피드백을 받을 곳이 없다. 그래서 이렇게 피드백을 받으면 굉장히 소중하다. 저번주에 Vanila JavaScript로 리액트 마냥 SPA를 만든 것에 대한 피드백이다. 소중한 피드백 리스트 매직넘버 html lang 설정 div가 아닌 의미에 맞는 태그 사용 필요없는 변수 정리 Throttle 대신 IntersectionObserver 사용 DOM 그리기 선..

TypeScript Documentation Everyday Types 보고 배운 내용 타입 달기 변수 (Variable) 왼쪽이 아니라 항상 오른쪽에 타입을 달아줍니다. let myName: string = "HeJ"; 사실 이렇게 명백한 곳에는 타입 달아줄 필요가 없습나다. TypeScript가 알아서 추론(infer)한다고 합니다. 배열 (Array) 배열을 나타낼 때 다음 둘은 같습니다. number[] Array // T 이런 형태는 '제너릭'이라고 하는데 뒤에 조금 더 자세히 알아봅니다. 함수 (Function) 인풋과 아웃풋 양쪽에 타입을 달 수 있습니다. 인풋에 타입 달기 function greet(name: string) { console.log("Hello, " + name.toUppe..

일지 2022년 6월 1주차 이번주 할 일 저번주에 이어서 학습하는 주간이다. 이번주 키워드는 React, TypeScript, Solidity 등 1. 자바스크립트 및 프론트엔드 지식 강화 ✅ 2. 리액트 + 타입스크립트 프로젝트(타입스크립트와 조금 친해지기) ✅ 3. Web3 2주차 Kudo 확인 & 3주차 엿보기 이번주도 한 주만큼 성장하자! 강의 정리 이번주는 3개월간 들은 강의를 마무리하며 배운 내용을 정리해봤다. 프로그래밍에 도움이 될 것 같아 선택한 이산수학의 중점을 정리했고, 세계와 음식이 좋아 선택한 세계의 음식, 음식의 세계도 정리했다. 자바스크립트로 리액트처럼 7일간 쌩자바스크립트(바닐라)를 마치 리액트처럼 작동하도록 구성했다. 리액트처럼 구성했다는 말은 리액트 라이브러리 설치없이, ..

일지 2022년 5월 4주차 이번주 할 일 이번주는 만들기보다는 학습하는 주간이 될 것 같다. 알고리즘, JavaScript, React 강화 등 1. 저번주에 이어 알고리즘 학습(SQL 포함) ✅ 2. Web3 2주차 Kudo 확인 & 3주차 엿보기 ⬜️ 3. 인터넷과 정보사회 과제: 메타버스에 대해 6000자 ✅ 4. JavaScript, React 지식 & 활용 강화 ✅ 아마도 학습 주간이 한 3주간 계속 될 것 같다. 게으르지 않게 잘 보내자! 자바스크립트 함수는 1급 객체(feat. 시민권자) 자바스크립트의 함수를 '1급 객체(First class citizen)'라고 부릅니다. 'First class citizen'은 '1급 시민'으로 번역될 수 있을 것 같습니다. 'Second class c..

Refactoring React Code: Overview를 보고 배운점 최근에 작업한 프로젝트 Affitalink(Github)를 리팩토링 하기로 마음먹고, 다른 사람들은 어떻게 리팩토링 하는지 찾아보다가 좋은 글을 발견했다. 정리(TLDR;) 1. 코드 포맷팅을 하자 2. 쓸모없는 제거 3. 이름 생각하기 4. 반복 그만(DRY: Don't Repeat Yourself) 5. 함수형 컴포넌트 O / 클래스 컴포넌트 X 6. 화살표 함수는 렌더 밖으로 7. 번들을 작게 만들자 이상적인 리팩토링은 리팩토링이 일어나지 않는 것이라고 한다. 좋은 코드를 작성해서 버그와 이슈 가능성을 줄이자. 정기적인 코드 리뷰가 도움이 될 듯 싶다! Technical Debt가 뭐지? '기술적인 부채'라고 번역되고 있다. ..

일지 2022년 5월 3주차 Affitalink 배포, 반응형 완료 Vercel로 배포하니 엄청 빠르다! 도메인도 구매했고 조금 마음에 걸리던 반응형도 진행했다. 반응형 역시 Chakra UI로 진행했는데, 살짝 SCSS 문법이 생각난다. 모바일에도 왼쪽에 고정바를 나두는 디자인을 도전했는데, 생각보다 피드백들이 괜찮아서 만족! Affitalink 유저는 보통 PC나 노트북을 통해 사용할 것으로 예상되고, 모바일로도 정보를 확인하는 용도가 전부이기 때문에 이렇게 결정했다. Web3 챌린지 2주차 진행 크리에이터를 돕는 사이트 Buy Me A Coffee를 DApp으로 만드는 도전이다. 만들면서 Solidity의 기본을 깨우치자. 기본 문법 포스트 https://forgottenknowledge.tisto..

스마트 컨트랙트 만들면서 배운 내용 Solidity 기본사항 Solidity에서 세미콜론 없으면 오류 객체지향 프로그래밍 언어(OOP) 분해해서 보기전 전체 코드 😓 Buy Me a Coffee를 블록체인위에 만드는 간단한 스마트 컨트랙트 분해하기 전 예시 pragma solidity ^0.8.0; contract BuyMeABubbleTea { event NewMemo( address indexed from, uint256 timestamp, string name, string message ); struct Memo{ address from; uint256 timestamp; string name; string message; } Memo[] memos; address payable owner; co..

일지 2022년 5월 2주차 한 주 시작하기전 정리 요즘 관심사를 하나, 둘 추가하다 조금 늘어난 듯 싶어서 정리를 하는 시간을 가져야겠다 Next.js, React 프로젝트 마무리 작업중 - 개발은 막바지 - 포트폴리오, 깃헙, 프로덕트 헌트에 넣을 글들 정리 방송통신대학교 강의 듣고 정리 - 인터넷과 정보사회 - 글로벌 스타트업 마케팅(블로그 O) - 이산 수학(블로그 O) - 알고리즘 - 데이터베이스(블로그 O) - 음식의 세계, 세계의 음식 SEO 강의 결제 - 강의 내용 정리 - 강의를 토대로 기존 사이트 개선 WEB3 10주 챌린지 - 한 주마다 착실히 진행 지금 생각나는 개발 관련 사항은 이 정도로 보인다. 프로젝트는 막바지고(계속 업데이트 or 새로 진행하겠지만), 방통대는 한 달내로 방학..

Web3 / 웹3 10주 챌린지에서 배운 내용 Web3 10주 챌린지 시작!! 첫 주의 키워드 Solidity, 스마트 계약서(Smart contract), 테스트넷(testnets) 이번 차시에서 할 내용 OpenZeppelin 과 Remix IDE 사용해서 스마트 계약서 작성 rinkebyfaucet.com 이용해서 무료 Rinkeby ETH 받기 이더리움 테스트넷 블록체인에 배포해서 가스비 안쓰기 Filebase 사용해서 IPFS에 NFT 토큰 호스트(host)하기 NFT 민트하고 OpenSea에서 확인하기 우선 용어부터 알아보자 스마트 계약서(Smart Contract) 노드(서버)의 탈중앙 네트워크에서 돌아가는 소프트웨어의 부분 작성된 코드에 따라 트랜잭션이 이루어진다 스마트 계약서 작성시 필요..