728x90 전체 글279 [SSAFY] SSAFY 6기 1학기 후기 소름 돋게 벌써 1학기가 끝이 났다...! SSAFY 입과 전에 빡세다는 후기는 많이 봤지만, 이렇게 정신없이 지나갈 거라고는 생각 못했다. 😵 잡페어 기간에도 이렇게 정신 없이 보내다가는 나중에 '나 뭐했지?'라는 생각이 들 것 같아서 이쯤에서 한 번 정리해보려 한다! 01. SSAFY 수업 나는 비전공자였기에 python 트랙을 수강하였고, python 트랙에서 SSAFY의 수업은 크게 2가지로 나눌 수 있다. 웹 관련 (Django, Vue 등) 수업과 알고리즘 집중 기간! 입과 초반에는 python 언어를 다루는 방법에 대해서 배운다. 변수 선언이나 연산자 같은 기초부터 함수와 클래스까지 빠르게 진도를 나간다. 나는 원래 python을 써봤어서 이 부분은 크게 어렵지 않았다. 그리고 알고리즘 집중.. 2021. 12. 2. [PG/Python] 멀쩡한 사각형 📌 문제 https://programmers.co.kr/learn/courses/30/lessons/62048 코딩테스트 연습 - 멀쩡한 사각형 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 programmers.co.kr 📌 문제 접근 방법 한참 고민하다가 함수 그래프를 그려서 풀어볼까?라는 접근까지는 왔는데 도저히 아이디어가 생각이 안나서 결국 구글링을 했다. ▼ 참고한 풀이 ▼ https://leedakyeong.tistory.com/entry/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4.. 2021. 12. 1. [PG/Python] 괄호 변환 📌 문제 https://programmers.co.kr/learn/courses/30/lessons/60058 코딩테스트 연습 - 괄호 변환 카카오에 신입 개발자로 입사한 "콘"은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 programmers.co.kr 📌 문제 접근 방법 스택을 활용하여 올바른 괄호열을 판단하는 함수를 만들었다. 여는 괄호를 만나면 스택 안에 넣는다. 닫는 괄호를 만나면 스택에서 괄호 하나를 pop 한다. 문자열이 끝나지 않았는데 스택에서 pop을 할 수 없거나, 문자열이 끝났는데 스택에 남는 괄호가 있다면 올바른 괄호열이 될 수 없다. 그 후에는 문제에서 주어진 방식을 그대로 따라서 .. 2021. 11. 30. [Vue] Router Vue Router 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능 제공 - 설치 (Vue CLI 환경) $ vue add router commit 여부 : y History mode 사용 여부 : y HTML History API를 사용해서 router를 구현한 것 브라우저의 히스토리는 남기지만 실제 페이지는 이동하지 않는 기능 지원 즉, 페이지를 다시 로드하지 않고 URL 탐색 가능 Vue router로 인한 변화 App.vue 코드 router/index.js 생성 : 라우트 관련 정보 및 설정 작성되는 곳 view 디렉토리 생성 - 사용 router-link 사용자 네비게이션을 가능하게 하는 컴포넌트 목표경로는 'to.. 2021. 11. 21. [Vue] Components Component (컴포넌트) 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 유지보수, 재사용성 up Vue 컴포넌트 === Vue 인스턴스 SFC (Singel File Component) Vue 컴포넌트 기반 개발의 핵심 특성 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 Vue 컴포넌트 === Vue 인스턴스 === .vue 파일 Vue Component 구조 한 화면 안에서도 기능 별로 각기 다른 컴포넌트 존재 (하나의 컴포넌트는 여러 개의 하위.. 2021. 11. 20. [Vue] Vue CLI Vue CLI Vue.js 개발을 위한 표준 도구 프로젝트 구성을 도와주는 역할 Vue 개발 생태계에서 표준 tool 기준을 목표로 함 - Node.js JS를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 JS 런타임 환경 브라우저 밖을 벗어날 수 없던 JS언어의 한계 해결 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경 제공 단순히 브라우저에서만 조작할 수 있던 JS를 SSR 아키텍처에서도 사용할 수 있도록 함 - NPM (Node Package Manage) JS언어를 위한 패키지 관리자 Node.js 설치 시 함께 설치됨 Vue CLI 사용하기 - 설치 # 설치 $ npm insatll -g @vue/cli # 버전 확인 $ vue --version - 프로젝트 생성.. 2021. 11. 20. [Vue] Lifecycle Hooks, lodash Lifecycle Hooks 각 vue 인스턴스를 생성될 때 일련의 초기화 단계를 거침 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks 호출 특정 시점에서 동작을 수행할 경우 사용한다고 생각하자! ex) vue인스턴스가 생성되자마자 수행할 작업이라면? created 사용 lodash library array, object 등 자료구조를 다룰 때 사용하는 유틸리티 함수 제공 reverse, sortBy, range, random 등 2021. 11. 15. [Vue] Template Syntax Template Syntax 렌더링된 DOM를 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 Interploation (보간법) - Text 메시지: {{ message }} - Raw HTML - Attributes - JS 표현식 {{ number + 1 }} {{ message.split('').reverse().join('') }} Directive (디렉티브) v- 접두사가 있는 특수 속성 속성 값은 단일 JS 표현식이 됨 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할 전달인자 (Arguments) : ':' (콜론)을 통해 전달인자 받을 수 있음 수식어 (Modifiers) : '.' (점)으로 표시되는 특수 접미사, directive.. 2021. 11. 15. [Vue] MVVM Pattern, Vue 인스턴스 생성 MVVM Pattern 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 - Model JavaScript의 Object 자료 구조 ( { key: value } ) Object는 Vue Instance 내부에서 데이터로 사용 데이터가 바뀌면 View(DOM)가 반응 - View DOM(HTML) 데이터의 변화에 따라 바뀌는 대상 - View Model 모든 Vue Instance View와 Model 사이에서 데이터와 DOM에 관련된 모든 일 처리 ViewModel을 활용해 Data를 얼만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Vue 인스턴스 생성 Vue.js 코드 작성 순서 : 데이터가 변화하면 DOM이 변경 → 1. 데이터 로직 작성 2. DOM 작성 CDN 작성 {{ .. 2021. 11. 15. [Vue] SPA(Single Page Application), CSR(Client Side Rendering) Vue.js 프론트엔드 프레임워크 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크 SPA (Single Page Application) 지원 왜 Vue.js일까? Vanilla JS는 페이지에서 수정되는 사항이 있으면, 수정되는 '모든 요소'를 선택해서 '이벤트'를 등록하고 변경 Vue.js는 DOM과 Data가 연결되어 있으면 Data를 수정할 경우 DOM이 알아서 변경 SPA (Single Page Application) 단일 페이지 애플리케이션 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 최초에만 페이지를 다운로드하고 이후에는 동적으로 DOM 구성 전체 페이지가 아닌 현재 페이지 중 필요한 부분만 동적으로 다시 작성 연속되는 페이지 .. 2021. 11. 15. 이전 1 ··· 4 5 6 7 8 9 10 ··· 28 다음 728x90
