\(@^0^@)/

이번 과제는 next.js와 typescript를 사용해서 해당 사이트의 메인 화면을 클론 코딩하는 것. ✨ 과제를 하면서 아쉬웠던 부분들은 구현한 사이트에서 아쉬웠던 부분은 개발자 도구로 해당 사이트의 스타일을 참고하였는데, 시멘틱 태그들을 쓰지 않고, div로 모두 스타일을 적용했던 것들이 조금 아쉬웠다. 나 또한 늘 div만을 써오다가 최근에는 시멘틱 태그의 중요성을 알게 되어, 시멘틱 태그를 적용하자 마음을 먹고 조금씩 천천히 적용하고, 적응을 하려고 노력하고 있는 상태여서 그런지 이러한 점들이 조금 눈에 보이니까 나도 발전하고 있구나!라는 생각이 들어서 나름 기분이 좋았다 :) styled component, global css활용 부족 스타 일드 컴포넌트, 글로벌 css를 사용하였는데 이번 과..

옵션 파라미터 // 둘은 동일한 표현 // | undefined 를 ? 로 대체할 수 있다. name : string | undefined name ? : string 타입 extend // 타입 변수를 생성할땐 맨앞의 문자를 대문자로 하고, // 구분하기 쉽게 뒤에 type을 붙여주면 좋다. type OrangeType = string; type PriceType = number; type OrangePriceType = OrangeType | PriceType;​ // & 연산자로 object를 extend 할 수도 있음.​ // 하지만 같은 이름의 type 변수를 재정의 할 수는 없음. type ScrollX = {x : number] ; type ScrollY = {y : number] ; typ..

💥Typescript 쓰는 이유 JS는 Dynamic typing을 지원하는 언어로, 타입에 대해 관대하다. 하지만 Dynamic typing은 조그마한 사이즈의 프로젝트라면 편리하지만, 큰 프로젝트를 할 때에는 단점이 될 수 있음. type과 관련된 버그들이 많이 발생하기 때문. ✍ 일반 HTML CSS JS 웹 개발 시 TS를 사용하려면 Node.js 최신 버전, Vscode 에디터를 설치 Vscode 에디터 터미널에 명령어 입력 npm install -g typescript​ 작업 폴더 생성하여 오픈 작업 폴더에. ts로 끝나는 파일을 만들면 끝! ts파일은 js랑 똑같이 사용 가능하지만, 웹브라우저는 ts 파일을 읽지 못하기에, js파일로 변환 작업을 해야 함. js파일로 변환하려면 터미널을 열어..

✨ 삼항 연산자는 만능이 아니다 중첩 삼항 연산자는 파악이 힘듦. 삼항 연산자의 요소가 길어질 때는 &&도 되지 않을까 한번 더 생각하자. 삼항 연산자가 false일때 null 이면 항상 &&연산자를 생각해보거나, 어쩌면 조건부 렌더링조차 필요 없을 수도 있다. 출처 : 프리온보딩 세션 🔑 useState 과도하게 사용하지 않기 1. state가 props를 통해 부모로부터 전달된다면 2. 시간이 지나도 변하지 않는다면 3. 컴포넌트의 다른 state 또는 props를 기반으로 계산할 수 있다면 state가 아니다. 참고 : https://www.zigae.com/useState-dont-over/ 📷 useMemo useMemo는 함수의 값을 pass useMemo를 자식 컴포넌트에 props로 넘겨서..

두 번째 과제는 주어진 사이트의 관리자용 상품 페이지를 제작하는 것. 아무래도 페이지를 제작하는 것이다 보니, 해야 될 마크업이 상당해서 2일로는 벅찬 과제였다ㅠ.ㅠ 회고 순서는 1. 이번 과제를 통해 새로 알게 된 기능들과 코드를 정리하고 2. 개인적으로 리팩터링 하고 싶은 부분들과 리팩터링 후 새로 알게 된 기술들 💎 작업을 위해 고려했던 사항들 1. mui 달력 라이브러리 사용 2. 카테고리 리스팅 ( 체크박스를 선택 시 오른쪽에 선택된 카테고리만 따로 리스팅 됨) 3. 이미지 업로드 (1, 업로드 시 이미지 프리뷰 2. 업로드 시 이미지 타이틀들을 보여 줌) 4. 필터 태그 검색 ( 검색창 포커스 시 모든 필터태그 제공, 검색 시 검색 결과 제공) 1. mui 달력 라이브러리 사용 Material..

두번째 과제에서 MUI의 달력 라이브러리를 사용하면서 style을 주려했는데, 인라인 css로 스타일을 적용해봤지만 적용이 되지 않아서 이리저리 찾아보다가 발견한 mui에서 style을 적용하는 법을 메모해두려함 1. 왼쪽의 빨간네모박스의 @emotion/styled 와 material-ui 를 설치 2. 컴포넌트에서 makeStyles를 import 3. 해당 mui 컴포넌트 코드 밖에서 makeStyles 함수를 생성하여 그 안에 적용할 스타일들을 작성하고 4. classes라는 변수로 그 함수를 컴포넌트 안으로 불러온다. 5. 스타일을 적용하고 싶은 섹션에 넣어주면 끝! MUI : https://mui.com/components/date-range-picker/ 참고 : https://github...

1.5일 동안 api로 환율 정보를 받아와서 환율 계산기를 만드는 첫 팀플 과제를 끝마쳤다. 앞으로 한달 간 같이 할 팀원들과 처음 오프라인으로 만나서 2:2 페어 코딩을 하였는데, 같은 꿈을 목표로 하는 분들이라 그런지 처음 만났는데도 전혀 어색하지 않아서 너무 재밌었고 색다른 경험~ 코시국만 아니었으면 더 많은 분들과 오프라인으로 많은 정보를 공유했을텐데.. 아쉬운 마음이 크다. 회고 순서는 1. 새로 알게 된 기술들과 구현한 코드들을 정리하고 2. styled-components를 적용한 이유와 장단점, 3. 과제의 api를 사용하여 netlify에 배포하였을 때 발생한 트러블 슈팅 💎 작업을 위해 고려했던 사항들 1. 받아온 API 키는 암호화를 위해 .env폴더에 따로 보관해서 사용. 2. 셀렉..

[ 클린 코드 DAY 3 ] 오늘 읽은 범위 : 2장. 의미 있는 이름 (p. 21 ~) 의미 있는 이름을 짓기 위해서는 의도를 분명히 밝혀라 주석이 필요하다면 의도를 분명히 드러내지 못했다는 말이다. 그릇된 정보를 피하라 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용하지 말아라. ex) hp, aix, sco 의미 있게 구분하라 연속적인 숫자를 덧분인 이름(a1, a2, a3...)은 의도적인 이름과 정반대. Info나 Data는 a, an, the와 마찬가지로 의미가 불분명한 불용어. 발음하기 쉬운 이름을 사용하라 검색하기 쉬운 이름을 사용하라 인코딩을 피하라 자신의 기억력을 자랑하지 마라 전문가 프로그래머는 명료함이 최고 기발한 이름을 피하라 재미난 이름보다 명료한 이름을 선택하라 한 ..

[ 클린 코드 DAY 2 ] 오늘 읽은 범위 : 1장 깨끗한 코드 (p. 01 ~) 앞으로도 코드가 사라질 가망은 전혀 없다. 어느 수준에 이르면 코드의 도움 없이 요구사항을 상세하게 표현하기란 불가능하다. 추상화도 불가능하다. 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업이 프로그래밍이며, 그 결과가 바로 코드이다. 나쁜 코드는 개발 속도를 크게 떨어뜨리며, 나쁜 코드가 쌓일수록 팀 생산성은 떨어진다. 기한을 맞추는 유일한 방법은, 언제나 코드를 최대한 깨끗하게 유지하는 습관. 깨끗한 코드를 작성하려면 '청결'이라는 힘겹게 습득한 감각을 활용해 자잘한 기법들을 적용하는 절제와 규율이 필요하다. '코드 감각'이 있으면 좋은 코드와 나쁜 코드를 구분한다. 깨끗한 ..

최근에 딥 다이브를 읽었었는데 초반에는 읽을만했는데, 뒤로 갈수록 아직 나에겐 너무 어려워서 이해를 못 하겠더라 그러다 보니 계속 안 읽게 되어서 우선 딥한건 좀 접어두고, 먼저 핵심 개념을 파악하고 이해하기 위해 코어 자바스크립트를 구매하였다. 그리고 노마드코더의 개발 북클럽이 오늘부터 시작되어서, 클린 코드를 읽을 계기가 생겼다! 근데 클린 코드도 어려울 거 같은 느낌적 느낌이지만 클럽원들과 차근차근 스케줄표대로 뒤처지지 말고 따라가 보자! [ 클린 코드 DAY 1 ] 오늘 읽은 범위 : 추천사 & 들어가면서 (xxii ~) 소프트웨어 개발에서 아키텍처는 중요하다. 세세함에 주의를 기울이고, 깨끗한 코드를 작성해야 하는 이유 1. 큰 실무에서 실력을 쌓고 신뢰를 얻으..