profile
오늘 배운건 오늘 소화하자!
post-thumbnail

[프로젝트] 4. 기술스택 선정하기

기능적, 비기능적 요구사항을 바탕으로 필요한 기술 스택을 선정하는 단계이다. 다음 기술 스펙들은 데브코스 프로젝트에서 사용된 기술 스펙들이다.프론트엔드 관련 프레임워크 중 Angular, Vue와 더불어 가장 유명한 프레임워크다.(엄밀히 따지면 React는 라이브러리이

2021년 11월 8일
·
0개의 댓글

[프로젝트] 3. UI Sketch, Wireframe, 시안 제작하기

들어가기 UI 제작은 UI/UX 디자이너들이 담당하는 경우도 있지만, 상황에 따라 담당자가 없는 경우, 프론트엔드 개발자가 디자인까지 하는 경우도 있다. 데브코스 프로젝트를 비롯하여, 대다수의 교내 프로젝트에서 디자이너가 있는 경우가 드물기 때문에 디자인 툴 활용법을

2021년 11월 8일
·
0개의 댓글

[프로젝트] 2. 요구사항 분석하기

서비스에서 제공하고자 하는 기능들을 줄글로 나열해본다기능들을 카테고라이징 한다각각의 기능별로 CRUD(Create, Read, Update, Delete)이 필요한지 여부를 판단하고, 추가한다쉽게 말하면, 단순히 특정 기능을 구현하고 작동 여부만 판단하는 것을 의미한다

2021년 11월 8일
·
0개의 댓글

[프로젝트] 1. 프로젝트 기획

일러두기 주제가 이미 정해져 프로젝트 세팅이 궁금하면 여기 핵심만 보고 싶다면 제목만 참고하셔도 됩니다 해당 포스팅은 KDT 데브코스 프론트엔드에서 진행한 중간 프로젝트 경험을 기반으로 작성하였으며, 데브코스에서 이미 정한 규칙에 해당하는 경우, 저의 개인적인 프로젝트

2021년 11월 8일
·
0개의 댓글

[TIL] Vue.js의 시작

드디어 vue.js학습을 시작하게 되었다. 이번 교육과정에서 처음 진행하는 프레임워크 수업이다. 자체적으로 교내 프로젝트를 이유로 react를 학습한 적은 있지만 사실 단편적인 부분만 필요에 의해서 학습하고, react와 vanila js문법 조차 구분 못하고 쓰던 시

2021년 10월 4일
·
0개의 댓글

[프로젝트] 유튜브 Clone & 네이버 Clone

개발 학습을 하면서 많이들 사용하는 방법중 하나가 클론코딩이다. 해설지가 존재하는 문제이다 보니 답을 도저히 모르는 경우 해답지를 찾아보면서 할 수 있는 방식이기에 처음 언어를 배울때 또는 배운 내용들을 활용하여 페이지를 제작함으로써 언어에 대한 이해를 높일 수 있는

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[네트워크] HTTPS와 SSL

httphypertext transfer protocol의 약어로 html 전송을 위한 통신 프로토콜(=web browser(client)와 web server(server)가 통신하기 위한 프로토콜)https: http + SSL(over Secure Soc

2021년 10월 3일
·
0개의 댓글

[TIL] Flex vs Grid

Flex와 Grid, 모두 CSS에 있는 속성으로 웹 페이지의 레이아웃을 잡는데 사용된다. 그러나 두 속성의 차이를 잘 이해하지 못하면 어떤 속성을 써야 할지 헤깔리는 경우도 있고, 하나의 속성에 대해서만 학습하여 그 속성만 활용하는 경우도 있다.쉽게 말하자면 둘의 차

2021년 9월 19일
·
0개의 댓글

[TIL] CSS - Transform

지난번에 배웠던 내용이 CSS로 레이아웃 잡는 법이라면 오늘은 CSS로 애니메이션을 만드는 방법에 대해 주로 배웠다. 그동안 레이아웃을 잡고, 컴포넌트 별로 꾸미는 방식은 배웠지만 애니메이션의 경우 필요에 따라 코드를 찾는 방식으로 학습했던 터라 사실상 아예 개념이 잡

2021년 9월 19일
·
0개의 댓글

[TIL] APP과 Main을 분리하는 이유

약 2주째 vanila js로 프로그램을 따라 만들어보고, 프로젝트를 만들어 보고 있다. 그때마다 강사님께서는 App.js와 main.js를 분리해서 만드셨다. 수업 초반에 "왜 이 둘을 분리해서 쓰는지 생각해보세요." 라는 말을 한적이 있다. 사실 수업을 들으면서 m

2021년 9월 19일
·
0개의 댓글
post-thumbnail

[TIL] Debounce

프로그램을 따라 만들어보면서 기법을 배우는 시간이었다. 이전에 배웠던 기법들을 반복적으로 사용하다보니 어느새 자연스럽게 필요한 순간에 별도의 참고 코드 없이 사용할 수 있는 수준이 되었다. 그러나 몇몇은 아직 손에 익지 않은 기법도 있는데 그중 하나가 Debounce

2021년 9월 19일
·
0개의 댓글
post-thumbnail

[네트워크] TCP/UDP와 3way handshake

TCP 3 Way Handshake는 TCP/IP프로토콜의 Transport Layer을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미Transport Layer:TCP/

2021년 9월 18일
·
0개의 댓글
post-thumbnail

[TIL] CSS - Float, Flex, Grid

border의 색상을 지정하지 않으면 글자색에 따라 색상이 결정된다floatfloat 옵션을 끝내는 지점에서 별도의 해제 작업이 필요하다방법1다만 위와 같은 방식은 쓰지도 않을 dom을 일부러 생성해야 한다는 단점이 있다.방법2방법3after라는 가상 요소를 통해 3번

2021년 9월 6일
·
0개의 댓글
post-thumbnail

[TIL] Notion Clone Project 5일차(마무리)

오늘은 프로젝트 마감일이면서 마무리를 하는 날이다. 다행히 전날 무난하게 프로젝트를 마무리하고, 기능 점검에서도 무리 없이 끝났다. 오늘의 작업은 코드의 가독성, 불필요한 코드 등을 점검하고, README와 PR 메시지를 작성하는 것이 주요 일과 였다사실 지금까지 많은

2021년 9월 5일
·
0개의 댓글
post-thumbnail

[TIL] Notion Clone Project 4일차

3일차에 Navigation, Editor 컴포넌트 기능을 모두 구현하였다. API와의 통신도 잘 이뤄어지고, 각 컴포넌트들의 기능들도 잘 작동하였다. 이제 노션과 최대한 비슷하게 꾸밀 일만 남았었다.이번 프로젝트에서 처음으로 SCSS를 사용해서 CSS 코드를 작성하였

2021년 9월 5일
·
0개의 댓글
post-thumbnail

[TIL] Notion Clone Project 2일차

어제의 설계를 바탕으로 구현을 시작했다. 컴포넌트의 역할을 명확히 나눴기에 순서를 꼭 구분지을 필요는 없으나, 구현을 함에 있어서 결과값이 금방 드러나는 것, 다른 컴포넌트를 구현하고 결과를 확인할 때 가장 도움이 될 컴포넌트들을 먼저 만드는게 더 좋을것 같아서 순위를

2021년 9월 5일
·
0개의 댓글
post-thumbnail

[TIL] Notion Clone Project 1일차

KDT 데브코스를 시작한지 벌써 1달이 지났고, 많은 내용들을 배웠다. 그리고 그 배웠던 것들을 이제 직접 구현해 보는 시간이 왔다. 첫 개인 프로젝트로 Notion Clone 미션이 나왔다. 물론 프로젝트 자체를 처음하는 건 아니라서 그렇게 떨리진 않았지만, 대부분

2021년 9월 5일
·
0개의 댓글
post-thumbnail

[리뷰] 프로그래머스 키트

굉장히 오랜만에 선물이 도착했다. 프로그래머스 KDT에서 활동을 한지 벌써 1달이 지난 시점에서 무언가 새로운 동기부여가 될 만한 것이 있으면 좋을것 같을 찰나에 정말 가지고 싶은 물건들이 도착했다!첫인상은 애플 제품을 언박싱하는 기분을 주려 했는지 흰 바탕에 검은 글

2021년 8월 29일
·
0개의 댓글
post-thumbnail

[TIL] week 4

1. 비동기 통신 이번주는 Vanila JS에서 비동기 통신 관련 개념을 학습하였다. 통신에서 주로 사용되는 AJAX, Promise..then, async..await를 문법적인 내용 뿐만 아니라 실습해보는 시간까지 주어졌다. 2. API && 현업에서 사용하는 기

2021년 8월 28일
·
0개의 댓글
post-thumbnail

[Article] Javascript This

property(상태(state)를 나타냄) + 메서드(동작(behavior) 을 나타냄을 하나의 논리적인 단위로 묶은 복합적인 자료구조메서드는 자신이 속한 객체의 상태 즉, 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 객체의 프로퍼티를 참조하려면 먼저 자신이 속

2021년 8월 25일
·
0개의 댓글