개발 일기

react의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나눌 수 있다. import React from 'react' import './App.css' function App() { const framework = "리액트"; return {framework}; } export default App; 함수형 import React, { Component } from "react"; class App extends Component { render() { const framework = "리액트"; return {framework}; } } export default App; 클래스형 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 클래스형 컴포넌트에서 state 기능 및 라이프사이클 기능을 사..

JSX란 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이는 코드가 브라우저에서 실행되기 전에 코드 번들링 되는 과정(묶이는 과정)에서 바벨 컴파일러로 일반 자바스크립트 형태의 코드로 변환된다. 다음은 JSX 코드가 일반 Jascript 코드로 변환되는 과정이다. function App() { return ( Hello react ) } function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 문법 - 반드시 요소 여러 개가 부모 요소 하나에 의해 감싸져 있어야 한다. 로 감싸기싫은 경우 나 로 감싸줘도 된다. 이는 가상돔에서 컴포넌트 변화를 감지해 ..

Node.js 설치 리액트 프로젝트를 생성하기 위해서는 Node.js가 먼저 설치되어 있어야 한다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 이후에 터미널에서 node -v 명령어로 버전을 확인할 수 있다. yarn 설치 다음으로는 npm말고 yarn이라는 패키지 관리자 도구를 설치하도록 하겠다. npm에 익숙해져 있으나 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공한다고 하니 써보는 것도 좋을 것 같았다. https://classic.yarnpkg.com/en/docs/install#debian-..

Vue router란? vue.js의 공식 라우터로서 SPA를 쉽게 만들 수 있게 도와주는 아주 중요한 기능을 갖고 있다. 기본적으로 컴포넌트 기반의 라우터(URL)를 지정할 수 있고 세밀한 네비게이션 컨트롤이 가능하다. 본인은 CLI를 통하여 Vue 프로젝트를 시작했기때문에 vue router가 자동적으로 설치되었다. CLI를 통한 설치는 아래의 링크를 참고하길 바란다. 2020.12.20 - [Vue.js] - [Vue.js 시작하기] - Vue.js 설치 [Vue.js 시작하기] - Vue.js 설치 Vue.js 공식 페이지에 다양한 설치 방법이 나와있지만 나는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI를 사용하여 설치할 것이다. 다른 설치 방법에 대해 참고할 사람은 아래의 페이 de..

2021 정보처리 기사 1회 실기 후기 (2021.04.25) 정보처리기사 필기시험을 본 게 어제 같은데 벌써 실기를 보고 왔다. 실기 시험은 필기시험과 다르게 문제지를 가져올 수 없으므로 가채점을 하기 위해서는 본인이 작성한 답안을 외워야 한다. 약술형이 없어서 의도하지 않아도 작성했던 답안이 외워졌다..ㅋㅋㅋㅋ 가채점 결과, 무언가 실수를 했거나 답안을 잘못 외운 게 아니라면 합격 예정이다! 야호 가채점은 수제비 카페에 올라와있는 정처기 실기 복원 문제로 진행을 하였다. cafe.naver.com/soojebi 수제비- IT 커뮤니티 (정보처리기사... : 네이버 카페 수제비-수험생 입장에서 제대로 쓴 비법서(정보처리기사, 정보처리기능사, 빅데이터 분석기사 등 시리즈) cafe.naver.com 개정..

2021.03.26 - [Vue.js] - [Vue.js] 로그인 기능 구현하기 [Vue.js] 로그인 기능 구현하기 Vue.js로 로그인을 하기 위해서 프론트측에서는 로그인 하기 위한 view와 상태관리를 할 수 있는 store(Vuex)가 필요하다. Vuex 관련 내용은 아래 글을 참고하길 바란다. (물론 Vuex를 사용하지 않고도 developerjournal.tistory.com 위에 글과 이어진다. 추가로 새로고침을 하고 Vuex 상태가 초기화 되는 것을 막고싶은 사람들은 모두 참고하면 된다. Vuex 문제점 새로고침을 하면 Vuex의 store state가 모두 초기화가 된다. 이는 Vuex는 Vue의 플러그인이기 때문이다. 새로고침을 하면 Vue 인스턴스가 소멸했다가 다시 생성되는 Vue의 ..

Vue.js로 로그인을 하기 위해서 프론트측에서는 로그인 하기 위한 view와 상태관리를 할 수 있는 store(Vuex)가 필요하다. Vuex 관련 내용은 아래 글을 참고하길 바란다. (물론 Vuex를 사용하지 않고도 구현은 할 수 있지만 추적용이성이 현저히 떨어질 것이라고 생각한다.) 2021.01.19 - [Vue.js] - [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 Vuex란? Vue.js 애플리케이션에 사용할 수 있는 상태 관리 라이브러리다. 이를 사용하면 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 할 수 있다. 상단 인스턴스는 여러개의 많은 하위 컴포넌 developerjournal.tistory.com..

2021 정보처리 기사 1회 필기 후기 (2021.03.07) 정보처리기사 1회 필기 시험을 보고 왔다! 정답지만 제출하고 문제지를 가져올 수 있기 때문에 당일에 바로 가채점이 가능하다. 가채점 결과, 합격 예정이다~!! ㅎㅎㅎㅎ 개인적으로 2020년도 기출보다 까다로웠던 것 같다. 하지만 이것도 사람마다 다른 것 같으니 열심히만 하면 필기는 무조건 합격할 수 있다! 혹시나 참고하려는 사람을 위해서 기억을 더듬어 정보처리기사 필기 관련된 내용을 짧게나마 기록해보려 한다. 원서 접수 접수는 01.25 ~ 01.28 동안 큐넷에서 진행됐다. 이 접수가 대국민 수강신청인만큼 아주 그냥 까다롭다. 접수 이전에 사전 접수가 진행되니 꼭 까먹지 말고 하길 바란다. 꼭..! 안한다면 2시간동안 한 자리에 앉아있는 대..

'주어진 수가 10보다 작다면'이라는 조건에 꽂혀서 그에 맞게 로직을 짜다 보니 시간 초과가 계속 났다ㅠ 생각해보니까 10보다 작다면이라는 분기를 나누지 않아도 n/10은 0 이거나 다른 십의 자리 수일테니 상관이 없었다. 정답 코드 import java.io.*; public class Main { public static void main(String args[]) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int num = Integer.parseInt(br.readLine()); int copy = num; int cycle = 0; do{ num = ((num%10)*1..

두 문제 모두 for문을 사용하여 입력받은 n번만큼 A+B를 실행하지만 구현방식은 다르다. Scanner 방식처럼 입출력 방식이 느리면 여러 줄을 입력받거나 출력할 때 시간 초과가 날 수 있다. 10950 import java.util.*; public class Main{ public static void main(String[] args){ Scanner sc = new Scanner(System.in); int number,a,b; number = sc.nextInt(); for(int i=0;i