👩‍💻 가연의 개발자취 📚

Intro 드디어 피그마 강의를 다 끝냈다!! 이전에 기록하지 못한 내용까지 한꺼번에 정리해보았다. 오늘 학습한 내용 프로토타입 제작하기 Design Guidelines 앱에서 사용하는 용어가 헷갈릴 때 참고하기 좋은 사이트며 iOS와 안드로이드 별로 확인할 수 있다. 내용이 많아서 따로 검색해서 요약본을 찾아 보는 것도 도움이 된다. iOS Guidelines Human Interface Guidelines | Apple Developer Documentation The HIG contains guidance and best practices that can help you design a great experience for any Apple platform. developer.apple.com An..

Intro 오늘은 간단한 일기장 프로젝트 마지막 강의!! 오늘 학습한 내용 최적화3 - 컴포넌트 & 함수 재사용하기 컴포넌트를 최적화하기 위해선 어떤 컴포넌트가 최적화 대상인지 찾아낼 수 있어야 한다. ➡️ Chrome 확장 앱 React Developer Tools를 잘 활용하자!! useCallback 특정 함수를 새로 생성하지 않고 메모이제이션된 콜백을 반환한다. const onCreate = useCallback((author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.current, }; dataI..

Intro 리액트에서 useMemo와 React.memo에 대해 학습했다. 강의는 길지 않았지만 조금 헷갈리기 시작했따.. 꼼꼼히 복습을 해야겠다. 오늘 학습한 내용 : API 호출하기, Memoization(useMemo, React.memo) React에서 API 호출하기 세부 목표 useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API 결과값을 일기 데이터의 초기값으로 이용하기 JSONPlaceholder: API호출 테스트를 위해 샘플 데이터를 제공하는 REST API 서비스 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API ..

Intro 어제에 이어 일기장 프로젝트 실습을 학습하였다. React Hooks에 대해 공부했다. 오늘 학습한 내용 React에서 배열 사용하기 - 데이터 추가하기 세부 목표 배열을 이용한 React의 List에 아이템을 동적으로 추가해보기 With React 처럼 생각하기 컴포넌트 & 데이터 구조 생각해보기 최상단 태그 을 기준으로 트리 형태 컴포넌트 같은 레벨의 컴포넌트 끼리는 (DiaryEditor, DiaryList) 데이터를 주고받을 수 없다. React는 단방향으로만 데이터가 흐른다. 따라서, App의 state를 컴포넌트 각각에 전달해 주어야 한다. DiaryEditor에서 이벤트가 발생해 setData를 요청하고 App에서 변경된 Data를 DiaryList에 전달한다. ➡️ state 끌..

Intro 오늘은 React로 간단한 일기장 만들기 실습을 시작했다!! 오늘 학습한 내용 React에서 사용자 입력 처리하기 세부 목표 한 줄 입력 처리하기 여러 줄 입력 처리하기 선택 박스 입력 처리하기 사용자 입력 데이터 헨들링하기 기능이 비슷한 state는 하나로 묶기 : 하나의 객체로 저장하여 코드를 간단하게 수정할 수 있다. 이전 코드 import { useState } from 'react'; const DiaryEditor = () => { const [author, setAuthor] = useState('이가연'); const [content, setContent] = useState(''); return ( 오늘의 일기 { setAuthor(e.target.value); }} /> { ..

Intro 오늘은 React의 주요 특성인 State와 Props에 대해 학습하였다. 오늘 학습한 내용 : React.js 기초 Why React❓ 리액트는 컴포넌트 기반의 UI 라이브러리이기 때문에 중복 코드를 수정할 필요가 없다. 선언형 프로그램이다. Virtual DOM을 사용한다. 예를 들어, 5번의 돔 업데이트가 필요한 경우 Virtual DOM에 5번 업데이트가 발생할 동안 실제 돔에는 아무런 변화가 없고 변경 사항이 모두 종료되면 변경 사항을 모았다가 한번에 실제 돔을 업데이트 한다. ⚠️ 명령형 프로그래밍, 선언형 프로그래밍 ▫️ 명령형 프로그래밍: 절차를 하나하나 다 나열해야 한다. (ex. 요소를 선택한 다음 요소의 아이템을 어쩌구~~) ➡️ jQuery ▫️ 선언형 프로그래밍: 목적을..

Intro 오늘은 리액트에 들어가기 앞서, 리액트 소개와 Node.js에 대해 학습했다. 내일부터 배우게 될 리액트 기대가 된다. 오늘 학습한 내용 : 피그마 / Node.js 피그마 - 컴포넌트 레이어 클릭 시 Create Component 버튼이 활성화 된다. 컴포넌트는 레이어 상위에 생성이 되고 최초 컴포넌트가 메인 컴포넌트가 된다. 메인 컴포넌트를 가지고 여러 인스턴스를 다른 페이지에서도 생성할 수 있다. 메인 컴포넌트에 업데이트가 발생하면 자동으로 인스턴스에도 업데이트가 된다. 인스턴스를 수정하는 것은 가능하나 가급적 지양한다. 독립 레이어를 사용하고 싶다면 컴포넌트를 해제하는 Detach Instance를 클릭해야 한다. 오른쪽 사이드바에 있는 Properties는 메인 컴포넌트에서만 설정이 ..

Intro 강의를 착각해서 이번 6주차가 다 피그마 수업인 줄 알았는데 아니었다...ㅎ 옆에 날짜 안보고 그냥 하루에 한 파트인 줄 알았따 ㅎㅎ 또 밀려버렸다.. 이제 바로 리액트 강의 들어가는데.. 분발해야지 ㅠㅠ 오늘 학습한 내용 : 오토레이아웃 개념, 실습 오토레이아웃 (Auto Layout) 반응형 UI를 만드는 데에 유용한 기능이며, 오른쪽 사이드바의 Auto Layout을 클릭하거나 단축키 Shift + A로 오토레이아웃을 설정할 수 있다. (해제: Option + Shift + A) CSS에서 flex와 기능이 비슷하고 디자인 시간을 단축 시킬 수 있는 장점이 있어 많이 사용된다. 레이어를 정렬할 때 주로 사용하고 레이어 추가/삭제가 유연하고 오토레이아웃 설정 시 기본으로 마진과 패딩이 적용..

Intro 어제에 이어 본격적으로 피그마에 대해 공부했다. 피그마의 감을 익히는 데에 도움이 되었다. 오늘 학습한 내용 피그마 툴 학습하기 툴바 각종 기능을 포함한 툴 영역 왼쪽 사이드바 페이지와 레이어 리스트를 확인할 수 있다. 페이지는 고유의 캔버스를 가지고 있으며 목적에 따라 분리해서 사용한다. (무료버전은 페이지 3개까지만 지원함) 레이어는 도형인지 텍스트인지 등 레이어의 유형을 확인할 수 있다. 오른쪽 사이드바 레이어의 프로퍼티를 확인할 수 있다. 캔버스 실질적인 디자인 작업을 수행하는 공간이다. 툴바 프레임 데스크톱, 모바일 사이즈를 지정해 원하는 크기의 프레임을 선택할 수 있다. 레이어 관리를 효율적으로 하기 위해 레이어를 그루핑 할 때 단순 그룹화 대신 프레임으로 그룹화하는 방법을 사용한다..

Intro 주말에 열심히 놀고..!! 다시 집중해서 공부를 시작해보자!! 최근에 새로운 취미가 생겨버려서 개발에 약간 소홀했던 것 같다. 😭 지금 당장 중요한 게 무엇인지 인지하고 흩어져 있는 정신을 한 곳으로 집중하는 노력이 필요할 것 같다. 오늘 학습한 내용 고양이 사진첩 만들기 해설 강의 _ 1 Nodes - 현재 탐색 중인 경로에 속한 파일 / 디렉토리를 렌더링합니다. 렌더링 된 Node 클릭 시 node의 type에 따라 다음과 같은 일이 일어나야 합니다. Node.js 코드 일부 $nodes.innerHTML = ` ${ isRoot ? '' : ` ` } ${nodes.map( (node) => ` ${node.name} ` )} `; innerHTML에 삼항연산자로 한번에 구현한 점이 인상..