잘못된 경로입니다.
diff --git a/404.html b/404.html index 7bdf30aa..4536cc04 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -
잘못된 경로입니다.
잘못된 경로입니다.
Fn component / Class component
\r\n \r\n \r\n {fnOpen ?함수형 컴포넌트
\r\n {count}\r\n \r\n \r\nProps 받기
\r\nClass형 컴포넌트
\r\n {this.state.counter}\r\n \r\n \r\nProps 받기
\r\nDynamicImport component
\r\n \r\n \r\n \r\n \r\n \r\nMemoTest 컴포넌트
\r\nprops가 바뀔때만 렌더링
\r\n count와 연동된 props: {someProps}\r\ncontext value
\r\n value : {values}\r\n \r\nMemoTest 컴포넌트
\r\nprops가 바뀔때만 렌더링
\r\n count와 연동된 props: {someProps}\r\nUseMemoText
\r\nnumber
\r\n \r\ntext
\r\n \r\nMemo Child Component
\r\nnumber: {showNumber}
\r\ntext: {showText}
\r\nMemo Child Component
\r\nnumber: {showNumber}
\r\ntext: {showText}
\r\ncontext value
\r\n value : {values}\r\n \r\n{date}
\r\n\r\n {children}\r\n
\r\n );\r\n },\r\n }}\r\n >\r\n {content}\r\n redux랑 포스팅CRUD
\r\n데이터를 주세욥
\r\nredux랑 포스팅CRUD
\r\n데이터를 주세욥
\r\n setInputValue(e.target.value)} type=\"text\" />\r\n \r\nFn component / Class component
\r\n \r\n \r\n {fnOpen ?함수형 컴포넌트
\r\n {count}\r\n \r\n \r\nProps 받기
\r\nClass형 컴포넌트
\r\n {this.state.counter}\r\n \r\n \r\nProps 받기
\r\nDynamicImport component
\r\n \r\n \r\n \r\n \r\n \r\nMemoTest 컴포넌트
\r\nprops가 바뀔때만 렌더링
\r\n count와 연동된 props: {someProps}\r\ncontext value
\r\n value : {values}\r\n \r\nMemoTest 컴포넌트
\r\nprops가 바뀔때만 렌더링
\r\n count와 연동된 props: {someProps}\r\nUseMemoText
\r\nnumber
\r\n \r\ntext
\r\n \r\nMemo Child Component
\r\nnumber: {showNumber}
\r\ntext: {showText}
\r\nMemo Child Component
\r\nnumber: {showNumber}
\r\ntext: {showText}
\r\ncontext value
\r\n value : {values}\r\n \r\n{date}
\r\n\r\n {children}\r\n
\r\n );\r\n },\r\n }}\r\n >\r\n {content}\r\n redux랑 포스팅CRUD
\r\n데이터를 주세욥
\r\nredux랑 포스팅CRUD
\r\n데이터를 주세욥
\r\n setInputValue(e.target.value)} type=\"text\" />\r\n \r\ncss
css
/* 기본 밑줄 제거 */ a { text-decoration: none; @@ -23,4 +23,4 @@ /* 마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의 */ a:active { color: green; -}
"css" 카테고리의 다른 글
COMMENTS
"css" 카테고리의 다른 글
COMMENTS
css
css
div { user-select: none; -webkit-user-select: none; @@ -9,4 +9,4 @@ /* konqueror browsers */ -ms-user-select: none; /* IE10+ */ -}
"css" 카테고리의 다른 글
COMMENTS
"css" 카테고리의 다른 글
COMMENTS
css
+Rain Sugar BangBang Front-End \ No newline at end of file +}Rain Sugar BangBang
css
CSS - 배포 사이트에 다운로드 폰트 적용하기
2023-03-31기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다.
1. 폰트 다운로드
@@ -26,4 +26,4 @@4. CSS 사용
평소에 폰트를 적용하는 것처럼 CSS를 적용해주면 된다.
body { font-family: maplestory; -}
"css" 카테고리의 다른 글
COMMENTS
"css" 카테고리의 다른 글
COMMENTS
github
github
@@ -96,4 +96,4 @@Github repository의 이슈 기능을 활용해 내 웹사이트에 댓글 기능을 추가할 수 있는 도구로, 별도의 백엔드 구성을 하지 않고 댓글들을 관리할 수 있다는 장점이 있다.
코드 수정 후 원하는대로 동작하는 모습을 볼 수 있었다.
-"Simple Memo" 카테고리의 다른 글
COMMENTS
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
$ git tag [태그이름][커밋 ID] $ git tag Version_2 86a99 # tag 달기 $ git tag #tag 조회하기 -$ git show Version_2
"Simple Memo" 카테고리의 다른 글
COMMENTS
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
vercel도 Nextjs로 쉽게 배포할 수 있지만, 백엔드는 별도로 만들지 않을 계획이었기에, 추후 댓글 기능이나 추천 글 목록 등을 Github 사이트 하나로 모두 관리하기 위해서 Github pages를 이용하기로 했다.
@@ -65,4 +65,4 @@7. 배포 후 설정
터미널에 위와 같은 메세지가 뜨면, repository => setting => pages의 branch에 gh-pages가 생성돼있는 것을 볼 수 있음
gh-pages를 배포 브랜치로 설정해준 후 저장
-설정을 완료하고 상단의 Visit site로 페이지를 접속하면 Nextjs 기본 화면이 잘 나오는 것을 볼 수 있다.
"Simple Memo" 카테고리의 다른 글
COMMENTS
설정을 완료하고 상단의 Visit site로 페이지를 접속하면 Nextjs 기본 화면이 잘 나오는 것을 볼 수 있다.
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
파일 생성 후 해당 링크 접속 시 정상적으로 접속이 가능해진다.
localhost:3000/first-post
-url은 [slug].tsx 파일이 위치한 경로에 따라 달라질 수 있다. (nextjs 라우팅 방식)
"Simple Memo" 카테고리의 다른 글
COMMENTS
url은 [slug].tsx 파일이 위치한 경로에 따라 달라질 수 있다. (nextjs 라우팅 방식)
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
https://docs.github.com/ko/rest?apiVersion=2022-11-28
상수 frontmatter는 머리말을 가져오지만 예쁘게 가져오진 않는다.
-때문에 if(frontmatter){...}와 같이 필요한 데이터를 정규식이나 string메서드를 통해 원하는대로 가공해 사용하여 사용해야 한다.
"Simple Memo" 카테고리의 다른 글
COMMENTS
때문에 if(frontmatter){...}와 같이 필요한 데이터를 정규식이나 string메서드를 통해 원하는대로 가공해 사용하여 사용해야 한다.
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
# 으로 시작하는 텍스트로 1-6개 가능 (h1 ~ h6)
# h1
## h2
@@ -115,4 +115,4 @@ 10. 테이블
헤더1 | 헤더2 | 헤더3 | 헤더4 |
---|---|---|---|
셀1 | 셀2 | 셀3 | 셀4 |
기본 | 좌로정렬 | 가운데정렬 | 우로정렬 |
셀9 | 셀10 | 셀11 | 셀12 |
"Simple Memo" 카테고리의 다른 글
COMMENTS
"Simple Memo" 카테고리의 다른 글
COMMENTS
github
github
Github의 기능을 REST API 형식으로 사용할 수 있도록 도와주는 기능이다.
@@ -59,4 +59,4 @@2. auth Token 설정
하지만 .env에 토큰을 설정하고 commit을 하게되면 gitignore를 설정해줘도 github가 자동으로 감지해 토큰을 만료시키기 때문에 .env.local서 테스트하고 .env의 토큰은 지운 뒤에 사용해주자.
-
"Simple Memo" 카테고리의 다른 글
COMMENTS
"Simple Memo" 카테고리의 다른 글
COMMENTS
html
html
"html" 카테고리의 다른 글
COMMENTS
"html" 카테고리의 다른 글
COMMENTS
html
html
검색 엔진에 검색되는 단어 지정
@@ -91,4 +91,4 @@"html" 카테고리의 다른 글
COMMENTS
"html" 카테고리의 다른 글
COMMENTS
javascript
javascript
// 숫자는 숫자+""만 해줘도 (혹은 다른 문자를 더해줘도) 문자열로 바뀐다. @@ -47,4 +47,4 @@
3. 문자열 다루기
.includes() - 문자열이 특정 문자열을 포함하는지 확인 .charAt(0) - 스트링의 0번째 글자 가져오기(result = string) .substring(0,5) - 스트링의 0~4번째 글자 가져오기 -
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
// 날짜 예제 // Sunday - Saturday : 0 - 6 @@ -27,4 +27,4 @@
날짜 계산
console.log(minutes); // 현재 분 추출 let seconds = today?.getSeconds(); -console.log(seconds); // 현재 초 추출
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
// n = Number Math.ceil(n); // 올림 @@ -23,4 +23,4 @@
2. 계산/정수 처리
Math.min(); // 인자 중 가장 작은 값 반환 - Math.max 반대 Math.pow(x, y); // 인자간 거듭제곱 값 반환 === x**y와 동일 Math.random(); // 0이상 1미만 랜덤값 반환 -Math.sqrt(); // 제곱근 반환
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
let Arr = [1, 2, 3, 4, 5]; @@ -72,4 +72,4 @@
3. 배열 메서드
// 매개변수가 x밖에 없다면 x 이상 index에 해당하는 배열 추출 // 매개변수가 음수인 경우 ex. (-2) 라면, 배열 끝에서 2번째 index 이상의 배열 추출 .slice(0, 2) // [1,2] -
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
함수를 인자로 받거나, 함수를 반환함으로써 작동하는 함수로, .map() , .filter() , .forEach() , .reduce() 등이 있다.
@@ -60,4 +60,4 @@indexOf()
const indexOfFirst2 = comment.indexOf(searchStr2); console.log(indexOfFirst); // 4 // 오류는 4번째 인덱스부터 시작한다. -console.log(indexOfFirst2); // 17 // 해주세요는 17번째 인덱스부터 시작한다.
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
const arr = [1,2,3,4,5,6,7,8,9,10]; @@ -102,4 +102,4 @@
.map()
"80(7번째)", "90(8번째)", "100(9번째)") -];
"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
@@ -81,4 +81,4 @@import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다.
참조
MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
-Modern js : https://ko.javascript.info/modules-dynamic-imports
"javascript" 카테고리의 다른 글
COMMENTS
Modern js : https://ko.javascript.info/modules-dynamic-imports
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript를 통해 비동기 코드를 처리하는 기본적인 방법으로는 Callback 함수, Promise, async/await 등이 있다. 하지만 다수의 비동기 요청의 실행이 필요한 경우 Promise.all()을 사용해볼 수 있다.
+javascript
javascript를 통해 비동기 코드를 처리하는 기본적인 방법으로는 Callback 함수, Promise, async/await 등이 있다. 하지만 다수의 비동기 요청의 실행이 필요한 경우 Promise.all()을 사용해볼 수 있다.
여러 개의 Promise를 동시에 처리하고, 모든 Promise가 완료되었을 때 그 결과들을 반환하는 javascript의 메서드이다.
Promise.all()은 배열형태의 Promise들을 인자로 받고, 이 Promise들은 병렬적으로 실행된다. Promise.all()은 해당 Promise들의 결과를 배열로 반환한다.
@@ -65,4 +65,4 @@참조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
-"javascript" 카테고리의 다른 글
COMMENTS
"javascript" 카테고리의 다른 글
COMMENTS
javascript
javascript
@@ -91,4 +91,4 @@단순성에 중점을 둔 javascript 테스트 프레임워크로, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다.
TDD의 예시
https://velog.io/@velopert/TDD%EC%9D%98-%EC%86%8C%EA%B0%9C
참조 : https://jestjs.io/
"javascript" 카테고리의 다른 글
COMMENTS
참조 : https://jestjs.io/
"javascript" 카테고리의 다른 글
COMMENTS
nestjs
nestjs
새로운 토이 프로젝트를 만들면서 백엔드를 구축할 프레임워크로 nestjs를 이용하기로 마음먹었다.
원래 사용하고 있던 javascript/typescript와 동일한 언어를 사용하기 때문에 백엔드 구축에 비교적 진입장벽이 낮다고 생각했기 때문에다.
"nestjs" 카테고리의 다른 글
COMMENTS
"nestjs" 카테고리의 다른 글
COMMENTS
nestjs
nestjs
로컬 환경에서 내가 원하는대로 기능들이 작동한다고 해도, 배포 환경과 로컬 개발 환경의 차이로 인해 코드의 수정이 필요해질 수 있다. 이러한 이유로 개발 환경을 배포 환경과 최대한 동일하게 만들어주는 것이 좋다. 또한 최근의 배포 환경들은 대부분 https로 이뤄져 있기 때문에 그에 맞춰 설정해줄 필요가 있다.
# 개인 키 생성 @@ -37,4 +37,4 @@
HTTPS 구성 설정 - main.ts
그럼에도 오류가 발생하는 경우 아래의 링크를 통해 크롬 환경설정을 해주면 된다.
chrome://flags/#allow-insecure-localhost
유효하지 않은 인증서 허용으로 설정
-
"nestjs" 카테고리의 다른 글
COMMENTS
"nestjs" 카테고리의 다른 글
COMMENTS
nestjs
nestjs
쿠키는 서버에서 클라이언트에게 보내는 작은 데이터 조각이다. 일반적으로 브라우저에서 웹 사이트를 방문할 때 쿠키를 사용하여 사용자의 활동을 기록하고, 이후에 그 사용자가 같은 웹 사이트를 방문할 때 이 정보를 사용해 그에 맞게 동작하게 해준다. 하지만 쿠키는 당사자뿐만 아닌 제 3자가 조회하는 것도 가능하기 때문에 개인 정보를 담는 등 보안상 민감한 정보를 저장하는 데에는 적합하지 않기 때문에 탈취되거나 사용자에 의해 조작되어도 크게 문제 되지 않을 정보를 주로 저장한다. (ex. 다크 모드, 장바구니 목록 등)
클라이언트 단에서는 withCredentials:true 옵션 설정 외에는 특별히 해줄 것이 없다.
"nestjs" 카테고리의 다른 글
COMMENTS
"nestjs" 카테고리의 다른 글
COMMENTS
nestjs
nestjs
분명 로컬에서는 쿠키가 정상적으로 브라우저에 저장되는 것을 볼 수 있었는데, 배포를 하고 나니 또다시 쿠키가 보이지 않았다. response headers에는 쿠키 값과 함께 다음과 같은 에러 문구를 볼 수 있었다.
this attempt to set a cookie via a set cookie header was blocked because its domain attribue was invalid with reqards to the current host url
@@ -29,4 +29,4 @@ httpOnly: true, domain: process.env.COOKIE_PARSE_DOMAIN, // ".product.com" }); -같은 도메인을 사용하고 나서야 쿠키가 정상적으로 브라우저로 접속하는 것을 확인할 수 있었다.
"nestjs" 카테고리의 다른 글
COMMENTS
같은 도메인을 사용하고 나서야 쿠키가 정상적으로 브라우저로 접속하는 것을 확인할 수 있었다.
"nestjs" 카테고리의 다른 글
COMMENTS
nestjs
nestjs
비밀번호 등을 안전하게 암호화하여 저장하고 검증할 수 있도록 도와주는 라이브러리로, 랜덤한 salt를 생성하고 이를 비밀번호와 함께 암호화하여 저장한다. 이후 비밀번호 검증 시에도 같은 salt를 사용하여 입력받은 비밀번호를 암호화한 후, 저장된 암호화된 비밀번호와 비교하여 일치하는지 검증한다.
bcrypt는 암호화 강도를 선택할 수 있는 기능을 제공한다. 기본값은 10으로, 숫자가 클수록 강도가 높아지며 암호화에 소요되는 시간도 늘어난다. 보안을 위해 기본값 이상의 값을 권장한다.
"nestjs" 카테고리의 다른 글
COMMENTS
"nestjs" 카테고리의 다른 글
COMMENTS
nextjs
nextjs
// Link import Link from "next/link"; @@ -50,4 +50,4 @@
결론
참조
https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag
-
"nextjs" 카테고리의 다른 글
COMMENTS
"nextjs" 카테고리의 다른 글
COMMENTS
nextjs
nextjs
// _app.tsx @@ -53,4 +53,4 @@
라우팅 시 적용될 이벤트 설정
_app.tsx(jsx)에 로딩 스피너나 로딩 페이지를 적용해 놓으면,
라우팅으로 인한 페이지 이동이 일어날 때마다 원하는 로딩 창을 호출해줄 수 있다.
적용된 페이지
-
"nextjs" 카테고리의 다른 글
COMMENTS
"nextjs" 카테고리의 다른 글
COMMENTS
nextjs
nextjs
나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아오지 못할때 발생한 오류였다.
로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다.
다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 다시 실행해보자.
"nextjs" 카테고리의 다른 글
COMMENTS
"nextjs" 카테고리의 다른 글
COMMENTS
nextjs
NextJS는 pages/api 디렉토리를 통해 백엔드에 대한 처리를 수행할 수 있다.
+nextjs
NextJS는 pages/api 디렉토리를 통해 백엔드에 대한 처리를 수행할 수 있다.
하지만 정적으로 배포된 사이트(ex. 블로그 등)에서는 pages/api 등과 같은 동적 로직은 지원되지 않기 때문에 api 디렉토리를 사용할 수 없다.
정적 배포 방법
// package.json @@ -25,4 +25,4 @@ module.exports = nextConfig
참조
-https://nextjs.org/docs/advanced-features/static-html-export
"nextjs" 카테고리의 다른 글
COMMENTS
https://nextjs.org/docs/advanced-features/static-html-export
"nextjs" 카테고리의 다른 글
COMMENTS
nextjs
nextjs
NextJS의 next.config를 수정해준다.
/** @type {import('next').NextConfig} */ const nextConfig = { @@ -8,4 +8,4 @@ }, }; -module.exports = nextConfig;
"nextjs" 카테고리의 다른 글
COMMENTS
"nextjs" 카테고리의 다른 글
COMMENTS
nextjs
nextjs
yarn add react-responsive
useMideaQuery가 window 화면을 기준으로 동작하기 때문에,
공식문서의 예제와 비슷하게 useState를 통한 boolean 값으로 화면을 노출시켜줬다.
위의 방식을 적용하니 hydration 에러 없이 잘 작동하는 모습을 볼 수 있었다.
-"nextjs" 카테고리의 다른 글
COMMENTS
"nextjs" 카테고리의 다른 글
COMMENTS
Languages
FrameWorks
Librarys
DevOps
Now Learning...
개인 간 중고 물품 렌탈 거래 플랫폼 개발
핵심경험
핵심경험
라이브러리를 사용하지 않은 간단한 기능 구현
개인 프로젝트
또 와주셨네요!
블로그를 먼저 보시려면 좌측 상단의 버튼을 눌러주세요!아직 많이 부족하지만 점점 채우고 있습니다!
Languages
FrameWorks
Librarys
DevOps
Now Learning...
개인 간 중고 물품 렌탈 거래 플랫폼 개발
핵심경험
핵심경험
라이브러리를 사용하지 않은 간단한 기능 구현
개인 프로젝트
또 와주셨네요!
블로그를 먼저 보시려면 좌측 상단의 버튼을 눌러주세요!아직 많이 부족하지만 점점 채우고 있습니다!
react
react
@@ -149,4 +149,4 @@하나의 사이트를 제작할때 비슷한 input이나 button을 사용해야 하는 상황이 자주 있는데, 공통된 컴포넌트를 만들어 놓으면 코드 중복을 줄이면서 상황에 맞춰 적절하게 사용할 수 있게 된다.
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
@@ -239,4 +239,4 @@함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다.
참조
https://ko.reactjs.org/docs/state-and-lifecycle.html
-https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html
"react" 카테고리의 다른 글
COMMENTS
https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html
"react" 카테고리의 다른 글
COMMENTS
react
react
@@ -126,4 +126,4 @@간단한 데이터의 변화를 props drilling 없이 전역적으로 관리해주기 위해 ContextAPI를 사용해볼 수 있다.
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
공식 문서
코드가 길어지더라도 jsx와 철저하게 분리하고 싶다면 이런 방법도 나쁘지 않은 것 같다.
"react" 카테고리의 다른 글
COMMENTS
코드가 길어지더라도 jsx와 철저하게 분리하고 싶다면 이런 방법도 나쁘지 않은 것 같다.
"react" 카테고리의 다른 글
COMMENTS
react
react
공식 사이트 : https://yarnpkg.com/package/react-responsive
CSS의 mediaQuery를 사용해볼 수도 있지만, 간편하게 적용할 수 있는 패키지가 있어서 사용해봤다.
편의상 한 컴포넌트에 다 집어넣을 수도 있지만, 모바일과 데스크탑 환경의 view는 아예 다른 경우가 많기 때문에, 코드 관리를 편하게 하기 위해서는 모바일 컴포넌트를 따로 만드는게 더 나을 것 같다는 생각이 든다.
"react" 카테고리의 다른 글
COMMENTS
편의상 한 컴포넌트에 다 집어넣을 수도 있지만, 모바일과 데스크탑 환경의 view는 아예 다른 경우가 많기 때문에, 코드 관리를 편하게 하기 위해서는 모바일 컴포넌트를 따로 만드는게 더 나을 것 같다는 생각이 든다.
"react" 카테고리의 다른 글
COMMENTS
react
+Rain Sugar BangBang Front-End \ No newline at end of file +Rain Sugar BangBang
react
React.memo() 를 통한 컴포넌트 최적화
2023-03-16유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo()에 대한 간단한 사용법을 기록해본다.
1. React.memo()
@@ -110,4 +110,4 @@결론
참조
-"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
모달 버튼이 있는 페이지
// ModalTest.jsx @@ -73,4 +73,4 @@ `;
브라우저 화면
-스타일은 용도에 맞게 다양하게 변경시킬 수 있다.
"react" 카테고리의 다른 글
COMMENTS
스타일은 용도에 맞게 다양하게 변경시킬 수 있다.
"react" 카테고리의 다른 글
COMMENTS
react
react
// 보내는컴포넌트.jsx @@ -32,4 +32,4 @@
useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼
위와 같이 작성은 아래와 같이 데이터를 받아오는 것을 보여준다.
-하지만 데이터를 받는 페이지가 직접적으로 접속할 수 있는 페이지라면 그렇게 접속한 페이지는 아무 데이터가 없는 화면으로 노출될 수 있기 때문에, 전역 상태를 관리해줄지, 데이터를 넘겨줄지 상황에 알맞는 방식을 적용하는 것이 중요하다.
"react" 카테고리의 다른 글
COMMENTS
하지만 데이터를 받는 페이지가 직접적으로 접속할 수 있는 페이지라면 그렇게 접속한 페이지는 아무 데이터가 없는 화면으로 노출될 수 있기 때문에, 전역 상태를 관리해줄지, 데이터를 넘겨줄지 상황에 알맞는 방식을 적용하는 것이 중요하다.
"react" 카테고리의 다른 글
COMMENTS
react
react
하나의 폼에서 여러 개의 input 값을 변경하기 위해 함수를 만들어 간단하게 코드를 간소화시킬 수 있다.
-// form.tsx <Container onSubmit={e => onSubmitHandler(e, dispatch)}> @@ -69,4 +69,4 @@ const { name, value } = e.target.name; setFormData(prev => ({ ...prev, [name]: value })); };
html input의 name 속성을 이용해 setState 코드를 간소화시킬 수 있는 방법이다.
"react" 카테고리의 다른 글
COMMENTS
html input의 name 속성을 이용해 setState 코드를 간소화시킬 수 있는 방법이다.
"react" 카테고리의 다른 글
COMMENTS
react
react
@@ -208,4 +208,4 @@behavior:"smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
requestAnimationFrame
https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame
-https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
"react" 카테고리의 다른 글
COMMENTS
https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
"react" 카테고리의 다른 글
COMMENTS
react
react
// &:hover를 넣는다. const ButtonStyle = styled.button` @@ -24,4 +24,4 @@ /* 마우스로 링크를 클릭하고 뗄 때까지의 스타일 */ &:active { } -`;
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
단순히 페이지가 리프레시 되는 것도 좋은 사용자 경험이 아닌데, 임시로 저장돼있던 데이터(회원가입 정보 등)가 날아가면 React의 작동 방식을 거스를 뿐 아니라 사용자 경험에도 치명적이다.
떄문에 우리는 sumbit 이벤트를 멈춰줄 필요가 있다.
@@ -17,4 +17,4 @@위와 같이 작성하면 같은 폼 안에 있는 경우에 대해 submit 방지가 잘 되는 것을 확인할 수 있다.
"react" 카테고리의 다른 글
COMMENTS
위와 같이 작성하면 같은 폼 안에 있는 경우에 대해 submit 방지가 잘 되는 것을 확인할 수 있다.
"react" 카테고리의 다른 글
COMMENTS
react
react
우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다.
import { FormEvent } from "react"; @@ -35,4 +35,4 @@
주의사항
if(someMutation){ // ... nest logic } -}
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
@@ -156,4 +156,4 @@특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 함수 메모이제이션용 React hook이다.
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
@@ -124,4 +124,4 @@useMemo는 React.memo(), useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나이다.
실제로 React의 성능 문제 대부분은 Effect에서 발생하는 업데이트 체인으로 인해 발생한다고 한다.
"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
react
react
위와 같이 z-index를 999로 적용해도 원하는대로 작동하지 않는 경우를 볼 수 있다.
이정도면 버그를 수정하는데 충분하지만 더 싶도 깊은 내용은 아래를 참고해보면 좋을 것 같다.
-"react" 카테고리의 다른 글
COMMENTS
"react" 카테고리의 다른 글
COMMENTS
redux
redux
postman 링크 : https://www.postman.com/
@@ -71,4 +71,4 @@yarn add json-server
위와 같은 방식으로 기본적인 동작을 사용해볼 수 있고, header 값이나 body 값 설정 등 다양한 작업을 진행해볼 수 있다.
-Redux를 사용할때, 해당 데이터들을 추출하여 전역 상태로 관리해보는 등의 작업을 실행할 수 있다.
"redux" 카테고리의 다른 글
COMMENTS
Redux를 사용할때, 해당 데이터들을 추출하여 전역 상태로 관리해보는 등의 작업을 실행할 수 있다.
"redux" 카테고리의 다른 글
COMMENTS
redux
redux
리덕스 툴킷은 일반적인 리덕스보다 store 설정을 용이하게 해주고, 추가적인 패키지 설치가 필요하지 않게 설계되었으며, 보일러플레이트(여러 군데에서 반복되는 코드)를 최소화하기 위해 만들어졌다.
더 사용하기 쉽다는 의미이다. 이번 글에서는 미들웨어인 AsyncThunk와 함께 사용하는 방법을 확인할 수 있다.
"redux" 카테고리의 다른 글
COMMENTS
"redux" 카테고리의 다른 글
COMMENTS
redux
javascript에서의 ReduxToolkit 사용 예제 : https://lee-yo-han.github.io/redux/redux-toolkit-사용해보기
+redux
javascript에서의 ReduxToolkit 사용 예제 : https://lee-yo-han.github.io/redux/redux-toolkit-사용해보기
yarn add @reduxjs/toolkit react-redux
참고 : https://redux-toolkit.js.org/usage/usage-with-typescript
"redux" 카테고리의 다른 글
COMMENTS
참고 : https://redux-toolkit.js.org/usage/usage-with-typescript
"redux" 카테고리의 다른 글
COMMENTS
redux
redux
리덕스 툴킷 x
@@ -111,4 +111,4 @@yarn add redux react-redux
"redux" 카테고리의 다른 글
COMMENTS
"redux" 카테고리의 다른 글
COMMENTS
sw
개인적으로 필기 시험의 경우 기출문제를 많이 풀어보는 것으로 충분하다고 생각한다.
+구글 앱 스토어에서 "정보처리기출문제"라는 키워드로 검색해서 앱에 등록된 문제들을 많이 풀어보면 좋을 것 같다.
+나의 경우 아래의 순서로 필기한 후, 기출문제를 많이 풀어본 후에 시험을 쳤다.
+본문은 요약본으로, 노출 빈도가 높다고 느낀 키워드는 ★표로 강조하였다.
+결합도 수준 | 분류 | 특징 |
---|---|---|
결합도 약함 | 자료 결합도(Data Coupling) | - 모듈 간의 인터페이스가 자료 요소로만 구성된 경우로 다른 모듈에 영향을 주지 않는 가장 바람직한 결합도이다.<br>- 모듈 간의 내용을 전혀 알 필요가 없다. |
스탬프 결합도(Stamp Coupling) | - 두 모듈이 같은 자료 구조를 조회하는 경우의 결합도이며, 자료 구조의 어떠한 변화 즉 포맷이나 구조의 변화는 그것을 조회하는 모든 모듈 및 변화되는 필드를 실제로 조회하지 않는 모듈까지도 영향을 미치게 된다.<br>- 배열, 레코드, 구조 등이 모듈 간 인터페이스로 전달되는 경우와 관계된다. | |
결합도 보통 | 제어 결합도(Control Coupling) | 어떤 모듈이 다른 모듈의 내부 논리 조작을 제어하기 위한 목적으로 제어 신호를 이용하여 통신하는 경우이며, 하위 모듈에서 상위 모듈로 제어 신호가 이동하여 상위 모듈에 처리 명령을 부여하는 권리 전도 현상이 발생하게 된다. |
외부 결합도(External Coupling) | 어떤 모듈에서 외부로 선언한 변수(데이터)를 다른 모듈에서 참조할 경우와 관계된다. | |
공통 결합도(Common Coupling) | 여러 모듈이 공통 자료 영역을 사용하는 경우로 공통 데이터 영역 내용을 수정하면 이 데이터를 사용하는 모든 모듈에 영향을 준다. | |
결합도 강함 | 내용 결합도(Content Coupling) | - 가장 강한 결합도를 가지고 있으며, 한 모듈이 다른 모듈의 내부 기능 및 그 내부 자료를 조회하도록 설계되었을 경우와 관계된다.<br>- 한 모듈에서 다른 모듈의 내부로 제어 또는 이동된다.<br>- 한 모듈이 다른 모듈 내부 자료의 조회 또는 변경이 가능하다.<br>- 두 모듈이 같은 문자(Literals)의 공유가 가능하다. |
응집도 | 분류 | 특징 |
---|---|---|
응집도 약함 | 우연적 응집도(Coincidental Cohesion) | 모듈 내부의 각 기능 요소들이 서로 관련이 없는 요소로만 구성된 경우와 관계된다. |
논리적 응집도(Logical Cohesion) | 유사한 성격을 갖거나 특정 형태로 분류되는 처리 요소들로 하나의 모듈이 형성되는 경우와 관계된다. | |
시간적 응집도(Temporal Cohesion) | 특정 시간에 처리되는 여러 기능을 모아 한 개의 모듈로 작성할 경우와 관계된다. | |
절차적 응집도(Procedural Cohesion) | 모듕리 다수의 관련 기능을 가질 때 모듈 내부의 기능 요소들이 그 기능을 순차적으로 수행할 경우와 관계된다. | |
통신적(교환적) 응집도(Communicational Cohesion) | 같은 입력과 출력을 사용하는 소 작업이 모인 경우와 관계된다. | |
순차적 응집도(Sequential Cohesion) | 한 모듈 내부의 한 기능 요소에 의한 출력 자료가 다음 기능 요소의 입력 자료로 제공되는 경우와 관계된다. | |
응집도 강함 | 기능적 응집도(Functional Cohesion) | 모듈 내부의 모든 기능 요소들이 한 문제와 연관되어 수행되는 경우와 관계된다. |
바람직한 소프트웨어 설계는 응집도는 강하게, 결합도는 약하게 설계하여 모듈의 독립성을 확보할 수 있도록 한다.
+대화형 애플리케이션을 아래와 같이 3부분으로 분류한다.
+장점
+단점
+참조 : Github repository
"sw" 카테고리의 다른 글
COMMENTS
sw
개인적으로 필기 시험의 경우 기출문제를 많이 풀어보는 것으로 충분하다고 생각한다.
+구글 앱 스토어에서 "정보처리기출문제"라는 키워드로 검색해서 앱에 등록된 문제들을 많이 풀어보면 좋을 것 같다.
+나의 경우 아래의 순서로 필기한 후, 기출문제를 많이 풀어본 후에 시험을 쳤다.
+본문은 요약본으로, 노출 빈도가 높다고 느낀 키워드는 ★표로 강조하였다.
+코딩 계획 => 코딩 => 컴파일 => 테스트
+<br> +<br> +구성 | 특징 |
---|---|
암호화<br>(Encryptoin) | 콘텐츠 및 라이센스를 암호화하고, 전자 서명을 할 수 있는 기술이다.<br>ex. PKI, Symmetric/Asymmetric Encryption, Digital Signature |
키 관리<br>(Key Management) | - 콘텐츠를 암호화한 키에 대한 저장 및 배포 기술이다.<br>- 관리 방식 : 분산형, 중앙 집중형 |
암호화 파일 생성<br>(Packager) | 콘텐츠를 암호화된 콘텐츠로 생성하기 위한 기술이다.<br>ex. Pre-packaging, On-the-fly Packaging |
식별 기술<br>(Identificatoin) | 콘텐츠에 대해 식별하고 체계화하는 기술이다.<br>ex. DOI, URI |
저작권 표현<br>(Right Expression) | 저작권의 라이센스 내용을 표현하는 기술이다.<br>ex. XrML/MPGE-21 REL, ODRL |
정책 관리<br>(Policy Management) | 라이센스 발급 및 사용에 대한 정책 표현 및 관리 기술이다.<br>ex. XML, Contents Management System |
크랙 방지<br>(Tamper Resistance) | 크랙에 의한 콘텐츠 사용 방지 기술이다.(Code Obfuscation, Kernel Debugger Detection, Module Certification)<br>ex. Secure DB, Secure Time Management, Encryption |
인증<br>(Authentication) | 라이센스 발급 및 사용의 기준이 되는 사용자 인증 기술이다.<br>ex. User/Device Authentication, SSO, Digital Certificate |
형상 관리는 버전관리, 리비전 관리, 변경 관리, 빌드 관리, 이슈 관리 등을 모두 포함한다.
+버전 관리
+변경 관리
+형상 관리<br>(Configuration Management) | 버전 관리<br>(Version Management) | 변경 관리(Version Management) |
---|---|---|
버전, 변경 관리 개념을 포함하고, 프로젝트 진행 상황, 빌드와 릴리즈 퍼블리싱까지 모두 관리할 수 있는 통합 시스템이라고 할 수 있다. | - 변경 이력을 추적 관리하는 가장 좋은 방법이 버전으로 구분하는 것이다.<br>- 사소한 체크인, 체크아웃부터 릴리즈, 퍼블리싱의 과정을 버전으로 관리한다. | - 소스 코드의 변경 상황을 관리한다.<br>- 문서의 변경 이력과 복원 등의 기능이 제공된다. |
계획 및 제어 => 분석 및 설계 => 구현 및 실행 => 평가 => 완료
+참조 : Github repository
"sw" 카테고리의 다른 글
COMMENTS
sw
개인적으로 필기 시험의 경우 기출문제를 많이 풀어보는 것으로 충분하다고 생각한다.
+구글 앱 스토어에서 "정보처리기출문제"라는 키워드로 검색해서 앱에 등록된 문제들을 많이 풀어보면 좋을 것 같다.
+나의 경우 아래의 순서로 필기한 후, 기출문제를 많이 풀어본 후에 시험을 쳤다.
+본문은 요약본으로, 노출 빈도가 높다고 느낀 키워드는 ★표로 강조하였다.
+스택의 삽입 알고리즘
+
+if TOP >= n then call Stack-Full;
+else TOP = TOP + 1;
+Stack(TOP) = Data;
+end Insert
+
+
+스택의 삭제 알고리즘
+if TOP = 0
+then Underflow
+Else
+Remove S(TOP)
+TOP = TOP - 1
+
+스택의 오버플로 알고리즘
+TOP <- TOP + 1
+if TOP > n then goto AA
+else Stack(TOP) <- item
+
+속성(Attribute) | 학번 | 이름 | 학과 | 학년 |
---|---|---|---|---|
튜플(Tuple) | 2024010 | A | 심리학과 | 1 |
튜플 | 2025015 | B | 전자공학과 | 2 |
튜플 | 2026016 | C | 컴퓨터공학과 | 3 |
학번 | 주민번호 | 이름 | 나이 | <-학생---수강-> | 학번 | 과목 |
---|---|---|---|---|---|---|
1 | 123123-1 | A | 10 | --- | 1 | 운영체제 |
2 | 123123-1 | B | 20 | --- | 2 | 소프트웨어공학 |
3 | 123123-1 | C | 30 | --- | 3 | C언어 |
++CREATE TABLE 기본테이블 + ( + {열이름 데이터_타입 [NOT NULL] [DEFALUT 값]} + {[PRIMARY KEY(열이름_리스트)]}, + {[UNIQUE(열이름_리스트,...)]}, + {[FOREIGN KEY(열이름_리스트)] + REFERENCES 기본테이블[(기본키_열이름)] + [ON DELETE 옵션] + [ON UPDATE 옵션]} + [CHECK(조건식)] + ); +
+ALTER TABLE 테이블_이름 ADD 열_이름 데이터_타입 DEFAULT 값; +ALTER TABLE 테이블_이름 ALTER 열_이름 SET DEFAULT 값; +ALTER TABLE 테이블_이름 DROP 열_이름 CASCADE;
+DROP SCHEMA 스키마_이름 [CASCADE | RESTRICT]; +DROP DOMAIN 도메인_이름 [CASCADE | RESTRICT]; +DROP TABLE 테이블_이름 [CASCADE | RESTRICT]; +DROP INDEX 인덱스_이름;
+SELECT 속성명[ALL | DISTINCT] + FROM 릴레이션명 + WHERE 조건 + [GROUP BY 속성명1, 속성명2, ... ] + [HAVING 조건] + [ORDER BY 속성명 [ASC | DESC]]
+INSERT INTO 테이블명(속성명1, 속성명2,...) + VALUES(데이터1, 데이터2 ...);
+DELETE + FROM 테이블명 + WHERE 조건;
+UPDATE 테이블명 + SET 속성명 = 데이터 + WHERE 조건;
+GRANT 권한 ON 데이터 객체 TO 사용자 [WITH GRANT OPTION];
+REVOKE [GRANT OPTION FOR] 권한 ON 데이터 객체 FROM 사용자 [CASCADE];
암호화 과정 : 평문 => 암호화(암호키) => 암호문 => 복호화(복호키) => 평문
+참조 : Github repository
"sw" 카테고리의 다른 글
COMMENTS
sw
개인적으로 필기 시험의 경우 기출문제를 많이 풀어보는 것으로 충분하다고 생각한다.
+구글 앱 스토어에서 "정보처리기출문제"라는 키워드로 검색해서 앱에 등록된 문제들을 많이 풀어보면 좋을 것 같다.
+나의 경우 아래의 순서로 필기한 후, 기출문제를 많이 풀어본 후에 시험을 쳤다.
+본문은 요약본으로, 노출 빈도가 높다고 느낀 키워드는 ★표로 강조하였다.
+한 모듈과 다른 모듈 간의 상호 의존도 또는 두 모듈 사이의 연관 관계를 의미한다.
+모듈 간의 결합도를 약하게 하면 모듈 독립성이 향상된다.
+인터페이스가 정확히 설정되어 있지 않을 경우 불필요한 인터페이스가 나타나 모듈 사이의 의존도는 높아지고 결합도가 증가한다.
+다른 모듈과 데이터 교류가 필요한 경우 전역 변수(Global Variable)보다는 매개 변수(Parameter)를 사용하는 것이 결합도를 낮추는데 도움이 된다.
+결합도 정도 : 데이터 결합도 < 스탬프 결합도 < 제어 결합도 < 외부 결합도 < 공통 결합도 < 내용 결합도
+데이터 결합도(Data Coupling)
+스탬프 결합도(Stamp Coupling)
+제어 결합도(Control Coupling)
+외부 결합도(External Coupling)
+공통 결합도(Common Coupling)
+내용 결합도(Content Coupling)
+한 모듈 내부의 처리 요소 간의 기능적 연관도를 의미한다.
+모듈 내부 요소는 명령어, 명령어의 모임, 호출문, 특정 작업 수행 코드 등이다.
+응집도 정도 : 기능적 응집도 > 순차적 응집도 > 교환적 응집도 > 절차적 응집도 > 시간적 응집도 > 논리적 응집도 > 우연적 응집도
+기능적 응집도(Functional Cohesion)
+순차적 응집도(Sequential Cohesion)
+교환적 응집도(Communicational Cohesion)
+절차적 응집도(Procedural Cohesion)
+시간적 응집도(Temporal Cohesion)
+논리적 응집도(Logical Cohesion)
+우연적 응집도(Coincidental Cohesion)
+자료형 | 예약어 | 크기 |
---|---|---|
정수형 | int | 2Byte |
long | 4Byte | |
실수형 | float | 4Byte |
double | 8Byte | |
문자형 | char | 1Byte |
문자 | 의미 | 기능 |
---|---|---|
\n | new line | 커서를 다음 줄 처음으로 이동한다. |
\r | carriage return | 커서를 현재 줄 처음으로 이동한다. |
\t | tab | 커서를 일정 간격만큼 띄운다. |
\b | backspace | 커서를 뒤로 한 칸 이동한다. |
\f | form feed | 한 페이지를 넘긴다. |
\0 | null character | 널 문자를 출력한다. |
' | single quote | 작은 따옴표를 출력한다. |
" | double quote | 큰따옴표를 출력한다. |
\ \ | backslash | 역슬래시를 출력한다. |
\a | alert | 벨 소리를 발생한다. |
++#include <stdio.h> +int main(int argc, char *argv[]) { + int a = 4; + int b = 7; + int c = a|b; + printf("%d", c); + return 0; +} +// 1. 변수 a와 b의 4, 7을 (2진수)비트 연산자 |(OR)로 연산한다. +// 2. 비트 연산자는 2진수로 변환 후 계산한다. +// 3. OR 연산자는 두 비트 중 1개라도 1이면 1이 출력된다. +// 0100 (10진수: 4) +// OR 0111 (10진수: 7) +// = 0111(둘 중 1개라도 1이면 1이기 때문에 10진수: 7) +// 4. 0111는 "%d" 출력 형식 지정 문자에 의해 10진수로 변환하면 7이 되어 출력된다. +// +// 2와 5를 가정할때 +// 0010 +// OR 0101 +// = 0111 +
분류 | 예약어 | 바이트 수 | 비고 |
---|---|---|---|
정수형 | byte | 1byte | -127 ~ +128 |
short | 2byte | -32,768 ~ +32,767 | |
int | 4byte | -2,147,483,648 ~ +2,147,483,648 | |
long | 8byte | -9,223,372,036,854,775,808 ~ +9,223,372,036,854,775,808 | |
실수형 | float | 4byte | 단정도 실수형<br>(유효 자리는 7정도임) |
double | 8byte | 배정도 실수형<br>(유효 자리는 15정도) | |
문자형 | char | 2byte | 유니코드 문자열 1자 |
논리형 | boolean | 1byte | true,false |
문자 | 의미 | 기능 |
---|---|---|
\n | new line | 커서를 다음 줄 처음으로 이동한다. |
\r | carriage return | 커서를 현재 줄 처음으로 이동한다. |
\t | tab | 커서를 일정 간격만큼 띄운다. |
\b | backspace | 커서를 뒤로 한 칸 이동한다. |
\f | form feed | 한 페이지 넘긴다. |
' | single quote | 작은따옴표를 출력한다. |
" | double quote | 큰따옴표를 출력한다. |
\ \ | backslash | 역슬래시를 출력한다. |
+<br> +<br> ++string = 'hello python' + +s1 = string[0] +print(s1) # 'h' + +s2 = string[4] +print(s2) # 'o' + +# 역순으로 맨 오른쪽의 인덱스는 -1이다. + +s3 = string[-1] +print(s3) # 'n' + +s4 = string[-6] +print(s4) # 'p' + +# [:]는 처음부터 끝까지 추출한다. + +s5 = string[:] +print(s5) # 'hello python' + +# [x:] 인덱스 x부터 끝까지 추출한다. + +s6 = string[6:] +print(s6) # 'python' + +s7 = string[-6:] +print(s7) # 'python' + +# [:y] 처음부터 인덱스 y-1 까지 추출한다. + +s8 = string[:5] +print(s8) # 'hello' + +# [x:y] 인덱스 x부터 y-1까지 추출한다. +s9 = string[4:7] +print(s9) # 'o p' + +# [x:y:z] 인덱스 x부터 y-1까지 z만큼 건너뛰면서 추출한다. +s10 = string[:10:2] +print(s10) # 'hlopt' + +s11 = string[1:10:2] +print(s11) # 'el yh' +
생성(New) -> 준비(Ready) -(디스패치-Dispatch)-> 실행(Run) -> 종료(Exit)
+ ↑ <-(Timer Runout)- ↙
+ Wake Up Block ←-------
+ | ↙
+ 대기(Blocked) ←--
+
+참조 : Github repository
"sw" 카테고리의 다른 글
COMMENTS
sw
개인적으로 필기 시험의 경우 기출문제를 많이 풀어보는 것으로 충분하다고 생각한다.
+구글 앱 스토어에서 "정보처리기출문제"라는 키워드로 검색해서 앱에 등록된 문제들을 많이 풀어보면 좋을 것 같다.
+나의 경우 아래의 순서로 필기한 후, 기출문제를 많이 풀어본 후에 시험을 쳤다.
+본문은 요약본으로, 노출 빈도가 높다고 느낀 키워드는 ★표로 강조하였다.
+예측치 = a + (4 X C) + b / 6 (단 a는 낙관치, b는 비관치, c는 기대치임)
+
+LOC = 60 + (4 X 100) + 200 / 6 = 660 / 6 = 110
+
+LOC 기법에 의해 예측된 총 라인 수가 36,000라인, 개발에 참여할 프로그래머가 6명, 프로그래머들의 평균 생산성이 월간 300라인일 때 개발에 소요되는 기간은 아래와 같다.
+개발 기간 = 36,000 / (6 X 300)
+ = 36,000 / 1,800
+ = 20[개월]
+
+<br>
+<br>
+ 단말기
+ 단말기 \ | / 단말기
+ 중계기
+ 단말기 / | \ 단말기
+ 단말기
+
+
+ 단말기 ↘
+ ↗ 단말기
+단말기 ↙
+ ↖단말기
+
+단말기 단말기 단말기 단말기
+ | | | |
+ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
+
+ 단말기
+ / \
+ 단말기 단말기
+ / \ / \
+단말기 단말기 단말기 단말기
+
+ 단말기
+ / | \
+단말기 ㅡ + ㅡ 단말기
+ \ | /
+ 단말기
+
+참조 : Github repository
"sw" 카테고리의 다른 글
COMMENTS
sw
실기 시험도 필기와 마찬가지로 정보 보안이나 테스트 기법, GoF, 프로토콜 외에도 다양한 문제가 많이 분포돼있어서 기출 문제를 많이 풀어보면 도움은 된다.
+그러나 최근 복원 문제들을 봤을 때 프로그래밍 언어, DB(SQL 등) 문제가 많이 출제되는 경향이 있기 때문에 프로그래밍 언어와 어느정도 친해진 후에 시험을 보면 좋을 것 같다.
+나의 경우 javascript가 베이스여서 C, Java, Python은 잘 몰랐지만 언어 특성만 알면 구조는 비슷하다고 느껴졌다. (그래도 C의 포인터, Java의 메소드 오버라이딩/오버로딩 문제는 많이 봐두면 좋을 것 같다.)
+ +++SSO(Same Sign-on - 통합 인증)란 한 번의 인증 과정으로 여러 컴퓨터 상의 자원을 이용 가능하게 하는 인증 기능이다. 싱글 사인온, 단일 계정 로그인, 단일 인증이라고 한다.
+
※ 버전 관리 도구 분류
+설계 원칙 | 설명 |
---|---|
직관성 | 누구나 쉽게 이해하고 사용할 수 있어야 한다. |
유효성 | 사용자의 목적을 정확하게 달성하여야 한다. |
학습성 | 누구나 쉽게 배우고 익힐 수 있어야 한다. |
유연성 | 사용자의 요구사항을 최대한 수용하며, 오류를 최소화하여야 한다. |
머리말<br>(Header) | 릴리즈 노트명, 제품 이름, 작성일, 릴리즈 노트 버전 등의 정보 고지 |
개요 | 소프트웨어 및 변경사항에 관한 간략하고 전반적인 내용 |
목적 | 해당 릴리즈 버전에서의 새로운 기능, 수정된 기능, 릴리즈 노트의 목적에 대한 간략한 개요 |
이슈(문제) 요약 | 발견된 문제에 대한 요약 |
재현 항목 | 버그 발견에 대한 재현 단계 기술 |
수정/개선 내용 | 발견된 버그의 수정/개선 사항을 간단히 기술 |
구분 | 설명 |
---|---|
자료 결합도<br>(Data Coupling)<br>(결합도 가장 낮음) | 모듈간의 인터페이스로 값이 전달되는 경우 |
스탬프 결합도<br>(Stamp Coupling) | 모듈 간의 인터페이스로 배열이나 오브젝트, 스트럭처 등이 전달되는 경우 |
제어 결합도<br>(Control Coupling) | 단순 처리할 대상인 값만 전달되는게 아니라 어떻게 처리를 해야 한다는 제어 요소가 전달되는 경우 |
외부 결합도<br>(External Coupling) | 어떤 모듈에서 선언한 데이터(변수)를 외부의 다른 모듈에서 참조하는 경우 |
공통 결합도<br>(Common Coupling) | 파라미터가 아닌 모듈 밖에서 선언된 전역 변수를 참조하고 전역 변수를 갱신하는 식으로 상호 작용하는 경우 |
내용 결합도<br>(Content Coupling)<br>(결합도 가장 높음) | 다른 모듈 내부에 있는 변수나 기능을 다른 모듈에서 사용하는 경우 |
구분 | 설명 |
---|---|
우연적 응집도<br>(Coincidental)<br>(응집도 가장 낮음) | 모듈 내부의 각 구성 요소들이 연관이 없을 경우 |
논리적 응집도<br>(Logicla) | 유사한 성격을 갖거나 특정 형태로 분류되는 처리 요소들이 한 모듈에서 처리되는 경우 |
시간적 응집도<br>(Temporal) | 연관된 기능이라기보다는 특정 시간에 처리되어야 하는 활동들을 한 모듈에서 처리할 경우 |
절차적 응집도<br>(Procedural) | 모듈이 다수의 관련 기능을 가질 때 모듈 안의 구성 요소들이 그 기능을 순차적으로 수행할 경우 |
통신적 응집도<br>(Communication) | 동일한 입력과 출력을 사용하여 다른 기능을 수행하는 활동들이 모여 있는 경우 |
순차적 응집도<br>(Sequential) | 모듈 내에서 한 활동으로부터 나온 출력값을 다른 활동이 사용할 경우 |
기능적 응집도<br>(Functional)<br>(응집도 가장 높음) | 모듈 내부의 모든 기능이 단일한 목적을 위해 수행되는 경우 |
구분 | 유형 | 설명 |
---|---|---|
테이블 분할 | 수평분할 | - 레코드 단위로 분할 |
수직분할 | - 컬럼 단위로 분할 | |
테이블 중복 | 통계 테이블 추가 | - DW,OLAP 데이터용 |
진행 테이블 추가 | - 업무 프로세스 상태 | |
컬럼기반 분할 | 조회 빈도 기반 | - 고빈도 컬럼 분리 |
크기 기반 분할 | - 일정 용량 컬럼 분리 | |
컬럼 중복 | 중복 컬럼 추가 | - 자주 조회되는 컬럼 추가 |
파생 컬럼 추가 | - 연산 결과 별도 저장 |
SELECT
+*, a, b
+FROM [테이블명]
+WHERE ~~
+AND/OR ~~
+GROUP BY [속성]
+having ~~
+ORDER BY [컬럼] ASC/DESC
+순수 관계 연산자 | SELECT(σ - 시그마), PROJECT(π - 파이), JOIN(▶◀), DIVISION(÷) |
일반 집합 연산자 | 합집합(∪), 교집합(∩), 차집합(-), 카티션 프로덕트(×) |
비정규 릴레이션
+↓ 도메인이 원자값
+제1정규형
+↓ 부분적 함수 종속 제거
+제2정규형
+↓ 이행적 함수 종속 제거
+제3정규형
+↓ 결정자이면서 후보키가 아닌 것 제거
+BCNF
+↓ 다치 종속 제거
+제4정규형
+↓ 조인 종속성 이용
+제5정규형
+++트랜젝션이란, 데이터베이스에서 하나의 그룹으로 처리되어야 하는 명령문들을 모아 놓은 논리적인 작업 단위이다. 여러 개의 명령어의 집합이 정상적으로 처리되면 정상 종료되며, 하나의 명령어라도 잘못되면 전체가 롤백된다.
+
예문 : d rwx1 rwx2 rwx3
+++대칭키(비밀키)란, 암호화/복호화에 사용하는 키가 동일한 암호화 방식으로, 비대칭키(공개키)에 비해 빠르지만 키를 교환해야 한다는 문제(키 배송 문제)가 발생한다. 키를 교환하는 중 키가 탈취될 가능성도 있고, 사람이 증가할수록 따로 키 교환을 해야하기 때문에 관리해야 할 키가 방대하게 많아진다.
+
++비대칭(공개키)키란, 암호화/복호화에 사용하는 키가 서로 다른 것으로, 송수신자 모두 한 쌍의 키(개인키, 공개키)를 갖고 있게 된다. 일종의 인증 기능을 통해 보안에 용이하나 속도가 느리다.
+
※ 보안의 3요소
+++정보보안 3원칙
+
기밀성
+무결성
+가용성
+DoS(Denial Of Service, 서비스 거부) : DDoS와 마찬가지로 가용성을 해침
+DDoS(Distributed Denial of Service, 분산 서비스 거부)
+++SIEM란? 소프트웨어 제품 및 서비스가 보안 정보 관리와 보안 이벤트 관리를 결합하는 컴퓨터 보안의 한 분야로, 애플리케이션 및 네트워크 하드웨어에서 생성된 보안 경고에 대한 실시간 분석을 제공한다. 빅데이터 수준의 데이터를 장시간 심층 분석한 인덱싱 기반이며 주요기능은 데이터 통합, 상관관계, 알림, 대시보드 등이 있다.
+
듀얼 스택<br>(Dual Stack) | - IPv4/IPv6를 동시에 지원<br>- IPv4/IPv6 패킷을 주고받을 수 있음 |
터널링<br>(Tunneling) | - 두 IPv6 네트워크 간에 터널을 이용하는 기술<br>- IPv4/IPv6 호스트와 라우터에서 IPv6 패킷을 IPv4 패킷에 캡슐화하여 전송 |
주소 변환<br>(Address Translation) | - IPv4와 IPv6 간에 주소를 변환하여 두 버전을 연동 |
유형 | 설명 |
---|---|
point to point | - 중간에 미들웨어를 두지 않고 각 애플리케이션 간 직접 연결<br>솔루션 구매 없이 통합, 상대적으로 저렴하게 통합 가능<br>- 변경, 재사용 어려움 |
hub & spoke | - 단일 접점이 허브 시스템을 통해 데이터를 전송하는 중앙 집중적 방식<br>- 모든 데이터 전송 보장, 확장 및 유지 보수 용이<br>- 허브 장애 시 전체 영향 |
Message Bus<br>(ESB 방식) | - 애플리케이션 사이 미들웨어(버스)를 두어 처리<br>- 미들웨어를 통한 통합<br>- 어댑터가 각 시스템과 버스를 두어 연결하므로 뛰어난 확장성, 대용량 처리 가능 |
Hybrid | - 유연한 통합 작업이 가능<br>- 표준 통합 기술, 데이터 병목 현상 최소화 |
IGP<br>(Interior Gateway Protocol) | - AS(Autonomous System) 내부 라우터 간<br>- RIP, OSPF, IGRP |
EGP<br>(Exterior Gateway Protocol) | - AS(Autonomous System) 외부 라우터 상호간<br>- EGP, BGP |
++WSDL은 웹 서비스 기술언어 또는 기술된 정의 파일의 총징으로 XML로 기술된다. 웹 서비스의 구체적 내용이 기술되어 있어 서비스 제공 장소, 서비스 메시지 포맷, 프로토콜 등이 기술된다.
+
++SOAP는 일반적으로 널리 알려진 HTTP, HTTPS, SMTP 등을 통해 XML 기반의 메시지를 컴퓨터 네트워크 상에서 교환하는 프로토콜이다. SOAP는 웹 서비스에서 기본적인 메시지를 전달하는 기반이 된다.
+
++IPC란 프로세스들 사이에 서로 데이터를 주고받는 행위 또는 그에 대한 방법이나 경로를 뜻한다. IPC는 마이크로커널과 나노커널의 디자인 프로세스에 매우 중요하다. 마이크로커널은 커널이 제공하는 기능의 수를 줄여준다.
+
연산자 | 연산자의 기능 |
---|---|
& | 비트단위로 AND 연산을 한다.<br>(논리합 - 둘 다 1이어야 1) |
| | 비트단위로 OR 연산을 한다.<br>(논리곱 - 둘 중 하나가 1이면 1) |
^ | 비트단위로 XOR 연산을 한다.<br>(두 개의 비트가 서로 다른 경우에 1을 반환) |
~ | 단항 연산자로서 피연자의 모든 비트를 반전시킨다<br>. (00001111 => 11110000) - NOT 연산 |
<< | 피연산자의 비트 열을 왼쪽으로 이동시킨다.<br> (00001100 << 2 == 00110000, 00001100 << 3 == 01100000 ) |
>> | 비연산자의 비트 열을 오른쪽으로 이동시킨다.<br> (00011000 >> 2 == 00000110, 00011000 >> 3 == 00000011 ) <br> 단 시프트 연산 대상이 음수인 경우 CPU에 따라 달라질 수 있다. |
참조 :
+ + + + +"sw" 카테고리의 다른 글
COMMENTS
sw
--// 문자열 -let str: string = "hello"; - -// 숫자 -let num: number = 100; - -// 배열 -let arr: Array<number> = [10,20,30]; -let arr2: number[] = [10,20,30]; -let arr3: Array<string> = ["hello","hellololo" ]; -let arr4: [string, number] = ["hello", 182]; - -// 객체 -let obj:object = {name:"hello", age:29}; -let person:{name: string, age:number}; - -// Boolean -let isAvaliable: boolean = true; - - -// 함수 선언 -parameter와 return 값에 대해 타입 선언 가능 -const sum = (a:number, b:number):number => { -return a+b; -} - -// optional parameter일 경우 ?를 사용 - -const log = (time: string, result?: string, option?: string) => { -console.log(time, result, option); -} -log("2021-10-04", "success"); -
--// interface 선언 -interface User { -age: number; -name: string; -} - -// 변수 활용 -const hanbbi: User = { age: 30, name: "hello"} - - -// 함수 인자로의 활용 -const getUser = (user:User){ -console.log(user); -} -getUser({ age:10, name: "hanbbi" }) - - - -// 함수 구조 활용 -interface Sum { -(a:number, b:number): number; -} - -let sumFinc: Sum: -sumFunc = function(a: number, b: number): number { -return a+b; -} - - - -// 배열 활용 -interface StringArray { -[index:number]: string; -} - -let arr: StringArray = ["a", "b", "c"]; - - -// 객체 활용 -interface StringRegexObject { -[key: string]: RegExp; -} - -const obj: StringRegexObject { -cssFile: /\.css$/, - jsFile: /\.js$/ -} - - -// interface 확장 (extends 사용) -interface Person { -name: string; -age:number; -} -interface Developer extends Person { -skill: string; -} - -const juniorDeveloper = { -name: "hanbbi", -age:100, -skill: "JS" -} -
--// 타입 별칭 선언 및 활용 -type MyString = string; -const str: MyString = "Hello dear" - -type Todo = { -id: string; -title: string; -done: boolean -} - -const getTodo(todo:Todo){ -console.log(todo); -} -
-const logMessage = (value: string | number) => { - if (typeof value === "string") { - value.toString(); - } else if (typeof value === "number") { - value.toLocaleString(); - } else { - throw new TypeError("value must be string or number"); - } -}; -logMessage("hello"); -logMessage(1000);
--interface Zoo { -name: string; -location: string -price: number; -} - -interface Animal { -name: string; -count: number; -} - -const askZookeeper = ( value : Zoo & Animal ) => { - // value 는 - { name:"어린이대공원", location: "서울시 광진구", price: 10000, count: 10000} - // 와 같이 Zoo와 Animal이 모두 포함되는 인자를 줘야한다. -} -
--// 숫자형 enum -// 자동으로 0에서 1씩 증가하는 값을 부여 - -enum Shoes { -Nike, // 0 -Adidas, // 1 -NewBalance //2 -} -const myShoes = Shoes.Nike; // 0 - -문자형 enum -enum Food { -cake = "케익", -cookie = "쿠키" -} -const player = Food.cookie; // 쿠키 -
제네릭 선언 -<T>와 같이 타입을 선언한다. 알파벳은 통상 T로 정해져 있다.
---const logText<T> = (text: T):T => { -console.log(text); -return text; -} -logText<string>("Hello hanbbi"); - - -// interface에 제네릭 선언 - -interface Dropdown<T> { -value: T; -selected: boolean; -} -cosnt obj: Dropdown<string> = { value: "hamburger" , selected: true}; -
--const logTextLength<T> = (text: T[]): T[] =>{ -console.log(text.length); -text.forEach(text =>{ -console.log(text): -}); -} -logTextLength<string>(["hi", "hello"]); - -
--interface ShoppingItem { -name: string; -price: number; -stock: number; -} - -const getShoppingItemOption<T extends keyof ShoppinggItem>(itemOption: T): T { -return itemOption; -} - -// "name", "price", "stock"만 인자로 가능 -getShoppingItemOption("price"); -
--// string으로 추론 -let a = "abc"; - -// a: number로 추론 -// b: string으로 추론 -// return value는 string으로 추론 -const getValue(a = 10) { -let b = "hello"; -return a + b; -} - -
--// interface 1개 -interface Dropdown<T> { -value: T; -title: string; -} -const shoppingItem:Dropdown<number> ={ -value: 10000; -title: "shoe" -} -// interface 2개 -interface Dropdown2<T> { -value: T; -title: string; -} -interface DetailedDropdown<K> extends Dropdown2<K>{ -tag: K; -desc: string; -} -const detailed: DetailedDropdown<string>{ -value: "10000"; -title: "shoe", -tag: "10000", -desc: "description" -} -
-// div가 있는지 장담할 수 없음, HTMLDivElement | null -// 따라서 typescript에게 타입을 단언해 타입을 알려줄 수 있음. -const div = document.querySelector("div") as HTMLDivElement; -div.innerText = "test";
-const isDeveloper = (target: Developer | Humanoid): target is Developer => { - return (target as Developer).skill !== undefined; -}; -if (isDeveloper(tom)) { - console.log(tom.name); - console.log(tom.skill); -} else { - console.log(tom.name); - console.log(tom.age); -}
-let add = function (a: number) { - // ... -}; -let sum = function (a: number, b: number) { - // ... -}; -// 아래는 에러가 -// add = sum; - -// 에러가 나지 않는 방식. sum의 구조가 더 크다고 볼 수 있음 -sum = add;
참조 : https://yeomkyeorae.github.io/typesciprt/basic_typescript/
"sw" 카테고리의 다른 글
COMMENTS
typescript
typescript
-// 문자열 let str: string = "hello"; @@ -291,4 +291,4 @@
TypeScript에서 더 큰 타입 구조를 갖는 변수에 작은 타입 구
// 에러가 나지 않는 방식. sum의 구조가 더 크다고 볼 수 있음 sum = add;
참조 : https://yeomkyeorae.github.io/typesciprt/basic_typescript/
"typescript" 카테고리의 다른 글
COMMENTS
참조 : https://yeomkyeorae.github.io/typesciprt/basic_typescript/
"typescript" 카테고리의 다른 글
COMMENTS