Large Rainbow Pointer
[코드잇 스프린트 6기] 6개월 간 과정을 마치며 (코드잇보다는 내 이야기 위주)
💜 후기 및 활동/코드잇 스프린트 6기2024. 9. 7. 14:56[코드잇 스프린트 6기] 6개월 간 과정을 마치며 (코드잇보다는 내 이야기 위주)

시작하며...길고도 짧았던 6개월 간의 코드잇 스프린트 여정이 이번 주 마침내 막을 내렸다... 🥹이 기간 동안 많은 경험을 통해 성장하며, 내 삶에 있어서 기억에 남는 일 중 하나일 것이다.오늘은 그 6개월을 돌아보며, 지난 기간 "나"라는 사람에 대해 깊이 생각해 보고 무엇을 얻게 되었는지 글로 작성하게 되었다.(코드잇 관련 내용은 별로 없고, 혹시라도 코드잇 스프린트가 궁금하면 파트별 회고랑 프로젝트 회고 보는 거 추천해요.)  왜 프론트엔드 개발자?? 왜 코드잇 스프린트?? 👀프론트엔드 개발자를 선택한 이유나는 원래 웹 개발과는 거리가 멀었다.  임베디드 전공자로 하드웨어와 회로, C언어 같은 로우레벨 분야를 주로 공부했으며, HTML이라는 단어조차 3학년 2학기에 처음 접했다.  그동안 나는..

[우주윗미] 코드잇 스프린트 심화 프로젝트 회고
💜 후기 및 활동/프로젝트2024. 9. 6. 18:37[우주윗미] 코드잇 스프린트 심화 프로젝트 회고

시작하며...드디어 코드잇 스프린트의 마지막 프로젝트인 "심화 프로젝트"를 마쳤다.  이번 프로젝트는 이전 프로젝트들과 달리 약 6주간 진행되었고, 지난 기간을 돌아보며 프로젝트를 구현하는 동안 나는 어떤 고민과 결정을 거쳐 프로젝트를 완성했는지 정리하기 위해 회고를 작성하게 되었다. 프로젝트 깃허브 링크 https://github.com/sprint6-part4-team3/WouldYouWithMe GitHub - sprint6-part4-team3/WouldYouWithMe: 팀원을 모집하여 함께 스터디 투두리스트 관리하는 서비스팀원을 모집하여 함께 스터디 투두리스트 관리하는 서비스. Contribute to sprint6-part4-team3/WouldYouWithMe development by c..

[코드잇 스프린트 6기] 파트 3(5월27일 ~ 7월13일) 회고
💜 후기 및 활동/코드잇 스프린트 6기2024. 7. 17. 15:42[코드잇 스프린트 6기] 파트 3(5월27일 ~ 7월13일) 회고

(짧은 회고... 프로젝트 회고 위주로 봐주세요)시작하며...벌써 코드잇 스프린트 6기를 시작한 지 벌써 절반이나 지났고 마지막 파트만 남아있다. 정말 시간이 빠르고 지난 기간 동안 많이 성장하고 좋은 동료들을 만날 수 있어 좋은 경험이었다. 1. 프로젝트파트2때 기초 프로젝트를 진행했고, 이번 파트 3에서는 중급 프로젝트를 진행하였다.  너무 좋은 팀원들을 만나 즐겁게 개발할 수 있었고 팀원들의 코드를 리뷰하면서 나도 새로운 내용과 인사이트를 얻을 수 있었다.  자세한 내용은 해당 링크에서 확인할 수 있다. https://jjang-j.tistory.com/140 [Wiked] 코드잇 스프린트 중급 프로젝트 회고시작하며...코드잇 스프린트 6기 파트3에서 6월 21일부터 7월 9일까지 약 2주간 중급 ..

[wiki-viki] 코드잇 스프린트 중급 프로젝트 회고
💜 후기 및 활동/프로젝트2024. 7. 15. 13:20[wiki-viki] 코드잇 스프린트 중급 프로젝트 회고

시작하며...코드잇 스프린트 6기 파트3에서 6월 21일부터 7월 9일까지 약 2주간 중급 프로젝트를 진행하였다. 프로젝트를 진행하면서 내가 어떤 것을 구현하고 고민했는지를 상기하고 다시 한번 돌아보기 위해 글을 작성하게 되었다.https://github.com/wiki-viki/wiki-viki GitHub - wiki-viki/wiki-viki: 코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다.코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다. Contribute to wiki-viki/wiki-viki development by creating an account on GitHub.github.com 프로젝트 선정 목적프로젝트 선정 이유지난 초급 프로젝트와 동일하게..

[코드잇 스프린트 6기] 파트 2(4월7일 ~ 5월25일) 회고
💜 후기 및 활동/코드잇 스프린트 6기2024. 5. 31. 01:05[코드잇 스프린트 6기] 파트 2(4월7일 ~ 5월25일) 회고

시작하며...코드잇 스프린트 6기 파트 2 가 끝이 났다.파트2 동안 기초 프로젝트도 진행하고 개인적으로 시험준비도 해서 바쁜 하루를 보냈다. 그리고 벌써 반이나 지났다는 게 실감이 나지 않는다...😱 [파트 1 회고록] [코드잇 스프린트 6기] 파트 1(3월7일 ~ 4월6일) 회고시작하며...코드잇 스프린트 6기 파트 1이 끝이 났다.처음엔 국비 교육을 들을까 말까 고민했었는데 1회차 후기는 매우 만족스러웠고 빨리 다음 내용을 배우고 싶다. 팀 활동우선 코드잇 스프린jjang-j.tistory.com  프로젝트이번 파트 2땐 기초 프로젝트를 진행했다.정말 많은 일이 있었고 힘들었지만 😂 이것저것 경험할 수 있게 되어 전보다 성장할 수 있는 계기가 되었다. 프로젝트 회고는 새 게시물을 올릴 예정이지만..

[코드잇 스프린트 6기] 나.테.소 이벤트 수상 후기
💜 후기 및 활동/코드잇 스프린트 6기2024. 5. 27. 10:26[코드잇 스프린트 6기] 나.테.소 이벤트 수상 후기

코드잇 스프린트 나.테.소 이벤트코드잇 스프린트에서 매주 위클리 페이퍼를 작성한 후 나.테.소 - 나의 테크 블로그를 소개합니다 이벤트에 응모를 하면 코드잇 스프린트 6기뿐만 아니라 다른 기수까지 합쳐서 추첨을 통해 상품을 주는 이벤트를 하고 있다. 그래서 블로그에 위클리 페이퍼 포스팅 하면서 나.테.소 이벤트에 매주 응모를 했었다. 내가 지금까지 작성한 위클리 페이퍼프로젝트 기간을 제외하고 모두 위클리 페이퍼를 작성하였다.모아보니 참 많다... 1주 차 - https://jjang-j.tistory.com/63 [CSS] CSS의 CascadingQ. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 ..

[TypeScript] 자바스크립트 대신 타입스크립트 사용하는 이유 🤔
💜 프론트엔드/TypeScript2024. 5. 26. 17:19[TypeScript] 자바스크립트 대신 타입스크립트 사용하는 이유 🤔

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

[React] 렌더링 방식 CSR, SSR, SSG & CSS-in-JS의 장점과 단점
💜 리액트/React2024. 4. 29. 10:09[React] 렌더링 방식 CSR, SSR, SSG & CSS-in-JS의 장점과 단점

Q. 질문 1웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #8)A. 렌더링 방식 - CSR, SSR, SSG웹 페이지 렌더링 방식에는 CSR, SSR, SSG 가 있다. 1. CSR - 클라이언트 사이드 렌더링1-1. 특징먼저 CSR 은 클라이언트에서 렌더링을 하는 방식이다. 사용자가 웹사이트에 접속을 하면 브라우저는 서버에 요청을 하여 빈 HTML 과 연결된 JavaScript 를 브라우저에게 주게 된다.그러면 브라우저에서는 JavaScript 를 사용하여 동적 DoM 을 생성해 사용자에게 화면을 보여준다. 일반적으로 React 와 같은 프레임워크를 사용하여 개발이 된다. 1-2. 적합한 상황동적 ..

[React] key Props를 사용하는 이유 & 리액트 생명주기
💜 리액트/React2024. 4. 21. 23:38[React] key Props를 사용하는 이유 & 리액트 생명주기

Q. 질문 1리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #7) A. key propsReact 에서 map 을 사용하여 배열을 렌더링 할 때엔 key 를 써야 한다.{options.map((option) => ( {option.label} ))} 만약 key 를 쓰지 않을 경우 아래처럼 콘솔창에 key 가 있어야 된다고 경고가 뜬다.그렇다면 왜 key 를 써야할까? 엘리먼트에 안정적인 고유성을 부여각 엘리먼트는 key 값을 통해 어떤 항목을 변경, 추가, 삭제할지 식별해준다.그래서 엘리먼트의 고유성을 부여하기 위해서는 key 를 지정해야 한다. 그래서 key 값으로 식별을 하여 해당 엘리먼트에 안정적인 고유성을 부여해 렌더링을 효과..

[React] 리액트 Virtual DOM 가상돔
💜 리액트/React2024. 4. 14. 15:34[React] 리액트 Virtual DOM 가상돔

Q. 질문리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #6) A. DomDOM 이란?DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다. 하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다. 레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다. 그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다. A. Virtual DOMVirtual DOM 이란?React 에서는..

image
loading