👩‍💻 가연의 개발자취 📚

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에 삼항연산자로 한번에 구현한 점이 인상..

Intro 새로운 과제 테스트를 풀었다. 과제테스트도 여러번 푸니까 익숙해지고 실력이 느는 것 같다. 😁 필수 구현 문제에서 이전 버튼 구현하다가 저녁 약속 때문에 30분 전에 제출을 해버렸다 아쉽 ㅠ 풀 수 있었는뎅 옵션 구현 문제는 모달 창 닫는 거 하나 풀었다. 다 구현하기에는 시간이 매우 매우 부족하다. 아직 실력이 많이 부족한가보당... 그리고 하나 남은 알고리즘 문제도 풀었따. 😃 오늘 학습한 내용 : 과제테스트 (고양이 사진첩 만들기), 코딩테스트 과제테스트 - 고양이 사진첩 만들기 문제 당신은 고양이들을 모시고 있는 어느 집사에게 자신의 고양이 사진을 관리해달라는 의뢰를 받았습니다. 의뢰인은 당신이 믿을만한 사람인지 테스트하기 위해, 약간의 사진을 당신에게 보냈으며 이 사진들을 웹에서 볼 ..

Intro 오늘은 강의는 안듣고 테스트만 풀었다. 4시간짜리 과제테스트만 풀어도 힘들다. 자기 전에 코딩테스트 문제도 3문제 풀었다. 마지막 문제 lv2 풀려다가 힘들어서 내일로 미뤘다 ㅎㅎ 오늘 학습한 내용 : 과제테스트와 코딩테스트 풀어보기 이틀 전에 풀었던 고양이 문제와 조금 다른.. 고양이 사진 검색기 문제를 풀었다. 지난 문제들과 비슷한 구현 문제도 있었고 새로운 문제도 있었다. 이번 문제에선 index.html에 구현된 요소들을 컴포넌트화하는 작업부터 시작했다. 새롭게 풀어 본 문제들만 리뷰해보았다. 검색어 추천 [필수] 추천 검색어 API를 이용해 입력란에 추천 검색어를 보여주세요. 추천 검색어는 엔터를 치는 등 별도의 행위가 없을 때에도 자동으로 보여야 합니다. ✅ keywords라는 cl..

Intro 추가 요구 사항 해결 하기에 대한 강의를 들었다. 전날 모의테스트에서 풀었던 마우스 오버 문제를 나는 이벤트 헨들러로 구현했는데 강사님은 CSS로 훨씬 간단하게 구현했다. 오늘 학습한 내용 👩‍💻 검색어 히스토리를 숨겼다가 인풋에 마우스가 오버될 때 보여주도록 UI를 바꿔주세요. style.css .SearchResult .item .content { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; font-size: 30px; opacity: 0; transition: all 0.5s ease; } .Sear..

Intro 오늘은 드디어! 최종 모의테스트를 풀었다. 시간이 너무 짧았다. 2시간 짜리는 아닌 것 같은데.. 2시간이 주어졌다. 금요일(19일)에 풀어야 하는 테스트가 진짜인 것 같다. 아무튼, 해설 강의를 들으며 따라하다가 막상 혼자 하려니 뭐부터 시작하면 좋을까 고민을 많이 했다. 시간이 부족해 다 풀진 못했지만 못 푼 거 다시 풀어보고 복습해야겠다. 오늘 학습한 내용 : 모의테스트 > HTML, CSS 관련 ✅ 현재 HTML 코드가 전체적으로 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다. 검색창과 검색 결과창은 section으로 구분했고 class name을 주었다. 검색 결과 리스트는 ul-li 태그로 변경했다. ✅ 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의..