전체 글 썸네일형 리스트형 [정보처리기사] 2023년 3회차 실기 시험 합격 후기 안녕하세요 ! 정말 오랜만에 게시글을 남깁니다. 현재 사내에서 진행중인 프로젝트가 너무 바빠서 리액트 공부도 잠시 못하고 있네요 ㅎ 그 과정에서 10월 7일에 정보처리기사 실기 시험을 치뤘습니다. 2회차 시험에서는 51점인가로 불합격했어요 제 기준에 문제도 어려웠고 , 무엇보다 실력이 합격할 수준이 아니었다고 생각합니다 ..! 이번 3회차 시험은 솔직히 일이 너무 바빠서(직급에 비해 업무가 과중함) 시험공부를 할 여력이 안됐어요 하루30분이라도 보려고 노력했고 일주일전에는 시간을 많이 할애해서 공부했습니다. 이번에는 저번에 설명드렸던 app을 이용해서도 못했어요 퇴근하면 기가 빨려서 .. 필기 + 2회차 실기를 공부하며 머리속에 있던 지식들이 꽤나 오랬동안 남아 있어서 상기시키는 느낌으로 공부했고 , 코.. 더보기 [React] Ajax 안녕하세요 오늘은 React 에서 ajax를 이용하여 서버와 비동기 통신을 하는 방법을 포스팅하겠습니다 ! 아직 개인 서버를 두고 공부중인게 아니라 강의에서 제공하는 서버에서 GET 요청을 보내서 데이터를 가져왔습니다. 보통 서버로부터 데이터를 가져올 때는 GET을 사용 , 데이터를 서버로 보낼 때는 POST를 사용합니다. 하나 문제는 , GET,POST 요청을 하면 브라우저가 새로고침이 됩니다. 이럴 때 유용하게 쓰이는 것이 AJAX (Asynchronous Javascript And Xml) 입니다. AJAX는 새로고침 없이 데이터를 주고받을 수 있게 도와주는 비동기 통신방법입니다. React에서 Ajax를 사용하는 방법은 3개가 있습니다. 1) XMLHttpRequest 문법 2) fetch() 3.. 더보기 [React]LifeCycle , useEffect 안녕하세요 오늘은 React의 LifeCycle과 useEffect에 대해서 정리하겠습니다. 1. LifeCycle 앞서 정리했던 Component는 LifeCycle(생명주기)가 있습니다. 1) 생성 (mount) 2) 재랜더링 (update) 3) 삭제(페이지이동) (unmount) 이 3가지 과정 중간중간에 코드실행을 할 수 있습니다. 이 코드실행을 3가지 과정에 훅(hook,갈고리)을 달아서 사용합니다. 이를 LifeCycle hook 이라고 부릅니다. 이를 사용하기 위한게 useEffect 입니다. 2. useEffect 1) 상단에 useEffect import import { useEffect, useState } from 'react'; 2) 컴포넌트 생성 후 안에 useEffect 사용 .. 더보기 [React] 라우터 설치 및 사용법 오늘은 React 라우터 설치 및 사용법에 대하여 포스팅하겠습니다. 컴포넌트를 생성할 때 너무 길어진 코드들을 App.js(메인)에 담을 경우 가독성이 떨어질 수 있습니다. 그럴경우 다른 js 파일에서 컴포넌트를 생성한 후 import 해와서 라우터에 담아서 보여줄 수 있습니다. #일반적인 웹개발(html,js,css)과 다르게 React는 하나의 html 파일을 이용함# 1) 라이브러리 설치 터미널을 열고 npm install react-router-dom@6 실행(라이브러리 설치) 2) 셋팅 index.js 파일로 이동 import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElement.. 더보기 [React] styled-components 안녕하세요 오늘은 React에서 css를 사용하는 방법 중 하나인 styled-components에 대해 포스팅하겠습니다. styled-components 는 app.css에서 작성하는 것도 아니고 , jsx 파일내에 태그들에 직접 작성하는 것도 아닙니다. 기본 html 구조에서 태그에서 작성했던 태그처럼 페이지 상단에서 작성하는 방식입니다. 1) 설치 터미널을 열고 npm install styled-components 를 실행합니다. 2) styled-components import import styled from 'styled-components'; 상단에 import 해줍니다 3) 변수를 생성하여 style 작성하여 담기 let Btn = styled.button` background : ${ p.. 더보기 [React] 파일import , export 코드를 작성하다 보면 코드가 길어져서 가독성이 떨어지는 경우가 발생합니다. 이럴 경우 다른 파일에 생성해둔 코드를 import 하여 그 파일의 변수,함수 등등을 사용합니다. 재직중인 회사에서 사용하는 jsp에서는 이런식으로 태그를 사용했고 , 자바스크립트도 마찬가지로 태그()를 이용하여 import 했습니다. React에서 사용하는 import,export와 개념자체는 비슷하지만 , 하나 다른 점은 현재 페이지 기준으로 , 불러올 페이지에서 export를 해줘야 한다는 점입니다. data1이라는 변수를 App.js에서 사용하는 방법입니다. ex) data.js를 App.js 로 import하기 export는 하단에 작성 let data1 = 10; export default data1; App.js 상단.. 더보기 [React] map함수, props 안녕하세요 저번주부터 공부중이던 React를 복습해보겠습니다. 저는 코딩애플님의 강의로 학습중입니다. 간결한 강의와 어렵지 않게 설명해주시는듯한 느낌이 있어서 초보자들이 배우기에 좋다고 생각해요 ! 유튜브 무료강의 몇강 보다가 유료로 결제하여 공부중입니다 지난 포스팅때는 state를 이용하여 component를 생성하여 모달창을 하나 만들었는데요 이번에는 각 state들을 보여주는 부분을 map 함수를 이용하여 state가 추가될 때 마다 자동으로 state 수를 체크하여 생성되도록 하였습니다 ! App.js(React의 메인개념)에서 진행 let [list,setList] = useState(['남자 코트 추천','정보처리기사 공부방법','군포 고기 맛집']); let [good,setGood] = u.. 더보기 [Bootstrap] 간단한 사용 방법(React) 오늘은 부트스트랩에 대하여 포스팅 해보겠습니다 부트스트랩은 css 및 html(버튼,메뉴,레이아웃) 등을 디자인적으로 생성할 수 있도록 보조해주는 라이브러리 입니다. 1) React-Bootstrap 설치 Bootstrap이 원조 , React에 맞게 변형한 라이브러리입니다. https://react-bootstrap.github.io/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app [Get Started] 버튼을 클릭하고 , Installation 항목에서 npm install react-bootstrap bootstrap 명령어를 VSCo.. 더보기 이전 1 2 다음
