키티의 코딩공부

DFS/BFS 는 그래프 자료구조에 기반한 대표적인 '탐색' 알고리즘이다. 그래프 탐색 순서에 따라 DFS 와 BFS 가 구분된다. 💡 그래프 탐색 알고리즘 그래프는 정점과 간선으로 이루어진 자료구조의 일종이다. 그래프 탐색 알고리즘이란 한 정점에서 시작하여 차례대로 그래프에 있는 모든 정점들은 한번씩 방문하는 알고리즘을 뜻한다. 많은 그래프에 대한 문제를 해결하기 위해서 그래프 탐색 알고리즘을 알아야하는데 예를들어 다음과 같은 상황에서 탐색이 필요하다. 한 정점과 다른 정점의 경로를 구할 때 그래프가 연결되어 있는지 확인할 때 신장 트리(Spanning Tree)를 찾을 때 💡 깊이 우선 탐색(DFS - Depth-First Search) DFS 는 한국어로 '깊이 우선 탐색' 이라고 불리며, '스택'..

이번 한 달 회고는 나의 첫 프론트엔드 프로젝트를 진행하며 겪은 상황과 나의 생각을 적어볼 것이다. ❤️ Liked 좋았던 것 첫 프로젝트 데브코스 이전에도 프로젝트를 진행해본 경험이 있지만 이번 프로젝트를 진행하고 나니 그때 했던 건 그냥 과제 같았다는 느낌이 든다. 그래서 이번 중간 프로젝트가 나의 프론트엔드 첫 프로젝트라고 할 수 있다. 중간 프로젝트를 진행하며 많은 과정을 경험할 수 있었다. 기획, 역할 분담, 개발 환경 세팅, 기술 스택, git 컨벤션 그리고 브랜치 전략 같은 협업 규칙 등 팀원들과 의견을 공유하고 결정하고 조정하는 과정에서 아주 많은 것을 배우고 경험하였다. 프로젝트 과정 기획 기본적인 서버 API가 제공되는 소셜 네트워크(SNS) 프로젝트를 진행하게 되었다. 팀원들은 각자 ..

❤️ Liked 좋았던 것 알고리즘 스터디 1차 팀을 떠나게 되었지만 다행히 바로 스터디를 진행하게 되었고 매주 한 번씩 만나는 중이다. 알고리즘 주제 별로 발표를 하고 관련 코딩테스트 문제를 풀어 설명하는 방식으로 진행되었다. 문제를 풀며 거의 손을 못 대는 나를 발견할 수 있었다. 나는 오랜 고민 끝에 다른 사람들의 풀이를 보며 이해하려고 노력했다. 그리고 하나하나 주석을 달고 설명하는 연습을 했다. 시간은 오래 걸렸지만 문제조차 이해하지 못했다가 풀이 설명을 하고 나면 아주 뿌듯하다. 새로운 팀 1차 세희팀을 보내고 2차 찬규팀을 만나게 되었다. 처음엔 걱정 반 설렘 반이었던 것 같다. 팀원분들은 모두 열정이 가득하셨고, 아주아주 좋으신 분들이었다. (데브코스는 착한 사람만 뽑나??) 가장 좋았던 ..

컴포넌트 연습하기 Text //Text.js import "./Text.css"; import PropTypes from "prop-types"; const Text = ({ children, size, paragraph, block, strong, underline, delete: del, color, mark, code, ...props }) => { const Tag = block ? "div" : paragraph ? "p" : "span"; const fontStyle = { fontWeight: strong && "bold", fontSize: typeof size === "number" && size, textDecoration: underline && "underline", color, }..

컴포넌트 스타일링 1. 스타일 시트를 이용하는 방법 (CSS 파일을 통한 스타일링) 2. Inline Style을 이용하는 방법 (태그 자체에 스타일을 적용하는 방법) //index.js import "./Box.css" const Box = ({ bgColor }) => { return } export default Box; 3. CSS in JS 방법 (emotion과 같은 CSS 라이브러리를 이용하는 방법) => emotion Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리 npm i @emotion/react 설치 npm i -D @emotion/babel-plugin 바벨플러그인 설치 create-react-app 에서 사용하기 pragma : 컴파일러에게 명령, /** ..

React 반응형 프로그래밍 (엑셀) 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. 컴포넌트의 조합으로 view를 구성한다. 컴포넌트 : 재사용이 가능한 독립적인 객체. 런타임 시점에 사용. virtual dom(가상돔) : 필요한 부분만 한 번에 렌더링한다. => 성능보다는 개발을 편하게 처음에는 컴포넌트만 열심히 생각하자. 컴포넌트 구조, 아키텍처, 아름다운 코드는 잠깐 잊고 눈에 보이는 UI를 컴포넌트로 구현해보자. 그러면서 UI를 점차 추상적으로 바라보는 방법을 익히자. create-react-app 리액트로 app을 만들 수 있는 가장 빠른 방법 웹팩 등을 통한 기초 빌드 설정을 직접하지 않아도 돼서 편하다. JSX React는 JSX라는 문법을 채택하여 사용 JSX는 ht..

문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 문제 풀이 function solution(s){ let answer = true; let arr=[]; for(let i..

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한 사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나..

조건부 렌더링 v-if v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 v-else v-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있다. A B C A/B/C 아님 v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 한다. 하지만 둘 이상의 엘리먼트를 전환하려면 엘리먼트에 v-if를 사용할 수 있다. 제목 단락 1 단락 2 v-show v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있다. 엘리먼트의 display CSS 속성만 전환. v-cloak을 같이 사용하는게 좋다. + 속성 선택자를 전역으로 등록시킨다. (v-cloak: 준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사..

순식간에 지나간 2차 단위기간.....🌪 ❤️ Liked 좋았던 것 네이버 레이아웃 클론코딩 SCSS에 대해 배우고 직접 네이버 모바일 화면을 구현해 보았다. 나는 평소에 CSS로 페이지 구현하는 것에 흥미가 있어서 다른 과제보다 재밌게 진행했다. 처음 배운 SCSS, BEM 방법론 등 실제로 적용해 볼 수 있어서 좋았다. 완벽하게 구현하지 못해서 아쉽지만 시간을 내서 완성시키고 싶다. 강남 모각코 아쉬움이 많이 남았던 첫 번째 모각코.. 이번에는 강남 강의장을 사용할 수 있다고 해서 팀원들과 다시 한 번 서울에서 모각코를 하게 되었다. 다른 팀들도 많이 오셔서 좋은 기회라고 생각하고 바로 달려갔다! 많은 프롱이 분들을 만나 이야기도 나누고 밥도 먹고 좋은 시간이었다. 호일팀과의 2차도 아주 즐거웠다. ..