본문 바로가기

분류 전체보기128

부트캠프 47, 48일차 (React Custom Component 과제) 오늘의 생각 2일간 페어 과제를 진행했다. 우리에게 친숙한 UI 디자인 중 모달Modal, 토글Toggle 스위치, 탭Tab, 태그Tag, 자동완성Autocomplete, 클릭 편집(Click-To-Edit)을 구현했다. 꽤 기본적인 UI들을 막상 리액트를 통해 구현하려니 생각처럼 쉽지만은 않았다. 1. 모달 창 모달 창은 이미 JS를 통해 만들어봤던 경험이 있었기 때문에 꽤 익숙한 존재였기 때문에 큰 위기는 없었다. 그래서 딴 짓을 많이 했다... 자동차가 굴러가기 위해 기름칠을 하는 느낌으로 가볍게 진행했고, Styled-Components와 리액트 전반의 기본적인 문법들을 잘 기억하고 있는지 점검할 수 있었다. 배운 점 모달 창을 띄울 때는 position:fixed로 화면 고정 (position:.. 2022. 11. 1.
부트캠프 46일차 (컴포넌트 주도 개발 (CDD), Styled Components ) 오늘의 생각 오늘도 개념 위주의 학습이었다. 컴포넌트 주도 개발과 CSS(방법론) 발전의 역사를 배웠는데, 매우 흥미로웠다. 특히 CSS 방법론의 경우 내가 모두 사용해 봤었던 방법들이었기 때문에 그 서사를 좀 더 온전히 이해할 수 있었던 것 같다. 신기한 점은 각 방법론의 문제점들이 해당 방법론을 배우고 사용하는 과정에 내게도 크게 와 닿았던 점들이라는 것. 또한 다소 생소했던 Styled Component에 대해 좀 더 온전히 이해하게 되면서 경이로움을 느낄 정도였다. HTML, JS, CSS를 하나로 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발이라니...이래서 프론트엔드 개발자가 리액트를 해야 하나 싶었다. storybook도 매우 유용했다. CDD개발 도구임에도 거의 웹 페이지나 다름 없는.. 2022. 10. 27.
부트캠프 44, 45일차 (와이어프레임, Figma) 오늘의 생각 "디자인"에 대해 배웠다. 프론트엔드, 나아가 개발자로서 가져야 할 굉장히 중요한 소양 중 하나라고 생각해서 매우 집중해서 수업을 듣고 공부했던 것 같다. 관련해서 블로깅을 해야하는데 아직도 다 못했다...온전히 이해하고 적고 싶은 개념들이 많고 설명하기 위한 말을 정리하려니 생각보다 어려운 것 같다. 근본적인 질문인 "좋은 디자인"에 대해서도 생각이 많아졌다. Figma를 통해 나이키의 웹 페이지를 클론하는 페어 프로젝트를 진행했다. 무언가를 본떠서 만들고 간단한 기능을 구현하는 것은 매우 재밌고 즐거운 일이었지만, 기능 하나하나를 구현하면서 간단해 보이는 웹 페이지에도 정말 많은 기능들이 있다는 것을 알게 됐다. 또한, 필요한 기능들을 적절히 구현하면서 소비자가 보기 편한 디자인을 만든다.. 2022. 10. 27.
부트캠프 43일차 (UI/UX) 오늘의 생각 오늘 대체로 혼자 개념 공부를 많이 하게 된 날이었지만, UI와 UX의 기본 위주의 내용이라 크게 힘들지는 않았다. 기존에 알고 있던 UI, UX를 더 확장해서 알게된 것 같아서 재밌었고, 사용자 흐름(user Flow)의 경우 이전에 정확히 무엇인지 모른 채 작성해 보고 나서야 개념을 알게 되어 오해하고 있던 부분을 보완할 수 있는 좋은 계기가 되었다. 또한, 사용성 평가에 대해 공부하면서 새삼 웹 개발자들이 유저 경험과 그에 상응하는 디자인을 얼마나 고심하는지 알 수 있었다. 개념을 배우면서 '왜 나는 개발을 하고 싶은가'라는 근본적인 질문에 대해 약간의 답도 얻을 수 있었는데, 어렸을 적부터 컴퓨터를 비롯해 다양한 전자제품을 써 온 경험들이 나를 개발의 세계로 이끌어 온 것 같다. '아.. 2022. 10. 25.
부트캠프 42일차 (JSON.stringify) 오늘의 생각 꽤 익숙했던 JSON.stringify / JSON.parse 에 대해 더 잘 알게되었다. 이미 알고 있던 코드와 역할이었기 때문에 문법적으로 어렵지 않아서 배울 때는 꽤 여유로웠다. 특히 stringify의 개념에 대해 더 자세히 알게 됐고, 관련용어를 배워서 누군가에게 설명하기 더 수월해진 것 같다. 오늘 일과의 대부분은 JSON.stringify를 구현하는 과제와 재귀를 활용해 Tree UI를 구현하는 것이었다. 진행 중에 어려웠던 부분들이 제법 있었는데, 특히 객체 안의 객체를 다루는 부분이 많이 어려웠다. function stringifyJSON(obj) { let str = ""; for (prop in obj) { if (typeof obj[prop] === "string") {.. 2022. 10. 21.
부트캠프 41일차 (재귀) 오늘의 생각 새로운 섹션이 시작되고 코딩이 더 어려워졌다. 논리 구조가 더 복잡해졌고, 기존의 개념들을 온전히 이해하고 있지 않으면 문제를 푸는데 많은 어려움이 생기게 되었다. 오전에 새롭게 시작된 데일리 코딩부터 순탄치 않았다. 정수를 요소로 갖는 배열을 입력받아 3개의 요소를 곱해 나올 수 있는 최대값을 리턴하는 기능을 구현해야 했는데, 생각처럼 쉽게 풀리고 있지 않아 골머리를 앓고 있다. 다행히 내일까지 시간이 더 있기 때문에 고민을 해보고 문제를 풀어볼 생각이다. 재귀의 경우 설명이 꽤나 심플했지만 그렇기 때문에 더더욱 두려웠다. 다행히 함께한 페어 분이 문제를 잘 정리해주셨고 서로 소통을 원활하게 진행해 문제들을 하나하나 해결해 나갈 수 있었다. 가장 어려웠던 문제 중 하나는 임의의 배열을 입력.. 2022. 10. 20.