\(@^0^@)/

나름 공부를 한다고 한 달? 두 달? 강의를 듣고 했었는데, 그게 프로젝트를 혼자 만들어보고 그러는 게 아니라 진짜 강의만 들었더니, 너무 효율이 없었던 것 같다ㅠ (사실 강의 들을 때 늘어진 내탓이 큼) 요새 프로젝트를 시작해서 코딩을 하고 있는데, 공부하기 전과 다를 게 없는 것 같은 내 실력이 슬프다... 이번 프로젝트를 하는 동안 어느정도 개념을 잡고, 그 뒤에 다른 프로젝트 때는 그 개념들을 최대한 발휘해보고 싶다. 그래도 그냥 혼자 강의 듣는 것보다 더 재밌어서 역시 사람을 뭐든 생산적인 일을 해야 해~ 다음 주부터는 유데미에서 구매한 JS 알고리즘 강의도 하루에 1개씩 들을 것! https://velog.io/@youthfulhps/What-is-Redux-and-why-use-it 리덕스는..

인스타 웹버전을 보면 로그인화면 왼쪽에 여러개의 이미지가 carousel 형식으로 움직이고 있다. (참고로 carousel은 회전 목마 라는 뜻이라네... 처음 알았음. 옆으로 쭉쭉 움직이는걸 carousel이라 하는건가?) 뷰는 90%정도 잡았고 이런 짜잘?한 부분들을 남겨두고 있는데, 조오금 미루다가 오늘 저녁에 맛난 대방어를 먹고 배부르고 기분좋게 코딩했돠 애초에 라이브러리를 사용 할 생각이었고, carousel를 검색해보니 뭐 bootstrap, npm 등 몇몇 라이브러리들이 나왔는데 팀원 분께서 bootstrap은 구식이다! react-slick를 사용해라! 고 추천해주셔서 slick으로 사용함. 사용방법은 어려운 것은 없었다. docs 읽으면서 install 할거 하고, import 할거 하고..

너어무 힘들다 예전에 팀플 할 때는 그냥 repo 하나 파서 개별 branch 생성해서 그 안에서 해결했는데, 이번에는 fork로 가져와서 pull request 해주는 건데 처음이다 보니까 너무너무너ㅜ머ㅜ무 헤맸다... vscode에서 fork한 repo를 clone 하는데 뭐가 문제인지 계속 push해도 pull request가 안 먹혀서ㅠㅠㅠ 계속해보고, fork repo 두세 번 새로 파고, zip으로 다운로드하고, 이것저것 다 해봤는데 결론은 github desktop앱으로 하니까 되더라; 왜지ㅠㅠㅠ? 내가 터미널로 할 때 뭘 잘 못 건드리나? 암튼 이제 대강 어떻게 하는 건지 알겠음! rebase인가 뭐시기만 배우면 될 거 같은데.. 그건 또 뭐야~~ 배움은 끝이 없다 근데 구글링 하다보면 다..

예전에 한번 인스타그램 클론 코딩을 했었는데, 이번에 다시 하게 되었음. 그때 구현 못한 기능들도 많았고, 데드라인 압박이 심했어서 모르는 게 있으면 남의 코드를 거의 복붙 했던 기억이.. 4명의 분들과 팀을 짜서 다시 하게 되었는데, 이번에는 최대한 많은 기능 + 내 손으로 코딩을 목표로 하고 있음! 그때보다 많이 발전했길ㅠㅠ! 지금 우선 백분들과 필수 api만 잡았고, 기다리는 동안 뷰를 잡아야 함. 맨날 강의만 듣다가 오랜만에 팀플 하려니까 너무 버벅거리고 GIT 사용법 다 까먹고 난리도 아니다ㅠㅠㅠ 그리고 이번에 처음 SCSS + Tookit를 사용할 예정이라 넘넘 떨린다잉~ 프로젝트하니깐 정신 차려서 몰입해보자!

Only call React Hooks in React Functions 반응 함수에서 반응 훅만 호출해야 함. ( React Component Functions 또는 Custom Hooks ) Only call React Hooks at the Top Level 반응 구성 요소 기능의 최상위 수준에서는 반응 훅만 호출해야 함. ( 중첩된 함수에서 훅 호출 X , 블록 문에서 호출 X ) unofficial Rule for useEffect( ) : always add everything you refer to inside of useEffect( ) as a dependency 항상 useEffect() 내부에서 참조하는 모든 항목을 항상 dependency array에 추가해야 함. (그렇게 하지 말..

useState( ) The main state management "tool" useState는 주요 상태 관리 도구 Great for independent pieces of state/ data 독립된 상태 및 데이터 조각에 적합 Great if state updates are easy and limited to a few kinds of updates 상태 업데이트가 쉬우면 좋음, 몇 가지 종류의 업데이트로 제한 됨. useReducer( ) : object가 state로 있는 경우, 또는 더 복잡한 상태 Great if you ned "more power" Should be considered if you have related pieces of state/ data 관련 데이터를 다루는 경우, ..

Q : Which value should you pass to event listener props like onClick? onClick과 같은 이벤트 리스너 소품에 어떤 값을 전달해야 하나? A : A pointer at the function that should execute when the event occurs. 이벤트가 발생할 때 실행되어야 하는 함수에 대한 포인터. + That's the correct choice - you want to pass a "pointer" at the to-be-executed function as a value to onClick etc. Then, this function gets executed "on your behalf" by React when th..

최근에 유데미에서 리액트 강의를 듣고 있는데, 아마 각 섹션마다 퀴즈가 있는 것 같음. 지금은 초반이라 아직 쉬운 개념들이지만, 나중에 후반으로 가면 헷갈렸던 용어들 재확인할 수 있는 좋은 기회! 쨋든 나중에 면접에 도움 될거 같으니, 차근차근 용어 및 정의들을 정리해보자. ( + 영어공부) Q : What is "JSX"? A : It's a special, non-standard syntax which is enabled in React projects. React 프로젝트에서 활성화되는 특수한 비표준 구문. + React projects like the ones we create via "crate-react-app" supoort JSX syntax. it gets compile to standa..

첫번째 argument : 길이가 10이 되어야하는 String 만약, 길이가 10이 아니라면 (현재 hello는 길이가 5인 문자이다) 두번째 argument : 적혀있는 "!"의 문자로 부족한 길이를 채운다. 그러므로, 느낌표 다섯개가 추가 됨. String으로만 받을 수 있으니 주의하자! 숫자에 사용하고 싶다면, 아래의 코드를 이용하자 ※ 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

CSS는 브라우저 오른쪽 밑에서부터 좌표를 계산하고 JS는 브라우저 왼쪽 위에서부터 좌표를 계산한다. client는 현재 보이는 브라우저 기준이 되어서 X, Y 값을 계산하고 page는 page 전체가 기준이 되어서 X, Y 값을 계산한다.