thumbnail

전체 글

✏️ Rewind/정기회고

[주간회고] 데브코스 1주차 회고 (230918~230924)

1. OT 19일에 진행한 오리엔테이션을 시작으로 데브코스의 여정이 시작되었다. 첫날은 출석, 장려금 등의 행정적인 안내와 스펜서 매니저님의 커뮤니케이션 & 성장을 위한 사고방식 특강이 진행되었다. 기억에 남았던 내용들을 정리해보았다. 학습과 성장이라는 '업무'가 주어졌다고 생각하고 데브코스에 임하기 노력 없는 맹신은 없다. 능동적으로 임하기 얇게 알고 있는 것들, 편견들은 Conflict를 해결하고 Merge하기 (Main에 바로 해도되나요..?) 기복에 관계 없이, 해야되니까 한다는 마인드로. 그것이 프로니까.. 이후에는 직군별로 방을 옮겨 추가적인 안내사항, 데브코스의 문화에 대해 전달받았다. 정규 교육과정 이외에도 챙겨야 할 것들이 많았어서 첫 날엔 하루죙일 노션 페이지와 슬랙만 배회하였다는.. ..

✏️ Rewind/후기

[후기] 프로그래머스 데브코스 프론트엔드 5기 합격 후기

지원동기평소 프론트엔드 분야를 혼자 공부하면서 적절한 속도로 학습하고 있는지, 놓치고 있는 부분들은 없는지, 너무 지엽적인 내용에 빠져드는 건 아닌지 같은 의문과 아쉬움을 항상 갖고 있었다. 비전공자 입장에서 주변에 조언을 구할 곳도 마땅치 않았다. 체계적인 시스템과 커리큘럼을 통해 영리하게 학습할 필요성을 느꼈고, 자소서나 그간의 학습 자취에 중점을 둔 차별화된 선발 방식에 매력을 느껴 데브코스에 지원하게 되었다. 워낙 수료생 분들의 만족도가 높은 것도 큰 이유였다.  서류7월 초부터 한 달간의 서류 지원 기간이 시작되었다. 선택 항목을 포함에 약 9개의 문항이 존재했다. 처음에는 사실 큰 비중을 두어 생각하지 않았다. 초고를 제출한 후 이전 기수의 후기들을 찾아봤는데, 어..? 이럼 안되겠는데?라는 ..

📘 React

[리액트] 쇼핑몰 클론코딩하기 (얼렁뚱땅 상점)

1. 들어가며 드림코딩 리액트 강의의 마지막 섹션이자, 이전에 진행하였던 유튜브 클론코딩과 이어지는 프로젝트이다. 유튜브 프로젝트에서는 외부 API나 기본적인 리액트의 구조를 익힐 수 있었다면, 본 프로젝트에서는 Firebase를 통한 DB, 인증, 클라우딩까지 영역을 확장하였다. 전체적인 스타일링보다는, 단계적으로 개발이 진행되는 과정과 기능들을 어떤 로직으로, 왜 그렇게 구현했는지를 이해하며 따라가려고 노력했다. 2. 기능 구현해야할 주요 기능은 크게 네 가지로 나뉘어진다. 디테일한 로직이나 코드는 생략하겠음. 로고, 로그인, 장바구니 갯수 등의 정보를 담고 있는 헤더 상품 리스트를 확인할 수 있는 메인페이지 제품들의 상세 정보와 장바구니에 추가할 수 있는 제품 상세페이지 담아 놓은 제품들을 확인, ..

✏️ Rewind/정기회고

[월간회고] 2023년 8월 (230801 ~ 230831)

0. 교내 창업동아리에서 진행하는 1박 2일 캠프를 막 다녀온 참이다. 사실 숙소가 너무 좋길래, 면접까지 끝났고 좀 쉬고 올까해서 참여하게 되었다. 근데 웬 걸? 발표자료 준비하니 새벽 두 시다. 개발이 거의 끝난 챗팟을 들고 갔는데, 비즈니스 모델 관련하여 고도화도 많이 이루어졌고 피드백들도 받을 수 있어서 굉장히 유익한 시간이었다고 생각한다. 1등해서 대상 받음! 별 거 없지만 기분은 좋았다. 1. 8월을 한 단어로 정의하면 '데브코스'다. 초순엔 서류를 준비하고, 중순엔 코테를, 말엔 면접을 준비했다. 한 달간은 이것만 보고 달린 것 같다. 준비 과정 자체만으로도 큰 경험이 되었다 생각하고, 자세한 내용은 다음 주 발표가 나면 회고로 작성할 예정이다. 열심히 준비한만큼 좋은 결과가 있었으면 좋겠다..

📒 Javascript

[자바스크립트] ES6 (2) : Promise

이전 글에서 ES6의 변수선언 방법, 화살표 함수, Rest 파라미터, Spread / Destructuring에 대해 정리했었다. 이외에도 템플릿/강화객체 리터럴, 클래스, 모듈, 고차함수 등의 변경점이 있었지만 이 글에서는 Promise에 대해 정리해보려 한다. Promise Promise는 자바스크립트에서 비동기 작업을 처리하기 위해 성공 혹은 실패 상태를 나타내는 객체이다. 이전부터 라이브러리를 통해 구현되었지만, ES6에서 기본 문법으로 지원하게 되었다. new Promise()를 통해 생성하거나, Async/Await를 통해 암시적으로 Promise를 반환핟을 수 있다. 선언 const myFirstPromise = new Promise((resolve, reject) => { // 비동기 코..

📚 CS/네트워크

[네트워크] TCP/IP와 OSI 계층

올해 초 CS 전공지식 도서를 읽으면서 TCP/IP 계층 모델과 OSI에 대해 정리한 적이 있다. 아무래도 책 자체가 전반적인 전문지식에 대한 요약본이다 보니, 다소 얕게 배우고 넘어갔던 기억이 있다. 워낙 중요한 내용들이기도 하고, 좀 더 정확하게 알고 있는 게 좋을 듯 하여 다시 정리해보려 한다. 선수지식 IP (인터넷 프로토콜) 지정한 IP주소에 데이터의 조각들을 패킷이라는 단위로 목적지까지 전송하는 역할을 하는 규약. 전송에만 목적을 두기 때문에 빠르지만 도중에 패킷이 유실되거나 순서가 꼬이는 문제가 발생할 수 있다. 이를 비연결성, 비신뢰성이라고 한다. TCP (전송제어 프로토콜) 패킷 데이터의 전달을 보증하고, 보낸 순서대로 받게 해준다. 도착한 패킷들을 점검하여 문제가 있는 부분은 재요청하는..

💻 Web

[웹/브라우저] SSR과 CSR

렌더링이란 HTML, CSS JS 파일을 수신하고 파싱하여 결과물을 화면에 그려내는 과정을 말한다. 자세한 단계는 브라우저 동작 원리 글에서 다룬 적이 있는데, 바로 이 렌더링이 발생하는 주체(시점)에 따라 SSR과 CSR이 구분된다. SSR (Server-side Rendering) 사용자가 서버에 페이지를 요청하면, 서버 측에서 HTML문서 내의 내용들을 렌더링 준비를 끝마친 상태(Ready to Render)로 클라이언트에 전달하는 방식을 말한다. 클라이언트에 전달되는 순간 HTML은 즉시 렌더링되며, 자바스크립트가 읽히기 전이기 때문에 사이트 자체는 조작할 수 없는 상태가 된다. (just-viewable) 이후에 클라이언트가 자바스크립트 파일을 수신하고, 리액트 등의 프레임워크를 통해 컴파일을 ..

📒 Javascript

[자바스크립트] 예외처리 (Exception handling)

에러와 예외 프로그래밍 간 우리는 항상 에러(Error)와 마주한다. 잘못된 문법을 사용했거나, 사전에 정의되지 않은 메서드를 사용하는 등의 경우에 발생한다. 예외(Exception)는 그 상황 자체를 가리키는 조금 다른 개념이지만, 일반적으로 혼용하여 사용하는 경우가 많다. 이들은 프로그램의 작동을 멈추게 하고, 다음 코드로 넘어갈 수 없게 된다. 따라서 이러한 에러나 예외가 발생하지 않도록 미리 방지할 필요가 있고, 발생했음에도 이상 없이 원래의 코드가 작동될 수 있는 예외처리가 필요하다. 예외처리 try / catch 자바스크립트를 포함한 많은 언어에서 제공하는 일반적인 예외처리 구문이다. try{}를 통해 실행시킬 코드를 작성하고, 실행 중 에러가 발생하면 catch{}를 통해 로그를 확인, 처리..

✏️ Rewind/정기회고

[월간회고] 2023년 7월 (230701 ~ 230731)

변동사항과 데브코스 7월이 지나갔고, 계획에 변동사항이 조금 생겼다. 표면적으로는 계획만 바뀐것 같지만 학습 방식이 바뀌었다. 지난 반기회고에서도 말했듯 지금 가장 중요한 우선순위는 부트캠프이기에, 이에 대비한 학습을 진행하고 있는 중이다. 전반적인 웹부터 자바스크립트와 리액트의 기본 개념과 원리들을 꼼꼼히 정리하며 면접에 대비하고 있다. 또한 코딩테스트도 프로그래머스에 있는 2레벨들을 모조리 정복 중에 있다. 8월 중순에 프로그래머스 데브코스 코딩테스트가 예정되어 있는데, 하루에 8~10문제씩 풀면 전부 풀 수 있을 듯 하다. 사실 알고리즘 공부를 하며 간간히 코테를 풀 땐 2레벨이 굉장히 멀게 느껴졌는데, 막상 부딪혀 차례대로 문제를 풀다 보니 꽤 할만 하다는 생각을 했다. 이 준비 과정 자체도 많은..

📒 Javascript

[자바스크립트] Iteration과 Iterable과 Iterator

객체나 배열을 순회하는 메서드를 적용하고자 할 때, TypeError : X is not iterable과 같은 오류를 마주한 적이 있을 것이다. 정확히 무엇을 의미하는지, 어느 객체 유형에 알맞은 메서드인지 정리하려 한다. Iteration 프로그래밍에서 Iteration이란 특정 작업을 반복적으로 수행하는 '행위'를 말한다. 데이터 구조의 각 요소를 순회하거나, 특정 작업을 반복 실행시킨다. 또한 Iteration이 가능한 객체 구조들을 Iterable(반복가능)하다고 말한다. 잠재적으로 반복이 가능함을 형용사로 부여하는 것이다. 자바스크립트의 배열(Array), 문자열(String), 집합(Set), 맵(Map)이 이에 해당한다. 객체(Object)는 반복이 불가능하고, 프로퍼티를 열거(enumer..

황재웅 Jaeppetto
심증을 물증으로