전체 글

어느덧 코드잇 스프린트의 마지막 프로젝트가 시작되었다.지금까지 마지막 프로젝트에 대한 이야기를 포스팅 한적이 없는 것 같은데, 중간 점검 느낌으로 한 번 정리하고 넘어가면 좋을 것 같아서 이번 포스팅의 주제로 들고 와보았다. FeedB 피드비웹 서비스의 이름은 '피드비(FeedB)', 배포된 토이 프로젝트를 게시하고 그에 대한 피드백을 사용자에게 받아볼 수 있는 사이트이다. 내가 만든 프로젝트가 실제 배포된 환경에서 문제가 있지는 않은지, 어느 지점에서 사용자 경험이 떨어지는지 제작자의 입장에서 알아보는 것은 한계가 있기 때문에, 이러한 프로젝트 주제를 잡게 되었다. 프로젝트를 홍보하고 게시하는 입장 뿐만 아니라, 다른 사람들이 어떤 주제로 토이 프로젝트를 진행하는지가 궁금한 사람 역시, 이 웹 서비스를..

이번 주차에서는 크게 Flex-box에 대한 내용을 다뤘다.수업을 시작하기에 앞서, 과제에 대한 피드백을 받았고 그 내용은 다음과 같다. 과제 피드백전반적으로 디자인에 대한 해석(임의 판단)이 과하게 진행된 것 같다.브라우저 환경에 대한 유동성이 너무 커서, 주어진 디자인 시안과 크게 달라지는 문제가 있다.학습하는 과정에서, 다양한 관점으로 디자인을 바라보고 구현해보는 것은 매우 바람직해보인다.이번 과제는 내가 코드를 구현하면서 고민했던 부분과 콘텐츠 확장 시 어떤 방향으로 구현을 하려 했는 등을 정리해서 함께 제출했다.물론 그 과정을 기록하고 문서화하는 과정에서 조금 매끄럽지 못한 부분도 있었지만, 이런 과정들을 기록하고 전달하는 습관을 유지했으면 좋겠다는 의견을 들었다. 동일한 시안에 대해서, 몇 가..

빔 캠프의 수업 내용을 간단하게 정리해보려고 한다.수업이 끝나고 스스로 복기하는 시간이 굉장히 중요하다는 생각이 들었기 때문이다. 강사님께서는 특히 용어에 대한 중요성을 강조하셨는데 내가 너무 대답을 못해서 많이 부끄러웠다.질문을 굉장히 많이 해주시는데, 그 중에서 한 두 개밖에 대답을 못했던 것 같다...ㅠㅅㅠ 매 주차별로 회고 해봐도 좋겠지만, 1주차에는 정신이 없어서 제대로 수업 내용 정리를 못한 탓에 2주차부터 정리해보려고 한다. 유지보수가 용이한 CSS 코드 작성하기  빔 캠프의 수업 목표이자, 나의 목표이기도 하다.물론, pixel perfection (정확한 디자인_가로 세로 길이 및 간격 등)을 맞추는 것도 중요하지만 실제 서비스는 끊임없이 변화하기 때문에 그에 대응하는 것이 더 중요하다고..

React 공식문서 - 리스트와 Key 리액트로 컴포넌트를 구현하다보면, 배열 데이터에 map으로 반복해서 컴포넌트를 만들어줄 때가 있다.key값을 넣어주지 않으면 아래와 같은 오류를 만날 수 있다.key 값으로는 중복되지 않는 고유한 값을 넣는 것이 권장된다.그렇다면 key값은 왜 사용해야하는 걸까? 리액트에서 배열을 렌더링할 때 key값을 넣어줘야 하는 이유React에서 key값은 DOM 요소를 식별하기 위해 사용하는 유일한 값이다.그래서 React는 이 key값을 가지고 기존 트리와 이후의 트리가 일치하는지 확인하기 때문에 배열을 이용하여 렌더링을 할 때 key값은 반드시 적어주어야 한다. 만약, key값이 없다면 변경이 없는 트리 전체를 리렌더링해야 하기 때문에 비효율적일 것이다. 배열을 렌더링할..

Box Model출처 : MDN 박스 모델CSS box Model은 Block 박스에 적용되며, Inline 박스는 Box Model에 정의된 일부 동작만 사용한다. 이 개념은 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠 등이 어떻게 작동할 것인지에 대한 것을 결정짓기 때문에 정확히 이해하고 활용하는 것이 중요하다.  MDN에 있는 한국어 번역이 읽기 나빠서 천천히 정리해나가며 이해해보려고 한다. 본격적으로 Box Model에 대해서 알아보기 전에, 이와 관련된 display의 속성 중 block과  inline의 차이에 대해서 알아보려고 한다. 이 두 가지는 서로 다른 배치 방법, 가로 세로 길이, 줄 바꿈 등을 가지고 있기 때문에 차이점을 알고 사용하는 것이 좋다. ..

바닐라 JS를 이용해서 간단한 ToDo를 입력 받을 수 있는 캘린더를 만들어보자 다짐했었다.지난 포스팅에서는 내가 직접 디자인 한 UI를 구현했고, 오늘은 그 안의 내용을 채워줄 JavaScript 로직을 뜯어볼 것이다. 크게 캘린더 부분의 날짜를 불러오고 내가 원하는 날짜로 이동하는 로직과 지정한 날짜에 ToDo List를 입력하고 저장하는 로직으로 나뉠 것이다. UI를 어떻게 구현했는지 궁금하다면이전 포스팅 보러가기 [Vanila JS] Calender Todo - UI캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이codingaring.tistory.com  이..

이번 주 멘토링 시간에는 모듈화와 추상화에 대한 내용을 다뤘다.모듈화와 추상화는 정보처리기사 시험을 준비하면서 들었던 개념이었지만, 활용보단 이론에 더 가까운 단어였다. 하지만 멘토님께서 사례를 통해서 설명을 해주신 덕에 이제는 이 개념을 코드에 녹여내기 위해 어떤 과정을 거쳐야하는지 이해하게 되었다.그렇다면 모듈화와 추상화가 무엇인지부터 알아보자 모듈화와 추상화모듈화의 개념적 정의는 아래와 같다.소프트웨어 설계에서 기능 단위로 분해하고 추상화 되어 재사용 및 공유 가능한 수준으로 만들어진 단위공부하면서 가장 만나고 싶지 않은, 선행적 지식이 필요한 순간이다. 정의를 알아보는데, 또 다른 단어에 대한 정의를 알아야 이해할 수 있다니..! 추상화는 또 뭔데?! 추상화의 개념적 정의공통적인 부분을 취하고 차..

프론트엔드 공부를 하면서  CSS 실력도 너무 중요하다는 생각을 늘 하고 있었다.지금은 프론트엔드 멘토를 통해서 많이 만들어보고, 다양한 속성들에 대해 이해 해보려고 노력하고 있다.  그리고 기다리던, 빔캠프 6월 과정이 오픈해서 이번에 신청했다!CSS를 잘하는 지인이 정말 좋은 강의라고 강력 추천해서 신청했는데, 아직 한 달 정도 남았지만 너무 기대가 된다. ** 빔캠프에 대한 자세한 내용은 사이트를 참조하시길 **https://veamcamp.com/  빔캠프가 본격적으로 시작되기 전, CSS에 대한 기본 개념에 대해 공부를 한 후 가려고 한다.(강사님께서 메일로 예습해오면 좋을 개념들을 리스트업 해주셨음)더보기Cascade의 의미 & Selector SpecificityPositionCSS Box-..

캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이 들었다. 리액트로 구현을 할까, 바닐라JS로 구현을 할까 고민을 했지만기본적인 자바스크립트에 익숙치 않은 상태에서 리액트로 들어갔던 것이 내심 불안했던 지라 이번에는 바닐라 JS로 구현해보기로 마음 먹었다!  우선 디자인부터 만들어보자! 원래는 프론트엔드 멘토에 있던 시안을 기반으로 만들어보려고 했는데, 조금 더 단순하고 깔끔한 디자인으로 만들고 싶어서 내가 처음부터 새로 만들어봤다!!구성은 아주 간단하다.이번 달을 확인할 수 있는 캘린더 부분 선택한 날짜의 일정을 확인하고 등록할 수 있는 사이드 바기본적인 HTML과..

프로젝트를 진행하고 코드를 작성하다보면, 상태 관리 라이브러리의 필요성을 느낄 때가 있다.현재 로그인한 유저의 정보, 다크 모드 라이트 모드 설정 등 생각보다 많은 부분에서 상태 관리 라이브러리의 필요성을 느꼈다. 주된 이유는, 너무 깊이 이어지는 Prop drilling이 이유였지만, 현재 상태값에 대한 인과 관계를 보다 쉽게 찾기 위해 라이브러리를 쓰고자 할 때도 있었다.(여러 컴포넌트에서 하나의 state를 핸들링하면, 현재의 state가 왜 그 값을 갖게 되었는지 찾기 어렵기 때문) 유명한 상태 관리 라이브러리들은 많았지만, 나는 라이브러리들 간의 차이를 알고 필요에 따라 적절한 것을 선택해서 사용하는 개발자가 되고 싶었다.그래서 상태 관리 라이브러리들의 공식문서를 읽고 사용해보면서, 그 구조들을..