본문 바로가기

others

(9)
기업협업을 마치며 2달 동안의 위코드 생활 그리고 한 달 동안의 기업협업을 마지막으로 이제 정말 다같이 내달려오던 시간들이 끝이 났습니다. 이 정해진 시간이 끝이 아니라 앞으로도 함께 공부하고 개발하며 나아가겠지만 기간의 끝이라는 게 주는 기분이 다양합니다. 두 달 동안 위코드에서 함께 어려움을 마주하며 넘어지고 일어났던 시간들 만큼이나 한 달동안의 기업 협업 기간이 짧게 지나갔습니다. 2주 기간으로 진행했던 프로젝트들만큼이나 짧게 느껴졌던 기업협업이었습니다. 협업기간 동안 리액트 네이티브를 초기 세팅부터 시작해 새롭게 마주하는 것이 많았고 팀원들끼리 처음을 함께 이겨내면서 팀원들의 소중함을 또 느꼈던 시간이었습니다. 이후에 익숙하게 각자 주어진 태스크를 해나가면서 점점 더 협업에 책임감을 많이 느꼈던 것 같습니다. 이미..
TIL no.42 - REST API 회사에서 요구하는 우대사항을 보더라도 REST API를 이해하고 있다는 문장이 들어가 있는 것을 쉽게 볼 수 있듯이 REST API 는 중요한 개념을 차지합니다. 프로젝트나 인턴십을 진행할 때도 내가 REST API를 사용하고 있는지 아닌지 알지 못했고 이 개념에 대해 따로 이해하고 정리하고 싶다는 생각을 하다가 이제야 정리하게 되었습니다 ! REST API란, REST 는 Representational State Teansfer 의 약자입니다. 데이터 자원을 명시적인 URL 소스로 구분하여 자원의 상태와 정보를 주고 싶는 것이라고 할 수 있습니다. URI을 통해 자원(Resource)를 명시하고 HTTP Method를 통해 해당 자원에 대한 CRUD를 적용하는 것을 말합니다. *CRUD는 Create(..
TIL no.39 - axios 를 이용한 서버 통신 방법 ! axios 는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. *HTTP axios 의 특징 - Promise(ES6) API를 사용 - 요청과 응답 데이터의 변형 - HTTP 요청 취소 (요청 중단 가능) - HTTP 요청과 응답을 JSON 형태로 자동 변경 - async/await 문법을 사용하여 쉽게 XHR 요청 가능 - Node.js 에서의 사용 *XHR axios 에서 사용하는 HTTP 메소드 GET : 입력한 url 에서의 데이터를 받아오기를 요청합니다. axios.get(url,[,config]) GET 메소드는 데이터의 값이나 상태를 변경할 수 없습니다. 데이터를 받아와 읽고 보여주는 역할만 합니다. axiosa는 Promise 를 사..
[wecode 후기] 2차 프로젝트를 마치며 프로젝트 데모영상 구현한 부분 - Product Details 페이지를 구현했습니다. 대부분의 데이터를 프론트에서 처리하기보다 UX를 생각해 데이터로 기록해두어야 하는 부분이 많았습니다. 그렇기 때문에 간단히 state로 관리하는 부분보다는 대부분 백엔드와 연결해야 하는 부분을 구현했습니다. - 클래스형 컴포넌트로 진행했던 저번 프로젝트와는 달리 함수형 컴포넌트로 진행하면서 react hook을 익히고 styled components 의 사용을 익히며 진행한 프로젝트였기 때문에 구현한 부분의 양보다도 새로운 것을 습득하며 진행했기 때문에 더 탄탄해졌다고 생각합니다. styled components 를 사용해 props 값에 따른 스타일을 구현할 수 있던 점이 프로젝트에서 매우 편리하게 사용되었습니다. 회..
[wecode 후기] 1차 프로젝트를 마치며 프로젝트 데모영상 구현한 부분 - ProductList 페이지에서 이중 카테고리 필터 기능을 filter 메소드를 사용하여 구현했습니다. 첫번째 카테고리에서 선택된 메뉴와 두번째 카테고리에서 선택된 메뉴를 각각의 배열로 관리하여 그 배열안에 있는 메뉴들로 필러링하였습니다. 현재 함수형 컴포넌트와 react hook 을 사용해 리팩토링한 코드입니다. - 이 외에 다양한 애니메이션을 디테일을 살려 구현하기 위해 css로 직접 구현했습니다. 비교적 많은 애니메이션이 있던 사이트로 이 프로젝트를 하면서 html, css 의 실력을 탄탄하게 만들 수 있었던 것 같습니다. 회고록 1차 프로젝트를 하면서 초반에 순조로운 시간들도 있었지만 마지막에 저에게 어려움이 되는 순간들이 있었습니다. 그 시간들이 떠오르면서 후회..
TIL no.18 - DataBase의 기초라도 이해합시다 ..!🌧 오늘은 DataBase에 대해 정리해보려고 합니다 ! 저는 Frontend-Developer 라서 제가 DataBase를 알아야 할 것이라고 생각 못했는데요.. 이해를 하고 있으면 Backend와 서로 소통하는데 더 원활하다는 이유이기 때문에 나도 기초를 이해하고 있어야 겠구나 ! 생각했습니다 🤗 깊이 파고들어 공부할 필요는 없겠지만 의사소통에 문제가 없게 이해하고 있는 것이 중요한 것 같습니다. Database 란 무엇인가요? 말 그대로 ! 데이터를 저장하고 보존하는 시스템을 말합니다. 저는 세션을 듣고 database를 공부하기 전에는 단순 분류로 저장된 데이터를 꺼내올 때 찾아서 꺼내온다고만 생각했었습니다. 하지만, database를 정리하기 위해서는 정규화라는 과정을 통해 미리 데이터들을 분류하..
TIL no.17 - Linux 와 Terminal에 대한 기본 이해 ! 개발 부트 캠프 Wecode 2주차,,,, 블로깅이 저에게 항상 가장 어려운 숙제랍니다,, 스트레스 받지 말라는데,, 그게 스트레스,,,, 😫😫 그래도 나중에 쌓인거 보면 그렇게 뿌듯할 수가 없어요.. 내 피 땀 노력. 오늘은 공통 세션으로 Linux와 Terminal에 대해서 공부했는데요 ! 나중에 정리하면서 더 익숙해지기 위해 내용을 정리해보았습니다 ~ Linux 는 왜 중요한 것일까요 ? Linux는 오픈소스 OS 운영체제이자 IT 인프라 플랫폼입니다. 현재 가장 많은 사용자들에 의해 사용되는 운영체제이기 때문에 중요한 건 당연합니다 ! Linux로 시스템을 실행시키고 유지하며 관리하기 때문입니다. OS 는 CPU, 메모리, storage 처럼 시스템의 하드웨어와 리소스를 직접 관리하는 소프트웨어입..
TIL no.16 - Dev Tools 개발자 도구 우리가 개발을 하는데 있어서 개발자 도구에 대해서 아는 것은 당연히 중요하기 때문에 꼭 필요한 도구 몇가지에 대한 정보를 공부해봤습니다 ! 일단, 개발툴을 사용하기 위해서는 맥북은 Command + option + i 를 누르면 개발 도구를 꺼낼 수 있습니다. F12 로도 개발도구를 열 수 있습니다. 첫번째로, Elements ! Elements 는 개발자로서 당연히 알아야 할 부분 중 하나인데요 ! 브라우저의 html 구조를 확인하거나 사용된 태그나 css 속성들을 확인하기 위해 사용할 수 있습니다. 프론트앤드 개발자로서 css 파일로 스타일링한 브라우저 화면을 보면서 Elements 페이지에서 css를 수정하여 적용해보면서 한눈에 보기 쉽게 확인할 수 있습니다. - 빨간 동그라미를 친 버튼을 클릭하면..