본문 바로가기

전체 글

(19)
프론트엔드 개발자가 알아야 할 캐싱(caching) 개념 정리 프론트엔드 개발 경험이 쌓이다 보면 웹사이트 성능을 최적화하는 것에 관심이 자연스레 생기게 됩니다. 처음에는 그저눈에 보기 좋은 사이트를 개발하는 것(보다 제대로 동작하는 기능을 개발하는 게 먼저였지만)에 이끌려 프론트엔드에 본격적인 흥미를 얻다가 점차 웹사이트의 로딩 시간을 줄이고, 어색하거나 불편하지 않은 웹사이트를 개발하려다가 '웹 최적화'가 중요하다는 것을 느끼게 됩니다. 오늘은 웹을 최적화하는 방법 중 하나인 캐시(cache)에 대해 기본적인 개념을 정리해보려고 합니다. 1. 캐시가 뭐야? 캐시 기본 개념 정리 캐시(Cache)는 어떤 웹사이트나 서비스에서 데이터를 받아 온 이후 그 데이터를 원래 불러왔던 데이터 저장소보다 클라이언트(유저)에게 가까운 곳에 임시로 저장해 필요시(예를 들어 웹 사..
프론트엔드 면접 빈출 질문 20개 안녕하세요, 오늘은 신입 프론트엔드 개발자를 위한 프론트엔드 신입 기술 면접 질문 30개를 소개하고 어떻게 답을 준비해야 하는지 준비하는데 도움이 되었으면 좋겠습니다. 또한 본 포스팅 내용은 개인적인 견해임을 밝힙니다. 1. 자신의 강점과 약점은 무엇인가요? ⭐⭐⭐⭐⭐준비 요령: 강점에 대한 대답은 회사의 인재상, 기업 PR 자료나 대표의 인터뷰, 사업 보고서 등을 보고 자신의 강점에 대한 답변을 준비하는 게 좋습니다. 약점에 대한 대답은 자신의 약점에 대한 보완을 인지하고 있고, 지속적으로 보완하려는 노력을 보여줄 수 있는 게 좋습니다. 추가 팁: 이어지는 질문으로 강점을 발휘한 사례와 단점을 발휘한 사례에 대한 답변까지 준비할 수 있다면 꼼꼼하게 잘 준비할 수 있겠죠? 2. 어떤 프레임워크를 사용하여..
리액트 상태 관리 라이브러리 Zustand 안녕하세요, 오늘은 리액트의 상태 관리 라이브러리 중 하나인 Zustand에 대해 알아보고 기초적인 코드를 통해 이해해보도록 하겠습니다. 1. Zustand는 무엇인가?Zustand는 독일어로 '상태'라는 뜻을 의미합니다. Zustand는 리액트 상태 관리를 위한 라이브러리로서 다음과 같은 특징을 가지고 있습니다. 특정 라이브러리에 엮이지 않는다. (리액트와 함께 쓸 수 있는 API는 기본적으로 제공한다)한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서 상태를 정의하고 사용하는 방법이 단순하다.Context API를 사용할 때와 달리 상태 변경 시 불필요한 리렌더링을 일으키지 않도록 제어하기 쉽다.리액트에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (..
자바스크립트 코딩 테스트 준비하기 안녕하세요, 오늘은 자바스크립트로 코딩 테스트를 준비할 때 필요한 핵심 로직 12가지에 대해 정리하려고 합니다. 프론트 엔드 직무의 경우 자바스크립트로 코딩테스트를 보는 경우가 종종 있는데요, 자바스크립트로 코딩 테스트를 보는 것이 낯선 분들께 도움이 되는 핵심 로직에 대해 정리를 해보았습니다. 1. 배열 순회arr = [1, 3, 5, 7, 9] 자바스크립트에서 위 배열을 순회하면서 각각의 배열 값(element)과 인덱스를 출력하는 기본 코드는 아래와 같습니다. arr = [1, 3, 5, 7, 9]arr.forEach((e, i) => { console.log(e, i)})/*1 03 15 27 39 4*/ 이렇게 한다면 한 줄씩 배열의 값과 인덱스를 출력할 수 있습니다. 2. 문자열 분해 &..
알고리즘 시간 복잡도 개념 정리 안녕하세요, 오늘은 알고리즘 문제를 풀면서, 코드를 짤 때 효율적인 알고리즘 구현 방법에 대해 고민을 하면서 정리한 알고리즘 시간 복잡도(Time Complexity)의 개념을 정리하려고 합니다. 알고리즘 문제를 풀다 보면 위 사진과 같이 '시간 초과' 메시지를 종종 마주하게 됩니다. 또는 통과한 문제라고 하더라도 실행 시간 최적화를 생각하는 것이 실제로 개발할 때도 중요하다는 것을 느끼게 됩니다. 알고리즘을 처음 배우고 문제를 풀 때는 시간 복잡도를 생각하지 않고, 문제를 해결하는 것만 생각했습니다. 그러나 알고리즘 실력이 점차 늘고 그에 따라 시간 복잡도를 고민해야 하는 문제를 마주하면서 자연스레 효율적인 코드에 대해 고민하게 되었습니다. '효율적인 방법'을 고민한다는 말은 실행 시간을 단축시키는 ..
SSAFY 1학기 자치회 가이드 안녕하세요, 오늘은 SSAFY 1학기 자치회 경험을 바탕으로 1학기 자치회 가이드를 주제로 앞으로 1학기를 경험할 SSAFY 자치회 분들께 도움이 될만한 내용을 작성해보겠습니다. (참고로 1학기, 서울, 비전공 파이썬반 기준입니다) 1. 자치회 소개 SSAFY 1학기 초에 각 반에서는 자치회를 선출합니다. 자치회는 반장 1명, CA 1명으로 구성되고 자치회 후보가 여러 명일 경우 반 내에서 투표를 통해 결정합니다. 후보가 없는 경우 교육 운영 프로님이 지정하기도 합니다. 자치회는 각 반 담당 강사님, 담당 교육 운영 프로님과의 교두보 역할을 해서 한 학기 동안 반을 이끌어가는데 필요한 다양한 일, 이벤트를 기획하고 진행하는 역할을 맡습니다. 한 학기 동안 주로 했던 일은 다음과 같습니다. 1. SSAFY..
프로젝트 잘하는 팀의 비법, JIRA(지라) 사용 가이드 안녕하세요, 오늘은 지라(JIRA)의 사용법에 대해 알려드리려고 합니다. 1. JIRA 란?Jira는 애자일(Agile) 방식의 업무의 효율을 높여주는 소프트웨어 서비스(SaaS)입니다. Jira는 세계 점유율 1위의 프로젝트 관리 시스템(PMS, Project Management System)으로서 SSAFY에서는 2학기 프로젝트에서 사용할 수 있습니다. 앞으로 업무를 할 때도 높은 확률로 Jira를 사용하게 되기 때문에 이번 기회에 미리 익혀보기 위해 Jira의 사용 방법을 정리하려고 합니다. 프로젝트에서는 여러 사람이 협업하며 진행하기 때문에 개발 과정에서 커뮤니케이션을 도와주고 버그 발생 등의 이슈를 관리하도록 도와주는 도구인 Jira를 잘 활용한다면 업무의 효율성을 개선할 수 있습니다. Jira..
리액트(React) 공부 시작하기 오늘은 JavaScript로 웹 프론트엔드 개발을 하는 분들이라면 한 번쯤은 들어봤을 React.js 학습 방법에 대한 글을 작성하려고 합니다! 12월 한 달이 조금 안 되는 기간 동안 React를 학습하면서 찾아본 것을 토대로 어떻게 하면 React를 잘 공부할 수 있는지 고민한 부분을 글에 담아보려고 했습니다. React가 처음이신 분들이 이 글을 읽고 React 학습에 도움이 될 수 있으면 좋겠습니다. 본론에 앞서 참고로 해당 글은 기본적인 HTML, CSS, Javascript(ES6)에 대한 이해도가 있다고 가정하고 해당 내용보다 React 자체에 초점을 맞추어 쓰려고 합니다. 1. React란?React는 Meta(Facebook으로 익숙한)의 지원을 받는 오픈 소스 라이브러리입니다. 참고로 ..
SSAFY 1학기 최종 프로젝트 회고 안녕하세요, 오늘은 SSAFY 1학기의 최종 프로젝트에 관한 기사를 작성해보겠습니다. 0. 들어가며 - 최종 프로젝트가 뭔가요? 최종 프로젝트는 1학기 동안 배우고 실습한 것들을 토대로 주어진 주제와 명세서(description)에 맞추어 두 명이서 팀으로 8일간 협업해서 프로젝트 결과물을 만들어 내는 것입니다. 파이썬 트랙은 1학기 동안 Django, javascript, Vue.js를 배우는데요 해당 프레임워크를 기반으로 주어진 명세를 구현하는 프로젝트입니다. 개발에 필요한 프레임워크의 기본적인 내용은 SSAFY에서 한 학기 동안 알려주지만, 최종 프로젝트에서는 협업을 기반으로 프로젝트 기획과 산출물을 발표하는 과정까지 있어서 팀의 구성원에 따라 산출물이 다양하게 나오는 것 같습니다. 이번 최종 프로..
자바스크립트(JavaScript) 기본 개념 정리 본 게시글은 자바스크립트 ES6의 문법을 기준으로 작성되었습니다. 1. 자바스크립트 자료형 자료형(data type)이란? 흔히 정수(integer), 배열(array) 등으로 부르는 것으로 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해 놓은 데이터의 유형 자바스크립트에서는 변수를 선언할 때가 아니라 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정된다. 이런 방식을 동적 타이핑(dynamic typing)이라고 부르고 자바스크립트는 동적 타이핑 방식을 사용한다. 참고: 일반적인 프로그래밍 언어의 경우 데이터를 선언하는 시점에 자료형을 결정한다. 그런 방식은 정적 타이핑(static typing)이라고 한다 대표적인 자바스크립트 자료형 예시 // 수(數) 타입(Number type) let..