전체 글58 [우아한 테크코스 3기 프론트엔드] 프리코스 후기 우아한 테크코스 3기 웹 프론트엔드에 지원했습니다! 우아한 테크코스는 우아한 형제들에서 진행하는 개발자 양성 교육 프로그램입니다. 본래 2기까지는 java로 진행되는 웹 백엔드 과정만 진행했지만, 3기부터는 javascript로 진행되는 웹 프론트엔드 과정을 추가로 개설해 운영하고 있습니다. 덕분에 3기에 지원해 웹 프론트엔드 과정에 지원할 수 있는 기회를 얻었고, 또 감사하게도 프리코스 과정에 참여할 수 있게 되었습니다. 길지만 또 짧았던 3주라는 시간동안 프리코스 과정을 통해 배웠던 것을 정리하고, 또 미션을 진행하며 제가 느낀 점들과 과정을 통해 어떻게 성장했는지 공유하고 싶어 글을 쓰게 되었습니다. 그리고 또 저도 수많은 프리코스 후기들을 보면서 도움을 받은 만큼, 부족하지만 제 후기를 통해 다른.. 2020. 12. 29. [CSS] em과 rem의 차이 간단히 말해 em은 상위 컴포넌트의 크기를 가져오는 것이고, rem은 root 컴포넌트의 크기를 가져오는 것이다. 예를 들어 안녕 이렇게 되어 있을 때, span의 "안녕" 사이즈는 바로 상위 div인 second-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-div의 font-size는 first-div(root-div)의 영향을 받아 100*0.5로 50px이다. 즉, span의 폰트 사이즈는 50*0.5로 25px가 된다. 하지만 만약, rem을 쓰게 된다면, 안녕 span의 "안녕" 사이즈는 root div인 first-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-.. 2020. 8. 6. [Django] shell에서 pandas를 이용해 중복 데이터 drop하기 django_import_export를 쓰면서 기본적으로는 데이터 중복이 알아서 잘 들어가지만 가끔 안먹고 똑같은 데이터가 중복해 들어갈 때가 있다. 그런 경우에는 백단에서 어떻게 처리? 작업?을 해줘야 하는지 잘 모르겠어서 django shell을 사용해 중복을 제거해 주기로 결정했따. 사실 중복 제거.. 라기 보다는 db 내용을 복사해 dataframe으로 만들어 drop해준 후, db 초기화를 한 후 다시 넣어주는 것이다. 더 좋은 방법이 있으면 다시 포스팅 하는 것으로.. 일딴 시작! 필요한 라이브러리는 pandas! pip3 install pandas 위를 이용해 pandas 라이브러리를 다운받는당. python3 manage.py shell 터미널에 위 코드를 입력해 shell을 켜준다. fr.. 2020. 8. 3. [JS] Object.assign과 spread operator의 차이점 강의를 듣따가 궁금한 점이 생겼따. 1. Object.assign을 사용 handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat( Object.assign({}, data, { id: this.id++ ) }); }; 2. spread operator 사용 (...) handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat({ …data, id: this.id++ }) }); }; 두개가 똑같다고 하는데 분명 머가 다른점이 있을 것.. 2020. 7. 31. [iOS] Mach-O header code 0x72613c21 에러 해결하기 이 에러는 처음에 나왔을 때 겁나 구글링해보고 무슨 문젠지 많이 헤맸었는데 이젠 아쥬 쉽게 고칠 수 있다. General > Frameworks, Libraries, and Embedded Content에 들어간다. 거기에 있는 Framework 중 Embed 되어있는 Framework를 Do not Embed로 바꿔준다. 위 사진처럼 되어있는걸 요것처럼!! 그러고 Build Clean을 한번 해준 후, 다시 아카이브하면 에러가 해결된다 ^^ 2020. 7. 29. [1] LifeCycle API (생명주기) LifeCycle API (생명주기) 컴포넌트가 브라우저 상에서 나타날 때, 업데이트 될 때, 사라질 때 중간 과정에서 어떤 작업을 하고싶다 할 때에는 LifeCycle API를 사용하면 됨. 이 전체를 외우라는게 아니라 나중에 사용해야 할 때 적절히 사용하고, 사용하면서 외우면 됨. LifeCycle API의 종류는 매우 다양한데, 아래와 같은 개념들이 있다. Mounting (직역 : 설치) - 컴포넌트가 브라우저 상에 나타난다는 것 constructor : 생성자 함수 - 우리가 만든 컴포넌트가 처음 브라우저 상에 나타날 때 만들어지는 과정에서 가장 먼저 실행되는 함수. (저번에 잠깐 기록함) 컴포넌트가 가지고 있는 state를 초기 설정한다던지, 컴포넌트가 만들어지는 과정에서 미리 해야하는 작업이.. 2020. 7. 8. [2] Props, State State 란? 앞에서 Props를 배웠다. Props는 자식 입장에서 읽기 전용이라고 했당. State는 그것보다 자기주도적이당. Props에서는 부모가 자식한테 너의 name은 이거야! 라고 전해줬다면 State는 자식 컴포넌트가 자체적으로 처음부터 name을 가지고 있는다. 그리고 값을 변경하고 싶을 때에는 컴포넌트의 내장함수인 setState를 사용해 변경해준다. 값이 바뀔 때는 다시 렌더링됨! 실습해 볼까yo - Counter 만들기 import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 }; // state는 객체{}여야 합니다! 문자열이나 숫자면 안돼용 handleIncreas.. 2020. 7. 8. [1] Props, State Props와 State는 리액트에서 데이터를 다룰 때 사용되는 내용이다. Props란? 주로 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용되는 내용 하지만 자식 입장에서는 읽기전용 이기 때문에 값을 바꾸지 몬해용 나중에 컴포넌트를 만들게되면, 아래와 같이 그걸 불러와서 사용을 할 수가 있음. 그리고 만약 우리가 어떤 값을 컴포넌트를 렌더링 할 때 전달해주고 싶다, 하면 value="value1"처럼 값을 넘겨줄 수 있음. 여기에서 value가 바로 props 인 것! 되게 중요합니당! ⋌༼ •̀ ⌂ •́ ༽⋋ 실습! - 자식 컴포넌트에 값을 넘겨주기 // MyName.js // App.js에서 사용할 MyName이라는 컴포넌트를 하나 만들었다. import React, { Component, Fra.. 2020. 7. 8. [2] JSX 기본 문법 CSS Style과 Class를 사용하는 방법 const에 style을 정의해줄 수 있슴당. 1. 보통의 CSS에서는 '-' 를 사용해 띄워줬지만 js에서는 Camel Case를 사용해용 요런 식 입니다. background-color => backgroundColor font-size => fontSize import React, { Component, Fragment } from 'react'; class App extends Component { render() { const style = { backgroundColor: 'black', padding: '16px', color: 'white', fontSize: 15 + 10 + 'px' }; return ( 안녕하세용! ); } } export.. 2020. 7. 6. 이전 1 2 3 4 5 6 7 다음
