Ideveloper's software blog

일상:FE CONF 2018 후기 fe conf는 작년 처음 진행되었고, "프론트엔드를 개발하며 마주했던 치열한 고민과 깊은 인사이트를 공유하며 함께 성장하자"는 모토를 가지고 진행되는 컨퍼런스입니다. 세션은 track1과 track2로 분리되어 진행 되었는데요. 각자 장소를 옮겨가며 듣고 싶은 세션을 들을 수 있게 다채롭게 구성되었었습니다. https://2018.feconf.kr/ | 세션별 후기 11:10 - 11:50 > 미국 개발자 vs 한국 개발자 - 켄님 일단 이 세션에서는 미국 개발자 들과 한국 개발자들의 다른점 그리고, 이러한 개발자들이 어떠한 환경에서 개발을 하고 있는지에 대한 여러 차이점들에서 발표를 해주셨습니다. 먼저, 개발능력에 관해서 설명을 해주셨는데요. 구글 코드 잼 사례를 들..

일상:2018 디지털 헬스 해커톤(digital health hackaton) 참여 후기 | 해커톤 대회 관련 링크https://www.digitalhealthhack.org/ | 일정 팀장으로써 팀원들을 모으고, 그전에 약 세차례 오프라인 매주 한번 미팅을 가져, 아이디에이션 과정을 거쳤었습니다.당일 대회는 10,27 ~ 10.28 삼성서울병원에서 무박2일간 진행 되었습니다. | 진행 과정 간호학과 1명, 기계공학과 1명, 컴공 2명 (나포함) 으로 총 4명으로 팀을 구성하여, 간호사의 인력난 문제를 해결해줄 비의료적 질문을 답해주는, 음성인식 AI 웹 HOVI (Hospital + Navi ) 라는 아이디어를 토대로 해커톤에 참여하였었습니다.해커톤 당일, 여러 의료 종사자들과 저희의 아이디어에 대해 ..

CSS: 쉽게 가운데로 수직 정렬하기 | 시작하기에 앞서 종종, 요소들을 가운데로 수직정렬해야 할때가 있다. 그때 사용할수 있는 css tip이 있다. | 정렬하는법 가운데 수직 정렬을 하려면 아래와 같이해주면 깔끔하게 요소들이 수직 정렬된다. display: inline-block; vertical-align: middle; height: 100%; https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div위의 링크를 참고해보면, 위와 같이 수직정렬하는것이 크로스 브라우징 이슈도 해결하고 best practice라고 나와있다.자주 애용해도 좋을 것 같다!> 예제http://jsfiddle.net/kiz..

일상:DEVIEW2018 후기 운 좋게, 데뷰 선착순 신청에 당첨되어서 데뷰 행사를 다녀오게 되었습니다! 주변에서 많은 분들이 실패를 해서,ㅠ 다른 분들과 함께갔으면 더 좋았겟지만 ㅠㅠ 그래도, 가서 열심히 듣고 왔습니다! (감사합니다 팀장님ㅎㅎ) 행사 스케쥴 링크: https://deview.kr/2018/schedule | 11:00 ~ 11:45 지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기) - 김효님 이 세션에서는 웨일 브라우저를 매니징하면서 1년동안 어떤 목표를 세웠고, 어떻게 그 목표를 해결해 나갔는지의 과정과 앞으로의 목표에 대해서 들을 수 있는 세션이었습니다. 웨일브라우저의 강점인 한 화면에서 여러가지 작업을 할 수 있는 옴니태스킹을 살리..

일상:일일커밋 6개월 회고 https://github.com/zx6658 1. Side Project2. TIL, 학습내역 기록3. 오픈소스 컨트리뷰트 일일커밋을 시작한지 100일이 되어 https://ideveloper2.tistory.com/129에 회고를 했었는데, 솔직히 말해서 꾸준히 더 이어나갈수 있을까 라는 생각에 100일되었을때라도, 기록을 남기자! 라는 생각으로 포스팅을 하였었는데...ㅎ 어느덧, 일일커밋을 시작한지 6개월이 되어 그 이후의 경험을 다시한번 공유합니다! ㅎㅎ :) | 1. Side Project https://github.com/zx6658/react-pension-template ( react+ redux + firebase ) 대부분 주니어 개발자들은 이미 다 완성되어있..

css :선택자(selector) | 부모 자식 선택자 1. 모든 자식에게 적용 ( ul 밑의 모든 li 에게 css 적용)ul li{ }2. 직계 자손에만 적용 ( id가 example인것 바로 아래 li에만 적용)#example > li{ } 3. 모두에게 적용 (ul태그와 ol 모두에 적용)ul,ol { }[예제] 1, 2, 3 사용된 예제 코드 // ul 밑의 모든 li 에 적용 ul li{ color:red; } // #lecture밑의 직계자손 li에만 적용 #lecture>li{ border:1px solid red; //color: blue; 더 많은 pseduo class selector참고링크: https://developer.mozilla.org/ko/docs/Web/CSS/Pseud..

Web:iframe 사용시 하단에 발생하는 공백 제거방법 | 시작하기에 앞서 iframe 을 사용하다 보면 하단에 하얀 공백이 생길때가 있다. 그때 해결할 방법은 아래와 같다. | 해결 방법https://stackoverflow.com/questions/7290214/html-strange-space-between-iframe-elementsAn iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing..

React :페이지 스크롤 후 특정시점에 액션 실행시키는 방법, 특정 컴포넌트의 브라우저 위치에 따라 특정 액션 실행시키는 방법 | 시작하기에 앞서스크롤시에, 특정시점 (1. 웹 페이지를 특정영역만큼 스크롤 했을때 2. 컴포넌트가 브라우저상에서 특정 위치에 위치해 있을때)에 navbar의 css 클래스를 변경시켜줘서 기본 display none인 nav bar를 css를 업데이트 시켜줘서 상단에 보이게하는등과 같이 구현할때 활용하면 좋은 예제이다.1. 웹페이지를 특정역역만큼 스크롤했을때는 compononentDidMount에서 스크롤 이벤트를 등록하고, onScroll 메소드를 활용해서 state를 스크롤할때마다 업데이트하여 이를 활용하는 방식으로 기능을 구현하면 된다.2.컴포넌트가 브라우저 상에서 특정..