ALL

[알고리즘 JS] 버블 정렬 알고리즘 : Bubble Sort Algorithm

버블 정렬 알고리즘이란? 아래 그림의 주황색 부분 처럼, 인접한 두 개의 요소의 대소를 비교해 자리를 바꿔 정렬을 하는 알고리즘이다. 바깥쪽 반복과 안쪽 반복이 있을 때 바깥 반복을 배열의 길이만큼 반복하고, 안쪽 반복에서는 j로 0번째 인덱스부터 마지막요소를 제외한 범위만큼 반복하면서, 배열의 j번째 요소와 j + 1번째 요소의 대소를 비교한다. j + 1번째 요소와 비교되기 때문에 배열의 마지막 요소는 범위에 추가를 하지 않아도 저절로 반복이 된다. 위 그림처럼 정렬이 완료된 범위의 마지막 부분은 정렬 범위에서 제외시켜 주어도 되는데, 그렇게 하기 위해서 i 가 증가할 때마다 j의 범위에서 i만큼 감소시켜준다. 버블 정렬 알고리즘 코드 적용 const bubbleSort = function (arr)..

[Day 49] 2022-0830 : React Custom Components - 자동완성 , 인라인 에디터

🐈오늘 공부한 것 ✔️React Custom Components Advanced 오늘도 어제에 이어 리액트 UI 컴포넌트 제작 실습을 했다. 구현한 내용은 자동완성 컴포넌트와 inline edit 컴포넌트. 특히 어려웠던 부분은 1. 자동완성에서 현재 hover 위치에서부터 키보드 이벤트 시작 2. inline edit 의 전체 플로우를 잘 이해하지 못함. edit 컴포넌트는 라이브세션 전까지 거의 이해를 못해서 반쯤 포기했다가 생각보다 쉬워서 허탈했다. 오늘도 어제와 마찬가지로 전체적인 구현 방법과 새롭게 알게된 내용 위주로 기록. 1. 자동완성 요구 조건 : 입력시 미리 지정된 자동완성 옵션을 드롭다운으로 보여주고, 클릭 혹은 키보드로 선택시 그 값을 input창에 띄워주어야 함. x 버튼 클릭시 현..

[Day 48] 2022-0829 : Custom Components, useEffect 복습, Git 협업 Flow

🐈오늘 공부한 것 ✔️React Custom Components styled-components 라이브러리를 활용해 리액트 커스텀 컴포넌트 제작 과제를 실습했다. 오늘 만든 부분은 모달창, 토글버튼, 탭 메뉴 그리고 태그였다. 전체 코드를 적기 보다는 각 컴포넌트를 어떻게 만들었는지 글로 복기해보고 새롭게 알게된 부분을 정리해보겠음. 1. 모달 요구 조건 : 버튼 클릭시 모달 창과 모달 배경이 뜨고, 모달 배경 || 모달 창 내의 X 버튼 클릭시 모달이 닫혀야 함. 모달이 뜨는 상태와 뜨지 않는 상태 추적을 위해 boolean 값을 담고 있는 state를 만들고, 버튼 클릭시 상태가 변경되도록 onClick 이벤트로 상태변경 함수를 실행시켜주었다. attr : 과제 코드에 styled.div.attr( ..

[Day 46] 2022-0826 : CDD, CSS IN JS, SASS

🐈오늘 공부한 것 ✔️CDD : Component Driven Development 컴포넌트 주도 개발, 말 그대로 html css js 관심사를 분리하지 않고 ui 컴포넌트별로 분리하여 개발한 뒤 각 컴포넌트를 조립해 페이지를 만들어나가는 개발 방식이다. CDD 를 도와주는 개발 도구에는 storybook과 styled-component 가 있는데, 각각 ui 컴포넌트를 관리하고 또 CSS 를 js 코드 안에 넣어서 컴포넌트별로 관리할 수 있게 한다. ✔️CSS의 발전과 CSS IN JS CSS 가 처음 등장한 이후로 웹페이지의 복잡성이 증가했는데, 규모가 커지고 복잡해질수록 CSS가 가진 문제점이 많이 생겨났다. 일단 CSS 코드 자체는 캡슐화도 되지 않고 스타일 중복을 막기가 쉽지 않은데 이를 해결..

[Day 45] 2022-0825 : UI / UX 분석

🐈오늘 공부한 것 ✔️UI / UX 분석하기 https://recruit.navercorp.com/main.do NAVER Careers BOARD THE NAVERSHIP recruit.navercorp.com 피그마로 클론한 사이트는 네이버 Careers 페이지이다. 심플해서 피그마 사용 방법을 익히기 좋을 것 같아서 골랐는데, 약간 아쉬운 점은 굉장히 미니멀해서 다양한 컴포넌트를 적용하는 예제는 아니라는 것. 아래는 피그마 프로토타입. Figma Created with Figma www.figma.com 1. 먼저 사용한 디자인패턴은 크게 드롭다운 메뉴와 GNB(네비게이션)바 그리고 캐러셀 - 이미지 슬라이드가 있다. 이미지 슬라이드는 일반 캐러셀처럼 자동으로 이미지를 넘기는 것은 아니고, 드래그해..

[Day 44] 2022-0824 : 피그마로 클론하기

🐈오늘 공부한 것 ✔️피그마 사용법 익히기 피그마를 이용해 실제 사이트를 클론하는 과제를 진행했다. 디자인 툴을 많이 다뤄봤기 때문에 익숙한 부분도 있었지만, 컴포넌트 생성으로 기능이 동작하도록 한다던지 이벤트를 발생시키는 부분이 많이 어려웠다. 헤맸던 기능을 정리해보려고 한다. 1. 먼저 개별 Frame 을 생성한 뒤에 이들을 Component set 으로 만들어 각 frame 에 다른 frame으로 이동할 수 있는 change to 기능을 만드려고 했다. frame 에 interaction 을 추가하고, After Delay 이벤트를 넣은 뒤에 change to 를 선택했는데, change 될 프로퍼티를 입력할 수 있는 칸이 전혀 뜨지 않았다. 원인이 뭔지 몰라서 1시간을 헤맸는데 알고보니 하위 컴포..

[Day 43] 2022-0823 : UX/UI + 브라우저 렌더링 과정(1)

🐈오늘 공부한 것 ✔️UI / UX https://friedegg556.tistory.com/205 더 좋은 웹앱을 만들기 위한 기본 개념, UI와 UX에 대해서 공부했다. 프론트엔드 분야에서 UI 란 주로 GUI 를 의미하는 것이다. UI가 좋다고 해서 무조건 좋은 UX를 제공한다고는 할 수 없지만, 나쁜 UI가 나쁜 UX를 제공할 수는 있다. 오늘은 반응형 디자인의 break point에 대해서도 알아보았는데, UI 레이아웃의 컬럼과 거터에 break point에 따라서 고정된 치수를 정해두고 반응형으로 디자인하면 훨씬 더 일관성 있으면서 매끄러운 UI를 만들 수 있는 것 같다. +) 디스코드에 디자인 시스템에 대한 참고 영상을 보게 되었는데, 상당히 인상깊었다. 일단 일관적인 디자인이라는 것도 사용..

[UI/ UX] 사용자 인터페이스(UI) , 사용자 경험(UX) 를 이해해보자

UI, UX는 무슨 뜻인가? UI 란 User Interface 를 의미한다. 사용자가 컴퓨터와 상호작용하는 모든 시스템을 포함하고, 넓게 보면 컴퓨터 화면과 그 주변기기까지 포함된다. 좁은 의미로만 보자면, 그래픽 즉 GUI 를 의미한다. 프론트엔드 개발에 있어서 UI란 주로 이 GUI를 의미하게 된다. UX란 User Experience 를 의미한다. 즉 사용자가 제품을 사용하며 느끼는 총체적인 경험을 의미한다. UX는 단순하게 사용이 편리하다는 의미 뿐만 아니라, 사용자가 제품을 사용하며 가치를 느끼는지, 매력적으로 느끼는지 등 다양한 기준이 존재한다. 총체적 경험이라는 의미는 제품 하나에 대해 측정하는 것이 아니라, 제품과 관련된 모든 서비스에 대한 사용자 경험이라는 의미이다. UI와 UX의 차이..

[Day 42] 2022-0822 : 재귀함수2 (재귀 지옥...)

🐈오늘 공부한 것 ✔️재귀함수 복습 재귀함수에 대한 이해가 부족하여 풀었던 문제를 다시 복습했다. 라이브세션에서 재귀 함수에 대해 강의해주셨던 부분은 아래와 같다. 1. 문제를 동일한 방식으로 쪼갠다. => recursive case 2. 더 이상 쪼개지지 않을 때 그 상태가 재귀의 탈출 조건이 된다. => base case 3. base case 를 해결하면 쪼개졌던 문제를 한번에 해결할 수 있다. 재귀 함수를 푸는 이상적인 방법인데, base case를 간단하게 도출할 수 있거나 재귀 호출 방법을 쉽게 파악할 수 있으면 괜찮지만, 재귀를 호출하는 조건이 복잡해지면 엄청 어렵게 느껴진다. 특히 이진 트리나 그래프를 탐색할 때 식을 어떻게 짜야 재귀 호출로 문제를 풀 수 있는지.. 감이 전혀 오지 않고 ..

[Day 41] 2022-0819 : 재귀함수

🐈오늘 공부한 것 ✔️섹션 3 시작 ! 섹션 3 대단원의 막이 올랐다(박수~~👏👏) 프로젝트를 제외하고 섹션은 4까지 있는데, 벌써 절반을 넘었다고 생각하니 기분이 묘했다. 이번 섹션의 목표는 "사용자 친화적이고 안전한 웹앱 만들기" 이다. 사용자 친화적인 UX/UI 를 구성하고, 리액트 심화와 리덕스, 웹 표준과 마지막 인증, 보안까지 많은 내용을 짧은 시간안에 배워야 한다. 지난 세션에서는 리액트 얼레벌레... 서버 얼레벌레... 이런 느낌이었는데 이번 섹션에서는 보충 내용을 많이 공부해서 두 배로 배워가고싶다...! ✔️재귀 함수 재귀 함수란 자기 자신을 계속해서 호출하는 함수를 의미한다. 계속해서 호출할 때 종료조건이 없다면 스택 오버플로우가 발생할 수 있으니 반드시 종료 조건이 필요하고 또 반대..