Keyman's Dev Diary

이제서야 리액트가 이해되기 시작했다.첫 리액트 강의를 처음 들었을 때는 컴포넌트, 생명주기(lifecycle), 렌더링, 리액트훅 같은 기술적 용어들이 너무 어렵게 느껴졌다. useState, useRef, useEffect 처럼 자주쓰이는 훅은 그냥 쓰임세를 외웠다. 커스텀 리액트 훅은 생각도 하지 못했다.생명주기를 기준으로 리액트의 전반적인 쓰임새를 파악하고나니 리액트가 좀 더 괜찮은 라이브러리로 느껴지기 시작했는데 특히 리액트 컴포넌트 생명주기 개념이 가장 인상적이었다.리액트 컴포넌트 생명주기에는 mounting, updating, unmounting 3가지 이벤트가 있는데 첫 리액트강의때 전혀 이해하지 못했던 useEffect는 각각의 이벤트 때마다 특정 작업을 할 수 있도록 도와주는 리액트 훅정..

* vite로 새 프로젝트 만들기
npm create vite@latest* 삼항연산자 * 불리언은 렌더링되지 않음.* ?? (null 병합 연산자): null 또는 undefined일 때만 뒤에 오는 값을 반환함.* || (OR 연산자): 앞에 falsy 값이 들어오면 뒤의 값을 반환.* 리스트 렌더링 * 배열 안의 각 문자열을 태그로 감싼 새 배열을 렌더링함.* filter * truthy 또는 falsy를 반환하는 함수를 매개변수로 받음. * 배열의 요소 중 참을 반환하는 요소들로 새 배열을 생성.* CSS Module * 스타일 충돌 없이 컴포넌트 디자인 가능. * CSS 파일명에 module 추가 (ButtonA.module.css). * 임포트 시 자바스크립트 객체로 사용 가능.

출퇴근거리 1시간 30분거리의 사무실에 첫 출근했다. 걱정반 긴장반으로 출근했지만 기대감으로 퇴근한다. 4개월동안 같이 프로젝트를 진행할 동료직원분들과 마음이 잘 맞을 것같은 느낌이 들었다. 아마 이 프로젝트는 나에게 기회인 것에 틀림없다. 앞으로의 일이 기대가 된다. 일단, 간단한 개발환경세팅은 끝났다.

1. VSCode 설정창 오픈 macOS : ⌘ + , Windows : Ctrl + , Linux : Ctrl + 2. 설정 값 변경 quickSuggestions 키워드로 검색 후 다음과 같이 설정을 변경한다. editor.quickSuggestions By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience: "editor.quickSuggestions": { "strings": on }

NextJs npx create-next-app@latest ReactJs npx create-react-app APP_NAME --template typescript npm i --save-dev @types/styled-components npm i styled-components@latest npm i recoil npm i react-router-dom npm i @types/react-router-dom npm i @types/react-helmet npm i react-helmet npm i react-hook-form npm i framer-motion npm i react-query

오늘 TIL 3줄 요약 - 개발자에게 중요한건 꺽이지 않는 마음. - 개발자 공부 루틴: - 언어 이름의 유래 TIL (Today I Learned) 날짜 2023. 02. 19 오늘 읽은 범위 에피소드 01 ~ 05 책에서 기억하고 싶은 내용을 써보세요. 공식문서 , 문법 확인, 다른언어와 비슷한 특징 보기, 새 언어로 코딩 시도, 튜토리얼 시작하기, 나만의 프로젝트 만들기 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 - [에피소드03 새 언어를 쉽게 배우는 노하우] 이 부분은 개발공부의 정석이라고 생각한다. - 언어의 유래는 소소한 재미를 느낄 수 있었다. - 한번보고 덮을 책이 절대 아닌 것 같다. 궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요. 없음. 오늘 읽은 다른사..

노마드 개발자 북클럽 도전 인증샷

스타트업으로 이직하고나서 퍼블리싱을 하게 생겼다. 부분수정은 할 줄 알지만 설계부터 시작해서 새로운 것을 만드는 것은 해본 적이 없다. 발 등에 불 떨어졌다. 노마드코더 니코선생님 강의를 보면서 10x19라는 사이트를 CSS 클론코딩했다. 단순히 보고 따라하는 수준으로 클론코딩을 하는 건 전혀 어렵지 않다. 하지만 웹개발 6년차인 내가 퍼블리싱 실력이 이렇게나 터무니없이 약하다는 걸 오늘 제대로 확인하게됬다. 실제로 퍼블리싱을 하게 됬을 때 얼마나 막막할 지 대충 감이 온다. 클론코딩을 하면서도 상황에 맞게 이해하려고 온 집중을 다했다. 현실자각은 최고의 동기부여는 현실자각만한게 없다 진짜... 코로나 양성으로 인해 1주일 쉬고 있는 지금, 미친놈처럼 퍼블리싱만 해서 감을 익혀야겠다. 10x19 10x1..

1. css 에러를 확인할 수 있다. scss를 사용하게되면 scss -> css 변환 작업 중 에러 발생시 콘솔에 에러를 출력해준다. 2. variables / nesting css를 javascript처럼 전역변수,부모 자식 개념을 활용할 수 있다.

https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS Grid 공부하는 사이트. 총 28문제까지 있는데 초보자가 기본기 익히기에 정말 괜찮은 사이트인 것 같다. 문제를 풀고 다음문제로 넘어갈 때의 성취감이 상당히 짜릿하다. 초반 문제는 대부분 비슷한 해답을 가지고 있지만 후반부로 갈수록 여러방식의 정답이 있는 것 같다. 공부중인 css를 실제 업무에서도 능수능란하게 쓸 수 있도록 깊게 파고 들어야겠다.