둥글게 둥글게

구구절절 시작 👉🏻 자바스크립트는 불안정한 언어라고들 많이 얘기하는데, 사실 js를 사용하면서 크게 문제점을 느끼지 못했다.그런데..! 이번 프로젝트를 시작하면서 ts를 써볼까? 싶어 정말 정말 오랜만에 타입스크립트를 사용했는데,웬걸 js에서는 나지 않는 오류들이 ts에서는 컴파일타임에서부터 에러가 수두룩 나는 것을 보고.. 이때 깨달았다.'와, 나 typescript 제대로 배워야겠다' 싶어 책까지 구매해서, 내가 이해한 ts에 대해 기록을 해보고자 한다.타입스크립트와 자바스크립트의 차이 중 가---장 기본 개념인 타입시스템 '정적 타입 vs 동적 타입'   자바스크립트 - 동적 타입 (dynamic typing) ✏️ 변수를 선언할 때 타입을 지정하지 않음. 값이 할당될 때 자동으로 타입 결정co..

💪🏻 약 5개월간 같이 스터디를 진행했던 팀원들과 새프로젝트를 시작했다. 최근에 이력서 / 포트폴리오 / 자기소개서도 마무리하고, 기업에 이력서도 제출하고, 면접도 보고, 상담도 하고 엄청 바쁜 날을 보냈다. 어느정도 새로운 일상에 적응할 때쯤 시작한 팀프로젝트! 오랜만에 팀 회의를 하니 두근두근 👀 🍎 Project 'Apple Market' 💁‍♀️ 프로젝트 소개 👜 중고 물품 거래 플랫폼 * 1:1 채팅 기능 * 원하는 상품 지역 카테고리를 통해 검색 * 지도를 통한 물품 검색 * ChartJS를 통해 해당 상품의 인기도 구현 * 사용자 인증 (로그인 & 회원가입) * 게시글 CRUD 🏃🏻‍♀️ 참여 인원 👉🏻 프론트엔드 3명 👉🏻 백엔드 1명 정말 감사하게도 팀원 분 중에 한 분이 백엔드 개발자 ..

Next.js의 SSR과 SPA에 대해서 알아보고, 를 사용하면 좋은 점에 대해서 설명하고자 한다! 💁‍♀️ Next.js SSR(Server Side Rendering)이란? SSR(Server Side Rendering)은 서버 측에서 초기 로딩을 수행하고, 렌더링 된 완전한 HTML을 사용자에게 반환한다. ❗️ React의 경우, JavaScript로 페이지를 로드하기 때문에 Disabled javascript를 할 경우, 페이지가 렌더링 되지 않는다. ⭕️ 그러나 Next.js는 SSR을 지원하기 때문에 서버에서 초기 렌더링을 수행하며, SEO(Search Engine Optimization)를 개선할 수 있다. (SEO : 검색 엔진 최적화) 👀 Next.js SPA(Single Page App..

현재까지 사용자의 효율적인 페이지 이동을 위해 react-router-dom을 사용하여 라우팅 기능을 구현하였다. 라우팅 기능은 매우 중요하면서도 기본이 되는 기능이라고 생각한다. Next.js에서는 라우팅을 어떻게 구현하면 좋을지 강의를 통해 얻은 지식을 정리하고, 프로젝트에 적용해 보고자 한다 👀 💁‍♀️ (먼저!) 라우팅이란? * 웹 라우팅은 웹 애플리케이션에서 URL의 경로에 따라 특정 페이지나 리소스를 사용자에게 보여주는 것 👉🏻 즉, url의 path에 특정 페이지를 설정하고, 사용자가 해당 경로로 이동할 때, 설정한 페이지를 보여주는 것이다. 🙋🏻‍♀️ Next.js 라우팅 1️⃣ 페이지 생성 'pages' 디렉터리에 파일을 생성하면, 해당 파일의 경로와 이름에 따라 자동으로 라우트가 생성 ..

🫠 Programmers (level 1) 👉🏻 문제 39번 (2016년) ✏️ 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a , b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN, MON, TUE, WED, THU, FRI, SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. ✏️ 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) ✏️ 입출력 예 a b result 5 24 TUE function soluti..

이번에 새로 시작한 프로젝트를 Next.js로 하기 때문에 생활코딩 강의를 부랴부랴 챙겨봤다. 이해하기 쉽게 설명이 되어 있어, 강의는 빨리 볼 수 있었다!! 강의를 보며 기록으로 남겨두고 싶은 부분들을 정리할 계획이다 ☺️ 💁‍♀️ Next.js란? : React를 기반으로 하는 SSR 및 SSG 프레임워크이며, 사용자에게 보다 빠르고 최적화된 웹 경험을 제공합니다. 👀 SSR : 서버 사이드 렌더링(Server Side Rendering)은 웹 애플리케이션에서 사용자가 웹 페이지에 접속할 때, 서버 측에서 해당 페이지의 초기 렌더링을 수행하는 방식이며, 완전한 HTML 페이지를 생성한 후 클라이언트에게 전달 👉🏻 장점 : 초기 콘텐츠 표시까지의 대기 시간이 줄어듦 👉🏻 단점 : 서버 자원을 사용하기 ..

🫠 Programmers (level 1) 👉🏻 문제 38번 (시저 암호) ✏️ 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. ✏️ 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000 이하입니다. n은 1 이상, 25 이하인 자연수입니다. ✏️ 입출력 예 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "..

🤔 비동기? 동기? 코드를 짜면서 작업을 어떻게 처리할 건지 정하는 것은 정말 정말 중요하다! 비동기에 대해서 알아보자! (전에 동기도 살짝 알아보자) 🙋🏻‍♀️ 동기란? (나라사랑 동기사랑..) (비동기를 알아보기 전에 동기를 먼저 간단히 보자면) * 동기 방식은 직렬적인 특성을 띄웁니다. * 한 작업이 처리가 완료될 때까지 기다린 후, 다음 작업을 처리하는 방식입니다. * 작업은 정해진 순서대로 실행됩니다. * EX) 웹 페이지에서 데이터를 서버로부터 불러올 때, 동기적으로 처리할 경우, 사용자는 데이터가 모두 로드될 때까지 기다려야 합니다. 🙋🏻‍♀️ 비동기란? * 비동기 방식은 병렬적인 특성을 띄웁니다. * 특정 작업의 완료 여부와 상관없이 다음 작업으로 넘어갑니다. * 비동기 작업을 위해 콜백 ..

👀 async/await는 비동기 작업을 처리할 때 정말 많이 사용하는 방법! 이번에는 async/await에 대해서 알아보려고 한다! 이번 질문도 역시 꼬꼬질~ (꼬리에 꼬리를 무는 질문~) 💁‍♀️ async/await란? * async/await는 비동기적인 작업을 처리할 수 있는 ES2017의 문법입니다. * async 함수를 정의하면 함수 내부에서 await 함수를 정의하여 비동기 작업의 처리가 완료될 때까지 기다린 후, 결과값을 반환할 수 있습니다. * async/await는 Promise를 기반으로 하며, 코드를 보다 간결하고 직관적으로 작성할 수 있도록 해줍니다. 👀 Promise란? 비동기 처리의 상태 정보 3가지의 경우로 나타냄 1️⃣ 대기 상태 : 작업이 완료되지 않은 상태 2️⃣ 이..

🙋🏻‍♀️ 기술 블로그의 가장 기본적이면서 중요한 첫 질문! AJAX란 무엇인가요? AJAX를 알아보면서, 꼬리 질문으로 다양한 개념을 알아보자! 💁‍♀️ AJAX란? AJAX는 서버와 클라이언트가 XML이나 JSON과 같은 데이터를 비동기적으로 교환하고 처리할 수 있도록 하는 웹 개발 기법 👀 XML이란? 데이터를 표시하고 전송하는 데 사용하는 데 사용되는 마크업 언어 👀 JSON이란? 데이터를 저장하고 전송하기 위한 경량의 데이터 형식 👀 비동기적이란? 일부 작업이 완료되는 것을 기다리지 않고, 즉시 다음 작업을 실행하는 것 💁‍♀️ AJAX 구성은? AJAX를 구현하기 위해서는 보통 XMLHttpRequest 객체 또는 Fetch API가 사용됩니다. XMLHttpRequest 객체는 웹 서버와 비..