TIL
[TIL] #30. Optimization
2022.8.4. (목) 1. 오늘의 소감 오늘 학습 콘텐츠는 정말 유익하고 꼭 필요했던 내용이었다! 아직 프로젝트 빌드도 몇번 안 해본 입장에서 최적화를 맞이하기엔 좀 이른가? 싶긴하지만ㅋㅋㅋㅋ 그래도 코드를 짤 때부터 최적화를 염두해두고 보다 효율적인 방법으로 코딩하면 빌드시 수정사항이 많이 안 생길 것 같다. 그리고 오늘 배운 picture 태그나, Lighthouse 성능 분석이 정말 유용해보여서 빨리 내 프로젝트에 적용해보고 싶다…! script 태그를 넣을 때 body 하단에 넣을 경우 defer를 넣을 경우, async 넣을 경우의 차이에 대해서 알았다! 나는 body 하단에 넣는 경우나, defer 속성을 넣는 경우가 똑같이 동작한다고 생각했었는데 아니었다. 동작방식은 defer가 더 효율..
[TIL] #29. TDD : 테스트 하면서 개발하기
2022.8.4. (목) 1. 오늘의 소감 오늘 진도는 TDD~! 과제 때 매일 봐오던 test 케이스들을 직접 작성해보는 시간이었다. 오늘 과제는 진짜 재밌었다!! 처음에는 굳이 번거롭게 test 작성까지 해가며 코딩을 해야할까 싶었는데, 신기하게도 test 를 작성해보면서 잡는 버그들도 꽤 되고, 내가 만들어둔 test 를 통과할 때의 쾌감이 있다! 초록불빛의 PASS… 중독적이야…. 사실 코딩 중간중간 console.log 를 찍어보는 것도 일종의 TDD라고 할 수 있다. 하지만 매번 찍어보고 지우는 게 번거롭기도하고, console.log 찍어논 뒤 지우는 걸 까먹고 빌드하면 나중에 곤란해지기도 한다… 이제 콘솔만 찍어보는 것에서 졸업하고 test 파일 작성해서 체계적으로 관리해보자. 이 편이 더..
[TIL] #28. graphQL
2022.8.2. (화) 1. 오늘의 소감 못했네~ 못했네~ 오늘도 과제를 못 풀고 실시간 세션을 들으러 가네~~ 확실히 graphQL 이 더 작성이 편하고 직관적이고 유연하게 사용하기 좋아보인다. 하지만 현업에서는 아직 fetch 와 axios 를 더 많이 쓴다고 한다🥲. 나중에 실무에서 graphQL이 도입될 때 헤매지 않을 정도로 익혀두어야 겠다…!! 2. 학습한 키워드 그래프, 트리, GraphQL vs REST API, GraphQL 장단점, 오퍼레이션 타입, query, mutation, subscription, 필드, 전달인자, 별명, 쿼리 변수, 스키마/타입, !, 리졸버 3. 키워드를 바탕으로 학습 내용 설명해보기 GraphQL의 개념 GraphQL 은 페이스북에서 개발한 API용 쿼리 ..
[TIL] #27. 커스텀 컴포넌트
2022.6.30. (목) 1. 오늘의 소감 BEM 같은 CSS 방법론과 SASS 같은 CSS 전처리기에 대해서는 들어봤지만, CSS-in-JS 에 대해서는 처음 접했다. CSS-in-JS 의 발상은 정말 획기적이다. 기존에 내가 가지고 있던 리액트의 불편함과 의문점을 시원하게 해결해준 아이디어였달까. 역시 내가 불편하다고 생각한 것은 이미 누가 해결해놓은 경우가 많구먼… 기존 리액트는 JSX 문법을 사용하면서 HTML 와 JS 를 하나의 파일에서 처리할 수 있었다. 하지만 CSS는? CSS는 결국 따로 파일을 만들 수 밖에 없다. 스타일을 적용하려면 JSX 문서와 CSS 문서를 왔다갔다하며 클래스명을 확인해야했다. 따라서 직관적으로 ‘이 컴포넌트는 이런 스타일이 들어갔구나!’ 하고 파악하기가 힘들다. ..
[TIL] #26. 피그마 마무리 & 피그잼으로 UI / UX 분석
2022.4.26. (화) 1. 오늘의 소감 ✌️백준 솔브닥(solved.ac) 에서 실버를 땄다!🥈 6월 4일, 처음 백준 세팅하고 문제 풀이 시작할 때가 엊그제같은데 이제 매일 백준을 풀고 깃헙에 올리는 게 제법 익숙해졌다. 백준 덕분에 깃헙 잔디도 순조롭게 심어지고 있고😁! 물론 아직 초반의 난이도가 낮은 문제 위주로 풀긴 했지만;; 그래도 코딩 테스트에 조금은 자신이 붙었다! 피그잼은 피그마가 제공하는 협업용 화이트보드 툴이다. UI / UX 분석을 위해 사용해봤는데 진짜 사용하기 편하고, User Flow 도 간단하게 만들 수 있어서 좋았다. 무엇보다 피그잼 UI 가 너무 깔끔하고 쓰고 싶게 생겼다! 이 모든 기능을 무료로 제공하는 피그마 팀에게 압도적 감사를… 👉 페어님과 같이 만든 피그잼 U..
[TIL] #25. 피그마로 디자인 & 프로토타이핑
2022.6.28. (화) 1. 오늘의 소감 Figma! 정말 좋다! 이전에 포토샵, 일러스트레이터, 어도비XD 같은 그래픽툴을 사용해본 적은 있지만 ‘편하다'고 느끼기엔 무리가 있었다. 하지만 피그마는 정말 편하고 직관적으로 잘 만들어졌다는 게 느껴졌다. UI 배치도 사용자가 어떻게 하면 편하게 쓸 수 있는지 생각한 게 보였고, 메뉴 분류가 잘 되어있어서 필요한 기능을 직관적으로 찾을 수 있었다. 새삼 이래서 UI / UX 가 중요한 거구나 싶을 정도. 물론 내가 이전에 그래픽툴을 다뤘던 경험이 있어서 더 편한 걸 수도 있지만, 툴을 배운지 하루도 안되서 툴에 적응한 적은 처음이다! 역시 피그마가 2021년 기준 UI 디자인과 프로토타이핑 툴 분야에서 1등한 이유가 있다… 사용자들의 눈은 정확하다! 오..