[원티드 프리온보딩 인턴십 9기] Week 1 - 1 회고
첫 세션을 마무리하고 앞으로의 계획 동료와의 소통 동료와의 협력을 배우고자 원티드 프리온보딩 인턴십에 지원하게 되었고 운 좋게 합격할 수 있었습니다. 이 인턴십은 교육 목적이 아닌 동료 학습을 위한 인턴십이라고 생각하고 수행할 필요가 있습니다. 근거에 의한 논리적으로 내 생각을 설명하는 커뮤니케이션 능력을 습득하고 다른 팀원들과의 소통을 통해 다양한 관점을 바라볼 수 있도록 시야를 확보할 것입니다. 과제 피드백 README.md와 Git관리를 그동안 많이 놓치고 있었던 것 같습니다. 이번 프리온보딩 인턴십 사전 과제에서는 최대한 기준에 맞추기 위해 README.md를 작성하였으나 commit 관리를 살펴보니 조금 많이 부실하다는 생각이 들었습니다. 즉 첫인상을 보여줄 수 있는 과제 이력서라고 생각하고 R..
[React] React Router란
React Router create-react-app을 통한 리액트 프로젝트를 작업하면서 가장 먼저 접하는 파일은 아마 App 파일이 아닐까싶다. App 파일에는 대부분 라우트 작업을 다루고 있으며 라우트의 짝꿍 라우터에 대해 자세히 공부해보자. 개발을 하면서 가장 먼저 확인해야할 것은 바로 공식 문서다. Client Side Routing React Router enables "client side routing" 리액트 라우터는 "클라리언트 사이드 라우팅"을 가능하게 한다. 사용자가 URL을 직접 입력하거나 클릭했을 때 서버에 요청을 보내지 않고 리액트 앱이 업데이트를 해준다. 브라우저가 URL에 대한 새로운 document를 요청하여 새로운 페이지를 렌더링하는 것이 아니기에 더욱 역동적인 UI를 가..
1. 지원하고 싶은 참가기업 제가 지원하고 싶은 기업은 "라이크어로컬"과 "사회적협동조합 빠띠"입니다. 라이크어로컬은 유학 생활을 하면서 새로운 환경에서 적응하느라 힘들었던 저의 경험을 생각나게 합니다. 라이크어로컬이 제공하는 서비스를 통해 대한민국을 방문하는 여행객에게 잊을 수 없는 신선하고 편안한 경험을 주고 싶습니다. 사회적협동조합 빠띠는 더불어 사는 사회를 만들어가는 기업의 모토가 인상이 깊었으며, 팀 프로젝트와 같이 다수가 함께 참여하는 공동체에 소통이 가장 중요함에 따라 사회적 협동조합 빠띠 기업에서 제공하는 서비스 기술 발전에 동참하고 싶습니다. 2. 프리온보딩 인턴십에서 본인이 얻고 싶은 것 실무에 있어 동료와 함께 소통하고 협업하는 능력을 배우고 싶습니다. 그동안 포트폴리오를 만들면서 혼..
[DOM & Event] #01 노드에 접근하기
DOM (Document Object Model) 문서 객체 모델 HTML의 각각 요소들을 트리 형태로 표현했을 때, 하나의 박스가 '노드'라고 칭한다. Hello World This is for DOM Click document를 사용하여 객체에 접근하기 selector method id document.getElementById() class document.getElemenstByClassName() tag document.getElementsByTagName() css 선택자 document.querySelector() css 선택자 (다중 요소 접슨) document.querySelectorAll() querySelectorAll과 getElementsByTagName 같을까? 결과값은 다르다...
[React] Component Life-cycle ▷ Class형 컴포넌트의 liftcycle 1. componentWillMount(){ //component(render)가 실행되기 전에 할 일... } 2. render() 2-1. shouldComponentUpdate(new값, 상태) //기본값 true, false >> update 여부 결정 2-2. componentWillUpdate() //업데이트를 하기 전에 할 일 2-3. componentDidUpdate() //업데이트를 한 후에 할 일 3. componentDidMount() { //component(render)가 실행된 후 } 4. componentWillUnmount() { // component(render)가 삭제된 후 ..
[React] 클래스 컴포넌트 (class) 클래스 컴포넌트의 기본 구조 import React, { Component } from 'react'; class classComponent extends Component{ state = { example = '' } render(){ return ( {this.state.example} ) } } export default classComponent class형으로 Component를 extends 한다. state를 설정 render() 안에 return 하기 state 값 접근 → this.state state 값 변경 → this.setState() [React] 함수형 컴포넌트 (Hooks) 함수형 컴포넌트의 기본 구조 import React fro..