본문 바로가기

study/TIL

 (15)
[TIL No.18]React_Custom_Components 오늘의 TIL은 내가 겪은 시행착오와 함께 지금까지 React 다루면서 한 번은 해봤지만 기억이 나지 않는 부분들과 새롭게 알게된 내용들을 과제진행의 흐름에 따라 서술해보겠다. (CSS를 진짜 잘하시는 페어를 만나서 그냥 듣기만해도 CSS실력이 레벨업해버렸다.. ㅎㄷㄷ 그 내용도 중간중간 나올 것이다.) 오늘의 과제 - React로 custom components 만들기 만들어볼 컴포넌트들의 목록은 다음과 같다. modal toggle tap tag - 오늘 포스팅은 여기까지!! autocomplete click_To_Edit 페어분의 막힘없는 React 활용능력에 힘입어 뇌정지가 거의 없이 과제를 수행했으므로, 아예 새 파일로 다시 구현해보면서 다시 한 번 코드를 뜯어보며 글을 써보고자한다. #1. m..
[TIL No.17] React_CDD, CSS_in_js 본 포스팅은 배우는 초기단계에 적는 것으로써 부정확한 정보가 포함되어 있을 수 있습니다. 제 설명으로 인해 혼란이 야기될 때는 저명한 분의 글이나 공식문서를 참조해주시면 감사하겠습니다. 공부방향에 대해 간략하게 한마디: 여러가지 외부 컨텐츠나 강의를 통해 공부하는 것도 좋지만, 그 중심에 공식문서를 두고 공부하기로 하였다. 특히 React 같이 공식문서 업데이트도 빠르고 배우기 좋게 되어있는 경우에는 더욱 그렇게 할 것이다. 컴포넌트(Component)란? 컴포넌트가 무엇인지 진작에 정리했어야 하는 부분인데 소홀했던 것 같다. 이전에 리엑트 States&props를 배울 때부터 정리를 제대로 하고싶었지만 이해도가 부족하다는 생각에 머뭇거렸는데 간단하게라도 정리하고 점점 React를 자주 다루면서 이해도를..
[TIL No. 16] 피그마(Figma) 클론 Figma 클론을 페어와 함께 진행해보았다. 전날 밤부터 만들자고 했는데 난 블로그 글쓰면서 어떤 기능있는지 살펴보기만 하고 틀은 페어가 다 만들어놨다... 꽤 힘들게.. 이미지를 하나하나 긁어서 정성스럽게 만들었다ㅋㅋㅋㅋ #1. 소스 다운로드 웹페이지 화면을 캡쳐해서 필요한 이미지를 일일히 잘라가며 쓰는 것은 안그래도 피그마로 클론을 만드는 피로도에 엄청난 피로도를 더해줘서 바로 포기하고 싶은 마음이 들 것 같았다. 섹션이 끝날 때도 피그마를 한 번 더 사용해야하기 때문에 재사용성이 높은 방식을 알고싶어서 검색해보다가 크롬 개발자도구를 통해 꽤 많은 이미지를 긁어올 수 있었다. 소스를 뒤적거리다보니 텍스트 파일 확장자중 하나인 woff2 형식의 파일도 얻을 수 있었다. 이 파일을 ttf파일로 변환하여 ..
[TIL No. 15] 피그마(Figma) 클론 준비 Figma를 소개하지도 않고 바로 피그마 클론이라니 정말 뜬금없지만 TIL은 체계적으로 쓰기보단 흐름따라 써보려고 한다. 먼저 내가 가장먼저 클론하고 싶은 페이지는 프라이탁(FREITAG) 공식홈페이지이다. 프라이탁 공식 홈페이지 : https://www.freitag.ch/en 이 홈페이지로 선정한 배경에 대해 잠깐 살펴보면, 제품은 단 한 개밖에 구매하지 않았지만 동일한 디자인으로 만들어지는 제품이 없는만큼 독특한 색과 디자인으로 만들어진 제품을 얻기위해 폰으로 100번도 넘게 접속했던 기억이 있고, 배송을 기다리면서도 10번 이상 접속했던 것 같다..😂 이전에 UI/UX에 대한 개념이 전혀 없을 때에도 사용경험이 나쁘지 않았던 기억이있고... (사실 업사이클링을 하는 기업이라 좋아하는 측면도 있고,..
TIL No.14 재귀함수의 활용 😇넋두리 나 같이 실력이 부족한 사람은 본디 의사코드(suedo-code)를 작성하거나, 그림을 그려서 코드가 어떻게 돌아가는지 충분히 생각해보고 코드를 짤 필요가 있는데... 분명 섹션 2가 끝나고 굉장히 자신감있게 시작한 섹션 3인데 너무나도 처참한 몰골이 되어가고있다...(고작 2일이 지났는데 단단한줄 알았던 내 멘탈이 심각하게 부서져있다..ㅋㅋㅋㅋ) 재귀 파트가 앞에 놓여져있는줄 모르고 기본적인 재귀함수에 대해 알고리즘 책을 보면서 며칠전에 공부한터라 약간 자신감이 있었는데...😂(고작 며칠 먼저 본건데 오만하다 오만해;;) 분명 쉬운문제들은 금방 이해해서 슥슥 풀리는데 위에 말한대로 조금만 체계적으로 풀려고하면 아직 문제해결의 나만의 공식이 제대로 정립되지않아서 우왕좌왕하는 경우가 꽤 많은 것 ..
TIL 2일차(FEB 30일차) 시작은 잡담으로☕️ 단기적 공부계획을 세워봤다. 코드블럭 안 글씨체와.. 하이퍼링크 색을 바꿔야겠다. 너무 보기싫다. 더보기 나 혼자 주고받는 Small talk 1. 책 두 권을 샀다. 한 권은 코드스테이츠 커리큘럼 상 추천받은 '오늘도 개발자가 안된다고 말했다'이고 다른 한권은 모던 자바스크립트 Deep Dive - TIL하면서 구글링도 좋지만 책을 참고하여 개념을 보강하여 적으려고 한다. 어제 적었던 화살표함수나 목록에만 추가하고 미처 서술하지 못한 dot/bracket notation 내용도 오늘 보강하고자 한다. 2. this가 마구 나오기 시작한다. C#이 완전 객체지향 기반으로 만들어졌다는데 객체가 뭔지도 제대로 모르던 내가 코루틴(coroutine) 같은 함수 적용 좀 해보려고 찾아보다가 ..
TIL 1일차(FEB 29일차) 반성은 이제 그만..! Just do it! 어제까지로 반성은 끝내고 오늘부터는 그냥 실천하자. 완벽한 기술블로그 만들려고 하지말고(어차피 지금 수준에서는 못 만듦...) 매일 공부한 내용 Keyword 중심으로 정리하고 그 중에서 헷갈렸던 부분이나 추가적으로 공부가 필요한 부분, 반복적으로 보고싶은 내용들을 간추려보고자 한다. TIL은 좀 딱딱할 것 같다. 회고 글 같이 의식의 흐름을 따르는 것이 아닌 간결함을 포인트로 작성하고 싶다. NEW Keywords 일급객체, 고차함수, 콜백함수 이 중에서 콜백함수에 대해 개념을 간단히 던져놓아 보자면, call 하는 함수가 있고, 그에 대해 전달인자(argument)로 callback되는 함수가 있다. 고차함수(함수를 리턴하거나 함수를 전달인자로 받는 함수)..

티스토리툴바