TIL

[TIL] #24. UI / UX

2022.6.27. (월) 1. 오늘의 소감 오늘은 UI / UX의 개념과 UI 디자인 패턴 및 레이아웃 구성법, 그리고 UX 평가 기준에 대해 배웠다. 여러모로 개발 전 기획 단계에서 활용할 수 있는 기초 지식들이었다! 특히 ‘피터모빌의 벌집 모형' 이나 ‘제이콥 닐슨의 10가지 사용성 평가 기준'은 기획자나 디자이너와 소통할 때도 활용할 수 있을 듯 하다. 아무래도 개발자는 구현과 기능에만 치우쳐서 코딩하다보니 기획자나 디자이너분들보다 UI / UX를 신경을 덜 쓰게 된다🤔. 하지만 프론트엔드에서는 개발자도 UI / UX 를 이해해야 더 좋은 화면 구현할 수 있고, 현업에서 기획자와 디자이너와의 대화가 오고갈 때 요구사항을 제대로 이해할 수 있다. 앞으로도 UI / UX 에 대해 꾸준히 공부하고, 코..

[TIL] #23. JSON 과 TreeUI 에서 재귀 활용해보기

2022.6.24. (금) 1. 오늘의 소감 사각형의내부의사각형의내부의사각형의내부의사각형 의내부의사각형…. - 이상, 건축무한육면각체 연작시 中 백화점 → 이 사각형들 안에 있는 김철수씨를 찾을 때 무엇을 쓰면 좋을까? 바로 재귀다! 오늘 과제를 풀고 나니까, 재귀 함수를 어떤 경우에 쓰면 좋을 지 알겠다! 특히 그냥 코딩 테스트 문제에만 쓸 줄 알았던 재귀의 무궁무진한 활용법을 알게 되어서 좋았다. 결론부터 말하자면 재귀는 ‘트리 구조'에서 진가를 발휘한다. 트리구조는 부모가 하나이고 자식이 여러개인 구조이다. 대표적인 트리구조로 폴더 구조가 있다. 하나의 폴더 안에 여러 개의 파일과 폴더가 있고, 그 폴더 안에 또 여러 개의 파일과 폴더가 있다. 이 파일과 폴더들은 자식은 여러 개 가질 수 있지만 부..

[TIL] #22. 재귀

2022.6.23. (목) 1. 오늘의 소감 오늘은 재귀(recursion) 에 대해 배웠다. 사실 이전 부터 재귀가 무엇인지는 알고 있었지만, 재귀 문제를 푸는 방법은 몰랐다. 그래서 늘 막막했는데, 이번 학습 콘텐츠에서는 재귀 푸는 방법이 자세하게 설명되어있어서 재귀 문제에 조금씩 자신감이 생기는 중이다. 재귀 문제는 처음 보면 너무 막막하다. 이걸 어떻게 풀어야되지 싶고… 하지만 오늘 배운대로 차근차근 base case 와 recursive case 를 나눠서 생각해보면… 신기하게도 문제가 풀린다! 물론 가끔은 공식만 적용해서 풀어서 머리가 풀이를 못따라가느라 ‘어? 어떻게 풀린거지?’ 라는 생각이 들 때도 있긴하지만🥲, 그래도 재귀 문제만큼 풀렸을 때 쾌감이 짜릿한 문제도 없는 듯하다! 코플릿 1..

[TIL] #21. 리액트와의 첫만남

2022.6.2. (목) 1. 오늘의 소감 드디어 프론트엔드의 꽃이라는 ‘리액트(React)’ 만났다. 리액트의 파일 구조라든가, JSX 문법이라든가… 아직 생소하지만, 첫인상이 나쁘지 않다. 새로운 라이브러리를 익히는 번거로움보다, 그로인해 얻게 되는 편리함이 더 크게 느꼈기 때문이다. 가령 이전 바닐라 자바스크립트로 개발을 할 때는 기능을 넣기 위해 DOM을 일일이 연결해줘야 했고, 구조 확인을 위해 HTML 파일로 왔다리갔다리 해야했다. 하지만 리액트에서는 JSX 문법으로 HTML 과 JS를 한방에 처리하기 때문에 HTML 파일을 따로 작성할 필요가 없다. 따라서 DOM 연결도 필요없다! 게다가 기능과 구조를 묶음인 컴포넌트 단위로 코드를 짜기 때문에 훨씬더 직관적인 개발이 가능하다. 물론 아직 초..

[TIL] #20. 고차함수 직접 구현해보기

2022.5.27. (금) 1. 오늘의 소감 오늘은 배열의 고차함수들을 직접 구현해보는 과제를 진행했다. 콜백함수 생각하며 코드를 짜다보니 머리가 아프긴 했는데, 솔직히 조금 어려운만큼 정말 재밌었다. 나에게 딱 맞는 난이도랄까? 물론 어드밴스드 단계의 마지막 문제(_.sortBy) 와 나이트메어 단게는 손도 못댔지만….;; underscore.js 라이브러리 레퍼런스 참고하기! 실시간 세션에서 크루님이 BareMinimum 코드를 보여주셨는데, 내가 짠 것보다 훨씬 깔끔해서 놀랐다. 특히 _.reduce 함수 부분은 내가 생각지도 못한 로직으로 푸셔서 많은 공부가 되었다. 자세한 내용은 아래에! 내가 처음 짠 리듀스 코드… _.reduce = function(arr, iteratee, initVal) ..

[TIL] #19. 프로토타입

2022.5.26. (목) 1. 오늘의 소감 프로토타입… 은 도대체 무엇인가…? ‘모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿 객체'…? ‘자신을 만들어낸 객체의 원형'…? 무슨 소린데…. 내게 대 혼란을 안겨준 프로토타입. 사실 블로깅해서 39기 전용 노션에 올려야되는데, 못했다. 이해가 되어야하지ㅜㅠ. 익숙치 않고 난해한 설명이 이어져서 머릿속이 혼돈의 도가니탕이었다. 설명을 읽어도 머릿속에 안들어오는 느낌… 그래도 동기님들이 올려준 레퍼런스 자료를 읽고, 유튜브 강의도 듣다보니 어느정도 개념이 명료해진게 있다. 동기분들이 공유해준 소중한 레퍼런스들…🥹 크리스의 테코톡 - prototype자바스크립트 : 프로토타입의 이해 자바스크립트는 왜 프로토타입을 선택했을까 일단, 내가 다양한 사이트와..