TIL
TIL - 20220701
'내가 할 수 있는 것'으로 검색 기능을 구현해봤다. 우선, 다음과 같이 검색할 데이터를 만들어줬다. 내가 만들고 싶은 검색 기능은 명언을 말한 사람의 이름이나 명언의 내용을 검색하면 검색한 내용에 일치하는 명언에 대한 정보가 나오는 것이다. 기능을 구현하기 위해서는 사용자가 입력한 내용이 saying이라는 이름의 배열 속 객체의 name 혹은 saying 값에 일치해야 한다. JavaScript만으로도 충분히 구현할 수 있지만, 이 글에서는 필자가 React를 사용하고 있기 때문에 React의 useState를 이용하여 구현했다. input창에서 입력하면 입력한 값이 setSearch를 통해 search에 값이 저장되고, search값을 앞서 saying 배열 속 name과 saying 속성이 갖고 있..
TIL - 20220630
프로젝트를 진행할 때, 다음과 같은 사항들을 작성했다. 이번 주가 지나면 사용자는 무엇을 할 수 있나요? 란 질문에 대한 답을 작성하다 보면 내가 진행하는 프로젝트에서 무엇이 최우선 순위인지 스스로 고민해보며 깨우치는 시간을 갖게 된다. 나는 이렇게 작성했다. '검색' 기능 구현이 최우선순위이자 어떻게 구현해야 할지 가장 막막한 부분이었다. 검색 기능에 대해 공부한 결과 검색 기능을 구현하는 방법은 여러 가지가 있다. 다만, 백엔드가 없는 상황에서 내가 구현할 수 있는 최선의 방법은 무엇일까에 대한 고민을 하루 동안 한 것 같다. 내가 지금 만들고 싶은 프로젝트는 현재 널리 알려져 있는 명언과 그 명언을 말한 사람이 실제로 말한 것인지 아닌지 궁금할 때, 사용하는 서비스이다. 그러면 검색창에 명언을 말한..
TIL - 20220629
본격적인 프로젝트 진행을 하기에 앞서 개발 환경 구축을 시작했다. 아무런 생각 없이 webpack, babel, eslint, react를 설치하고 커밋을 하려 할 때 멈칫했다. 이렇게 한 번에 커밋을 진행하려 하면 한 커밋에 package.json부터 시작하여 webpack 설정 파일인 webpack.config.js, babel 설정 파일인 babel.config.js eslint 설정 파일인 .eslintrc.js react를 사용하기 위한 파일들까지 모두 한 커밋에 담기게 되는 것이니까 적절한 커밋 단위가 아니라고 생각했다. 물론 혼자 진행하는 프로젝트니까 한 번에 커밋해도 됐겠지만 그렇게 하면 유의미한 커밋에 대해 고민해보는 기회를 스스로 버리는 것이고 종국엔 나 자신과의 싸움에서 스스로 지는 ..
TIL - 20220628
오늘도 어제에 이어서 Next.js에 대해서 공부했다. Next.js에는 _app.js라는 파일이 있다. 반드시 이름이 _app.js여야 하며, Next.js는 page가 렌더링 되기 전에 먼저 _app.js를 참고한 다음 page의 내용물을 렌더링한다. 그렇기 때문에, Header나 global로 적용해야 하는 CSS를 중복 없이 한 번에 적용할 수 있다. React.js와 비교하면 Header를 적용하려면 모든 컴포넌트에 Header 컴포넌트를 넣어줘야 하는데 Next.js는 이러한 기능을 한 번의 코드로 적용할 수 있는 것이다. redirects와 rewrites라는 기능이 있다. redirects는 말 그대로 사용자가 어떠한 url을 입력하면 그 url을 개발자가 설정한 url로 자동으로 이동한다..
TIL - 20220627
오늘은 프로젝트 주제에 대한 구상을 진행하면서 프로젝트에 적용해보면 좋지 않을까에 대한 일환으로 서버 사이드 렌더링을 한번 경험해보고 싶어서 Next.js에 대해 공부했다. Next.js를 공부해보면서 라이브러리와 프레임워크의 차이점을 명확하게 알게 됐다. 라이브러리는 개발자로서 내가 사용하는 것. 내가 라이브러리를 불러온 다음 라이브러리를 사용하며 무언가를 만든다. 라이브러리를 사용할 때는 내가 원하는 대로 코드를 작성할 수 있고 사용하고 싶을 때 사용하면 된다. 프레임워크는 내 코드를 불러오는 것. 내가 코드를 적절한 위치에 알맞게 작성했다면 프레임워크가 내 코드를 불러와 모든 걸 동작하게 만든다. 자유도의 차이인 것 같다. 예를 들어, React.js와 Next.js를 라우팅이라는 주제로 비교해보면..
TIL - 20220626
온라인 강의를 들을 때, 다른 생각을 자주 하게 되어 집중을 제대로 하지 않는 것 같다고 느끼는 경우가 자주 있다. 그래서, 2회 차 강의를 들을 때 제대로 이해가 되지 않는다고 생각해서 1회 차를 다시 듣는 것이기 때문에, 이번엔 1회 차 강의를 들으면서 조금 더 집중력을 끌어올리고자 강의에서 말하는 내용들을 텍스트로 다음과 같이 작성했다. 코드스피츠76 - CSS Rendering 1회 차 1/2 Normal flow는 CSS에서 공식적으로 등장하는 고유 명사이자 브라우저가 그리는 주요 방식이다. Normal Flow에는 두 가지 계산 공식이 있다. Block Formatting Contexts와 Inline Formatting Contexts. Relative Formatting Contexts도 ..
TIL - 20220625
오늘은 CSS에서 모던 박스 모델과 포지션 모델에 대해 공부했다. 링크: https://www.youtube.com/watch?v=NFvSbFJmoWo&list=PLBNdLLaRx_rKXwi7MulM6v1UG9JLKWIYS&index=3 content-box가 css box-sizing의 기본이다. box-shadow는 반대로 그려진다. offset에 대한 개념을 공부하는 시간을 가졌는데, 이해가 되긴 했지만 만약 공부한 내용을 바탕으로 코드 없이 모양만 주어졌을 때 그리는 게 과제라면 내가 그릴 수 있을까?라는 질문을 하면 쉽게 답을 하지 못할 것 같다는 생각을 했다. 먼저, 이전 강의를 배속으로 들으면서도 집중을 제대로 하지 않은 것 같아서 이전 강의를 다시 들으면서 예제 코드를 같이 작성해보고 다음..
TIL - 20220624
윤석 님께 다음과 같은 질문을 했다. 과거, 대학교 동기들과 함께 간단한 동아리 사이트를 만들 때도 텍스트를 상하좌우로 움직이거나, 크기 조절할 때도 구글링을 통해 무지성으로 코드를 작성하다 보니 어떻게 동작될지 예상을 하지 않은 채로 그저 우연에 맡기는 코드를 작성한 적이 있었다. 그래서 이번 과제로 웹 사이트에 CSS 적용할 때도 어떻게 시작해야 할지 많이 막막했었으며, 다음과 같은 답변을 받았다. 링크: https://www.youtube.com/watch?v=_o1zsrBkZyg&list=PLBNdLLaRx_rKXwi7MulM6v1UG9JLKWIYS 강의를 듣기 전에는 사실 CSS의 중요성을 그렇게 느끼지 못했는데, "어떻게 하면 고정되어 있는 숫자를 사용하지 않고 계산된 체계로 그래픽을 표현할까..