ram2 🚗

지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다. 하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 word가 한 눈에 들어오지 않는다. 우리는 사용자가 느끼기에 조금 더 쉽게, 원하는 정보를 얻을 수 있도록 해야한다. 그래서 이번 스텝에서는 이러한 시각적인 요소(디자인) 에 조금 신경을 써보려고 한다. 코드랩에서 제시한 다음 우리의 목표는 이 이미지와 같다. Extract a widget 현재 우리 코드에서는 word pair를 다음과 같이 나타내고 있다. Text(appState.current.asLowerCase) 이 코드를 조금 더 복잡하게 바꿔보려고 한다. 이 코드를 별도의 위젯으로 빼는 것이 좋다고 한다. 이처럼 UI의 각 요소에 대해 별도의 ..

1. Introduction 학습할 내용은! ✅ flutter가 어떻게 작동하는지의 기초 ✅ flutter에서 layout 만들기 ✅ 앱 동작과 user interaction의 연결 (좋아요 버튼 누르는 것이 그 예) ✅ flutter 코드를 정갈하게 짜는 것 ✅ 반응형 앱을 만드는 것 (screen 크기에 따라 다른게 반응할 수 있음 !) ✅ 앱의 일관된 형태와 느낌을 주도록 2. Set up your Flutter environment (flutter 환경 설정) 📍 Visual Studio Code 사용 codelab 공식 문서에서 vscode를 다운받을 수 있도록 연결해두었다! 공식문서 링크 ⬇️ https://codelabs.developers.google.com/codelabs/flutter-..

리엑트.. js, html, css 이 중 그 어느 것도 배운 적, 접한 적 없었지만... 굉장히 짧은 시간에 리엑트를 공부해야만 했다. 주어진 시간에 js부터 배우고, 차근차근 강의를 들으며 공부했다. 하지만.... 제대로 이해하고, 실전에 사용하기에는 자신감과 지식이 턱없이 부족했다. 이번 프로젝트를 돌아보면 거의 실전에 부딪히며 배웠던 것 같다. 그 중 리엑트로 마크다운 에디터와 뷰어 구현하는 부분을 정리해보려고 한다. 너무나 다행히 많은 사람들이 포스팅을 해두었고, 너무나 편리한 패키지가 있었기에 아주 쉽고 간단하게 사용할 수 있었다. 물론 뷰어를 하는 것에 있어 아주 오랜 시간 삽질을 했다는 것...은 잊지 못할 것 같다...하하 1. install npm i @uiw/react-md-edito..

state props . . 특정 코드들이 첫 번째 component render에서만 실행되게 하자. 처음 한 번만..!! 나중에는 상태가 변해도 실행되지 않도록. 우리가 state를 변경할 때 모든 code가 다시 실행된다. 하지만 그럴 필요가 없을 경우!! 어떻게 해야할까? useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다. ex) useEffect(function1, []) 두번째는 ... 마법같다....? 결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 한 번만 실행해도 되는 것들을 다루는 함수이다. 두 번째 argument는.. 이럴 때 사용한다. 특정한 부분이 변..

처음으로 react를 공부하고 나서 css 사용에 익숙치 않고, 아직 흐름을 제대로 잡지 못한 상태에서 개발에 참여하게 되었다. 그렇기에 component 이름을 어떻게 정하는지도 잘 알지 못해 혼란스러웠다. 일단 해봐야한다는 생각, html, css, js 모두 처음 시작하는 만큼 결과물이 있어야 한다는 생각에 일단 뛰어들었다. 그 결과 나로 인해 style 간섭이 일어나버렸다... 결국 나는 잠시 프로젝트에 손을 떼게 되었지만 이번 일을 통해 style 간섭이 무엇인지 확실하게 알게 되었고, 다시는 같은 실수를 반복하지 않겠다는 다짐을 했다. 공유 받은 styled components에 대한 글을 공부하고, 정리한 내용이다. styled components의 필요성 중복된 클래스명을 만들게 되면, 다..