Developer Turtle-hwan

프리코스 참가와 1주차우아한테크코스에 한 번은 도전해보고 싶다고 생각하던 차에 동아리에서 하는 사람들도 많이 보여서 같이 스터디하며 성장히기 위해 지원했다.다른 부트캠프들과 다르게 프리코스를 다함께 풀어나가면서 더 좋은 코드에 대해 고민할 수 있는 시간을 가질 수 있다는 것이 좋아 보였다. 하지만 그만큼 시간이 많이 들어서 학기와 병행하는 건 매우 힘들다..자기소개서 작성프로그래머가 되려는 이유와 지원 동기 2000자오랜 시간 몰입했던 경험 그리고 도전 2000자프리코스 목표 설정 1000자도합 5000자에 달하는 자소서를 쓰면서 생각보다 글로 녹여내 쓸만한 경험이 많이 없다는 것을 느꼈다. 블로그를 좀 더 열심히 쓰면서 글을 많이 모아두어야겠다.요구사항요구사항은 기능 요구사항, 입출력 요구 사항, 프로..

소개인프런에서 주기적으로 크게 진행하는 행사인 판교 퇴근길 밋업에 드디어 선정되어 다녀오게 되었다!! 아직 학부생인데도 선발되어 정말 감사했고 좋은 경험이었다. 가서 보니 최종 지원자가 713명이었고 이 중 100명에 선발된 것!특히 이번엔 블로그와 링크드인 통해서 알고 있었던 인프랩 CTO 향로님과 개발바닥 유튜브 운영하시는 호돌님이 진행하신다 해서 큰 기대를 안고 갔었다. 일정은 개발바닥의 고민 상담 이후 식사하며 네트워킹 순서로 진행되었다.이번에는 특정 주제가 있는 것이 아니라 다양한 개발자 분들의 고민을 미리 신청할 때 받아 10개를 추려 향로님 & 호돌님이 직접 답변해주는 방식이었다.그런데 두 분 다 오랜 개발 경력 동안 쌓인 게 많으셨는지 답변을 진짜 줄줄이 계속 해주셔서 10개 중 6개밖에 ..

창업에 적극적인 친구 덕에 24.04.01에 마루180 지하에서 진행된 정창경 설명회에 가게 되었다. 디스콰이엇과 EO의 존재를 원래 알고 이용하면서 어떤 생각으로 이런 서비스를 만들었을지 정말 궁금했었는데 이번 기회에 관련된 이야기를 들을 수 있어 좋았다. 기대보다 큰 울림과 인사이트를 얻었고, 웹 상에서 떠도는 창업 관련 글보다 더 구체적이었다. 실제로 실패를 겪으며 여러 시도 끝에 성공한 창업가 분들 자신의 경험담을 직접 듣는다는 것의 의미가 컸다. 1부 디스콰이엇 박현솔 대표님 메이커들의 막막함을 해결하기 위해 디스콰이엇을 만들었다. 창업을 위해 필요한 요소 4가지 시장에서 간과되는 문제 내가 진정성을 느끼는 문제 타깃 유저 접근성 (타깃 유저가 우리 서비스를 쉽게 접근할 수 있어야 한다) 개발력..

2주차 과제는 주어진 피그마대로 당근마켓 화면1을 기본 HTML + CSS로 동일하게 구현하기였다. git repo fork 후 github pages로 배포해서 화면을 확인할 수 있게 했고, 결과물은 다음과 같다. 미션 결과물-당근마켓 화면1 링크 트러블 슈팅 해당 과제를 하면서 겪었던 이슈와 해결 방안은 다음과 같다. Issue 1 문제 상단 header가 고정이 안되어서 fixed로 고정했다. 그런데 fixed로 고정한 다음, header에 width 100% 를 주면 header가 화면보다 조금 커져서 화면 밖으로 튀어나간다?!?!?! 특히 → display: flex; justify-content: space-between; 해당 속성일 때 튀어나간다. 이 문제도 box-sizing: borde..

CSS class name 이름 짓는 법인 BEM 규칙은 이번에 처음 알게 되었다. 지금껏 정해진 className을 쓰면 자동으로 style을 맞춰주는 tailwind, bootstrap 이나 react에서 자동으로 class name을 만들어주는 CSS Module을 자주 써왔어서 접할 기회가 없었던 것 같다. 추가로 svg 작명법까지 찾아서 정리했다. CSS 우선순위 !important( 예시: .title-box{color: red !important;} inline(HTML에서 style을 직접 지정했을 때) id 선택(#id) class명(.class) HTML 태그(예시 : h3) 상위 Element의 속성 CSS 작명법 BEM(Block Element Modifier) CSS 작명법 BEM..

1) static position 속성의 기본값. 요소를 나열한 순서대로 배치. 원하는 위치에 콘텐츠를 배치할 방법 없음. 콘텐츠를 왼쪽에서 오른쪽으로 추가하다가, 오른쪽에 공간이 없을 경우 다음 줄로 넘겨서 순서대로 배치한다. 2) relative static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다. 이때 좌표값은 static 기준으로 위치한 곳이 (0px, 0px)이 된다. 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다. 3) absolute top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다. 기준 위치는 position 속성이 relative..

display: grid; 격자 모양으로 보여준다. grid parent 속성과 grid children 속성이 따로 있다. grid track : grid의 행 또는 열 grid cell : grid 한 칸 Grid parent properties display : inline-grid는 grid에 inline 속성을 부여해 준다. .container { display: grid | inline-grid; } grid-template-rows, grid-template-columns : grid track의 크기를 지정해준다. 숫자 값만 넣어도 되며, 다양한 이름을 지원한다. 1fr 1fr 1fr 은 fraction 약자로, 비율을 의미한다. 1:1:1 비율로 나눠준다. .container { grid..

display : flex; 축이 하나인 것. 한 쪽 방향으로 배열할 수 있다. flex 속성을 해당 element (flex container)에 주면, children elements (flex items)의 위치를 결정한다 flex container에 주어야 하는 속성과, flex items에 주어야 하는 속성이 따로 있다. flex container (parent)의 속성 flex-direction : 축의 방향을 결정한다. .container { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap .container { flex-wrap: nowrap | wrap | wrap-reverse; } https://code..

Web 기본 지식들을 키워드 기반으로 정리해보았다. HTML, CSS, JS HTML : 페이지의 틀 JS : HTML element 간의 동적인 동작 CSS : 색깔, element 배치 등 디자인 요소 Web API HTML5는 2004년에 등장했고 2014년에 W3C에서 표준안을 확정했으며, 다양한 Web APIs를 제공한다. HTML Geolocation API 사용자(브라우저)의 현재 위치를 받아올 수 있다. 지도 현 위치 표시 기능에 사용한다. 단, 브라우저 차원에서 보안 문젤 https에서만 사용 가능하도록 제한이 걸린 상태이다. HTML Drag and Drop API 웹 페이지에서 JS를 이용해서 element의 드래그, 드롭, 이동, 삭제를 간편히 구현 가능하게 지원한다. HTML We..