토피넛라떼조아

지금까지의 프로젝트는 로그인을 해야만 서비스를 이용할 수 있어 항상 로그인 성공 시 메인페이지로 이동시켰습니다. 하지만 이번 프로젝트에서는 일부 기능만 회원 전용이기 때문에 비회원도 자유롭게 사이트를 구경할 수 있습니다. 만약 비회원이 회원만 이용가능한 서비스를 원한다면 로그인을 할 수 있도록 로그인 페이지로 이동시키고, 그 상태로 로그인 이후에 본래 서비스를 이용할 수 있게 해주어야 하므로 메인페이지가 아닌 이전 페이지로 이동시켜주어야 합니다. 기존 코드는 이렇게 구현되어 있었습니다. // 로그인이 필요한 특정 행동을 했을 경우 if (!sessionStorage.getItem("token")) { MySwal.fire({ title: "로그인 후 이용해주세요.", icon: "warning", con..

이번 프로젝트에서 이미지 파일을 업로드하여 그것과 비슷한 그림체의 웹툰을 추천해주는 부가기능이 있었습니다. 이 페이지의 기능 구현을 담당하여 필요한 기술들을 학습하면서 배운 내용을 기록해두려합니다. 다음과 같은 화면에서 그림을 업로드 할 수 있게 버튼을 만들어주었는데, 파일을 업로드하는 버튼이 너무 밋밋하여 이를 커스텀하고자 input과 버튼을 연결해서 css를 입혔습니다. // upload.jsx ... // 버튼의 for와 input의 id를 일치시켜 연결시켜준다. {fileImage ? "다시 업로드 하기" : "그림 업로드 하기"} ... const InputBtn = styled.label` box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5); border: 0.3vw ..

Redux 1. 시작 설치 npm install redux react-redux store 생성 import {createStore} from 'redux' function reducer(state, action) { // ... return newState } const store = createStore(reducer); export default store 2. Provider import {Provider} from 'react-redux' import store from './store' function App() { return ( Root ); } export default App; 3. Hooks useSelector(Left3.jsx) import { useSelector } from "..

Node.js 라이브러리 socket.io 채팅 Goal node.js 이해하고 개발환경 세팅 express를 이해하고 활용 socket.io 라이브러리 활용 채팅서버 구현 활용도구 자세한 내용은 추후 포스팅을 통해 다루겠습니다. 아래에서는 채팅 구현과 관련된 내용에 대한 간단한 소개만 합니다. Node.js chrome V8 JavaScripty 엔진으로 빌드 된 JavaScript 런타임 다양한 JavaScript app을 실행할 수 있도록 도와주는 프로그램 서버에서도 JavaScript 언어를 사용할 수 있도록 도와줍니다. Express Node.js를 사용한 서버를 개발하기 위한 웹 프레임워크입니다. http 요청에 대한 핸들러를 만들어줍니다. Socket.io 서버와 클라이언트 사이의 양방향 채..

5/27(금)에 진행된 종강식과 함께 끝나지 않을 것 같았던 싸피의 한 학기가 벌써 끝이 났네요. 비전공자로서 처음으로 경험하는 프로그래밍이라 많이 두려웠는데 싸피와 함께하는 한 학기동안 정말 많이 발전했다고 생각이 듭니다! 그래서 한 학기 동안 학습하면서 제가 느낀 점들을 기록하려 합니다 ㅎㅎ + 22.10.11 추가 1학기 1등이라니 너무 행복합니다^~^ 0. 입과 전 이전 글 참고 . . . 2022.04.07 - [이모저모/SSAFY] - [SSAFY 7기] 늦었지만 써보는 싸피7기 (최종)합격 후기!! [SSAFY 7기] 늦었지만 써보는 싸피7기 (최종)합격 후기!! 내 맘대로 쓰는 합격 후기🙌 벌써 싸피에 입과한지 3달이 지난 시점이지만... 계속 쓰려고 생각했던 후기를 이제야 쓰게되네요!! ..

학습을 할 수록 Bash에서 명령어를 입력할 일이 많아져서 긴 명령어들을 Alias를 이용해 줄여서 사용하고 있습니다. Alias란? 시스템 명령어를 단축시키거나 주기적으로 사용되는 명령어에 기본 변수를 추가하기 위해 사용하는 다양한 CLI(Command-line-interface)의 명령어입니다. 간단한 사용법 별칭 만들기 alias ="" ex) alias activate="source venv/Scripts/activate'" 위와 같이 적용해주면 Bash에서 activate 명령으로 가상환경을 실행시켜 줍니다. 별칭 제거 unalias activate 적용한 별칭을 없애줍니다. 하지만 이렇게 사용한다면 시스템 재부팅 시 별칭이 초기화 되는 단점이 있는데, 만약 계속해서 별칭을 쓰고 싶다면 ./ba..

문제 출처 : https://www.acmicpc.net/problem/13460 13460번: 구슬 탈출 2 첫 번째 줄에는 보드의 세로, 가로 크기를 의미하는 두 정수 N, M (3 ≤ N, M ≤ 10)이 주어진다. 다음 N개의 줄에 보드의 모양을 나타내는 길이 M의 문자열이 주어진다. 이 문자열은 '.', '#', 'O', 'R', 'B' www.acmicpc.net 🔥 작성 코드 def sol(rsi, rsj, bsi, bsj, cnt): global result # 최소값이 아니라면 종료 if result 10: return # 4방향으로 기울이기 for d in range(4): flag = 0 rni = rsi + di[d] rnj = rsj + dj[d] bni = bsi + di[d] ..

SQL(Structured Query Language) SQL은 관계형 데이터베이스 시스템(RDBMS)에서 데이터 관리를 위해 설계된 특수한 목적을 가진 언어입니다. 데이터베이스 스키마 생성 및 수정, 자료의 검색 및 관리 등의 작업을 수행합니다. 종류 DDL(Data Definition Language) - 데이터 정의 언어 관계형 데이터베이스의 구조(스키마, 테이블)를 정의하기 위한 명령어 ex) CREATE, DROP, ALTER DML(Data Manipulation Language) - 데이터 조작 언어 데이터를 저장, 조회, 수정, 삭제 등을 하기 위한 명령어 ex) INSERT, SELECT, UPDATE, DELETE DCL(Data Control Language) - 데이터 제어 언어 데..

Database 체계화 된 데이터의 모임 여러 사람이 공유하고 사용할 목적으로 통합관리되는 정보의 집합 자료 항목의 중복을 없애고 구조화하여 기억시켜놓은 자료의 집합체 장점 데이터 중복 최소화 데이터 무결성 (정확한 정보) 데이터 일관성 데이터 독립성 (물리적 / 논리적) 데이터 표준화 데이터 보안 유지 RDB (Relational Database) 관계형 모델에 기반하여 key와 value들을 관계를 표 형태로 정리한 데이터베이스 id 이름 나이 전화번호 1 김아무개 20 010-xxxx-xxxx 2 이아무개 21 010-xxxx-xxxx 주요 용어 스키마(schema) : 데이터베이스에서 자료의 구조, 표현방법, 관계 등 전반적인 명세를 기술한 것 column datatype id INT name T..

내 맘대로 쓰는 합격 후기🙌 벌써 싸피에 입과한지 3달이 지난 시점이지만... 계속 쓰려고 생각했던 후기를 이제야 쓰게되네요!! (하려고 했던 일은 꼭 해야지 직성이 풀려서😊) 아마 이 글을 보시는 분들은 다음 기수를 준비하시는 분들일테니 후일담 + 팁까지 작성하겠습니다. 일단 합격 사진! 인터뷰를 보고 얼마지나지 않아 최종합격 결과창!! 보자마자 혹시나 입과를 못할까봐 바로 입과확정을 해버렸습니다👍 일단 지원부터 합격까지 어떤 일들이 있었는지 소개드리겠습니다. 지원 및 에세이 작성! 사실 지금으로부터 4개월도 더 전의 이야기라 가물가물합니다.. 기억을 더듬어보자면 10월 말부터 11월 초까지 지원을 받았던 걸로 기억합니다. 지원부터 입과까지의 순서는 지원 => 에세이 제출 => sw 적성진단 => in..